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