srcmini本文概述
JavaServer Faces支持HTML5, 允许你直接在网页中使用HTML5标记。它还允许你在HTML5元素内使用JavaServer Faces属性。 JavaServer Faces对HTML5的支持分为两类：
- 直通元件
- 传递属性
HTML5友好的标记功能可对渲染页面输出上的Facelets页面进行完全控制, 而不必将此控件传递给组件。你可以混合并匹配JavaServer Faces和HTML5组件和元素。
使用直通元素
它允许你在应用程序中使用HTML5标签和属性。 JSF将其视为与与服务器端UIComponent实例关联的JavaServer Faces组件等效。
你必须指定名称空间http://xmlns.jcp.org/jsf才能使不是JavaServer Faces元素的元素成为传递元素。在下面的示例中, 代码使用短名称jsf声明了名称空间：
// index.xhtml
在这里, 我们以JSF形式使用HTML5电子邮件类型, 并且工作友好。 jsf前缀位于id属性上, 因此HTML5输入标签的属性被视为Facelets页面的一部分。
<!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://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
>
<h:head>
<title>HTML5-Friendly-markup</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username" value="User Name "/>
<h:inputText value="#{user.name}"/><br/>
<h:outputLabel for="email" value="Email ID "/>
<input type="email" jsf:id="email" name="email" value="#{user.email}"/><br/><br/>
<h:commandButton action="response.xhtml" value="submit"/>
</h:form>
</h:body>
</html>// User.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}// response.xhtml
<!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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
<h:outputText value="Hello #{user.name}"/>
</h1>
<h4><h:outputText value="Your email is: #{user.email}" /></h4>
</h:body>
</html>输出：
//索引页
//回应页面
下表显示了传递元素如何呈现为Facelets标签。
| HTML5元素名称 | 识别属性 | Facelets标签 |
|---|---|---|
| a | jsf:action | h:commandLink |
| a | jsf:actionListener | jsf:actionListener |
| a | jsf:value | h:outputLink |
| a | jsf:outcome | h:link |
| body | h:body | |
| button | h:commandButton | |
| button | jsf:outcome | h:button |
| form | h:form | |
| head | h:head | |
| img | h:graphicImage | |
| input | type=”button” | h:commandButton |
| input | type=”checkbox” | h:selectBooleanCheckbox |
| input | type=”color” | h:inputText |
| input | type=”date” | h:inputText |
| input | type=”datetime” | h:inputText |
| input | type=”datetime-local” | h:inputText |
| input | type=”email” | h:inputText |
| input | type=”month” | h:inputText |
| input | type=”number” | h:inputText |
| input | type=”range” | h:inputText |
| input | type=”search” | h:inputText |
| input | type=”time” | h:inputText |
| input | type=”url” | h:inputText |
| input | type=”week” | h:inputText |
| input | type=”file” | h:inputFile |
| input | type=”hidden” | h:inputHidden |
| input | type=”password” | h:inputSecret |
| input | type=”reset” | h:commandButton |
| input | type=”submit” | h:commandButton |
| input | type=”*” | h:inputText |
| label | h:outputLabel | |
| link | h:outputStylesheet | |
| script | h:outputScript | |
| select | multiple=”*” | h:selectManyListbox |
| select | h:selectOneListbox | |
| textarea | h:inputTextArea |
使用直通属性
传递属性允许你将非JavaServer Faces属性传递给浏览器。如果在JavaServer Faces UIComponent中指定传递属性, 则属性名称和值将直接传递到浏览器, 而不会被JavaServer Faces组件或渲染器解释。
你必须将JavaServer Faces命名空间用于传递属性, 以在JavaServer Faces组件内为属性名称添加前缀。在下面的示例中, 我们将属性属性传递给HTML5输入组件。
直通属性示例
// index.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://xmlns.jcp.org/jsf/html"
xmlns:f="http://xmlns.jcp.org/jsf/core">
<h:head>
<title>Pass-Through Attributes</title>
</h:head>
<h:body>
<h:form>
<h:outputLabel for="username" value="User Name "/>
<h:inputText value="#{user.name}">
<f:passThroughAttribute name="type" value="text" />
</h:inputText><br/>
<h:outputLabel for="email" value="Email ID "/>
<h:inputText value="#{user.email}">
<f:passThroughAttribute name="type" value="email" />
</h:inputText><br/><br/>
<h:commandButton action="response.xhtml" value="submit"/>
</h:form>
</h:body>
</html>// User.java
import javax.faces.bean.ManagedBean;
import javax.faces.bean.RequestScoped;
@ManagedBean
@RequestScoped
public class User {
String name;
String email;
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}// response.xhtml
<!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://xmlns.jcp.org/jsf/html">
<h:head>
<title>Response Page</title>
</h:head>
<h:body>
<h1>
<h:outputText value="Hello #{user.name}"/>
</h1>
<h4><h:outputText value="Your email is: #{user.email}" /></h4>
</h:body>
</html>输出：
索引页
回应页面
评论前必须登录！
注册