HTML5-友好标记

2024 年 8 月 29 日 | 阅读 3 分钟

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 email 类型，并且它工作正常。 jsf 前缀放置在 id 属性上，以便 HTML5 input 标签的属性被视为 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
输入	type="button"	h:commandButton
输入	type="checkbox"	h:selectBooleanCheckbox
输入	type="color"	h:inputText
输入	type="date"	h:inputText
输入	type="datetime"	h:inputText
输入	type="datetime-local"	h:inputText
输入	type="email"	h:inputText
输入	type="month"	h:inputText
输入	type="number"	h:inputText
输入	type="range"	h:inputText
输入	type="search"	h:inputText
输入	type="time"	h:inputText
输入	type="url"	h:inputText
输入	type="week"	h:inputText
输入	type="file"	h:inputFile
输入	type="hidden"	h:inputHidden
输入	type="password"	h:inputSecret
输入	type="reset"	h:commandButton
输入	type="submit"	h:commandButton
输入	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 input 组件。

直通属性示例

// 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>

输出

索引页