<style type="text/css">
.value {
font-weight: bold;
}
</style>
<h:form>
<p:messages>
<p:autoUpdate />
</p:messages>
<h:panelGrid columns="2" style="margin-bottom:10px" cellpadding="5">
<p:outputLabel for="@next" value="Basic:" />
<p:selectOneMenu id="console" value="#{selectOneMenuView.console}" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
<f:facet name="footer">
<p:separator />
<h:outputText value="3 consoles" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
<p:outputLabel for="@next" value="RTL:" />
<p:selectOneMenu id="trl" value="#{selectOneMenuView.rtl}" style="width:125px" dir="rtl">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItem itemLabel="Xbox One" itemValue="Xbox One" />
<f:selectItem itemLabel="PS4" itemValue="PS4" />
<f:selectItem itemLabel="Wii U" itemValue="Wii U" />
</p:selectOneMenu>
<p:outputLabel for="@next" value="Grouping: " />
<p:selectOneMenu id="car" value="#{selectOneMenuView.car}">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cars}" />
</p:selectOneMenu>
<p:outputLabel for="@next" value="Editable: " />
<p:selectOneMenu id="city" value="#{selectOneMenuView.city}" effect="fold" editable="true">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.cities}" />
</p:selectOneMenu>
<p:outputLabel for="@next" value="Advanced:" />
<p:selectOneMenu id="advanced" value="#{selectOneMenuView.theme}" converter="#{themeConverter}" panelStyle="width:180px"
effect="fade" var="t" style="width:160px" filter="true" filterMatchMode="startsWith">
<f:selectItems value="#{selectOneMenuView.themes}" var="theme" itemLabel="#{theme.displayName}" itemValue="#{theme}" />
<p:column style="width:10%">
<h:graphicImage name="showcase/images/themeswitcher/themeswitcher-#{t.name}.png" alt="#{t.name}" styleClass="ui-theme" />
</p:column>
<p:column>
<f:facet name="header">
<h:outputText value="Name"/>
</f:facet>
<h:outputText value="#{t.displayName}" />
</p:column>
<f:facet name="footer">
<p:separator />
<h:outputText value="#{selectOneMenuView.themes.size()} themes" style="font-weight:bold;"/>
</f:facet>
</p:selectOneMenu>
<p:outputLabel for="@next" value="Lazy:" />
<p:selectOneMenu id="lazy" value="#{selectOneMenuView.option}" dynamic="true" style="width:125px">
<f:selectItem itemLabel="Select One" itemValue="" />
<f:selectItems value="#{selectOneMenuView.options}" />
</p:selectOneMenu>
<p:outputLabel for="@next" value="Long Item Label:" />
<p:selectOneMenu id="longItemLabel" value="#{selectOneMenuView.longItemLabel}" style="width:100px">
<f:selectItem itemLabel="Zero" itemValue="0" />
<f:selectItem itemLabel="One" itemValue="1" />
<f:selectItem itemLabel="Two" itemValue="2" />
<f:selectItem itemLabel="Three" itemValue="3" />
<f:selectItem itemLabel="Four" itemValue="4" />
<f:selectItem itemLabel="Five" itemValue="5" />
<f:selectItem itemLabel="Six" itemValue="6" />
<f:selectItem itemLabel="Seven" itemValue="7" />
<f:selectItem itemLabel="Long item here not necessary in the end" itemValue="99" />
<f:selectItem itemLabel="Eight" itemValue="8" />
<f:selectItem itemLabel="Nine" itemValue="9" />
<f:selectItem itemLabel="Ten and not more than ten " itemValue="10" />
</p:selectOneMenu>
</h:panelGrid>
<p:commandButton value="Submit" update="display" oncomplete="PF('dlg').show()" icon="pi pi-check" />
<p:dialog header="Values" modal="true" showEffect="bounce" widgetVar="dlg" resizable="false">
<p:panelGrid columns="2" id="display" columnClasses="label,value">
<h:outputText value="Basic:" />
<h:outputText value="#{selectOneMenuView.console}" />
<h:outputText value="RTL:" />
<h:outputText value="#{selectOneMenuView.rtl}" />
<h:outputText value="Grouping:" />
<h:outputText value="#{selectOneMenuView.car}" />
<h:outputText value="Editable" />
<h:outputText value="#{selectOneMenuView.city}" />
<h:outputText value="Advanced:" />
<h:outputText value="#{selectOneMenuView.theme.displayName}" />
<h:outputText value="Lazy:" />
<h:outputText value="#{selectOneMenuView.option}" />
<h:outputText value="Long Item Label:" />
<h:outputText value="#{selectOneMenuView.longItemLabel}" />
</p:panelGrid>
</p:dialog>
</h:form>
@Named
@RequestScoped
public class SelectOneMenuView {
private String console;
private String rtl;
private String car;
private List<SelectItem> cars;
private String city;
private Map<String,String> cities = new HashMap<String, String>();
private Theme theme;
private List<Theme> themes;
private String option;
private List<String> options;
private String longItemLabel;
@Inject
private ThemeService service;
@PostConstruct
public void init() {
//cars
SelectItemGroup g1 = new SelectItemGroup("German Cars");
g1.setSelectItems(new SelectItem[] {new SelectItem("BMW", "BMW"), new SelectItem("Mercedes", "Mercedes"), new SelectItem("Volkswagen", "Volkswagen")});
SelectItemGroup g2 = new SelectItemGroup("American Cars");
g2.setSelectItems(new SelectItem[] {new SelectItem("Chrysler", "Chrysler"), new SelectItem("GM", "GM"), new SelectItem("Ford", "Ford")});
cars = new ArrayList<SelectItem>();
cars.add(g1);
cars.add(g2);
//cities
cities = new HashMap<String, String>();
cities.put("New York", "New York");
cities.put("London","London");
cities.put("Paris","Paris");
cities.put("Barcelona","Barcelona");
cities.put("Istanbul","Istanbul");
cities.put("Berlin","Berlin");
//themes
themes = service.getThemes();
//options
options = new ArrayList<String>();
for(int i = 0; i < 20; i++) {
options.add("Option " + i);
}
}
public String getConsole() {
return console;
}
public void setConsole(String console) {
this.console = console;
}
public String getRtl() {
return rtl;
}
public void setRtl(String rtl) {
this.rtl = rtl;
}
public String getCar() {
return car;
}
public void setCar(String car) {
this.car = car;
}
public String getCity() {
return city;
}
public void setCity(String city) {
this.city = city;
}
public Theme getTheme() {
return theme;
}
public void setTheme(Theme theme) {
this.theme = theme;
}
public List<SelectItem> getCars() {
return cars;
}
public Map<String, String> getCities() {
return cities;
}
public List<Theme> getThemes() {
return themes;
}
public void setService(ThemeService service) {
this.service = service;
}
public String getOption() {
return option;
}
public void setOption(String option) {
this.option = option;
}
public List<String> getOptions() {
return options;
}
public void setOptions(List<String> options) {
this.options = options;
}
public String getLongItemLabel() {
return longItemLabel;
}
public void setLongItemLabel(String longItemLabel) {
this.longItemLabel = longItemLabel;
}
}
public class Theme {
private int id;
private String displayName;
private String name;
public Theme() {}
public Theme(int id, String displayName, String name) {
this.id = id;
this.displayName = displayName;
this.name = name;
}
public int getId() {
return id;
}
public void setId(int id) {
this.id = id;
}
public String getDisplayName() {
return displayName;
}
public void setDisplayName(String displayName) {
this.displayName = displayName;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
@Override
public String toString() {
return name;
}
}
@Named
@ApplicationScoped
public class ThemeService {
private List<Theme> themes;
@PostConstruct
public void init() {
themes = new ArrayList<>();
themes.add(new Theme(0, "Nova-Light", "nova-light"));
themes.add(new Theme(1, "Nova-Dark", "nova-dark"));
themes.add(new Theme(2, "Nova-Colored", "nova-colored"));
themes.add(new Theme(3, "Luna-Blue", "luna-blue"));
themes.add(new Theme(4, "Luna-Amber", "luna-amber"));
themes.add(new Theme(5, "Luna-Green", "luna-green"));
themes.add(new Theme(6, "Luna-Pink", "luna-pink"));
themes.add(new Theme(7, "Omega", "omega"));
}
public List<Theme> getThemes() {
return themes;
}
} 
