快速上手：MyEclipse下开发JSF-技术开发专区

快速上手：MyEclipse下开发JSF

作者：IT168 gmplayer 编辑： ITPUB实习编辑 2006-10-27 23:41

【IT168技术文档】
    前言:
    JavaServer Faces (JSF) 是一种用于构建 Web 应用程序的新标准 Java 框架。它提供了一种以组件为中心来开发 Java Web 用户界面的方法，从而简化了开发。JavaServer Faces 还引起了广大 Java/Web 开发人员的兴趣。“企业开发人员”和 Web 设计人员将发现 JSF 开发可以简单到只需将用户界面 (UI) 组件拖放到页面上，而“系统开发人员”将发现丰富而强健的 JSF API 为他们提供了非常好的功能和编程灵活性。JSF 还通过将良好构建的模型-视图-控制器 (MVC) 设计模式集成到它的体系结构中，确保了应用程序具有更高的可维护性。最后，由于 JSF 是通过 Java Community Process (JCP) 开发的一种 Java 标准，因此开发工具供应商完全能够为 JavaServer Faces 提供易于使用的、高效的可视化开发环境。

    本文将通过使用MyEclipse来开发一个小的JSF Demo应用程序。从而能使读者快速上手来进行JSF开发。

    一．环境要求
    • JDK 1.4+ (Sun or IBM)
    • http://java.sun.com/j2se/downloads/index.html
    • Eclipse 3.1 SDK
    • http://www.eclipse.org/downloads/index.php
    • MyEclipse 4.1
    • http://www.myeclipseide.com/ContentExpress-display-ceid-10.html
    • Tomcat 5.x (5.5.9 Preferred, or other compliant Servlet/EJB container)
    • http://jakarta.apache.org/tomcat/index.html

    二．创建工程
    我们需要在MyEclipse中创建Web Project，通过File > New > Other > Project > J2EE > Web Project来进行创建。如图2.1

Figure 2.1: Create a new web project

    Figure 2.2: Web Project Wizard Dialog
    注意：开发JSF应用程序推荐使用JSTL类库，因此在创建工程时选择“JSTL Libraries”，也可以在后面通过MyEclipse 内容的菜单中“Add JSTL Libraries”来添加。

    工程创建好以后，需要添加JSF Capabilities，通过右键点击工程，选择MyEclipse > Add JSF Capabilities，如图2.3

Figure 2.3: Adding JSF Capabilities to a Web Project
按照默认的设置，点击“Finish”

Figure2.4: Configuring JSF Capabilities
向导完成以后，工程结构会增加许多类库，如图2.5：

    Figure 2.5: Project Layout After Configuration
    至此，工程已经创建完了，下面我们要开始编辑和创建应用程序。
【IT168技术文档】
    三．创建Message Bundle
    Message Bundle文件是一个简单的属性文件，存储与keys相关的消息，提供国际化支持，也可以用在JSP页面中。Struts也提供了类似的文件ApplicationResources.properties。

    在JSF中，可以在页面中加载message bundle使用如下代码：<f:loadBundle basename="com.jsfdemo.MessageBundle" var= "bundle"/>
    在创建message bundle文件之前，在src文件中通过右键选择“New > Package”来创建com.jsfdemo包。使用新键文件向导来创建message bundle文件，如图3.1：

    Figure 3.1: Creating the Message Bundle file

    创建完MessageBundle.properties文件以后，要添加在JSP页面显示的每个标签的key/value对或者是文本字符串。可以复制下面中的内容到message bundle文件中。
    MessageBundle.properties
    user_name_label=User Name:
    user_password_label=Password:
    login_button_label=Login

    MessageBundle.properties文件的内容

    MessageBundle文件创建完以后，下一步，我们要创建ManagedBean以处理用户登录。

    四．创建 Managed Beans
    这部分我们将创建Managed Beans来执行login操作，在这个Demo中，登录操作就是简单的核对用户名和密码是否都是myeclipse，并将页面转向到userLoginSuccess.jsp。

    首先用MyEclipse JSF Editor打开faces-config.xml文件

Figure 4.1: Opening faces-config.xml file for editing
点击右上角的Add ManagedBean来添加新的bean，如图所示：

Figure 4.2: Launch the ManagedBean wizard from the Outline View
点击以后出现新的Managed Bean向导，如图所示添加值

