JSF 2 checkboxes example
2015-08-27 18:58
716 查看
In JSF,
While
Hardcoded value in “
Generate values with an Array and put it into “
Generate values with a Map and put it into “
Generate values with an Object array and put it into “
result.xhtml…
When “submit” button is clicked, link to “
The value of “
The “rememberMe” checkbox value is checked by default.
The “
<h:selectBooleanCheckbox />tag is used to render a single HTML input element of “
checkbox” type.
//JSF... <h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me //HTML output... <input type="checkbox" name="j_idt6:j_idt8" /> Remember Me
While
<h:selectManyCheckbox />tag is used to render a set of HTML input element of type “
checkbox”, and format it with HTML table and label tags.
//JSF... <h:selectManyCheckbox value="#{user.favNumber1}"> <f:selectItem itemValue="1" itemLabel="Number1 - 1" /> <f:selectItem itemValue="2" itemLabel="Number1 - 2" /> <f:selectItem itemValue="3" itemLabel="Number1 - 3" /> </h:selectManyCheckbox>
//HTML output... <table> <tr> <td> <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:0" value="1" type="checkbox" /> <label for="j_idt6:j_idt10:0" class=""> Number1 - 1</label></td> <td> <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:1" value="2" type="checkbox" /> <label for="j_idt6:j_idt10:1" class=""> Number1 - 2</label></td> <td> <input name="j_idt6:j_idt10" id="j_idt6:j_idt10:2" value="3" type="checkbox" /> <label for="j_idt6:j_idt10:2" class=""> Number1 - 3</label></td> <td> </tr> </table>
JSF 2.0 example
Here’s a JSF 2.0 example to show the use of “h:selectBooleanCheckbox” and “
h:selectManyCheckbox” tags.
h:selectBooleanCheckbox
Render a single checkbox, and wire it with a boolean property.h:selectManyCheckbox
Render a group of checkboxes and populate the data in different ways :Hardcoded value in “
f:selectItem” tag.
Generate values with an Array and put it into “
f:selectItems” tag.
Generate values with a Map and put it into “
f:selectItems” tag.
Generate values with an Object array and put it into “
f:selectItems” tag, then represent the value with “
var” attribute.
1. Backing Bean
A backing bean to hold the submitted checkboxes values.package com.mkyong; import java.util.Arrays; import java.util.LinkedHashMap; import java.util.Map; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="user") @SessionScoped public class UserBean{ public boolean rememberMe; public String[] favNumber1; public String[] favNumber2; public String[] favNumber3; public String[] favNumber4; //getter and setter methods... public String getFavNumber1InString() { return Arrays.toString(favNumber1); } //Generated by Array public String[] getFavNumber2Value() { favNumber2 = new String[5]; favNumber2[0] = "Number2 - 1"; favNumber2[1] = "Number2 - 2"; favNumber2[2] = "Number2 - 3"; favNumber2[3] = "Number2 - 4"; favNumber2[4] = "Number2 - 5"; return favNumber2; } public String getFavNumber2InString() { return Arrays.toString(favNumber2); } //Generated by Map private static Map<String,Object> number3Value; static{ number3Value = new LinkedHashMap<String,Object>(); number3Value.put("Number3 - 1", "1"); //label, value number3Value.put("Number3 - 2", "2"); number3Value.put("Number3 - 3", "3"); number3Value.put("Number3 - 4", "4"); number3Value.put("Number3 - 5", "5"); } public Map<String,Object> getFavNumber3Value() { return number3Value; } public String getFavNumber3InString() { return Arrays.toString(favNumber3); } //Generated by Object array public static class Number{ public String numberLabel; public String numberValue; public Number(String numberLabel, String numberValue){ this.numberLabel = numberLabel; this.numberValue = numberValue; } public String getNumberLabel(){ return numberLabel; } public String getNumberValue(){ return numberValue; } } public Number[] number4List; public Number[] getFavNumber4Value() { number4List = new Number[5]; number4List[0] = new Number("Number4 - 1", "1"); number4List[1] = new Number("Number4 - 2", "2"); number4List[2] = new Number("Number4 - 3", "3"); number4List[3] = new Number("Number4 - 4", "4"); number4List[4] = new Number("Number4 - 5", "5"); return number4List; } public String getFavNumber4InString() { return Arrays.toString(favNumber4); } }
2. JSF Page
A JSF page to demonstrate the use “h:selectBooleanCheckbox” and “
h:selectManyCheckbox” tags.
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" xmlns:f="http://java.sun.com/jsf/core" > <h:body> <h1>JSF 2 checkboxes example</h1> <h:form> <h2>1. Single checkbox</h2> <h:selectBooleanCheckbox value="#{user.rememberMe}" /> Remember Me <h2>2. Mutiple checkboxes</h2> 1. Hard-coded with "f:selectItem" : <h:selectManyCheckbox value="#{user.favNumber1}"> <f:selectItem itemValue="1" itemLabel="Number1 - 1" /> <f:selectItem itemValue="2" itemLabel="Number1 - 2" /> <f:selectItem itemValue="3" itemLabel="Number1 - 3" /> <f:selectItem itemValue="4" itemLabel="Number1 - 4" /> <f:selectItem itemValue="5" itemLabel="Number1 - 5" /> </h:selectManyCheckbox> <br /> 2. Generated by Array : <h:selectManyCheckbox value="#{user.favNumber2}"> <f:selectItems value="#{user.favNumber2Value}" /> </h:selectManyCheckbox> <br /> 3. Generated by Map : <h:selectManyCheckbox value="#{user.favNumber3}"> <f:selectItems value="#{user.favNumber3Value}" /> </h:selectManyCheckbox> <br /> 4. Generated by Object with var : <h:selectManyCheckbox value="#{user.favNumber4}"> <f:selectItems value="#{user.favNumber4Value}" var="n" itemLabel="#{n.numberLabel}" itemValue="#{n.numberValue}" /> </h:selectManyCheckbox> <br /> <h:commandButton value="Submit" action="result" /> <h:commandButton value="Reset" type="reset" /> </h:form> </h:body> </html>
result.xhtml…
<?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html" > <h:body> <h1>JSF 2 checkboxes example</h1> <h2>result.xhtml</h2> <ol> <li>user.rememberMe : #{user.rememberMe}</li> <li>user.favNumber1 : #{user.favNumber1InString}</li> <li>user.favNumber2 : #{user.favNumber2InString}</li> <li>user.favNumber3 : #{user.favNumber3InString}</li> <li>user.favNumber4 : #{user.favNumber4InString}</li> </ol> </h:body> </html>
3. Demo
When “submit” button is clicked, link to “
result.xhtml” page and display the submitted checkboxe values.
How to checked checkbox’s value by default?
h:selectBooleanCheckbox
The value of “
f:selectItem” tag is checked if the boolean value is set to
true. In above example, if you set boolean property “
rememberMe” to
true:
@ManagedBean(name="user") @SessionScoped public class UserBean{ public boolean rememberMe = true; //...
The “rememberMe” checkbox value is checked by default.
h:selectManyCheckbox
The values of “f:selectItems” tag are checked if it matched to the “value” of “
h:selectManyCheckbox” tag. In above example, if you set
favNumber3to {“1″,”3″} :
@ManagedBean(name="user") @SessionScoped public class UserBean{ public String[] favNumber3 = {"1","3"}; //...
The “
favNumber3″ checkboxes, “Number 1″ and “Number 3″ values are checked by default.
相关文章推荐
- Extjs表单验证的编写方法及vtypes集合
- JSF 2 textarea example
- Javascript拷贝对象方法
- js浮点运算bug的解决办法
- JSF 2 password example
- JSF 2 textbox example
- js 计算两个日期的间隔 兼容firefox和ie
- js Promise学习
- js Promise学习
- js Promise学习
- js 正则
- 通过javascript获取URL中的参数
- JS 跨域问题常见的五种解决方式
- iOS js oc相互调用(JavaScriptCore)(二)
- js变量声明提前
- JS 事件
- JSON字符串对应实体类
- js实现发送短信验证码后的倒计时功能(无视页面刷新)
- 如何克服 JavaScript 框架疲劳?
- js延迟函数