JSF第一步

　　 JavaServer Faces(JSF) 是一种标准的 J2EE 表示层的技术，其主旨是为了使 Java 开发人员能够快速的开发基于 Java 的 Web 应用程序。它不同于其它 Java 表示层技术的最大优势是其采用的组件模型，事件驱动，并且和其它的 MVC 框架相比，它是一种 Java 标准，在Java EE 5 中，JavaServer Faces 1.2 正式作为一个标准，加入 Java Enterprise 的世界。
　　传统的 Web 应用程序与桌面应用程序存在着许多本质上的差别，使得用户要手工的去捕获各种浏览器请求，保存客户端状态，并且手工控制着页面的转向，等等。JSF 的出现，无疑给我们带来了巨大的便利，JSF 提供了事件驱动的页面导航模型，该模型使应用程序开发人员能够设计应用程序的页面流。与 Struts 的方式向类似的是，所有的页面流信息都定义在 JSF 配置 XML 文件 (faces-config.xml) 中，而非硬编码在应用程序中。这很大程度简化了开发人员开发难度，简化了应用程序的开发。
同时JavaServer Faces 也是一种遵循遵循模型-视图－控制器 (MVC) 模式的框架。实现了视图代码(View)与应用逻辑(Model)的完全分离，使得使用 JSF 技术的应用程序能够很好的实现页面与代码的分离。所有对 JSF 页面的请求都会通过一个前端控制器 (FacesServlet) 处理，系统自动处理用户的请求，并将结果返回给用户。这和传统的 MVC 框架并没有太大的区别。
　　JavaServer Faces 是一种使用了 POJO 的技术同时在使用了类似 Spring 的控制反转(IoC) (或称为依赖注入-DI) 技术，在 JSF 的 Backing Bean 中，我们可以把视图所需要的数据和操作放进一个 Backing Bean 中。同时得益于 JSF 使用的 DI 技术，我们可以在配置文件中初始化 Managed Bean，同时我们也可以通过这样的技术很方便的和使用类似技术的 Spring 进行整合。

web.xml

<% ... @ page language="java" pageEncoding="ISO-8859-1" %>
<% ... @ taglib uri="http://java.sun.com/jsf/html" prefix="h"  %>
<% ... @ taglib uri="http://java.sun.com/jsf/core" prefix="f"  %>

< f:view >
< html >
    < head >
     < title >
    JSF in Action - Hello, world!
     </ title >
    </ head >
    < body >
     < h:form  id ="goodbyeForm" >
     < p >
     < h:outputText  id ="welcomeOutput"  value ="Goodbye!"
     style ="font-family: Arial, sans-serif; font-size: 24;
     font-style: bold; color: green;" />
     </ p >
     < p >
    <!-- 现实Bean里的值 -->
     < h:outputText  id ="helloBeanOutputLabel"  value ="Number of controls displayed:" />
     < h:outputText  id ="helloBeanOutput"  value ="#{helloBean.numControls}" />
     </ p >
     </ h:form >
    </ body >
</ html >
</ f:view >

faces-config.xml

<? xml version="1.0" encoding="UTF-8" ?>
<! DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd" >

< faces-config >
< managed-bean >
    < description > The one and only HelloBean. </ description >
    < managed-bean-name > helloBean </ managed-bean-name >
    < managed-bean-class > org.jia.hello.HelloBean </ managed-bean-class >
    < managed-bean-scope > session </ managed-bean-scope >
</ managed-bean >
<!-- 页面 -->
< navigation-rule >
    < description > Navigation from the hello page. </ description >
    < from-view-id > /hello.jsp </ from-view-id >
    < navigation-case >
     < from-outcome > success </ from-outcome > <!-- 页面流转 -->
     < to-view-id > /goodbye.jsp </ to-view-id >
    </ navigation-case >
</ navigation-rule >
</ faces-config >

HelloBean.java(Bean)

package  org.jia.hello;

