A Simple Example

第一个例子以一个登陆页面开始   如图 1-1

图 1-1

相关流程图   如图 1-2

如图 1-2

 

我用的开发工具是MyEclipse,先运行Eclipse。

1．  新建一个Web工程login。添加一个JSF应用。

2．  修改faces-config.xml，我用使用MyEclipse的图形化界面。相应代码如下：

    < navigation-rule >

        < from-view-id > /index.jsp </ from-view-id >

        < navigation-case >

            < from-outcome > login </ from-outcome >

            < to-view-id > /welcome.jsp </ to-view-id >

        </ navigation-case >

    </ navigation-rule >

    < navigation-rule >

        < from-view-id > /welcome.jsp </ from-view-id >

    </ navigation-rule >

3．  新建一个index.html目的为了让Tomcat可以解析JSF页面。添加代码如下：

< html >

   < head >

       < meta http-equiv = "Refresh" content = "0; URL=index.faces" />

      < title > 启动Web应用 </ title >

   </ head >

   < body >

      < p > 请等待Web应用启动..... </ p >

   </ body >

</ html >

相应的修改web.xml如下：

       < welcome-file-list >

    < welcome-file > index.html </ welcome-file >

</ welcome-file-list >

4．  修改 index.jsp ， welcome.jsp 。代码如下：

index.jsp

<%@ page contentType = "text/html;charset=GB2312" %>

<%@ taglib uri = "http://java.sun.com/jsf/core" prefix = "f" %>

<%@ taglib uri = "http://java.sun.com/jsf/html" prefix = "h" %>

< html >

      < head >                  

         < title > 一个简单JSF应用 </ title >

      </ head >

      < body >

      < f:view >

         < h:form >

            < h3 > 请输入姓名和密码 </ h3 >

            < table >

               < tr >

                  < td > 姓名 </ td >

                  < td >

                     < h:inputText value = " #{user.name}"/>

                  </ td >

               </ tr >             

               < tr >

                  < td > 密码 </ td >

                  < td >

                     < h:inputSecret value = " #{user.password}"/>

                  </ td >

               </ tr >

            </ table >

            < p >

               < h:commandButton value = " 登陆" action = "login" />

            </ p >

         </ h:form >

       </ f:view >

      </ body >

</ html >

    welcome.jsp

       <%@ page contentType = "text/html;charset=GB2312" %>

<%@ taglib uri = "http://java.sun.com/jsf/core" prefix = "f" %>

<%@ taglib uri = "http://java.sun.com/jsf/html" prefix = "h" %>

< html >

      < head >               

         < title > 一个简单JSF应用 </ title >

      </ head >

      < body >

      < f:view >

         < h:form >

            < h3 >

                欢迎来到JSF世界, < h:outputText value = " #{user.name}"/>!

            </ h3 >

         </ h:form >

     </ f:view >

      </ body >      

</ html >

 

5．    添加一个 managed-bean ， UserBean.java 。代码如下：

package com;

 

public class UserBean {

       private String name;

 

       private String password;

 

       public String getName() {

              return name;

       }

 

       public void setName(String name) {

              this.name = name;

       }

 

       public String getPassword() {

              return password;

       }

 

       public void setPassword(String password) {

              this.password = password;

       }

 

}

 

修改相应的 faces-config.xml ，代码如下：

    < managed-bean >

    < managed-bean-name > user </ managed-bean-name >

    < managed-bean-class > com.UserBean </ managed-bean-class >

    < managed-bean-scope > session </ managed-bean-scope >

</ managed-bean >

6．    完毕。启动 Tomcat ，地址栏输入 http://localhost:8080/login 测试一下。

 

注： JSF 标签的使用参考 tlddocs 。

€