Java教程 第28页

JSF教程 – JSF 输出样式表示例 h:outputStylesheet标签渲染的HTML元素类型“链接”类型“文本/ CSS”。 此标记将外部样式表文件添加到JSF页面。 以下JSF标记 <h:outputStylesheet library="css" name="styles.css" /> 被渲染到 <link type="text/css" rel="stylesheet" href="/helloworld/javax.faces.resource/styles.css.jsf?ln=css" /> 例子 下面的代码来自UserBean.java。 package cn.w3cschool.common; import java.io.Serializable; import java.math.BigDecimal; import java.util.ArrayList; import java.util.Arrays; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="book") @SessionScoped public class UserBean implements Serializable{ private static final long serialVersionUID = 1L; String bookNo; String productName; BigDecimal price; int qty; public String getBookNo() { return bookNo; } public void setBookNo(String bookNo) { this.bookNo = bookNo; } public String getProductName() { return productName; } public void setProductName(String productName) { this.productName = productName; } public BigDecimal getPrice() { return price; } public void setPrice(BigDecimal price) { this.price = price; } public int getQty() { return qty; } public void setQty(int qty) { this.qty = qty; }...

JSF教程 – JSF链接示例 h:Link标签渲染一个HTML“anchor”元素。 以下JSF标记 <h:link value="Page 1" outcome="page1" /> 被渲染为以下HTML代码 <a href="/helloworld/page1.jsf">Page 1</a> 标签属性 属性 描述 id 标签的标识 binding 引用在backing bean中使用的组件 rendered 布尔值; false将抑制渲染 styleClass 级联样式表(CSS)类名称 value 值绑定 valueChangeListener 响应值更改的方法绑定 converter 转换器类名 validator 附加到组件的验证器的类名 required 布尔值; 如果为true，则根据需要标记标签 accesskey 给予一个元素的焦点 accept 表单的内容类型的逗号分隔列表 accept-charset 表单的字符编码的逗号或空格分隔列表。 alt 非文字元素(例如图片)的替代文字 border 元素的边框宽度的像素值 charset 链接资源的字符编码 coords 形状为矩形，圆形或多边形的元素的坐标 dir 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 hreflang 使用 href 属性指定的资源的基本语言; lang 元素的属性和文本的基本语言 maxlength 文本字段的最大字符数 readonly 输入字段的只读状态 rel 当前页面和链接页面之间的关系 rev 将从 href 指定的锚点反向链接到当前文档。 style 内联样式信息 tabindex 指定制表符索引的数值 target 打开文档的框架的名称 title 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 type 链接类型; 例如样式表 width 元素的宽度 onblur 失去焦点的事件处理程序 onchange 值更改的事件处理程序 onclick 鼠标按钮的事件处理程序点击该元素 ondblclick 双击鼠标按钮的事件处理程序 onfocus 元素接收焦点的事件处理程序 onkeydown 按键的事件处理程序 onkeypress 键按下并释放的事件处理程序 onkeyup Key的事件处理程序发布 onmousedown 鼠标按钮的事件处理程序 onmousemove 鼠标移动的事件处理程序 onmouseout 鼠标左的事件处理程序 onmouseover 鼠标移动到的事件处理程序 onmouseup 释放鼠标按钮的事件处理程序 onreset 表单重置的事件处理程序 onselect 选择文本的事件处理程序 例子...

JSF教程 – JSF图形图像示例 h:graphicImage标签渲染类型为“img”的HTML元素。 下面的代码 <h:graphicImage value="//www.w3cschool.cn/jsf.png"/> 将呈现为以下HTML标记。 <img src="//www.w3cschool.cn/jsf.png" /> 标签属性 属性 描述 id 标签的标识 binding 引用在backing bean中使用的组件 rendered 布尔值; false将抑制渲染 styleClass 级联样式表(CSS)类名称 value 值绑定 valueChangeListener 响应值更改的方法绑定 converter 转换器类名 validator 附加到组件的验证器的类名 required 布尔值; 如果为true，则根据需要标记标签 accesskey 给予一个元素的焦点 accept 表单的内容类型的逗号分隔列表 accept-charset 表单的字符编码的逗号或空格分隔列表。 alt 非文字元素(例如图片)的替代文字 border 元素的边框宽度的像素值 charset 链接资源的字符编码 coords 形状为矩形，圆形或多边形的元素的坐标 dir 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 disabled 输入元素或按钮的禁用状态 hreflang 使用 href 属性指定的资源的基本语言; lang 元素的属性和文本的基本语言 maxlength 文本字段的最大字符数 readonly 输入字段的只读状态 style 内联样式信息 tabindex 指定制表符索引的数值 target 打开文档的框架的名称 title 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 type 链接类型; 例如样式表 width 元素的宽度 onblur 失去焦点的事件处理程序 onchange 值更改的事件处理程序 onclick 鼠标按钮的事件处理程序点击该元素 ondblclick 双击鼠标按钮的事件处理程序 onfocus 元素接收焦点的事件处理程序 onkeydown 按键的事件处理程序 onkeypress 键按下并释放的事件处理程序 onkeyup Key的事件处理程序发布 onmousedown 鼠标按钮的事件处理程序 onmousemove 鼠标移动的事件处理程序 onmouseout 鼠标左的事件处理程序 onmouseover 鼠标移动到的事件处理程序 onmouseup 释放鼠标按钮的事件处理程序 onreset 表单重置的事件处理程序 onselect 选择文本的事件处理程序 immediate 在生命周期的早期进行过程验证 例子 以下代码来自demo.xhtml。 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE...

JSF教程 – JSF自定义验证错误消息示例 以下代码显示如何创建自定义验证消息。 例子 下面的代码来自UserBean.java。 package cn.w3cschool.common; import java.io.Serializable; import java.sql.Date; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="user") @SessionScoped public class UserBean implements Serializable{ String username; Date dob; public String getUsername() { return username; } public void setUsername(String username) { this.username = username; } public Date getDob() { return dob; } public void setDob(Date dob) { this.dob = dob; } } 以下代码来自demo.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" xmlns:f="http://java.sun.com/jsf/core" > <h:body> <h:form> <h:panelGrid columns="3"> Enter your username : <h:inputText id="username" value="#{user.username}" size="20" required="true" label="Username"> <f:validateLength minimum="5" maximum="10" /> </h:inputText> <h:message for="username" style="color:red" /> Enter your DOB : <h:inputText id="dob" value="#{user.dob}" size="20" required="true" label="Date of Birth"> <f:convertDateTime /> </h:inputText> <h:message for="dob" style="color:red" /> </h:panelGrid>...

