Primefaces timeline blinking on update. This is very unaesthetic older version did not blink on update.
If you click on button in primefaces showcase you can see how it looks like:
https://www.primefaces.org/showcase/ui/data/timeline/editServer.xhtml?jfwid=0a833
<p:timeline id="timeline" value="#{editServerTimelineView.model}" var="booking"
zoomMax="#{editServerTimelineView.zoomMax}"
start="#{editServerTimelineView.start}"
end="#{editServerTimelineView.end}"
editable="true" editableTime="#{editServerTimelineView.editableTime}"
widgetVar="timelineWdgt">
<p:commandButton value="Toggle TimeChangeable" process="#this" update="timeline"
action="#{editServerTimelineView.toggleEditableTime}"/>
The same thing happen when ever you update timeline.
Do you know how to prevent blinking of timeline?
Yes the new timeline does more work when rendering and has lots of new features but this is a side effect. They offer the loading screen template to let your users know its loading like..
<f:facet name="loading">
<h1>Loading please wait...</h1>
</f:facet>
In my case the blink on update occurs on lazy load and in the new items.
It's possible, and it's not due to doing more work. It's a design decision, a change of visibility in the dom object, when rendering the component in js just before load the loadingScreen you can see:
p.dom.root.style.visibility = "hidden";
monkey patching timeline.js and changing to
p.dom.root.style.visibility = "visible";
the problem dissapear.
Related
I want to show a custom gallery with several thumbnails. When clicking on one of these, an overlaypanel is shown, containing a graphicimage with the image in higher quality. Since the high quality images are aroung 5MB each, I just want to load them on demand.
I already tried using the "rendered" attribute, but that did not seem to do the trick either. I also tried the "onclick" with a javascript function, but that also did not yield the expected result.
<p:graphicImage value="#{dataHolderBean.imageHolderBean.loadFullSizeImage()}"
class="centeredImageOverlay" cache="false">
<f:param name="currentImageId" value="#{images.imageId}" />
</p:graphicImage>
I would like to just call value="#{dataHolderBean.imageHolderBean.loadFullSizeImage()}" this method, when clicking on another image.
Why did you not look for a solution that loads the content of the overlay panel lazy? That to me sounds like a much more generic solution (anything inside it would be loaded lazy then) you stand and a higher chance of something already being implemented.
From the PrimeFaces showcase of the p:overlayPanel(emphasis mine)
Overlay Panel
OverlayPanel is a generic container component that can overlay other
components on page. Notable features are custom positioning,
configurable events and effects. Lazy content loading to reduce page
load time is also supported via dynamic option, when enabled
overlayPanel will load the contents just before being shown.
From the PrimeFaces documentation
Dynamic Mode
Dynamic mode enables lazy loading of the content, in this
mode content of the panel is not rendered on page load and loaded just
before panel is shown. Also content is cached so consecutive displays
do not load the content again. This feature is useful to reduce the
page size and reduce page load time.
So the lazy loading is done via the dynamic attribute which has an example even in the showcase
<p:commandButton id="movieBtn" value="Dynamic" type="button" />
<p:overlayPanel id="moviePanel" for="movieBtn" hideEffect="fade" dynamic="true" style="width:600px" modal="true">
...
</p:overlayPanel>
You can use the built-in LazyDefaultStreamedContent in your bean, to lazy initialize the stream:
streamedContent = new LazyDefaultStreamedContent("application/vnd.ms-excel", "myExcel") {
#Override
protected InputStream initStream()
{
return new FileInputStream(...);
}
};
I'm using the 0.7 version of bootsfaces to create a simple page, which has something like the following:
<h:form id="some_form">
<ui:repeat id="some_elements" var="property" value="#{someBean.properties}">
<b:commandButton value="ShowProp" ajax="true" actionListener="#{someBean.showProperty(property)}" update=":some_form:some_elements:graphic"/>
<!-- This property is true -->
<ui:fragment rendered="#{someOtherBean.showGraphic}">
<h:graphicImage url="gen_image?id=#{property.id}" id="graphic"/>
</ui:fragment>
</ui:repeat>
</h:form>
Now, the idea is that on clicking the button, a property is updated and the image should be re-generated (in this case a jfreechart graph - but this is besides the point.) I tested this with primefaces commandButton and it works fine (the graph is redrawn..) However with bootsfaces commandButton, nothing happens once the ajax call completes (I can see the call on the server side, but the graph is not reloaded.) I think it's down to how it must reference the image in the repeated block, but now sure what is wrong - has anyone come across this?
(NOTE: reason I don't want to use primefaces is that it does not integrate well with bootstrap)
I've opened a bug on the project's bugtracker (https://github.com/TheCoder4eu/BootsFaces-OSP/issues/135).
Actually, why did you expect the update=":some_form:some_elements:graphic" to work in the first place? This expression is an id that doesn't exist. The id is some_form:some_elements:0:graphic. In other words: it contains the row number. PrimeFaces (and Mojarra and MyFaces) recognizes that the command button is part of a UIRepeat group and guesses the correct row number. But that's just a guess. Obviously a reasonable guess, because most of the time you want to update something that's in the vicinity of the command button.
The next version of BootsFaces is going to guess the correct row number, too :).
Hi I am using JSF with Primefaces. I have a long task, during which I want to show user a progress bar, with the progress (int) and status (String) as an indicator. The two parameters are mapped to the two fields of a backend bean. If I use <p:poll>, I can update both, as in the following code:
<p:progressBar id="progress" ajax="false" value="#{backendBean.progress}" widgetVar="pbAjax"
labelTemplate="{value}%: #{backendBean.statusMessage}" style="width:400px; font-size:12px"/>
<p:poll interval="1" id="poll" autoStart="false" update="progress" widgetVar="pbPoll"/>
Once user press a button, pbPoll.start(). This works fine. Now I have two questions:
(1) is it possible to hide the progressbar initially? I know I can put display:none in the css and let it show up when the button is clicked. But the poll update will hide the progressbar again. Maybe use rendered. If so, please tell me how.
(2) can I use without poll since progressBar has ajax function itself? Notice that I set ajax=false in the code above. On their website, it says "dynamic progress label" is added. I tried but somehow the label only displays the "{value}%" without the statusMessage. I wonder if this is because #{statusMessage} requires another fetch, therefore ignored, while both are retrieved in poll.
Thank!
Yes you can. It's actually really easy. Wrap your <p:progressBar/> in a panel like <h:panelGrid/> and set the rendered attribute on the progress bar to a boolean in the backing bean
<h:panelGrid id="progressBarPanel">
<p:progressBar id="progress" interval="100" rendered="#{backendBean.progressBarRendered}" ajax="true" value="#{backendBean.progressMonitor}" widgetVar="pbAjax" labelTemplate="{value}%: #{backendBean.progressMonitor}" style="width:300px; font-size:12px"/>
</h:panelGrid>
and then use a button (or something) to toggle the value of the boolean and update the panel
<p:commandButton value="Test Progress Bar" action="#{addressUpdate.progressBarControl}" oncomplete="pbAjax.start();" update="progressBarPanel"/>
One thing you need to be careful about is that the same button that toggles the progress bar's visibility should not use the onclick event but rather the oncomplete to start the progress bar, the reason being that onclick fires before the request hits the server and as at that time, the progress bar does not exist in the DOM so start() will be undefined.
You're right on that one. If you'll take a look in your developer console, you'd see the following for the ajax response to the progress bar
"thePanel:progress_value":20
And that pretty much sums up what the progress bar cares about during the update, the value binding on the bar. Stick with what you have now if this is a must-have for you.
How would I go about updating a UI component when a server process finishes or anytime else for that matter?
Can\Should I
extend the UI component and register some kind of EventListener on it?
bind the UI component in a backing bean?
use some of the new PrimePush features?
something else?
If anyone could guide me in the right direction I'd appreciate it.
Example Case One
Server process ends and updates the database.
I want to automatically
update a DataTable with new rows based on the new information.
I don't want to poll for the new data.
EDIT
I want to update the UI component (a primefaces datatable) from an EJB Stateless Bean
You didnt mention which version of primefaces you are using but you can update components from backed bean with addpartialupdatetarget.
RequestContext context = RequestContext.getCurrentInstance();
context.addPartialUpdateTarget("myForm:myComponent");
You can just use the update attribute of your commandButton or whatever else you're using.
Something like this should work
<p:dataTable value="#{backer.bean}" id="table">
// columns with data
</p:dataTable>
<p:commandButton actionListener="#{backer.updateDB}" update="table" />
Say I have a websites with 3 panel grid (just for example..) and I would like to have buttons inside each grid that only cause the contents of that grid to refresh so the rest of the page doesn't necessarily have to refresh.
How do I do that?
I tried to have a form sorround that grid but it seems like the rest of the page still gets refreshed.
A Note - I'm trying to achieve something like what happens when you work with a picklist. when you move the objects between the lists there doesn't seem to be any page refresh...
Thanks!
If you are using RichFaces, you should definitivly check the Ajax chapter of the RichFaces manual. I think you will find everything you need to know there.
Here a small example for partial page rendering:
<a4j:commandButton value="update" reRender="infoBlock"/>
<h:panelGrid id="infoBlock">
<!-- Some content-->
</h:panelGrid>