import  javax.faces.application.Application;
import  javax.faces.component.html.HtmlOutputText;
import  javax.faces.component.html.HtmlPanelGrid;
import  javax.faces.context.FacesContext;
import  javax.faces.event.ActionEvent;
import  java.util.List;

public   class  HelloBean
... {
    private int numControls;
    private HtmlPanelGrid controlPanel;
    
    public int getNumControls()
    ...{
       return numControls;
    }
    public void setNumControls(int numControls)
    ...{
       this.numControls = numControls;
    }
    public HtmlPanelGrid getControlPanel()
    ...{
       return controlPanel;
    }
    public void setControlPanel(HtmlPanelGrid controlPanel)
    ...{
       this.controlPanel = controlPanel;
    }
                     //按钮触发
    public void addControls(ActionEvent actionEvent)
    ...{
       Application application = FacesContext.getCurrentInstance().getApplication();
       List children = controlPanel.getChildren();
       children.clear();
       for (int count = 0; count < numControls; count++)
       ...{
        HtmlOutputText output = (HtmlOutputText)application.createComponent(HtmlOutputText.COMPONENT_TYPE);
        output.setValue(" " + count + " ");
        output.setStyle("color: blue");
        children.add(output);
       }
    }
    public String goodbye()
    ...{
       return "success";
    }
}

hello.jsp

<% ... @ page language="java" pageEncoding="ISO-8859-1" %>
<!-- JSF标签 -->
<% ... @ taglib uri="http://java.sun.com/jsf/html" prefix="h"  %>
<% ... @ taglib uri="http://java.sun.com/jsf/core" prefix="f"  %>

< f:view >
< html >
    < head >
     < title >
    JSF in Action - Hello, world!
     </ title >
    </ head >
    < body >
     < h:form  id ="welcomeForm" >
      < h:outputText  id ="welcomeOutput"
      value ="Welcome to JavaServer Faces!"
      style ="font-family: Arial, sans-serif; font-size: 24;
      color: green;" />
      < p >

        <!--页面现实错误提示信息-->
      < h:message  id ="errors"  for ="helloInput"  style ="color: red" />
      </ p >
      < p >
      < h:outputLabel  for ="helloInput" >
       < h:outputText  id ="helloInputLabel"  value ="Enter number of controls to display:" />
      </ h:outputLabel >
      < h:inputText  id ="helloInput"  value ="#{helloBean.numControls}"  required ="true" >
       <!-- JSF验证控件 -->
       < f:validateLongRange  minimum ="1"  maximum ="500" />
      </ h:inputText >
      </ p >
      < p >
      < h:panelGrid  id ="controlPanel"
      binding ="#{helloBean.controlPanel}"
      columns ="20"  border ="1"  cellspacing ="0" />
      </ p >
      <!-- 执行helloBean的addControls方法，在当前页面操作 -->
      < h:commandButton  id ="redisplayCommand"  type ="submit"  value ="Redisplay"  actionListener ="#{helloBean.addControls}" />

        <!--执行helloBean的goodbye方法，返回 值为"success”按照''faces-config.xml"的流转到hello.jsp-->
      < h:commandButton  id ="goodbyeCommand"  type ="submit"  value ="Goodbye"  action ="#{helloBean.goodbye}"  immediate ="true" />
     </ h:form >
    </ body >
</ html >
</ f:view >

goodbye.jsp

 

<? xml version="1.0" encoding="UTF-8" ?>
< web-app  xmlns ="http://java.sun.com/xml/ns/j2ee"  xmlns:xsi ="http://www.w3.org/2001/XMLSchema-instance"  version ="2.4"  xsi:schemaLocation ="http://java.sun.com/xml/ns/j2ee   http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd" >
       < display-name > hello world </ display-name >
     < description >
       Welcome to JavaServer Faces.
     </ description >
     < 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 > faces/hello.jsp </ welcome-file >
     </ welcome-file-list >
</ web-app >