Figure 4.3: Setup the new ManagedBean's class and properties

Figure 4.4: Managed Bean Wizard Final Page
【IT168技术文档】
点击完成以后，发现在Outline View中新增加了一个UserBean.

Figure 4.5: UserBean now shown in the Outline View
UserBean.java的源代码也出现在 java编辑器中。

    Figure 4.6: UserBean Java source opened up in an editor
    Username 和password的setters和getters方法已经为我们产生了，接下来就是要在这个类中增加一个方法loginUser来处理用户登录的操作。

    代码如下所示：

UserBean.java
    public String loginUser() ...{
        if("myeclipse".equals(getUserName()) && "myeclipse".equals(getPassword()))
            return "success";

        FacesContext facesContext = FacesContext.getCurrentInstance();
        FacesMessage facesMessage = new FacesMessage(
            "You have entered an invalid user name and/or password");
        facesContext.addMessage("loginForm", facesMessage);

        return "failure";
    }

    我们注意到，UserBean类没有继承任何JSF的类或接口，它只是一个简单的JavaBean包括额外逻辑来执行操作。他包括了类似Struts中的Struts Form 和 Struts Action的功能,将二者集成到一个类中.

    另外,这些方法并没有返回到指定的类,像Struts中的ActionForward那样.

    五.创建JSP页面

    在这部分我们将创建两个jsp页面,一个是用户登录的页面,另一个是表明登录成功的页面.这两个页面各自为loginUser.jsp和 loginUserSuccess.jsp,为了使应用程序简单,如果登录出现异常,我们将返回loginUser.jsp页面,并没有增加任何验证.我们可以通过faces-config.xml文件来创建jsp页面.点击如图所示的JSP按钮来创建userLogin.jsp页面,出现JSP建立向导.

Figure 5.1: Creating userLogin.jsp using the faces-config.xml editor
以同样的方式来创建userLoginSuccess.jsp页面

Figure 5.2: Creating userLoginSuccess.jsp using the faces-config.xml editor
接下来编辑userLogin.jsp页面

Figure 5.3: Begin editing the userLogin.jsp page
【IT168技术文档】
MyEclipse JSP Designer可以采用Source 方式, Design 方式, Design/Source 方式来编辑JSP文件.在这个Demo中采用Design/Source方式,如图:

    Figure 5.4: Switched to Design/Source mode and expanded JSF palettes
    接下来我们需要在页面中添加如下代码:
    为用户名增加h:inputText组件
    为密码增加h:inputSecret组件
    增加用户名输入框h:outputLabel
    增加密码输入框h:outputLabel
    同时页面要使用我们自己的MessageBundle.

Figure 5.5: Remove template text and add our MessageBundle to the JSP page

接下来,我们创建HTML form元素,用来包括登录控件,如图:

Figure 5.5a: Create the new form
现在来创建username 的组件h:inputText,如图:

Figure 5.6: Adding new inputText component

Figure 5.7: Adding new inputText component continued
【IT168技术文档】
接下来添加h:inputSecret(不是lable)

Figure 5.8 Adding new inputSecret component

Figure 5.9 Adding new inputSecret component continued

现在添加username和password的输出标签.

Figure 5.10: Adding outputLabel component to our userName component

以同样的方式来增加h:inputSecret标签,这些做完以后,手动改变h:outputLabel 和 h:outputText的位置,如下所示:

Figure 5.11: Adding outputText components to our labels

最后添加login按钮,添加的方式和前面差不多.

Figure 5.12: Adding a new commandButton component

Figure 5.13: Adding a new commandButton component continued

【IT168技术文档】
现在的页面如下所示:

Figure 5.14: Our almost-complete userLogin.jsp page

至此, userLogin.jsp已经建立完毕, userLoginSuccess.jsp的建立更简单,简单的增加一个打印输出用户登录的姓名即可.

    Figure 5.16: Making userLoginSuccess.jsp page print out the user's name

    现在,这两个页面已经建立完毕,还有就是二者之间的关系还没有建立,打开faces-config.xml 的设计界面,按照以下步骤来进行关联:
    1. 点击导航工具
    2. 点击userLogin.jsp文件
    3. 点击userLoginSuccess.jsp文件
    4. 使用向导来快速创建转向
    按照以下步骤来创建成功时的页面转向情况和失败时的页面转向情况.