JSF教程 – JSF自定义验证器示例 我们可以在JSF中创建自己的自定义验证器。 以下列表包含我们在JSF中创建自定义验证器时可以遵循的步骤。 通过实现javax.faces.validator.Validator接口创建一个验证器类。 实现上述接口的validate()方法。 使用注释@FacesValidator为自定义验证器分配唯一的ID。 例子 以下代码来自EmailValidator.java。 package cn.w3cschool.common; import java.util.regex.Matcher; import java.util.regex.Pattern; import javax.faces.application.FacesMessage; import javax.faces.component.UIComponent; import javax.faces.context.FacesContext; import javax.faces.validator.FacesValidator; import javax.faces.validator.Validator; import javax.faces.validator.ValidatorException; @FacesValidator("cn.w3cschool.common.EmailValidator") public class EmailValidator implements Validator{ private static final String EMAIL_PATTERN = "^[_A-Za-z0-9-]+(\\." + "[_A-Za-z0-9-]+)*@[A-Za-z0-9]+(\\.[A-Za-z0-9]+)*" + "(\\.[A-Za-z]{2,})$"; private Pattern pattern; private Matcher matcher; public EmailValidator(){ pattern = Pattern.compile(EMAIL_PATTERN); } @Override public void validate(FacesContext context, UIComponent component, Object value) throws ValidatorException { matcher = pattern.matcher(value.toString()); if(!matcher.matches()){ FacesMessage msg = new FacesMessage("E-mail validation failed.", "Invalid E-mail format."); msg.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ValidatorException(msg); } } } 以下代码来自demo.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" xmlns:f="http://java.sun.com/jsf/core"> <h:body> <h:form> <h:panelGrid columns="3"> Enter your email : <h:inputText id="email" value="#{user.email}" size="20" required="true" label="Email...

