锐客网

  1. 首页 > 睿知 > it技术 > >

HTML5友好标记

jsfHTML5友好标记

本文概述

  • 使用直通元素
  • 使用直通属性
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="http://www.srcmini.com/User Name"/> < h:inputText value="http://www.srcmini.com/#{user.name}"/> < br/> < h:outputLabel for="email" value="http://www.srcmini.com/Email ID"/> < input type="email" jsf:id="email" name="email" value="http://www.srcmini.com/#{user.email}"/> < br/> < br/> < h:commandButton action="response.xhtml" value="http://www.srcmini.com/submit"/> < /h:form> < /h:body> < /html>

【HTML5友好标记】// 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="http://www.srcmini.com/Hello #{user.name}"/> < /h1> < h4> < h:outputText value="http://www.srcmini.com/Your email is: #{user.email}" /> < /h4> < /h:body> < /html>

输出：
//索引页
HTML5友好标记

文章图片
//回应页面
HTML5友好标记

文章图片
下表显示了传递元素如何呈现为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="http://www.srcmini.com/User Name"/> < h:inputText value="http://www.srcmini.com/#{user.name}"> < f:passThroughAttribute name="type" value="http://www.srcmini.com/text" /> < /h:inputText> < br/> < h:outputLabel for="email" value="http://www.srcmini.com/Email ID"/> < h:inputText value="http://www.srcmini.com/#{user.email}"> < f:passThroughAttribute name="type" value="http://www.srcmini.com/email" /> < /h:inputText> < br/> < br/> < h:commandButton action="response.xhtml" value="http://www.srcmini.com/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="http://www.srcmini.com/Hello #{user.name}"/> < /h1> < h4> < h:outputText value="http://www.srcmini.com/Your email is: #{user.email}" /> < /h4> < /h:body> < /html>

输出：
索引页
HTML5友好标记

文章图片
回应页面
HTML5友好标记

文章图片

    推荐阅读


    上一篇：JSF 标记

    下一篇：JSF h:inputFile标记