Primefaces单选按钮,复选框示例
Primefaces单选按钮和复选框是选择元素。
以下是用于不同类型的单选按钮和复选框实现的primefaces组件。
- SelectBooleanButton
- SelectBooleanCheckbox
- SelectCheckboxMenu
- SelectManyButton
- SelectManyCheckbox
- SelectManyMenu
- SelectOneButton
- SelectOneListbox
- SelectOneMenu
- SelectOneRadio
让我们深入研究这些组件,看看如何在您的应用程序中利用它们。
SelectBooleanButton基本信息
SelectBooleanButton用于通过切换按钮选择二进制决策。
Tag | SelectBooleanButton |
---|---|
Component Class | org.primefaces.component.selectbooleanbutton.SelectBooleanButton |
Component Type | org.primefaces.component.SelectBooleanButton |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectBooleanButtonRenderer |
Renderer Class | org.primefaces.component.selectbooleanbutton.SelectBooleanButtonRenderer |
SelectBooleanButton属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | Method Expr | A method expression that refers to a method validationg the input |
valueChangeListener | null | Method Expr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
onLabel | null | String | Label to display when button is selected. |
offLabel | null | String | Label to display when button is unselected. |
onIcon | null | String | Icon to display when button is selected. |
offIcon | null | String | Icon to display when button is unselected. |
SelectBooleanButton入门
selectBooleanButton.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:500px"> <p:growl id="message"></p:growl> <p:outputLabel value="Turn your system:"></p:outputLabel> <p:selectBooleanButton offLabel="On" onLabel="Off" value="#{selectBooleanButton.status}" ></p:selectBooleanButton> <p:separator></p:separator> <p:commandButton value="Display System Status" action="#{selectBooleanButton.displaySystemStatus}" update="message"></p:commandButton> </h:form> </html>
SelectBooleanButton.java
package com.theitroad.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectBooleanButton { private boolean status; public boolean isStatus() { return status; } public void setStatus(boolean status) { this.status = status; } public String displaySystemStatus(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your System Is: "+(status == true ? "Truned On":"Turned Off"))); return ""; } }
SelectBooleanCheckbox基本信息
SelectBooleanCheckbox是具有主题集成功能的标准复选框的扩展版本。
Tag | SelectBooleanCheckbox |
---|---|
Component Class | org.primefaces.component.selectbooleancheckbox.SelectBooleanCheckbox |
Component Type | org.primefaces.component.SelectBooleanCheckbox |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectBooleanCheckboxRenderer |
Renderer Class | org.primefaces.component.selectbooleancheckbox.SelectBooleanCheckbox Renderer |
SelectBooleanCheckbox属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
itemLabel | null | String | Label displayed next to checkbox. |
tabindex | null | String | Specifies tab order for tab key navigation. |
SelectBooleanCheckbox入门
selectBooleanCheckbox.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:500px"> <p:growl id="message"></p:growl> <p:outputLabel value="Turn your system:"></p:outputLabel> <p:selectBooleanCheckbox value="#{selectBooleanCheckbox.status}" ></p:selectBooleanCheckbox> <p:separator></p:separator> <p:commandButton value="Display System Status" action="#{selectBooleanCheckbox.displaySystemStatus}" update="message"></p:commandButton> </h:form> </html>
SelectBooleanCheckbox.java
package com.theitroad.prime.faces.beans; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectBooleanCheckbox { private boolean status; public boolean isStatus() { return status; } public void setStatus(boolean status) { this.status = status; } public String displaySystemStatus(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("Your System Is: "+(status == true ? "Truned On":"Turned Off"))); return ""; } }
SelectBooleanCheckbox客户端API
窗口小部件:PrimeFaces.widget.SelectBooleanCheckbox
Method | Params | Return Type | Description |
---|---|---|---|
check() | – | void | Checks the checkbox. |
uncheck() | – | void | Unchecks the checkbox. |
toggle() | – | void | Toggles check state. |
- PF隐式对象用于从客户端控制组件。
使用的表达式是PF('WidgetVarValue')
SelectCheckboxMenu基本信息
SelectCheckboxMenu是一个多选组件,可在覆盖图中显示选项。
Tag | SelectCheckboxMenu |
---|---|
Component Class | org.primefaces.component.selectcheckboxmenu.SelectCheckboxMenu |
Component Type | org.primefaces.component.SelectCheckboxMenu |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectCheckboxMenuRenderer |
Renderer Class | org.primefaces.component.selectcheckboxmenu.SelectCheckboxMenuRenderer |
SelectCheckboxMenu属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
scrollHeight | null | Integer | Height of the overlay. |
onShow | null | String | Client side callback to execute when overlay is displayed. |
onHide | null | String | Client side callback to execute when overlay is hidden. |
filter | false | Boolean | Renders an input field as a filter. |
filterMatchMode | startsWith | String | Match mode for filtering, valid values are startsWith, contains, endsWith and custom. |
filterFunction | null | String | Client side function to use in custom filtering. |
caseSensitive | false | Boolean | Defines if filtering would be case sensitive. |
panelStyle | null | String | Inline style of the overlay. |
panelStyleClass | null | String | Style class of the overlay. |
appendTo | null | String | Appends the overlay to the element defined by search expression. Defaults to document body. |
tabindex | null | String | Position of the element in the tabbing order. |
SelectCheckboxMenu入门
selectCheckboxMenu.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:outputLabel value="Select wanted tutorials:"></p:outputLabel> <p:selectCheckboxMenu value="#{selectCheckboxMenu.selectedTutorials}"> <f:selectItems value="#{selectCheckboxMenu.tutorials}" var="tutorial" itemLabel="#{tutorial}" itemValue="#{tutorial}"></f:selectItems> </p:selectCheckboxMenu> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectCheckboxMenu.register}" update="message"></p:commandButton> </h:form> </html>
SelectCheckboxMenu.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectCheckboxMenu { private List<String> tutorials = new ArrayList<String>(); private List<String> selectedTutorials = new ArrayList<String>(); public SelectCheckboxMenu(){ } @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public List<String> getSelectedTutorials() { return selectedTutorials; } public void setSelectedTutorials(List<String> selectedTutorials) { this.selectedTutorials = selectedTutorials; } public String register(){ String message = ""; for(String s : this.selectedTutorials){ message = message + s + ","; } FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message)); return ""; } }
SelectCheckboxMenu过滤
您可以对查看的列表进行某种过滤。
这种机制将帮助您轻松快速地找到所需的通缉物品。
要使您的组件适用于过滤其结果,只需执行以下步骤:
确保将filter属性设置为true。
设置您的过滤模式; startsWith(默认情况下),endsWith和自定义。
如果您将自定义设置为过滤器模式,则必须提供通常与JavaScript函数相关联的filterFunction属性。
selectCheckboxMenu.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:outputLabel value="Select wanted tutorials:"></p:outputLabel> <p:selectCheckboxMenu value="#{selectCheckboxMenu.selectedTutorials}" filter="true"> <f:selectItems value="#{selectCheckboxMenu.tutorials}" var="tutorial" itemLabel="#{tutorial}" itemValue="#{tutorial}"></f:selectItems> </p:selectCheckboxMenu> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectCheckboxMenu.register}" update="message"></p:commandButton> </h:form> </html>
SelectCheckboxMenu Ajax行为事件
大多数Primefaces组件都与许多Ajax事件相关联。
在Ajax Behavior Tutorial中将深入讨论如何利用这些事件,您可以重新开始。
这是可用于SelectCheckboxMenu的Ajax事件的详细列表。
Event | Listener Parameter | Fired |
---|---|---|
toggleSelect | org.primefaces.event.ToggleSelectEvent | When toggle all checkbox changes |
SelectManyButton基本信息
SelectManyButton是使用按钮UI的多选组件。
Tag | SelectManyButton |
---|---|
Component Class | org.primefaces.component.selectmanybutton.SelectManyButton |
Component Type | org.primefaces.component.SelectManyButton |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectManyButton |
Renderer Class | org.primefaces.component.selectmanybutton.SelectManyButton |
SelectManyButton属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
SelectManyButton入门
selectManyButton.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectManyButton value="#{selectManyButton.selectedTutorials}"> <f:selectItems value="#{selectManyButton.tutorials}"></f:selectItems> </p:selectManyButton> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectManyButton.register}" update="message"></p:commandButton> </h:form> </html>
SelectManyButton.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectManyButton { private List<String> tutorials = new ArrayList<String>(); private List<String> selectedTutorials = new ArrayList<String>(); @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public List<String> getSelectedTutorials() { return selectedTutorials; } public void setSelectedTutorials(List<String> selectedTutorials) { this.selectedTutorials = selectedTutorials; } public String register(){ String message = ""; for(String s : this.selectedTutorials){ message = message + s + ","; } FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message)); return ""; } }
SelectManyCheckbox基本信息
SelectManyCheckbox是具有主题集成功能的标准SelectManyCheckbox的扩展版本。
Tag | SelectManyCheckbox |
---|---|
Component Class | org.primefaces.component.selectmanycheckbox.SelectManyCheckbox |
Component Type | org.primefaces.component.SelectManyCheckbox |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectManyCheckboxRenderer |
Renderer Class | org.primefaces.component.selectmanycheckbox.SelectManyCheckboxRenderer |
SelectManyChcekbox属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/St ring | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
layout | lineDirection | String | Layout of the checkboxes, valid values are lineDirection, pageDirection and grid. |
columns | 0 | Integer | Number of columns in grid layout. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
SelectManyCheckbox入门
selectManyCheckbox.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectManyCheckbox value="#{selectManyCheckbox.selectedTutorials}"> <f:selectItems value="#{selectManyCheckbox.tutorials}"></f:selectItems> </p:selectManyCheckbox> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectManyCheckbox.register}" update="message"></p:commandButton> </h:form> </html>
SelectManyCheckbox.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectManyCheckbox { private List<String> tutorials = new ArrayList<String>(); private List<String> selectedTutorials = new ArrayList<String>(); public SelectManyCheckbox(){ } @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public List<String> getSelectedTutorials() { return selectedTutorials; } public void setSelectedTutorials(List<String> selectedTutorials) { this.selectedTutorials = selectedTutorials; } public String register(){ String message = ""; for(String s : this.selectedTutorials){ message = message + s + ","; } FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message)); return ""; } }
SelectManyMenu基本信息
SelectManyMenu是标准SelectManyMenu的扩展版本。
Tag | SelectManyMenu |
---|---|
Component Class | org.primefaces.component.selectmanymenu.SelectManyMenu |
Component Type | org.primefaces.component.SelectManyMenu |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectManyMenuRenderer |
Renderer Class | org.primefaces.component.selectmanymenu.SelectManyMenuRenderer |
SelectManyMenu属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
onclick | null | String | Callback for click event. |
ondblclick | null | String | Callback for dblclick event. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
tabindex | null | String | Position of the input element in the tabbing order. |
var | null | String | Name of iterator to be used in custom content display. |
showCheckbox | false | Boolean | When true, a checkbox is displayed next to each item. |
filter | false | Boolean | Displays an input filter for the list. |
filterMatchMode | null | String | Match mode for filtering, valid values are startsWith (default), contains, endsWith and custom. |
filterFunction | null | String | Client side function to use in custom filterMatchMode. |
caseSensitive | false | Boolean | Defines if filtering would be case sensitive. |
scrollHeight | null | Integer | Defines the height of the scrollable area |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it's an EL expression, it's resolved to a converter instance. In case it's static text, it must refer to a converter id |
SelectManyMenu入门
selectManyMenu.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectManyMenu value="#{selectManyMenu.selectedTutorials}"> <f:selectItems value="#{selectManyMenu.tutorials}"></f:selectItems> </p:selectManyMenu> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectManyMenu.register}" update="message"></p:commandButton> </h:form> </html>
SelectManyMenu.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectManyMenu { private List<String> tutorials = new ArrayList<String>(); private List<String> selectedTutorials = new ArrayList<String>(); public SelectManyMenu(){ } @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public List<String> getSelectedTutorials() { return selectedTutorials; } public void setSelectedTutorials(List<String> selectedTutorials) { this.selectedTutorials = selectedTutorials; } public String register(){ String message = ""; for(String s : this.selectedTutorials){ message = message + s + ","; } FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", message)); return ""; } }
SelectManyMenu –自定义内容
您可以为每一项写入自己的自定义内容。
通过提供包含在SelectManyMenu打开/结束标签内的Primefaces/jsf组件的所需内容,您可以提供自己的自定义内容。
以下示例显示了相同的示例,但具有不同的图像。
selectManyMenu.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectManyMenu value="#{selectManyMenu.selectedTutorials}" var="tutorial"> <f:selectItems value="#{selectManyMenu.tutorials}" <p:column> <p:graphicImage value="/resources/images/#{tutorial}.jpg" width="40"></p:graphicImage> </p:column> <p:column> <p:outputLabel value="#{tutorial}"></p:outputLabel> </p:column> </p:selectManyMenu> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectManyMenu.register}" update="message"></p:commandButton> </h:form> </html>
SelectManyMenu –过滤
您可以在SelectManyMenu中使用筛选器功能,与SelectCheckboxMenu的用法相同。
SelectOneButton基本信息
SelectOneButton是执行单个选择的输入组件。
Tag | SelectOneButton |
---|---|
Component Class | org.primefaces.component.selectonebutton.SelectOneButton |
Component Type | org.primefaces.component.SelectOneButton |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectOneButtonRenderer |
Renderer Class | org.primefaces.component.selectonebutton.SelectOneButtonRenderer |
SelectOneButton属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
converter | null | Converter/St ring | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
SelectOneButton入门
selectOneButton.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectOneButton value="#{selectOneButton.selectedTutorial}"> <f:selectItems value="#{selectOneButton.tutorials}"></f:selectItems> </p:selectOneButton> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectOneButton.register}" update="message"></p:commandButton> </h:form> </html>
SelectOneButton.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectOneButton { private List<String> tutorials = new ArrayList<String>(); private String selectedTutorial = ""; @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public String getSelectedTutorial() { return selectedTutorial; } public void setSelectedTutorial(String selectedTutorial) { this.selectedTutorial = selectedTutorial; } public String register(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial)); return ""; } }
SelectOneListbox基本信息
SelectOneListbox是标准selectOneListbox组件的扩展版本。
Tag | SelectOneListbox |
---|---|
Component Class | org.primefaces.component.selectonelistbox.SelectOneListbox |
Component Type | org.primefaces.component.SelectOneListbox |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectOneListboxRenderer |
Renderer Class | org.primefaces.component.selectonelistbox.SelectOneListBoxRenderer |
SelectOneListbox属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | false | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | false | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Callback to execute on value change. |
onclick | null | String | Callback for click event. |
ondblclick | null | String | Callback for dblclick event. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
tabindex | null | String | Position of the input element in the tabbing order. |
value | null | String | Name of iterator to be used in custom content display. |
var | null | String | Name of iterator to be used in custom content display. |
filter | false | Boolean | Displays an input filter for the list. |
filterMatchMode | null | String | Match mode for filtering, valid values are startsWith (default), contains, endsWith and custom. |
filterFunction | null | String | Client side function to use in custom filterMatchMode. |
caseSensitive | false | Boolean | Defines if filtering would be case sensitive. |
scrollHeight | null | Integer | Defines the height of the scrollable area. |
SelectOneListbox入门
selectOneListbox.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectOneListbox value="#{selectOneListBox.selectedTutorial}"> <f:selectItems value="#{selectOneListBox.tutorials}"></f:selectItems> </p:selectOneListbox> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectOneListBox.register}" update="message"></p:commandButton> </h:form> </html>
SelectOneListbox.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectOneListbox { private List<String> tutorials = new ArrayList<String>(); private String selectedTutorial = ""; @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public String getSelectedTutorial() { return selectedTutorial; } public void setSelectedTutorial(String selectedTutorial) { this.selectedTutorial = selectedTutorial; } public String register(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial)); return ""; } }
SelectOneMenu基本信息
SelectOneMenu是标准SelectOneMenu的扩展版本。
Tag | SelectOneMenu |
---|---|
Component Class | org.primefaces.component.selectonemenu.SelectOneMenu |
Component Type | org.primefaces.component.SelectOneMenu |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectOneMenuRenderer |
Renderer Class | org.primefaces.component.selectonemenu.SelectOneMenuRenderer |
SelectOneMenu属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | 0 | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | 0 | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
effect | blind | String | Name of the toggle animation. |
effectSpeed | 400 | Integer | Duration of toggle animation in milliseconds. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
onchange | null | String | Client side callback to execute on value change. |
onkeyup | null | String | Client side callback to execute on keyup. |
onkeydown | null | String | Client side callback to execute on keydown. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
var | null | String | Name of the item iterator. |
height | auto | Integer | Height of the overlay. |
tabindex | null | String | Tabindex of the input. |
editable | false | Boolean | When true, input becomes editable. |
filter | false | Boolean | Renders an input field as a filter. |
filterMatchMode | starts With | String | Match mode for filtering, valid values are startsWith, contains, endsWith and custom. |
filterFunction | null | String | Client side function to use in custom filtering. |
caseSensitive | false | Boolean | Defines if filtering would be case sensitive. |
maxlength | null | Integer | Number of maximum characters allowed in editable selectOneMenu. |
appendTo | null | String | Appends the overlay to the element defined by search expression. Defaults to document body. |
SelectOneMenu入门
selectOneMenu.xhtml
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:ui="https://java.sun.com/jsf/facelets" xmlns:h="https://java.sun.com/jsf/html" xmlns:f="https://java.sun.com/jsf/core" xmlns:p="https://primefaces.org/ui"> <h:head> <script name="jquery/jquery.js" library="primefaces"></script> </h:head> <h:form style="width:400px"> <p:growl id="message" showDetail="true" showSummary="true"></p:growl> <p:selectOneMenu value="#{selectOneMenu.selectedTutorial}"> <f:selectItems value="#{selectOneMenu.tutorials}"></f:selectItems> </p:selectOneMenu> <p:separator></p:separator> <p:commandButton value="Register" action="#{selectOneMenu.register}" update="message"></p:commandButton> </h:form> </html>
SelectOneMenu.java
package com.theitroad.prime.faces.beans; import java.util.ArrayList; import java.util.List; import javax.annotation.PostConstruct; import javax.faces.application.FacesMessage; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; import javax.faces.context.FacesContext; @ManagedBean @SessionScoped public class SelectOneMenu { private List<String> tutorials = new ArrayList<String>(); private String selectedTutorial = ""; @PostConstruct public void init(){ this.tutorials = new ArrayList<String>(); this.tutorials.add("Primefaces"); this.tutorials.add("Hibernate"); this.tutorials.add("Spring"); } public List<String> getTutorials() { return tutorials; } public void setTutorials(List<String> tutorials) { this.tutorials = tutorials; } public String getSelectedTutorial() { return selectedTutorial; } public void setSelectedTutorial(String selectedTutorial) { this.selectedTutorial = selectedTutorial; } public String register(){ FacesContext.getCurrentInstance().addMessage(null, new FacesMessage("You've Registered In:", this.selectedTutorial)); return ""; } }
SelectOneRadio基本信息
Tag | SelectOneRadio |
---|---|
Component Class | org.primefaces.component.selectoneradio.SelectOneRadio |
Component Type | org.primefaces.component.SelectOneRadio |
Component Family | org.primefaces.component |
Renderer Type | org.primefaces.component.SelectOneRadioRenderer |
Renderer Class | org.primefaces.component.selectoneradio.SelectOneRadioRenderer |
SelectOneRadio属性
Name | Default | Type | Description |
---|---|---|---|
id | null | String | Unique identifier of the component |
rendered | true | Boolean | Boolean value to specify the rendering of the component, when set to false component will not be rendered. |
binding | null | Object | An el expression that maps to a server side UIComponent instance in a backing bean |
value | null | Object | Value of the component referring to a List. |
converter | null | Converter/String | An el expression or a literal text that defines a converter for the component. When it’s an EL expression, it’s resolved to a converter instance. In case it’s a static text, it must refer to a converter id |
immediate | 0 | Boolean | When set true, process validations logic is executed at apply request values phase for this component. |
required | 0 | Boolean | Marks component as required |
validator | null | MethodExpr | A method expression that refers to a method validationg the input |
valueChangeListener | null | MethodExpr | A method expression that refers to a method for handling a valuechangeevent |
requiredMessage | null | String | Message to be displayed when required field validation fails. |
converterMessage | null | String | Message to be displayed when conversion fails. |
validatorMessage | null | String | Message to be displayed when validation fields. |
widgetVar | null | String | Name of the client side widget. |
disabled | false | Boolean | Disables the component. |
label | null | String | User presentable name. |
layout | line Direction | String | Layout of the radiobuttons, valid values are lineDirection, pageDirection, custom and grid. |
columns | 0 | Integer | Number of columns in grid layout. |
onchange | null | String | Callback to execute on value change. |
style | null | String | Inline style of the component. |
styleClass | null | String | Style class of the container. |
tabindex | null | String | Specifies the tab order of element in tab navigation. |
plain | false | Boolean | Plain mode displays radiobuttons using native browser rendering instead of themes. |
SelectOneRadio入门
SelectOneRadio的用法与SelectOneMenu的用法相同,不同之处在于,呈现了一组单选控件,而不是使用菜单控件。