jsf 转换器演示

注:jsf演示例子都在同一个workspace中完成的,所以你会看到一些与本演示例子无关的代码!

DateConverter.java

package org.baicai.jsf_document.simple_converter;

import java.text.ParseException;
import java.text.SimpleDateFormat;
import java.util.Date;

import javax.faces.component.UIComponent;
import javax.faces.context.FacesContext;
import javax.faces.convert.Converter;

/**
 * jsf时间转换器
 * @author christine
 *
 */
public class DateConverter implements Converter {
 SimpleDateFormat sdf=new SimpleDateFormat("dd/MM/yyyy");
 
 @Override
 //将String类型转换为你想要的类型
 public Object getAsObject(FacesContext context, UIComponent component,
   String value) {
  String strArray[] = value.split(",");
  
  try {
   return sdf.parse(strArray[0]);
  } catch (ParseException e) {
   e.printStackTrace();
   return null;
  }
 }

 @Override
 //将某一类型转换为String类型
 public String getAsString(FacesContext context, UIComponent component,
   Object value)
 {
  Date date=(Date)value;
  return sdf.format(date);
 }
}

UserBean.java

package org.baicai.jsf_document.simple_converter;

import java.util.Date;

import javax.faces.convert.Converter;

public class UserBean {
 private String name;
 private Date date=new Date();
 private Date birthday;
 private String address;
 private Date logDate;
    private Converter dc=new DateConverter();
 
 
   

 public Date getDate() {
  return date;
 }

 public void setDate(Date date) {
  this.date = date;
 }

 public Converter getDc() {
  return dc;
 }

 public void setDc(Converter dc) {
  this.dc = dc;
 }

 public Date getLogDate() {
  return logDate;
 }

 public void setLogDate(Date logDate) {
  this.logDate = logDate;
 }

 public String getName() {
  return name;
 }

 public void setName(String name) {
  this.name = name;
 }
              
 public Date getBirthday() {
  return birthday;
 }

 public void setBirthday(Date birthday) {
  this.birthday = birthday;
 }

 public String getAddress() {
  return address;
 }

 public void setAddress(String address) {
  this.address = address;
 }

 @Override
 public String toString() {
  return String.format("name:%s,birthday:%s,address:%s,logDate:%s", name, birthday,
    address,logDate);
 }
}

WebRoot/index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <!--第一步: 添加jsf的基本(html)标签标签库,和jsf的核心(cord)标签标签库 -->
     <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
     <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<!-- f:view 相当于超文本标记语言的html,是必须要添加的。否则会出错 -->
<!-- Component javax.faces.component.UIViewRoot@92b535 not expected type.
 Expected: javax.faces.component.UIForm.  Perhaps you're missing a tag?  -->
 <f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Jsf Menu</title>
</head>
<body>
 <!-- jsf的表单标签,当页面有h:commandLink,h:commandButton标签时该标签是必须要添加的标签 否则这些标签没有用 -->
 <!--This link is disabled as it is not nested within a JSF form. -->
<h:form>
   <!-- h:commandLink 链接标签,相当于html中的a元素 . action属性的值有两种形式 ,本形式会直接根据导航进到下一个页面,value属性的值为页面的显示值 -->
  <h:commandLink action="simpleDemo" value="第一个jsf演示"></h:commandLink><br>
  <h:commandLink action="simplenavigation" value="jsf导航演示"></h:commandLink><br>
  <h:commandLink action="internationalization" value="jsf国际资源化演示"></h:commandLink><br>
  <h:commandLink action="converter" value="jsf类型转换演示"></h:commandLink><br>
</h:form>
</body>
</f:view>
</html>

WebRoot/converter/index.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
     <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>converter Menu</title>
</head>
<body>
  <h:form>
          <h:commandLink action="jsfConverter" value="jsf标签对类型转换的演示"></h:commandLink><br>
         
          <p></p>
          <h:commandLink action="customConverter" value="jsf标签对类型转换的演示"></h:commandLink><br>
 </h:form>
</body>
</f:view>
</html>

WebRoot/converter/jsfConverter.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
     <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
     <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>jsfConverter</title>

</head>
<body>
  
         <h:outputText value="系统时间:" />
        <h:outputText value="#{converterBean.date}" >
             <!--jsf 标准转换器  pattern 规定日期的格式 -->
           <f:convertDateTime pattern="dd/MM/yyyy"/>
        </h:outputText>
    <h:form>
       <h:outputText value="用户名:"  />
       <h:inputText value="#{converterBean.name}" ></h:inputText>
       <br/>
       
       <h:outputText value="生日:"  ></h:outputText>  
    <!--id 标记日期字段  -->  
       <h:inputText id="dateField1" value="#{converterBean.birthday}" >
          <f:convertDateTime pattern="dd/MM/yyyy"></f:convertDateTime>
       </h:inputText>
       <!--jsf错误信息处理  for错误信息来自于(对应于上面的id标记) -->
       <h:message for="dateField1" style="color:red"></h:message>
       <br/>
      
       <h:outputText value="地址:" ></h:outputText>
       <h:inputText value="#{converterBean.address}" ></h:inputText>
       <br/>
      
       <h:outputText value="注册时间:" />
       <h:inputText id="dateField2" value="#{converterBean.logDate}" >
          <f:convertDateTime pattern="dd/MM/yyyy"/>
       </h:inputText>
       <h:message for="dateField2" style="color:red"></h:message>
       <br/>
       <h:commandButton value="提交" action="showCoverterBean"></h:commandButton>
   </h:form>
</body>
</f:view>
</html>

WebRoot/converter/customConverter.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
      <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
     <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>customConverter</title>
