HTML and CSS Reference
In-Depth Information
#{countryNavigator.countries} expression represents the list of the available countries. When a ring item is
clicked then through the p:commandLink' s action, the selected country #{country} will be set in the activeCountry
property of countryNavigator and the "detail" panel (which contains the cities data table) is re-rendered with the
new cities of the selected country. Listing 9-2 shows the "detail" panel part.
Listing 9-2. “Detail” Panel Part
<p:outputPanel id="detail" styleClass="detailsPanel" layout="block">
<p:dataTable var="city" value="#{countryNavigator.activeCountry.cities}"
rendered="#{countryNavigator.activeCountry ne null}">
<f:facet name="header">
<p:column headerText="City">
<h:outputText value="#{}" />
<p:column headerText="Population">
<h:outputText value="#{city.population}" />
"city" data table is rendered when there is an activeCountry available in the countryNavigator object, and
the table will show the information of the available cities for the selected country. Listing 9-3 shows the complete
CountryNavigator managed bean code.
Listing 9-3. CountryNavigator Managed Bean
package com.jsfprohtml5.countrynavigator.model;
import java.util.List;
public class CountryNavigator {
private List<Country> countries;
private Country activeCountry;
public List<Country> getCountries() {
return countries;
public void setCountries(List<Country> countries) {
this.countries = countries;
public Country getActiveCountry() {
return activeCountry;
Search WWH ::

Custom Search