zoukankan      html  css  js  c++  java
  • JSF入门教程

    1. 什么是 Java Server Faces(jsf)?

       JSF为JAVA的 Web应用用户界面的开发人员提供了标准的编程接口、丰富可扩展的UI组件库(一个核心的JSP标记库用来处理事件、执行验证以及其他非UI相关的操作和一个标准的HTML 标记库来表示 UI组件)、事件驱动模型等一套完整的Web应用框架,通过 JSF ,您可以在页面中轻松自如地使用 WEB 组件、捕获用户行为所产生的事件、执行验证、建立页面导航…,当使用支持JSF的开发工具来开发 JSF 应用的时候,一切将会变得异常简单,GUI方式拖放组件、修改组件属性、建立组件间关联以及编写事件侦听器等等

       JSF 有三部分:
         一套预制的UI组件集
         一个事件驱动的编程模型
         一个允许第三方开发者提供附加组件的组件模型

       JSF包含处理事件所需的所有代码和组件组织,开发者可以忽略这些细节而专注于应用逻辑。

    2. 第一个JSF程序
     
       JSF只是J2EE的一个标准,是一套接口集和一些基本实现,要使用JSF需要下载jsf的实现,可以到JSF 官方网站的 下载区 下载参考实现,也可以到 apache 下载 myfaces,这里以使用sun的参考实现为例,在下载压缩文件并解压缩之后,将其 lib 目录下的 jar 文件复制至您的Web应用程序的/WEB-INF/lib目录下,另外您还需要 jstl.jar 与 standard.jar 文件,这些文件您可以在 sample 目录下的应用中找到,建好我们的应用目录结构:

       hellojsf
       |-- build.xml
       |-- src
       |-- WEB-INF
       |----|-- web.xml
       |----|-- faces-config.xml
       |----|-- classes
       |----|-- lib
       |----|----|--jsf-impl.jar
       |----|----|--jsf-api.jar
       |----|----|--commons-digester.jar
       |----|----|--commons-collections.jar
       |----|----|--commons-beanutils.jar
       |----|----|--commons-logging.jar
       |----|----|--standard.jar
       |----|----|--jstl.jar

       可能只有faces-config.xml,它是jsf的基本配置文件,后面就可以看到它的作用。

       //build.xml
    <project name="helloapp" default="compile" basedir=".">

    <!-- ================= Property Definitions ==================== -->
    <property name="src.home" value="${basedir}/src" />
    <property name="classes.home" value="${basedir}/WEB-INF/classes" />
    <property name="lib.home" value="${basedir}/WEB-INF/lib" />

    <!-- ================= "compile" Target ==================== -->
    <target name="compile">
     <javac srcdir="${src.home}" destdir="${classes.home}" debug="on">
      <classpath>
       <fileset dir="${lib.home}">
        <include name="*.jar"/>
       </fileset>
      </classpath>
     </javac>
    </target>

    </project>


       下面我们就开始写程序了,没有什么复杂逻辑,不用细说他的流程,直接写了。

       //hello.jsp 保存在根目录下
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
    <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">
         <f:validateLongRange minimum="1" maximum="500"/>
        </h:inputText>
        </p>
        <p>
        <h:panelGrid id="controlPanel"
         binding="#{helloBean.controlPanel}"
         columns="20" border="1" cellspacing="0"/>
        </p>
        <h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/>
        <h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/>
       </h:form>
      </body>
     </html>
    </f:view>

       从这个页面可以看出,jsf 就是用他自己的UI组件代替了html标签,又加了些特有的属性,很容易理解,值得注意的是,所有组件都要定义在<f:view></f:view>之内,熟悉jsp的可能对”#{helloBean.numControls}“感觉很熟悉,不同的是这个是以”#“开头的,”binding“属性的值是个jsf el 表达式,它指定了helloBean类中的controlPanel方法可以直接对此组件进行操作,h:commandButton 是按钮组件,可以产生 action event, 他的 actionListener 属性制定了用helloBean类中的addControls方法来处理这个action event,其他的都比较容易理解,来看下个页面。

       //goodbye.jsp 保存在根目录下
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
    <%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
    <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>
       <h:outputText id="helloBeanOutputLabel" value="Number of controls displayed:"/>
       <h:outputText id="helloBeanOutput" value="#{helloBean.numControls}"/>
       </p>
       </h:form>
      </body>
     </html>
    </f:view>

       这个页面更简单,只是一些输出。

       在 hello.jsp goodbye.jsp 中都通过 jsf el 表达式引用了一个 backing bean, 叫 helloBean, 他包括了我们这个应用所需的一切

       //HelloBean.java 保存在 src 下
    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";
     }
    }

       jsf 的 backing bean 很简单,不需要继承于某个特定类,只是一个包含事件处理方法的javabean
      
       这里面最复杂的就是 addControls 方法了,它是一个 action listener 方法,因为他接收了一个唯一的参数 ActionEvent,在 hello.jsp 中:”<h:commandButton id="redisplayCommand" type="submit" value="Redisplay" actionListener="#{helloBean.addControls}"/>“,这句话告诉 jsf,当用户点击"Redisplay"按钮时jsf会用这个方法来处理 action event

       goodbye方法象 addControls 一样,是 event listener 的一种类型,但他是于 jsf 的导航系统联系起来的,所以他的工作就是返回一个字符串或逻辑输出,这样导航系统就可以决定下一个要加载的页面,这一类的方法叫做 action methods. 在 hello.jsp 中:”<h:commandButton id="goodbyeCommand" type="submit" value="Goodbye" action="#{helloBean.goodbye}" immediate="true"/>“,当用户点击”Goodbye“按钮时,goodbye方法会被执行,他只是返回"success",在配置文件中这个输出与某个页面相联系,下面就来看看配置文件faces-config.xml

       //faces-config.xml

    <?xml version="1.0"?>
    <!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>
     <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>

       jsf 象大多数框架一样,有一个配置文件,在之中你可以定义 导航规则、初始化javabean、注册你自己的jsf组件、验证器,和一些面向jsf应用其他方面的其他配置
       在这个配置文件中定义了一个bean, 指定了他的名字(这个名字就是我们在页面中使用的名字),类全名,和使用范围。还定义了一个导航规则,hello.jsp有一个”Goodbye“按钮转到其他页,所以只有一个单独的navigation-case,当输出为”success"时,就会显示goodbye.jsp。

       现在我们已经写完了页面,backing bean, 和配置文件,下面写完web.xml后就可以看到效果了

       //web.xml

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN"
    "http://java.sun.com/dtd/web-app_2_3.dtd">
    <web-app>
     <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>

       FacesServlet 是做jsf 应用是一定要指定的,还设了默认页为 hello.jsp.

       运行build, 启动web server, 在地址栏中打入应用地址,看到刚刚写的应用了吧,通过实际效果结合代码,相信我们已经对jsf 已经有一个基本认识了。

  • 相关阅读:
    【校招面试 之 C/C++】第23题 C++ STL(五)之Set
    Cannot create an instance of OLE DB provider “OraOLEDB.Oracle” for linked server "xxxxxxx".
    Redhat Linux安装JDK 1.7
    ORA-10635: Invalid segment or tablespace type
    Symantec Backup Exec 2012 Agent for Linux 卸载
    Symantec Backup Exec 2012 Agent For Linux安装
    You must use the Role Management Tool to install or configure Microsoft .NET Framework 3.5 SP1
    YourSQLDba介绍
    PL/SQL重新编译包无反应
    MS SQL 监控数据/日志文件增长
  • 原文地址:https://www.cnblogs.com/hainange/p/6153209.html
Copyright © 2011-2022 走看看