JSF 转换器
在本实验室中，您首先将了解如何使用内嵌式 JSF 转换器。您也将了解如何编译和使用定制转换器。本实验室使用的一些示例应用程序来自
Core JSF 一书（David Geary 和
Cay Horstmann 著）
发布的源代码。
预计时间：90 分钟（不包括课外练习）
前提条件
本动手实验室假定您拥有以下技术的基本知识或者具备相关编程经验：
- Servlet 和编程
- MVC（模型、视图和控制器）架构
软件需求
开始之前，需要在您的计算机中安装以下软件。
- Java Standard Development Kit (JDK™) 版本 5.0（下载）。
- 如果已经安装了 JDK 5.0，那么可以跳过此步骤。
- 安装文件的名称如下所示（针对 JDK 5.0 更新版本 x）。
- jdk-1_5_0_xx-windows-i586-p.exe（Windows）
- jdk-1_5_0_xx-linux-i586.bin（Linux）
- jdk-1_5_0_xx7-solaris-i586.sh（Solaris x86）
- 附带 Sun Java System Application Server 9 Update 1 程序包的 NetBeans IDE 5.5.1（下载）
- 在安装 NetBeans IDE 5.0 时，安装程序会询问使用哪个版本的 JDK。
- 您可以分别下载和安装 NetBeans IDE 5.5（下载）与 Sun Java System App Server 9 Update 1（下载）。在本例中，您需要手动添加 Sun Java System App Server 作为额外的运行时环境，详细步骤请访问 此处。
- 4125_jsfconverter.zip（下载）
- 其中含有本文档和实验室内容
- 下载此压缩文件，并将它解压到任意目录中
可以使用的操作系统平台
- Windows
- Solaris x86, Solaris Sparc
- Linux
- Mac OS X
变更记录
实验室练习
练习 1：编译和运行 "core-converter" 示例应用程序
学习要点：
- 标准转换器的用法，如 <f:convertNumber minFractionDigits="2"/> 或 <f:convertDateTime pattern="MM/yyyy"/>。
（1.1）打开、编译和运行 "core-converter" 示例应用程序
0. 启动 NetBeans IDE。
1. 打开 core-converter NetBeans 项目。
- 选择 文件->打开项目（Ctrl+Shift+O）。此时将出现 打开项目 对话框。
- 向下浏览至 <LAB_UNZIPPED_DIRECTORY>/jsfconverter/samples 目录。
- Windows：如果您将 4125_jsfconverter.zip 文件解压至 C:\ 目录下，则应向下浏览至C:\jsfconverter\samples 目录。
- Solaris/Linux：如果您将 4125_jsfconverter.zip 文件解压至 $HOME 目录下，则应向下浏览至$HOME/jsfconverter/samples 目录。
- 选择 core-converter。
- 单击 打开项目文件夹。core-converter 项目节点出现在 项目 选项卡窗口中。
2. 编译和运行 core-converter 项目。
- 右键单击 core-converter 项目并选择 运行。
- 此时将打开浏览器。
- 在 Amount 字段中键入 3.4567。
- 单击 处理 按钮。
- 注意到 Amount 字段显示为 $3.46。（转换器将 3.4567 转换为 3.46。）
- 将 082007 键入到 Expiration date (Month/Year) 字段中，并单击 Process 按钮。
（1.2）深入了解 "core-converter" 示例应用程序
1. index.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<h1><h:outputText value="#{msgs.enterPayment}"/></h1>
<h:panelGrid columns="3">
<h:outputText value="#{msgs.amount}"/>
<h:inputText id="amount" label="#{msgs.amount}"
value="#{payment.amount}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>
<h:message for="amount" styleClass="errorMessage"/>
<h:outputText value="#{msgs.creditCard}"/>
<h:inputText id="card" label="#{msgs.creditCard}"
value="#{payment.card}"/>
<h:panelGroup/>
<h:outputText value="#{msgs.expirationDate}"/>
<h:inputText id="date" label="#{msgs.expirationDate}"
value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>
<h:message for="date" styleClass="errorMessage"/>
</h:panelGrid>
<h:commandButton value="#{msgs.process}" action="process"/>
</h:form>
</body>
</f:view>
</html>
|
2. response.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<h1><h:outputText value="#{msgs.paymentInformation}"/></h1>
<h:panelGrid columns="2">
<h:outputText value="#{msgs.amount}"/>
<h:outputText value="#{payment.amount}">
<f:convertNumber type="currency"/>
</h:outputText>
<h:outputText value="#{msgs.creditCard}"/>
<h:outputText value="#{payment.card}"/>
<h:outputText value="#{msgs.expirationDate}"/>
<h:outputText value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</h:panelGrid>
<h:commandButton value="Back" action="back"/>
</h:form>
</body>
</f:view>
</html>
|
结束语
在本练习中， 您编译和运行了一个现成的 "core-converter" 示例应用程序，从而对该应用程序的运行机制有所感触。
返回顶部
练习 2：编译和运行 "core-converter2" 示例应用程序
学习要点：
- Credit card 字段由 CreditCardConverter 类的 getAsObject() 方法进行转换，该类实现 Converter 接口。
- 使用 <f:converter ..> 子元素 或 converter=".." 属性的转换器的用法。
（2.1）打开、编译和运行"core-converter2" 示例应用程序
1. 打开 core-converter2 NetBeans 项目。
- 选择 文件->打开项目（Ctrl+Shift+O）。此时将出现 打开项目 对话框。
- 向下浏览到 <LAB_UNZIPPED_DIRECTORY>/jsfconversion/samples 目录。
- 选择 core-converter2。
- 单击 打开项目文件夹。core-converter2 项目节点出现在 项目 选项卡窗口中。
2. 编译和运行 core-converter2 项目。
- 右键单击 core-converter2 项目并选择 运行。
- 此时将打开浏览器。
- 将 1234567812345678 输入到 Credit Card 字段中。
- 单击 处理 按钮。
- 注意到 1234567812345678 被转换为 1234 5678 1234 5678。
- 单击 Back 按钮
- 将 1234-5678-1234-5678 输入到 Credit Card 字段。
- 单击 Process 按钮。
（2.2）深入了解 "core-converter2" 示例应用程序
1. index.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<h1><h:outputText value="#{msgs.enterPayment}"/></h1>
<h:panelGrid columns="3">
<h:outputText value="#{msgs.amount}"/>
<h:inputText id="amount" label="#{msgs.amount}"
value="#{payment.amount}">
<f:convertNumber minFractionDigits="2"/>
</h:inputText>
<h:message for="amount" styleClass="errorMessage"/>
<h:outputText value="#{msgs.creditCard}"/>
<h:inputText id="card" label="#{msgs.creditCard}"
value="#{payment.card}">
<f:converter converterId="com.corejsf.CreditCard"/>
</h:inputText>
<h:message for="card" styleClass="errorMessage"/>
<h:outputText value="#{msgs.expirationDate}"/>
<h:inputText id="date" label="#{msgs.expirationDate}"
value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:inputText>
<h:message for="date" styleClass="errorMessage"/>
</h:panelGrid>
<h:commandButton value="Process" action="process"/>
</h:form>
</body>
</f:view>
</html>
|
2. result.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<f:view>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<h1><h:outputText value="#{msgs.paymentInformation}"/></h1>
<h:panelGrid columns="2">
<h:outputText value="#{msgs.amount}"/>
<h:outputText value="#{payment.amount}">
<f:convertNumber type="currency"/>
</h:outputText>
<h:outputText value="#{msgs.creditCard}"/>
<h:outputText value="#{payment.card}"
converter="com.corejsf.CreditCard"/>
<h:outputText value="#{msgs.expirationDate}"/>
<h:outputText value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</h:panelGrid>
<h:commandButton value="Back" action="back"/>
</h:form>
</body>
</f:view>
</html>
|
3. faces-config.xml
<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<application>
<message-bundle>com.corejsf.messages</message-bundle>
</application>
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>process</from-outcome>
<to-view-id>/result.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/result.jsp</from-view-id>
<navigation-case>
<from-outcome>back</from-outcome>
<to-view-id>/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<converter>
<converter-id>com.corejsf.CreditCard</converter-id>
<converter-class>com.corejsf.CreditCardConverter</converter-class>
</converter>
<managed-bean>
<managed-bean-name>payment</managed-bean-name>
<managed-bean-class>com.corejsf.PaymentBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<resource-bundle>
<base-name>com.corejsf.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>
|
4. CreditCardConverter.java
package com.corejsf;
import javax.faces.application.FacesMessage;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
public class CreditCardConverter implements Converter {
public Object getAsObject(FacesContext context, UIComponent component,
String newValue) throws ConverterException {
StringBuilder builder = new StringBuilder(newValue);
boolean foundInvalidCharacter = false;
char invalidCharacter = '\0';
int i = 0;
while (i < builder.length() && !foundInvalidCharacter) {
char ch = builder.charAt(i);
if (Character.isDigit(ch))
i++;
else if (Character.isWhitespace(ch))
builder.deleteCharAt(i);
else {
foundInvalidCharacter = true;
invalidCharacter = ch;
}
}
if (foundInvalidCharacter) {
FacesMessage message = com.corejsf.util.Messages.getMessage(
"com.corejsf.messages", "badCreditCardCharacter",
new Object[]{ new Character(invalidCharacter) });
message.setSeverity(FacesMessage.SEVERITY_ERROR);
throw new ConverterException(message);
}
return new CreditCard(builder.toString());
}
public String getAsString(FacesContext context, UIComponent component,
Object value) throws ConverterException {
// length 13: xxxx xxx xxx xxx
// length 14: xxxxx xxxx xxxxx
// length 15: xxxx xxxxxx xxxxx
// length 16: xxxx xxxx xxxx xxxx
// length 22: xxxxxx xxxxxxxx xxxxxxxx
String v = value.toString();
int[] boundaries = null;
int length = v.length();
if (length == 13)
boundaries = new int[]{ 4, 7, 10 };
else if (length == 14)
boundaries = new int[]{ 5, 9 };
else if (length == 15)
boundaries = new int[]{ 4, 10 };
else if (length == 16)
boundaries = new int[]{ 4, 8, 12 };
else if (length == 22)
boundaries = new int[]{ 6, 14 };
else
return v;
StringBuilder result = new StringBuilder();
int start = 0;
for (int i = 0; i < boundaries.length; i++) {
int end = boundaries[i];
result.append(v.substring(start, end));
result.append(" ");
start = end;
}
result.append(v.substring(start));
return result.toString();
}
}
|
结束语
在本练习中， 您编译和运行了一个现成的 "core-converter2" 示例应用程序，从而对该应用程序的运行机制有所感触。
返回顶部
练习 3：编译和运行 "core-custom-converter" 示例应用程序
学习要点：
- 执行转换的定制标签的创建和用法
- 该标签类扩展了 ConverterELTag 类。
（3.1）打开、编译和运行"core-custom-converter" 示例应用程序
1. 打开 core-custom-converter NetBeans 项目。
- 选择 文件->打开项目（Ctrl+Shift+O）。此时将出现 打开项目 对话框。
- 向下浏览到 <LAB_UNZIPPED_DIRECTORY>/jsfconversion/samples 目录。
- 选择 core-custom-converter。
- 单击 打开项目文件夹。core-custom-converter 项目节点出现在 项目 选项卡窗口中。
2. 编译和运行 core-custom-converter 项目。
- 右键单击 core-custom-converter 项目并选择 运行。
- 此时将打开浏览器。
（3.2）深入了解 "core-custom-converter" 示例应用程序
1. result.jsp
<html>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://corejsf.com/converter" prefix="corejsf" %>
<f:view>
<head>
<link href="styles.css" rel="stylesheet" type="text/css"/>
<title><h:outputText value="#{msgs.title}"/></title>
</head>
<body>
<h:form>
<h1><h:outputText value="#{msgs.paymentInformation}"/></h1>
<h:panelGrid columns="2">
<h:outputText value="#{msgs.amount}"/>
<h:outputText value="#{payment.amount}">
<f:convertNumber type="currency"/>
</h:outputText>
<h:outputText value="#{msgs.creditCard}"/>
<h:outputText value="#{payment.card}">
<corejsf:convertCreditcard separator="-"/>
</h:outputText>
<h:outputText value="#{msgs.expirationDate}"/>
<h:outputText value="#{payment.date}">
<f:convertDateTime pattern="MM/yyyy"/>
</h:outputText>
</h:panelGrid>
<h:commandButton value="#{msgs.back}" action="back"/>
</h:form>
</body>
</f:view>
</html>
|
2. converter.tld
<?xml version="1.0" encoding="UTF-8"?>
<taglib xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
version="2.1">
<tlib-version>1.1</tlib-version>
<tlib-version>1.1</tlib-version>
<short-name>converter</short-name>
<uri>http://corejsf.com/converter</uri>
<tag>
<name>convertCreditcard</name>
<tag-class>com.corejsf.CreditCardConverterTag</tag-class>
<body-content>empty</body-content>
<attribute>
<name>separator</name>
<deferred-value>
<type>java.lang.String</type>
</deferred-value>
</attribute>
</tag>
</taglib>
|
3. CreditCardConverterTag.java
package com.corejsf;
import javax.el.ELContext;
import javax.el.ValueExpression;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.webapp.ConverterELTag;
import javax.servlet.jsp.JspException;
public class CreditCardConverterTag extends ConverterELTag {
private ValueExpression separator;
public void setSeparator(ValueExpression newValue) {
separator = newValue;
}
public Converter createConverter() throws JspException {
CreditCardConverter converter = new CreditCardConverter();
ELContext elContext = FacesContext.getCurrentInstance().getELContext();
converter.setSeparator((String) separator.getValue(elContext));
return converter;
}
public void release() {
separator = null;
}
}
|
4. CreditCardConverter.java
package com.corejsf;
import java.io.Serializable;
import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;
import javax.faces.convert.ConverterException;
public class CreditCardConverter implements Converter, Serializable {
private String separator;
// PROPERTY: separator
public void setSeparator(String newValue) { separator = newValue; }
public Object getAsObject(
FacesContext context,
UIComponent component,
String newValue)
throws ConverterException {
StringBuilder builder = new StringBuilder(newValue);
int i = 0;
while (i < builder.length()) {
if (Character.isDigit(builder.charAt(i)))
i++;
else
builder.deleteCharAt(i);
}
return new CreditCard(builder.toString());
}
public String getAsString(
FacesContext context,
UIComponent component,
Object value)
throws ConverterException {
// length 13: xxxx xxx xxx xxx
// length 14: xxxxx xxxx xxxxx
// length 15: xxxx xxxxxx xxxxx
// length 16: xxxx xxxx xxxx xxxx
// length 22: xxxxxx xxxxxxxx xxxxxxxx
if (!(value instanceof CreditCard))
throw new ConverterException();
String v = ((CreditCard) value).toString();
String sep = separator;
if (sep == null) sep = " ";
int[] boundaries = null;
int length = v.length();
if (length == 13)
boundaries = new int[] { 4, 7, 10 };
else if (length == 14)
boundaries = new int[] { 5, 9 };
else if (length == 15)
boundaries = new int[] { 4, 10 };
else if (length == 16)
boundaries = new int[] { 4, 8, 12 };
else if (length == 22)
boundaries = new int[] { 6, 14 };
else
return v;
StringBuilder result = new StringBuilder();
int start = 0;
for (int i = 0; i < boundaries.length; i++) {
int end = boundaries[i];
result.append(v.substring(start, end));
result.append(sep);
start = end;
}
result.append(v.substring(start));
return result.toString();
}
}
|
5. faces-config.xml
<?xml version="1.0"?>
<faces-config xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd"
version="1.2">
<navigation-rule>
<from-view-id>/index.jsp</from-view-id>
<navigation-case>
<from-outcome>process</from-outcome>
<to-view-id>/result.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<navigation-rule>
<from-view-id>/result.jsp</from-view-id>
<navigation-case>
<from-outcome>back</from-outcome>
<to-view-id>/index.jsp</to-view-id>
</navigation-case>
</navigation-rule>
<converter>
<converter-id>com.corejsf.CreditCard</converter-id>
<converter-class>com.corejsf.CreditCardConverter</converter-class>
</converter>
<managed-bean>
<managed-bean-name>payment</managed-bean-name>
<managed-bean-class>com.corejsf.PaymentBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
</managed-bean>
<application>
<resource-bundle>
<base-name>com.corejsf.messages</base-name>
<var>msgs</var>
</resource-bundle>
</application>
</faces-config>
|
练习 4：编译和运行 "custom-converter2" 示例应用程序
（4.1）打开、编译和运行"custom-converter2" 示例应用程序
1. 打开 custom-converter2 NetBeans 项目。
- 选择 文件->打开项目（Ctrl+Shift+O）。此时将出现 打开项目 对话框。
- 向下浏览到 <LAB_UNZIPPED_DIRECTORY>/jsfconversion/samples 目录。
- 选择 custom-converter2。
- 单击 打开项目文件夹。custom-converter2 项目节点出现在 项目 选项卡窗口中。
2. 编译和运行 custom-converter2 项目。
- 右键单击 custom-converter2 项目并选择 运行。
- 此时将打开浏览器。
- 在 Credit Card Number 字段中输入某个伪造数字，例如 123。
（4.2）深入了解 "custom-converter2" 示例应用程序
1. faces-config.xml
<?xml version='1.0' encoding='UTF-8'?>
<!--
Copyright 2004 Sun Microsystems, Inc. All rights reserved.
SUN PROPRIETARY/CONFIDENTIAL. Use is subject to license terms.
-->
<!DOCTYPE faces-config PUBLIC
"-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
"http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<!-- =========== FULL CONFIGURATION FILE ================================== -->
<faces-config>
<application>
<message-bundle>creditcard.bundles.Messages</message-bundle>
<locale-config>
<default-locale>en</default-locale>
<supported-locale>de</supported-locale>
<supported-locale>fr</supported-locale>
<supported-locale>es</supported-locale>
</locale-config>
</application>
<!-- Validator -->
<validator>
<description>
Registers the concrete Validator implementation,
creditcard.FormatValidator with the validator
identifier, FormatValidator.
</description>
<validator-id>FormatValidator</validator-id>
<validator-class>creditcard.FormatValidator</validator-class>
<attribute>
<description>
List of format patterns separated by '|'. The validator
compares these patterns against the data entered in a
component that has this validator registered on it.
</description>
<attribute-name>formatPatterns</attribute-name>
<attribute-class>java.lang.String</attribute-class>
</attribute>
</validator>
<!-- converter -->
<converter>
<description>
Registers the concrete Converter implementation,
creditcard.CreditCardConverter using the ID,
creditCardConverter.
</description>
<converter-id>creditCardConverter</converter-id>
<converter-class>creditcard.CreditCardConverter</converter-class>
</converter>
<!-- navigation rules -->
<navigation-rule>
<from-view-id>/creditcardInfo.jsp</from-view-id>
<navigation-case>
<description>
Any action that returns "finish" on customerInfo.jsp should
cause navigation to finish.jsp
</description>
<from-outcome>finish</from-outcome>
<to-view-id>/finish.jsp</to-view-id>
</navigation-case>
</navigation-rule>
</faces-config>
|
课外练习（针对 Sang Shin“Java EE 编程在线课程”的学习者）
1.课外练习是根据以下要求修改 core-converter2 项目。为防止您没有 core-converter2 项目，可使用动手实验室压缩文件中的 <LAB_UNZIPPED_DIRECTORY>/jsfconverter/samples/core-converter2。
（可以通过复制 core-converter2项目创建一个新项目。您可以任意方式为课外练习项目命名，但此处我将称其为 Mycore-converter2。）
- 创建一个扩展 Conveter 类的 AmountConverter 类 来转换 Amount 字段，而不使用标准转换器。（参见 CreditCardConverter.java 作为示例。）
2
. 将以下文件以J2EEHomework-jsfconverter 作为
发送主题 发送至
j2eehomeworks@sun.com。
- 将 Mycore-converter2 NetBeans 项目的文件进行压缩。（其他人应能将其作为一个 NetBeans 项目打开和运行。) 您可使用您喜爱的压缩工具，或者使用 JDK 附带的 "jar" 实用工具，如下所示。
- cd <包含 Mycore-converter2 目录的父目录>（假设您将项目命名为 Mycore-converter2）
- jar cvf Mycore-converter2.zip Mycore-converter2（Mycore-converter2 应包含 nbproject 目录）
- 抓取输出屏幕 - 将其命名为 J2EEHomework-jsfconverter.gif 或J2EEHomework-jsfconverter.jpg （或 J2EEHomework-jsfconverter<任意图片格式均可>）。
- 如果决定使用 NetBeans 之外的其他 IDE，则压缩文件应该包含重新编译项目所需的所有文件（含有所需源文件的 War 文件也可以）。
