I have numerous AccordionPanel in my jsf page.
<p:accordionPanel multiple="true" id="HomeAddress">
so everytime we add new accordion panel and load the page, it is taking long time to load all the panel.So I want to lazy load the panels. At first load five panel and once we scroll to the end it will load rest of the panels. Something like happening in all e-commerce site (Flipkart, Amazon etc..)
An accordionPanel is one componenent and like most complex PF components, it does not allow updating one of it's children or dynamicaly adding one (tabs in this case). And dynamicaly loading is an even different thing. You can achieve this by adding an
<p:outputPanel deferred="true" deferredMode="visible">...
</p:outputPanel>
inside each tab and put the content in there. But adding a tab to the accordionpanel will still reload all tabs, lazy, ok, but still reload them when accessed
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 am developing an application in JSF. My page has been divided into 3 layouts. Menu bar will be displayed at left side and content will be shown at center of the page. I want menu bar in all pages throughout the application. Now i have achieved it using templates. But its reloading the entire page while clicking the menu items.
Is there any other option to display the content in the content area without reloading the entire page?
Thanks.
I have faced similar issues in my application. You have to use <f:ajax> within your menu item and render only the div you want refresh.
e.g.
<f:ajax render="idOfDivToRefresh" />
I am using a master template (i.e. <ui:composition template> / <ui:define>) where I have a navigation panel on the left, and the content panel in the center. When I go to one of my pages that is #ViewScoped, I edit some of the fields, go to another page which reloads the content area, and then go back to the original page, and the fields are all still populated with data. This implies that the view never ended. I tried #RequestScoped which produces the results I want, but breaks all of the ajax in the page related to that bean.
What is the best way to reset a page to its original state?
Can anyone see what is happening, exactly, regarding my layout and content area (consisting of a ui:include) being updated that would cause this not to be considered a change of View?
By navigating the content of the page using a backing bean, a ui:include updated by ajax, all in the same page, JSF's current view never goes out of scope, which is why the backing ViewScoped beans are never reset after navigating.
One possible fix for this is to redesign the page to use traditional navigation. In other words, lets say you have several p:menuitems. Rather than assigning the actionListener to some backing bean function that sets the content page (followed by an update of the panel containing the ui:include), you would set the "action" of each menuitem to the page to which each corresponds. This has the effect of causing a page to be loaded when a menuitem is clicked.
This generated the requirement that I had to reorganize my template a little so that every page of my site was embedded in it. There's a little bit of flicker as the entire page reloads, but the beans are being reset accordingly.
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>
I would like to make a list-detail view with richfaces. There will be a link for every record in the list that should open a new window containing record details.
I tried to implement the link this way:
<a4j:commandLink oncomplete="window.open('/pages/serviceDetail.jsf','popupWindow', 'dependent=yes, menubar=no, toolbar=no, height=500, width=400')" actionListener="#{monitoringBean.recordDetail}" value="details" />
I use <a4j:keepAlive beanName="monitoringBean" ajaxOnly="false" /> for both the list and the detail page. recordDetail method fills the data of the selected record to a variable of the bean that I would like to display on the detail page.
The problem is that keepalive doesn't work, so I get new bean instance on the detail page every time. So the the previously selected record from the other bean is not accessible here.
Is there a way to pass parameter (id) to the detail page to handle record selection. Or is there any way to make keepalive work? (I this this would be the easiest).
Thanks
Avoid using window.open(..) - it will fail on most browser configurations nowadays (due to pop-up blocking).
Use <rich:modalPanel> instead.