</head>
<body>
          <h:outputText value="系统时间:" />
         <!-- 使用自定义标签 -->
        <h:outputText value="#{converterBean.date}" >
          <f:converter converterId="dateCoverter"/>
        </h:outputText>
    <h:form>
       <h:outputText value="用户名:"/>
       <h:inputText value="#{converterBean.name}"></h:inputText>
        <br/>
       <h:outputText value="生日:"></h:outputText>
       <h:inputText id="dateField1" value="#{converterBean.birthday}" >
       <!-- 以f:converter标签并使用converterId属性来指定转换器 -->
          <f:converter converterId="dateCoverter"/>
       </h:inputText>
       <h:message for="dateField1" style="color:red"></h:message>
       <br/>
       <h:outputText value="地址:"></h:outputText>
       <h:inputText value="#{converterBean.address}"></h:inputText>
       <br/>
          <h:outputText value="注册时间:"/>
          <!-- 不用在faces-config.xml文件中注册就可以使用的方式 -->
      <h:inputText value="#{converterBean.logDate}" converter="#{converterBean.dc}">
       </h:inputText>
       <br/>
       <h:commandButton value="提交" action="showCoverterBean"/>
  </h:form>
</body>
</f:view>
</html>

WebRoot/converter/welcome.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ taglib uri="http://java.sun.com/jsf/core"  prefix="f" %>
     <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<f:view>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>converter</title>
</head>
<body>
  <h1><h:outputText value="欢迎 #{converterBean.name} 注册!"></h:outputText></h1>
  <h3>
      你的信息如下:
  </h3>
  <h4>
     <h:outputText value="生日:#{converterBean.birthday} 地址:#{converterBean.address}">
         <f:convertDateTime pattern="dd/MM/yyyy"/>
     </h:outputText>
  </h4>
</body>
</f:view>
</html>

WebRoot/web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/j2ee" xmlns:javaee="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" version="2.4">
   <!-- 指定加载多个faces-config.xml文件,文件之间用逗号分开。  默认会加载faces-config.xml文件, -->
  <context-param>
    <param-name>javax.faces.CONFIG_FILES</param-name>
    <param-value>
                 /WEB-INF/faces-config/faces-config.xml,
                 /WEB-INF/faces-config/simpledemo-faces-config.xml,
                 /WEB-INF/faces-config/simplenavigation-faces-config.xml,
                 /WEB-INF/faces-config/simpleconverter-faces-config.xml
   </param-value>
  </context-param>
 
  <!-- faces 的核心配置 -->
  <servlet>
    <servlet-name>Faces Servlet</servlet-name>
    <servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>Faces Servlet</servlet-name>
    <url-pattern>*.faces</url-pattern>
  </servlet-mapping>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
  </welcome-file-list>
</web-app>

WebRoot/faces-config/faces-config.xml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
  <faces-config>
        <!-- 页面导航 -->
        <navigation-rule>
          <!-- 事件触发页面 -->
               <from-view-id>/index.jsp</from-view-id>
               <navigation-case>
               <!-- 返回结果的标记 -->
                  <from-outcome>simpleDemo</from-outcome>
               <!--触发事件后陈显结果的页面  -->
                  <to-view-id>/simpleDemo/index.jsp</to-view-id>
               </navigation-case>
              
               <!--导航演示  -->
               <navigation-case>
                      <from-action>simplenavigation</from-action>
          <to-view-id>/simplenavigation/index.jsp</to-view-id>
    </navigation-case>
    
     <!--国际资源化演示  -->
     <navigation-case>
                      <from-action>internationalization</from-action>
          <to-view-id>/internationalization/index.jsp</to-view-id>
    </navigation-case>
    
    <!-- 类型转换演示 -->
                   <navigation-case>
                      <from-action>converter</from-action>
          <to-view-id>/converter/index.jsp</to-view-id>
      </navigation-case>
  </navigation-rule>
  </faces-config>

WebRoot/faces-config/simpleconverter-faces-config.xml
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC
  "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.0//EN"
  "http://java.sun.com/dtd/web-facesconfig_1_0.dtd">
<faces-config>
      <navigation-rule>
         <from-view-id>/converter/index.jsp</from-view-id>
         <navigation-case>
           <from-outcome>jsfConverter</from-outcome>
     <to-view-id>/converter/jsfConverter.jsp</to-view-id>
   </navigation-case>
   
   <navigation-case>
           <from-outcome>customConverter</from-outcome>
     <to-view-id>/converter/customConverter.jsp</to-view-id>
   </navigation-case>
 </navigation-rule>
 
 <navigation-rule>
 <!-- *通配符 也就是说在/converter目录下不管是那一个页面触发事件 返回的值为showCoverterBean都会进入/converter/welcome.jsp这个页面 -->
           <from-view-id>/converter/*</from-view-id>
              <navigation-case>
                <from-outcome>showCoverterBean</from-outcome>
                <to-view-id>/converter/welcome.jsp</to-view-id>
              </navigation-case>
      </navigation-rule>
     
      <!-- 注册自定义的时间转换器 -->
  <converter>
    <converter-id>dateCoverter</converter-id>
    <converter-class>org.baicai.jsf_document.simple_converter.DateConverter</converter-class>
       </converter>
     
     <managed-bean>
         <managed-bean-name>converterBean</managed-bean-name>
         <managed-bean-class>org.baicai.jsf_document.simple_converter.UserBean</managed-bean-class>
         <managed-bean-scope>session</managed-bean-scope>
     </managed-bean>
  </faces-config>

实现效果:样式没有设置 页面有点扭曲

jsf 转换器演示_第1张图片jsf 转换器演示_第2张图片jsf 转换器演示_第3张图片

你可能感兴趣的:(jsf 转换器演示)