<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; } }