JSF教程 – JSF值更改事件示例 我们可以处理h：inputText或h：selectOneMenu的值更改事件。 要注册事件处理程序侦听器，请传递UI组件的valueChangeListener属性中的托管bean方法的名称。 或者实现ValueChangeListener接口，并将实现类名称传递给UI Component的valueChangeListener属性。 以下代码显示如何将方法从Managed Bean注册到valueChangeListener方法 public void localeChanged(ValueChangeEvent e){ //assign new value to country selectedCountry = e.getNewValue().toString(); } 注册方法 <h:selectOneMenu value="#{userData.selectedCountry}" onchange="submit()" valueChangeListener="#{userData.localeChanged}" > <f:selectItems value="#{userData.countries}" /> </h:selectOneMenu> 以下代码显示了如何实现ValueChangeListener。 public class LocaleChangeListener implements ValueChangeListener { @Override public void processValueChange(ValueChangeEvent event) throws AbortProcessingException { //access country bean directly UserData userData = (UserData) FacesContext.getCurrentInstance(). getExternalContext().getSessionMap().get("userData"); userData.setSelectedCountry(event.getNewValue().toString()); } } 并注册到f:valueChangeListener标签。 <h:selectOneMenu value="#{userData.selectedCountry}" onchange="submit()"> <f:valueChangeListener type="com.tutorialspoint.test.LocaleChangeListener" /> <f:selectItems value="#{userData.countries}" /> </h:selectOneMenu> 例子 以下代码来自demo.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" xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:body> <h:form> Selected country locale : <h:inputText id="country" value="#{country.localeCode}" size="20" /> Select a country {method binding}: <h:selectOneMenu value="#{country.localeCode}" onchange="submit()" valueChangeListener="#{country.countryLocaleCodeChanged}"> <f:selectItems value="#{country.countryInMap}" /> </h:selectOneMenu> Select a country: <h:selectOneMenu value="#{country.localeCode}" onchange="submit()"> <f:valueChangeListener...

JSF教程 – JSF表单文本框示例 h:inputText标签渲染类型为“text”的HTML输入元素。 以下JSF标记 <h:inputText value="Hello World!" /> 将被渲染到以下HTML标记 <input type="text" name="j_idt6:j_idt8" value="Hello World!" /> j_idt6:j_idt8由JSF生成。 h:inputText标签属性 下表列出了h:inputText标记的属性。 属性 描述 id 标签的标识 binding 引用在backing bean中使用的组件 rendered 布尔值; false将抑制渲染 styleClass 级联样式表(CSS)类名称 value 值绑定 valueChangeListener 响应值更改的方法绑定 converter 转换器类名 validator 附加到组件的验证器的类名 required 布尔值; 如果为true，则根据需要标记标签 accesskey 给予一个元素的焦点 accept 表单的内容类型的逗号分隔列表 accept-charset 表单的字符编码的逗号或空格分隔列表。 alt 非文字元素(例如图片)的替代文字 border 元素的边框宽度的像素值 charset 链接资源的字符编码 coords 形状为矩形，圆形或多边形的元素的坐标 dir 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 disabled 输入元素或按钮的禁用状态 hreflang 使用 href 属性指定的资源的基本语言; lang 元素的属性和文本的基本语言 maxlength 文本字段的最大字符数 readonly 输入字段的只读状态 style 内联样式信息 tabindex 指定制表符索引的数值 target 打开文档的框架的名称 title 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 type 链接类型; 例如样式表 width 元素的宽度 onblur 失去焦点的事件处理程序 onchange 值更改的事件处理程序 onclick 鼠标按钮的事件处理程序点击该元素 ondblclick 双击鼠标按钮的事件处理程序 onfocus 元素接收焦点的事件处理程序 onkeydown 按键的事件处理程序 onkeypress 键按下并释放的事件处理程序 onkeyup Key的事件处理程序发布 onmousedown 鼠标按钮的事件处理程序 onmousemove 鼠标移动的事件处理程序 onmouseout 鼠标左的事件处理程序 onmouseover 鼠标移动到的事件处理程序 onmouseup 释放鼠标按钮的事件处理程序 onreset 表单重置的事件处理程序 onselect 选择文本的事件处理程序 immediate...

JSF教程 – JSF删除示例 我们可以使用“ui:remove”标签来定义要删除的内容。 通过使用“ui:remove”标签，我们可以认为包含“ui:remove”标签的标签被注释掉。 <ui:remove> <h:commandButton type="button" value="#{msg.buttonLabel}" /> </ui:remove> 变为 <!-- <h:commandButton type="button" value="#{msg.buttonLabel}" /> </ui:remove> --> 以下代码显示如何使用ui:remove标记。 例子 以下代码来自demo.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" xmlns:ui="http://java.sun.com/jsf/facelets"> <h:body> <ui:remove> <h:commandButton type="button" value="#{msg.buttonLabel}" /> </ui:remove> </h:body> </html> 下面的代码来自UserBean.java。 package cn.w3cschool.common; import java.io.Serializable; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="msg") @SessionScoped public class UserBean implements Serializable{ String buttonLabel = "Submit"; public String getButtonLabel() { return buttonLabel; } public void setButtonLabel(String buttonLabel) { this.buttonLabel = buttonLabel; } } 下载 Remove.zip 运行 将生成的WAR文件从目标文件夹复制到Tomcat部署文件夹，并运行Tomcat-Install-folder/bin/startup.bat。 Tomcat完成启动后，在浏览器地址栏中键入以下URL。 http://localhost:8080/simple-webapp/demo.xhtml

JSF教程 – JSF DataTable添加删除示例 JSF有一个丰富的控件，命名为DataTable来渲染和格式化html表。 使用DataTable，我们可以遍历集合或值数组以显示数据。 DataTable具有以简单的方式修改其数据的属性。 为了使用DataTable，我们需要以下HTML头部。 <html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"> </html> 以下JSF标记 <h:dataTable value="#{userData.employees}" var="employee" styleClass="employeeTable" headerClass="employeeTableHeader" rowClasses="employeeTableOddRow,employeeTableEvenRow"> <h:column> <f:facet name="header">Name</f:facet> #{employee.name} </h:column> <h:column> <f:facet name="header">Department</f:facet> #{employee.department} </h:column> <h:column> <f:facet name="header">Age</f:facet> #{employee.age} </h:column> <h:column> <f:facet name="header">Salary</f:facet> #{employee.salary} </h:column> </h:dataTable> 将渲染为以下HTML标记。 <table class="employeeTable"> <thead><tr> <th class="employeeTableHeader" scope="col">Name</th> <th class="employeeTableHeader" scope="col">Department</th> <th class="employeeTableHeader" scope="col">Age</th> <th class="employeeTableHeader" scope="col">Salary</th> </tr></thead> <tbody> <tr class="employeeTableOddRow"> <td>Tom</td> <td>Marketing</td> <td>10</td> <td>2000.0</td> </tr> <tr class="employeeTableEvenRow"> <td>Robert</td> <td>Marketing</td> <td>15</td> <td>1000.0</td> </tr> </table> 标签属性 属性 描述 id 标签的标识 dir 文本的方向。 有效值为 ltr (从左到右)和 rtl (从右到左)。 styleClass 级联样式表(CSS)类名称 value 组件的值，通常是值绑定 bgcolor 表的背景颜色 border 表的边框宽度 cellpadding 表格单元周围的填充 cellspacing 表格单元格之间的间距 columnClasses 列的CSS类的逗号分隔列表 first 表中第一行的索引 footerClass 表的页脚的CSS类 frame 应绘制围绕桌子的框架;有效值:none，above，below，hsides，vsides，lhs，rhs，box，border headerClass 表头的CSS类 rowClasses 用于行的CSS类的逗号分隔列表 rules 小区之间线路规范; 有效值:组，行，列，全部 summary 表格摘要“用于非视觉反馈的目的和结构 var 由表示当前项的数据表创建的变量名 title 用于辅助功能的标题。 浏览器通常为标题的值创建工具提示 type...

JSF教程 – JSF转换日期时间示例 f:convertDateTime标记用于将字符串值转换为所需格式的日期。 它还充当验证器所需的日期格式。 下面的代码展示了如何使用f:convertDateTime标签。 <f:convertDateTime pattern="dd-mm-yyyy" /> 标签属性 属性 描述 type 日期(默认)，时间或两者 dateStyle 默认，短，中，长或全 timeStyle 默认，短，中，长或全 pattern 格式化模式，如java.text.SimpleDateFormat中定义 locale 其首选项用于解析和格式化的区域设置 timeZone 用于解析和格式化的时区 例子 以下代码来自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" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core"> <h:body> Receipt Date : <h:outputText value="#{receipt.date}" > <f:convertDateTime pattern="d-M-yyyy" /> </h:outputText> </h:body> </html> 以下代码来自demo.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" xmlns:f="http://java.sun.com/jsf/core" xmlns:c="http://java.sun.com/jsp/jstl/core" > <h:body> <h:form> <h:panelGrid columns="3"> Receipt Date : <h:inputText id="date" value="#{receipt.date}" size="20" required="true" label="Receipt Date" > <f:convertDateTime pattern="d-M-yyyy" /> </h:inputText> <h:message for="date" style="color:red" /> </h:panelGrid> <h:commandButton value="Submit" action="result" /> </h:form> </h:body> </html> 下面的代码来自UserBean.java。 package cn.w3cschool.common; import java.io.Serializable; import java.util.Date; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean(name="receipt") @SessionScoped public class UserBean...