My JSF Books/Videos My JSF Tutorials OmniFaces/JSF PPTs
JSF 2.3 Tutorial
JSF Caching Tutorial
JSF Navigation Tutorial
JSF Scopes Tutorial
JSF Page Author Beginner's Guide
OmniFaces 2.3 Tutorial Examples
OmniFaces 2.2 Tutorial Examples
JSF Events Tutorial
OmniFaces Callbacks Usages
JSF State Tutorial
JSF and Design Patterns
JSF 2.3 New Features (2.3-m04)
Introduction to OmniFaces
25+ Reasons to use OmniFaces in JSF
OmniFaces Validators
OmniFaces Converters
JSF Design Patterns
Mastering OmniFaces
Reusable and less-verbose JSF code

My JSF Resources ...

Java EE Guardian
Member of JCG Program
Member MVB DZone
Blog curated on ZEEF
OmniFaces is an utility library for JSF, including PrimeFaces, RichFaces, ICEfaces ...

[OmniFaces Utilities] - Find the right JSF OmniFaces 2 utilities methods/functions

Search on blog

Petition by Java EE Guardians

Twitter

luni, 9 noiembrie 2015

OmniFaces CommandScript and autorun to defer loading and rendering to window onload event

Starting with OmniFaces 2.2, the CommandScript (tag: <o:commandScript>) was improved with the flag autorun attribute (default false). This attribute relies on the JavaScript onload event, which occurs when an object (e.g. page) has been loaded. Usually, onload is associated with the <body> element to execute a script once a web page has completely loaded all content (including images, script files, CSS files, etc.).

OmniFaces uses this event to provide us the possibility to defer loading and rendering to window onload event.

Per example, you may need to populate a table with data from a managed bean at the end of page loading. Let's suppose that we load a map on screen, and a table with countries links. When the user click on a link it will trigger a zoom on the selected country. But, maps are sometimes loaded slowly (sync tiled), and you may want to have the entire map loaded before the user may click on such a link. Below, you can see the code from page (we skipped the map loading code since is not relevant):

...
<h:panelGroup id="lazyDataPanel">
 <ui:fragment rendered="#{not empty commandScriptBean.countries}">
  <h:dataTable value="#{commandScriptBean.countries}" var="country">
   <h:column>#{country}</h:column>
   <h:column>ZOOM TO THIS COUNTRY LINK</h:column>
  </h:dataTable>
 </ui:fragment>
</h:panelGroup>

... // loading map code

<h:form>
 <o:commandScript name="lazyLoadCountries" action="#{commandScriptBean.lazyLoadCountries()}" render=":lazyDataPanel" autorun="true" />
</h:form>

And the CommandScriptBean managed bean is:

@Named
@ViewScoped
public class CommandScriptBean implements Serializable {

 private static final long serialVersionUID = 1L;

 private List<String> countries;
  
 public List<String> getCountries() {
  return countries;
 }

 public void setCountries(List<String> countries) {
  this.countries = countries;
 }

 public void lazyLoadCountries(){
  countries = new ArrayList<>();
  countries.add("Estonia");
  countries.add("Bulgaria");       
  countries.add("Romania");       
  countries.add("France");       
  countries.add("Germany");        
 }           
}

Is true that visually is pretty hard to see the difference, but the below screenshots helps:

The complete application is available here.

Niciun comentariu :

Trimiteți un comentariu

JSF BOOKS COLLECTION

Postări populare

OmniFaces/JSF Fans

Follow by Email

Visitors Starting 4 September 2015

Locations of Site Visitors