BlogJava-BeanSoft's Java Blog-随笔分类-JSF

在这个教程中我们将使用MyEclipse Enterprise Workbench来开发一个小小的 JSF 示例程序. 不需要您对关于JSF 和 MyEclipse的相关知识有所了解, 不过如果有所了解的话会更好.
因为Struts 是一个非常流行的 web 应用框架, 所以JSF 和 Struts之间的相似点我们适当的提示您注意, 来帮助哪些有过 Struts 开发经验的读者. 然而, 如果你以前对 Struts 一无所知, 你完全可以很自在的忽略这些内容.

返回页首

3. 系统需求

下面是这个指南所使用的软件的列表:

JDK 1.4+ (Sun 或者 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, 或者其它符合标准的 Servlet/EJB 容器)
http://jakarta.apache.org/tomcat/index.html

对这个简单的例子, 用户名 是 "myeclipse" , 密码也是 "myeclipse".

注意: 在安装过 JDK 并且重启你的计算机后, 请确保首先安装 Eclpse 然后是 MyEclpse, 最后安装 Tomca. 所有这些软件安装完毕后, 请确保在 MyEclipse 中设置对应的Tomcat 5 服务器设置; 请使用正确的Tomcat Home 目录和你刚刚安装好的那个可用的 JDK. 如果你不知道如何在 MyEclipse 中设置 Tomcat, 你可以参考使用应用服务器 Application Servers快速入门向导.

返回页首

4. 设置新项目和目录结构

为了组织我们的开发过程, 我们需要在 MyEclipse 中创建一个新的 Web 模块并向它添加 JSF 功能(JSF Capabilities)模块. 你可以通过向导来创建一个web项目, 请通过选择菜单项File > New > Other > Project > J2EE > Web Project 来打开, 如下图 4.1所示.

图 4.1: 创建一个新的 web 项目

图 4.2: Web 项目向导对话框

这个向导可以让你自定义项目的设置, 通过在对话框的输入框里输入一些值来自定义, 如图4.2所示.

注意: 因为开发 JSF 程序的时候流行和JSTL类库搭配, 所以在项目创建时建议您选择"JSTL Libraries". 然而, 您也可以在以后再来添加 JSTL 类库, 通过选择 MyEclipse 菜单的 "Add JSTL Libraries" 菜单项来完成.

一旦Web项目创建了, 我们需要给它添加JSF功能. 这个操作可以通过Package Explorer 视图的项目根节点上右键点击, 选择弹出菜单中的 MyEclipse > Add JSF Capabilities, 如图4.3 所示.

图 4.3: 向 Web 项目添加 JSF Capabilities

JSF 对话框的默认值对这个教程来说不需要修改就可以使用. 高手们也可以通过修改对话框里面的默认值来改变配置, 如图 4.4 所示.

图 4.4: 配置 JSF Capabilities

这个向导结束后, 项目的目录结构将会如下图 4.5所示.

图 4.5: 配置后的项目布局

现在项目已经创建, 我们可以开始修改并创建我们自己的应用相关的代码了.

返回页首

5. 创建消息包

让我们来通过创建一个MessageBundle文件正式开始我们的应用. 这是一个简单的属性文件, 它将保存所有的消息字符串以及相关的主键. 然后这个消息包可以用在我们的任何JSP文件中来让我们的应用很容易的支持国际化语言. 作为类比, Struts 在这个领域提供了相似的支持, 通过使用ApplicationResources.properties 文件, 以及不同的标签, 以及bean标签所允许的消息包属性来完成这套功能.
在 JSF里面, 我们可以在JSP页面里加入一行代码来加载消息包:

注意: 这一行代码创建了一个生命周期为页面的消息包, 这个包可以稍后在页面中通过变量名'bundle'来进行引用, 可以用来查找消息主键, 然后返回对应的消息值.

在创建消息包文件的时候, 先在源代码目录创建包 com.jsfdemo, 通过右键点击源代码目录, 然后选择弹出的菜单中的New > Package即可完成. 要创建消息包文件, 我们使用新建文件向导, 右键点击项目的’src’目录, 在弹出的菜单中选择New > File , 如下图 5.1 所示.

图 5.1: 创建消息包文件

当指定新建文件的保存位置时, 选择 Browse..., 选中目录 /JSFLoginDemo/src/com/jsfdemo, 将文件命名为 MessageBundle.properties, 然后选择 Finish.

新建消息包文件成功后, 我们需要为每个在JSP里面需要显示的标签或者字符串以键值对的方式添加到属性文件中.复制图5.2中的内容到你的消息包文件然后保存它:

MessageBundle.properties

user_name_label=User Name:
user_password_label=Password:
login_button_label=Login

图 5.2: MessageBundle.properties 文件内容

现在我们的 MessageBundle 创建完毕了, 接下来我们要创建受管Bean(ManagedBean), 它将处理我们的用户登录操作.

返回页首

6. 创建受管 Bean

在这一部分我们将会看到如何创建ManagedBean , 这个Bean将会执行登录JSP页面所提示的登录操作, 以及保存用户输入的用户名和密码. 出于演示的目的,我们的登录操作知识简单的检查用户名和密码是不是都是 "myeclipse", 然后将用户重新指引到userLoginSuccess.jsp 页面. 否则它会返回到登录页面.

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

图 6.1: 打开并准备编辑 faces-config.xml 文件

在 MyEclipse 4.0 中 faces-config.xml 编辑器已经比以前的版本有所增强, 你不仅可以创建和管理应用程序流程(浏览规则 Navigation Cases), 还可以通过大纲(Outline)视图来创建/修改并管理所有资源. 你可以点击大纲视图右上角的下箭头按钮来添加新的bean, 如图6.2:

图 6.2: 通过大纲视图启动 ManagedBean 向导

现在你会看到新建Managed Bean 向导对话框; 请按照下面的图6.3和6.4所示来输入值:

图 6.3: 设置新 ManagedBean 的类和属性

图 6.4: Managed Bean 向导完成页面

你现在会注意到新的 UserBean 被添加到 Outline 视图 , 如图 6.5 所示:

图 6.5: UserBean 现在显示在 Outline 视图

同时新建的UserBean.java 源文件也在 Java 编辑器中打开了:

图 6.6: UserBean Java 源代码在编辑器中打开

注意我们的两个属性(username 和 password)的getters 和 setters 方法已经自动生成了, 所以对这个类唯一需要做的就是添加并实现loginUser 方法, 这个方法将会在用户登录时调用.

下面的图6.7显示了loginUser方法的代码片断. 请将这个代码复制粘贴到你自己的文件里, 并添加必要的新的类的import语句:

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";
    }

图 6.7: 新建的 UserBean.java 文件中的 loginUser 代码片断

仔细看看 bean 的代码, 我们可以注意到一些独特之处.例如, UserBean 类并没有继承或者实现绑定到 JSF 的任何类或者接口. 它仅仅是一个简单的包含了额外的逻辑来执行有用的操作的 JavaBean. 用 Struts 的术语来说, 它包含了Struts Form 和 Struts Action的所有功能, 方便的合并在一个类中.
另一个和 Struts 的不同之处是这些方法没有返回任何特殊的类, 例如ActionForward, 因为导航信息是在faces-config.xml部署描述符中通过配置完成的. 而且, 在第 8部分我们将展示如何创建并配置这个描述.

返回页首

7. 创建 JSP 页面

在这一小节里面将集中精力为我们的示例JSF应用来创建JSP页面, 来模拟一个简单的网站常见的登录页面. 最后的结果只需要2个JSP页面,一个用来提示用户来登录,另一个用来告诉用户登录成功. 我们把这两个页面分别命名为 loginUser.jsp 和 loginUserSuccess.jsp. 为了简单起见, 如果尝试登录的时候验证身份失败, 就将用户重定向回页面loginUser.jsp. 为了避免引起混淆, 我们没有在这个例子里使用任何验证机制, 不过你可以很容易的为JSF的inputText/Secret 组件添加验证器. 我们将使用这些输入框来验证用户输入的值的长度并且可以在登录失败时给用户显示错误信息.

另一个 MyEclipse 4.0 中的新功能是我们可以为JSF应用程序创建JSP页面, 通过在 MyEclpse JSF 编辑器中修改文件faces-config.xml 来实现. 所以请确保文件依然保持打开然后我们可以开始创建我们的userLogin.jsp 页面.

要创建我们的userLogin.jsp 页面, 首先需要先点击一下 JSP 按钮 , 然后点击到画图板上. 当新建 JSP 向导对话框弹出时, 根据图 7.1 的显示在 File Name (文件名) 输入框中输入值并选择 JSF 模版:

图 7.1: 使用 faces-config.xml 编辑器创建 userLogin.jsp

现在我们也可以使用同样的方式来创建userLoginSuccess.jsp:

图 7.2: 使用 faces-config.xml 编辑器创建 userLoginSuccess.jsp

接着我们可以打开页面 userLogin.jsp 来给我们的应用加入功能:

图 7.3: 开始编辑 userLogin.jsp 页面

图 7.3 需要注意是MyEclipse(MyEclipse JSP 设计器)编辑器底部的一些面板, 你可以自己选择来编辑这个页面在不同的模式:源代码模式, 设计模式, 设计/源码模式或者预览. 在这个示例中我们切换到设计/源码模式, 因为这样可以很容易的在编辑页面时同时看到两个视图. 显示结果如下图 7.4所示:

图 7.4: 切换到设计 / 源码模式并且展开 JSF 组件板

现在, 我们需要对这个页面进行如下修改:

给username添加一个h:inputText 组件
给password添加一个 h:inputSecret 组件
给username inputText 添加一个 h:outputLabel
给 password 添加一个h:outputLabel

注意 : 在 4.0 版里面的 JSF 设计器不支持从 MessageBundle 中读取值显示在 outputLabel, 所以为了能够在设计器中看到我们的 outputLabels , 我们将在代码中手工修改他们来将他们的值绑定为 MessageBundle 中的值 . 这个问题将在 MyEclipse 4.1 版本修正 ( 译者注 : 现在已经是 MyEclipse 6.0 了 , 这个问题应该早已被修正了 ).
要做的第一件事就是删除默认的模版文字, 然后手工键入我们的资源包的基础名字然后我们可以使用MessageBundle. 这个JSP最后将会如图 7.5这样结束:

图 7.5: 删除模版文字并且向 JSP 页面添加我们的 MessageBundle

图 7.5a: 创建新表单

在图 7.5a 我们创建了新的HTML表单元素来包含我们的登录控件. 现在我们将会真正的创建输入文本框!

现在我们给username创建h:inputText组件, 参考图 7.6 和 7.7:

图 7.6: 添加新的 inputText 组件

图 7.7: 添加新的 inputText 组件 ( 续 )

现在我们添加我们的 h:inputSecret 组件 (没有标签):

图 7.8 添加新的 inputSecret 组件

图 7.9 添加新的 inputSecret 组件 ( 续 )

现在给我们的输入组件都添加outputLabel, 首先是我们的userLabel:

图 7.10: 给 userName 添加 outputLabel 组件

我们也可以用同样的方式给我们的h:inputSecret 组件添加一个标签. 完成之后, 像刚刚所提到的那样, 让我们手工来更改h:outputLabel 组件来使它绑定到我们的MessageBundle , 这样我们可以在设计器里面看到它, 最后看起来就像这样:

图 7.11: 给我们的标签添加outputText 组件

请确保userName 和 password 两个标签都做了这样的修改.

好了, 是时候加入我们的登录按钮了, 加入这个组件的方式和加入其它组件的方式一摸一样, 如图 7.12 和 7.13 所示:

图 7.12: 添加一个新的commandButton 组件

图 7.13: 添加一个新的 commandButton 组件 ( 续 )

现在我们将会得到一个大致样子如下所示的页面:

图 7.14:几乎完工的userLogin.jsp 页面

你也许已经注意到全部内容都显示在一行看起来很丑, 所以让我们来添加一些空格让这些组件分布到多行里面(译者注: 用Shift+Enter输入软换行也许会更合适):

图 7.15: 布局完好的 userLogin.jsp 页面

现在 userLogin.jsp 页面完事了, 让我们快速完成更简单的userLoginSuccess.jsp 页面. 打开文件然后修改它, 只需要简单的添加一行数据来指出已经登录的用户的名字, 如图 7.16 所示:

图 7.16: 修改 userLoginSuccess.jsp 页面来输出用户名

现在我们创建了两个页面, 剩下的唯一的事情就是把他们用正确的导航规则(Navigation Case)连接到一块, 这个可以通过可视化的修改 faces-config.xml 文件来完成, 所以先要打开这个文件. 文件打开后, 进行下列操作来创建导航规则:

点击Navigation Case 工具按钮
点击 userLogin.jsp文件
然后点击到userLoginSuccess.jsp 文件
这是将会出现一个向导来提示你创建导航规则.

下面的图 7.17 和图 7.18 用来创建成功(success) 浏览的导航规则. 为了创建失败(failure) 导航规则, 我们简单的重复如上的步骤,只不过点击两次文件userLogin.jsp , 来创建一个循环的导航规则(自己导航到自己).

图 7.17: 创建 success 导航规则

图 7.18: 创建 success 导航规则 ( 续 )

当这两个导航规则创建完成后, 配置文件将会看起来如下所示:

图 7.19: 检查应用的导航规则

现在我们已经创建了所有的JSP页面, 并且正确的加入了导航规则, 剩下唯一要做的事情就是运行了!

返回页首

8. 运行应用程序

在这一小节里将会快速的展示我们的应用运行时候是什么样子.
这里使用 MyEclipse 来发布我们的程序到Tomat 5然后启动服务器, 这样就可以运行我们的应用了. 关于如何设置应用服务器以及通过MyEclipse进行发布的完整的信息请参考应用服务器快速入门. 为了仅仅运行这个例子, 我们假定Tomcat 5已经配置完毕并且只需要发布程序到上面即可. 发布程序可以通过Manage Deployments(管理发布)对话框来进行, 这个对话框可以通过下列步骤来打开: 在Package Explorer视图中右键点击项目文件出现的弹出菜单中, 选择MyEclipse > Add / Remove Deployments(添加/删除发布)... Manage Deployments 对话框, 如图 8.2 所示, 将会启动(译者注:另一种方式是通过点击工具栏上的发布按钮). 要添加发布, 在New Deployment(新发布)向导中, 点击 Add(添加)按钮, 然后这时候New Deployment(新建发布)向导将会打开.

图 8.1: 打开管理发布对话框

图 8.2: 为我们的项目新建部署

选择服务器 Tomcat 5, 发布类型为散包部署(exploded archive), 然后选择 Finish 按钮, 如图 8.2 所示. 当向导执行结束后, 部署管理器将会显示发布成功. 如图 8.3 所描述的那样. 现在部署已经完成, 你可以选择 OK 来关闭对话框.

图 8.3: 部署成功

这时候Tomcat 5 服务器可以通过 Eclipse 主工具栏中的Tomcat 5 管理菜单中选择Start 来启动, 如下图 8.4 所示.

图 8.4: 启动 Tomcat 5

服务器的日志输出将会被重定向到 Eclipse Console(控制台)视图. 从图8.5中显示的日志中, 很明显的可以看到服务器启动成功了.

图 8.5: Tomcat 5 启动日志

一旦 Tomcat 5 运行了, 我们就可以通过打开MyEclipse Browser(浏览器)视图来进行测试. 这个步骤可以通过点击如图8.6所示的浏览器按钮来完成.

图 8.6: 打开网络浏览器视图

在浏览器的地址栏里, 输入 http://localhost:8080/JSFLoginDemo/userLogin.faces 来激活样例应用, 如图8.7所示.

注意 :URL 以 .faces结尾而不是 .jsp 的原因是因为在上面, 我们将FacesServlet映射到了*.faces 扩展名, 这意味着为了能使我们的JSF获得机会来处理请求并且构造组件树, 我们必须使用 .faces 扩展名来访问真正的页面. 如果你不这样做,你将获得一个异常信息,包含下列信息: "FacesContext cannot be found".

图 8.7: 访问示例应用

现在在用户名和密码框都输入 myeclipse , 然后点击 Login 来看到程序的执行!

图 8.8: 正在登录 ...

图 8.9: 登录成功

我们可以看到导航规则起了作用, 我们验证后就被定向到了userLoginSuccess.jsp 页面, 并显示了我们的名字. 当然这个应用非常简单, 但是它传达了使用 MyEclipse 开发JSF 应用的基本步骤.

返回页首

9. 总结

在这个示例中我们了解了使用MyEclipse Enterprise Workbench 来开发简单的 JSF 应用程序的步骤. 如果你想下载压缩过的这个示例的MyEclipse项目源代码包, 请点击这里. 这个代码总结了对JSF的介绍. 更多的快速入门文档都可以访问, 包括介绍和Web项目工作,修改, 应用程序配置, 企业应用项目以及数据库开发. 要获取更多信息请访问 MyEclipse 快速入门知识库 .

返回页首

10. 用户反馈

我们欢迎所有建设性的反馈信息. 如果你有评论或者如何改进这个文档的电子, 请访问我们的支持站点的文档论坛(Documentation Forum). MyEclipse Documentation Forum

返回页首

BeanSoft 2007-09-24 22:07 发表评论

转: MyEclipse JSF 开发指南(图片已修正)

BeanSoft — Thu, 20 Sep 2007 03:08:00 GMT

http://myeclipseide.com/images/tutorials/me_remote_doc/jsf/index.html

JSF Quickstart

Last Revision: September 26, 2005

Outline

1. Preface

This document was written using Sun JDK 1.5.0, Eclipse 3.1 and MyEclipse 4.0. If you notice discrepancies between this document and the version of Eclipse/MyEclipse you are using to perform the install that make it difficult or impossible to follow this guide, please see the User Feedback section on how to report the issue.

Back to Top

2. Introduction

In this tutorial we will be walking through a small JSF demo application using MyEclipse Enterprise Workbench. Previous knowledge of JSF and/or MyEclipse is not necessary, but would be helpful.
Since Struts is such a prevalent web application framework, similarities between JSF and Struts will be noted, where appropriate, to help the reader with previous Struts experience. However, if you have no prior experience with Struts, you may feel free to skip these sections .

Back to Top

3. Requirements

Below is a list of software used by this guide:

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

For this demo the User Name is "myeclipse" and the Password is "myeclipse" as well.

Note: After installing the JDK and restarting your computer, be sure to install Eclipse then MyEclipse next followed by Tomcat. After all the software have been installed, be sure to setup the Tomcat 5 connector in MyEclipse accordingly; using the correct Tomcat Home directory and valid JDK that you just installed. You may refer to the Using Application Servers Quickstart guide if you don't know how to setup Tomcat in MyEclipse.

Back to Top

4. New Project Setup & Structure

To organize our development artifacts, we will need to create a new Web Module Project in MyEclipse that has JSF Capabilities added to it. You can create a web project using the wizard located at File > New > Other > Project > J2EE > Web Project, as shown in Figure 4.1, below.

Figure 4.1: Create a new web project

Figure 4.2: Web Project Wizard Dialog

The wizard will allow you to customize your project settings by entering your preferences into the dialog fields, as demonstrated in Figure 4.2.

Note: It is popular when developing JSF applications to also use the JSTL libraries, so selecting add "JSTL Libraries" during project creation is recommended. However, it is also possible to add the JSTL libraries later, via the "Add JSTL Libraries" item from the MyEclipse context menu.

Once the Web Project is created, we need to add JSF Capabilities to it. This is done by right clicking on the root of our project in the Package Explorer View, and selecting MyEclipse > Add JSF Capabilities, as shown in Figure 4.3.

Figure 4.3: Adding JSF Capabilities to a Web Project

The default values for the JSF dialog are fine for the purposes of this tutorial. Advanced users may perform additional configuration by changing the default settings in the dialog, as shown in Figure 4.4.

Figure 4.4: Configuring JSF Capabilities

After the wizard completes, the project structure will look like what is shown in Figure 4.5.

Figure 4.5: Project Layout After Configuration

Now that the project has been created, we can start editing and creating our application.

Back to Top

5. Creating the Message Bundle

Let's start off our new application with the creation of the MessageBundle file. This is a simple property file that stores all our messages along with their associated keys. Then the bundle can be used in any of our JSP pages to allow our application to be easily internationalized. As an analogy, Struts provided similar support in this area by using the ApplicationResources.properties file, the various tags, and the message bundle attributes that the bean tags accepted.
In JSF, we can load a message bundle into a page with the line:

Note: This line of code creates a page-scoped message bundle that we can reference later in the page via the 'bundle' variable name, use to lookup messages keys, and return the associated message value.

Before creating the message bundle file, create a com.jsfdemo package in the source folder by right-clicking it and selecting New > Package. To create the message bundle file, we'll use the New File Wizard that is accessed from the context menu of the project by right-clicking on the project's 'source' folder and selecting New > File, as shown in Figure 5.1 below.

Figure 5.1: Creating the Message Bundle file

When specifying the file location, select Browse..., choose the directory /JSFLoginDemo/src/com/jsfdemo, name the file MessageBundle.properties, and select Finish.

After successfully creating the new message bundle file, we need to fill the file with key/value pairs for each label or text string that we want to display in the JSP page. Paste the contents from Figure 5.2 into your message bundle file and save it:

MessageBundle.properties

user_name_label=User Name:
user_password_label=Password:
login_button_label=Login

Figure 5.2: Contents of MessageBundle.properties

Now that we have the MessageBundle complete, in the next section we will create the ManagedBean now that will handle our user logging in.

Back to Top

6. Creating the Managed Beans

In this section we'll see how to create the ManagedBean that will perform the login operation when prompted by the login JSP page as well as store the user name and password entered by the user. For the purpose of this demo, the login operation simply checks if the username and password are both "myeclipse" and then redirects the user to the userLoginSuccess.jsp page. Otherwise it sends them back to the login page.

First open up the faces-config.xml file with the MyEclipse JSF Editor:

Figure 6.1: Opening faces-config.xml file for editing

With MyEclipse 4.0 the faces-config.xml editor has been enhanced from previous releases, not only can you create and manage your application flow (Navigation Cases) you can also create/edit and manage all the resources that go into the config file from the Outline View. You will click the down arrow in the top right corner of the Outline View in order to add the new bean as shown in Figure 6.2:

Figure 6.2: Launch the ManagedBean wizard from the Outline View

You will then be presented with the new Managed Bean wizard; Fill out the values as shown in Figures 6.3 and 6.4 below:

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

Figure 6.4: Managed Bean Wizard Final Page

You will now notice that the new UserBean was added to the Outline View as shown in Figure 6.5:

Figure 6.5: UserBean now shown in the Outline View

And the new UserBean.java source file will also be opened in the java editor:

Figure 6.6: UserBean Java source opened up in an editor

Notice that the getters and setters for our two properties (username and password) were already generated for us, so the only thing we need to add to this class is the implementation of the loginUser method that will be called to process the user login.

The code snippet for the loginUser method is in Figure 6.7 below. Please copy and paste it into your file, adding any new imports as necessary:

UserBean.java

Figure 6.7: loginUser code for the new UserBean.java file

Looking at the bean code, we can notice some unique properties about it. For example, the UserBean class doesn't extend or implement any classes or interfaces tied to JSF. It is simply a javabean that includes the additional logic to perform a useful operation. In Struts terms, it contains all the functionality of a Struts Form and a Struts Action, conveniently located in one class.
Another thing to note is that unlike Struts, these methods do not return special classes, like an ActionForward, because navigation is specified externally in a declarative fashion in the faces-config.xml deployment descriptor. And, in Section 8 we will show how this descriptor is created and configured.

Back to Top

7. Creating the JSP Pages

In this section we are going to focus on creating the JSP pages for our example JSF application, which will mimic a simple website login screen. As a result, we will only need 2 JSP pages, one to prompt the user to login and the other to indicate that login was successful. We will call these pages loginUser.jsp and loginUserSuccess.jsp, respectively. For simplicity, if there is an authorization error during the login attempt, we will redirect the user back to the loginUser.jsp page. To avoid confusion, we are not using any validation in this demo, but you can easily add validators to the two inputText/Secret JSF components. We will use these fields to validate the user's entry for length and additionally display an error message if the login was incorrect.

Another new feature in MyEclipse 4.0 is the ability to create the web pages for our JSF application by editing the faces-config.xml file in the MyEclipse JSF Editor. So make sure that file is still open and we can get started creating our userLogin.jsp page.

To create our userLogin.jsp page we are going to first click the JSP button, then click on our canvas. When the new JSP wizard comes up, type in the File Name and select the JSF template as shown in Figure 7.1:

Figure 7.1: Creating userLogin.jsp using the faces-config.xml editor

We can also create our userLoginSuccess.jsp now in the same manner:

Figure 7.2: Creating userLoginSuccess.jsp using the faces-config.xml editor

Let's start working on our application now by opening up the userLogin.jsp page:

Figure 7.3: Begin editing the userLogin.jsp page

Something to notice from Figure 7.3 are the tabs that run along the bottom of the MyEclipse editor (MyEclipse JSP Designer), you have your choice to edit this page in Source mode, Design mode, Design/Source mode or just Preview. For this demo we will switch to the Design/Source as it is very handy to have both views available while editing a page. What you will see right away looks very similar to Figure 7.4 below:

Figure 7.4: Switched to Design/Source mode and expanded JSF palettes

Now, what we need to do now on this page is:

Add an h:inputText component for the user name
Add an h:inputSecret component for the password
Add an h:outputLabel for the user name inputText
Add an h:outputLabel for the password

NOTE: In version 4.0 the JSF designer does not support rendering the MessageBundle values for outputLabel, so in order to see our outputLabels in the designer, we are going to manually change them in the code to wrap outputText components that have their values bound to our MessageBundle. This will be fixed in MyEclipse 4.1 release.
First thing we need to do is remove the default template text as well as type in our bundle basename so our page can use our MessageBundle. We will end up with JSP that looks like Figure 7.5:

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

Figure 7.5a: Create the new form

In Figure 7.5a we create the new HTML form element that will contain our login controls. Now we need to actually create the input text boxes!

Now let's create our h:inputText component for the user name, this is shown in Figures 7.6 and 7.7:

Figure 7.6: Adding new inputText component

Figure 7.7: Adding new inputText component continued

Now let's add our h:inputSecret component (no labels yet):

Figure 7.8 Adding new inputSecret component

Figure 7.9 Adding new inputSecret component continued

Now let's add the outputLabel's for both of our input components, starting with our userLabel:

Figure 7.10: Adding outputLabel component to our userName component

We will also need to add a label for our h:inputSecret component in the same manner. After we are done, as mentioned above, let's manually change our h:outputLabel components to wrap h:outputText components that are bound to our MessageBundle so we can see them in the designer, it will look something like this:

Figure 7.11: Adding outputText components to our labels

Be sure to make the modification to both the userName label and password label.

Now it is time to add our login button, we will do that almost identically to how we have added the other components so far, as shown in Figures 7.12 and 7.13:

Figure 7.12: Adding a new commandButton component

Figure 7.13: Adding a new commandButton component continued

Now we have a page that looks something like this:

Figure 7.14: Our almost-complete userLogin.jsp page

You might notice that everything looks pretty ugly on 1 line, so let's add some space to put things on separate lines:

Figure 7.15: Nicely laid out userLogin.jsp page

Now that our userLogin.jsp page is done, let's quickly do our userLoginSuccess.jsp page which is much simpler. Open that file up and edit it, simply adding a line to print out the name of the user that logged in as shown in Figure 7.16:

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

Now that we have created our two pages, the only thing left for us to do is hook them together with proper Navigation Cases, that is done by visual editing our faces-config.xml file, so open that file. After the file is open for editing, perform the following steps to create the navigation case:

Click the Navigation Case tool
Click your userLogin.jsp file
Then click on your userLoginSuccess.jsp file
You will be prompted with a wizard to create the navigation case.

Follow Figures 7.17 and 7.18 for creating the success navigation case. In order to create the failure navigation case, we simply do the same steps as before but click twice on the userLogin.jsp file, in order to create a circular navigation case.

Figure 7.17: Creating the success navigation case

Figure 7.18: Creating the success navigation case continued

After we have created both navigation cases, our file will look something like this:

Figure 7.19: Reviewing navigation cases for our app

Now that we have created all our JSP pages and added our Navigation Cases correctly, the only thing left is to run our application!

Back to Top

8. Running the Application

In this section we will quickly show what our new application looks like when its running.
We will use MyEclipse to deploy our application to Tomcat 5 and then launch the server so we can run the application. Complete details in how to set up an application server and deploy to it within MyEclipse is available in the Application Server Quickstart. For the purposes of this example, we're going to assume that Tomcat 5 has already been configured for our use and we simply need to deploy our application to it. Deployment is done by the Manage Deployments dialog, which can be activated from the project's context menu by right-clicking on the project in the Package Explorer View and selecting MyEclipse > Add / Remove Deployments... The Manage Deployments dialog, shown in Figure 8.2, will be launched. To add a deployment, simply click the Add button and the New Deployment wizard, will be opened.

Figure 8.1: Open the Manage Deployments Dialog

Figure 8.2: Creating the new deployment for our project

Select Tomcat 5 as the server, exploded archive as the deployment type, and select Finish as shown in Figure 8.2. After the wizard completes execution, the Deployment Manager will show that the deployment was successful. This is depicted in Figure 8.3. Now that the deployment has completed, you can select OK to close the dialog.

Figure 8.3: Successful Deployment

At this point the Tomcat 5 server can be started by selecting Start from the Tomcat 5 management menu from the main Eclipse toolbar, as shown in Figure 8.4, below.

Figure 8.4: Starting Tomcat 5

The output from the server log will be redirected to the Eclipse Console View. From the log shown in Figure 8.5, it is evident that the sever started successfully.

Figure 8.5: Tomcat 5 Startup Log

Once Tomcat 5 is running, we can test it by opening the MyEclipse Browser View. This can be done by clicking the Browser button as shown in Figure 8.6.

Figure 8.6: Opening the Web Browser View

In the browser's address bar, enter http://localhost:8080/JSFLoginDemo/userLogin.faces to activate the example application, as shown in Figure 8.7.

NOTE :The reason the URL ends in .faces and not .jsp is because above, we mapped our FacesServlet to the *.faces extension, that means in order for JSF to be given a chance to process the request and build out the component tree, we must use the .faces extension to access the actual pages. If you don't, you will get an exception along the lines of "FacesContext cannot be found".

Figure 8.7: Accessing the Example Application

Now type in myeclipse for the user name and password and click Login to see your app in action!

Figure 8.8: Logging in...

Figure 8.9: Successful Login

We see our navigation rules kick in as we are validated and directed to the userLoginSuccess.jsp page where our name is displayed. While this application is certainly simple, it does convey the basics of developing a JSF application using MyEclipse.

Back to Top

9. Summary

In this demo we took a look at developing a simple JSF application using MyEclipse Enterprise Workbench. If you would like to download a zipped up version of the MyEclipse project used to create this demo, click here . This concludes your introduction to JSF. Additional Quickstart documents are available that introduce working with Web Projects, editing, application server configuration, enterprise application projects and database development. For more information visit the MyEclipse Quickstart library .

Back to Top

10. User Feedback

We welcome all constructive feedback. If you have comments or ideas for how to improve this document please go to the Documentation Forum on our Support Site. MyEclipse Documentation Forum

Back to Top

BeanSoft 2007-09-20 11:08 发表评论

《jsf入门》简体中文版.rar 电子书下载

BeanSoft — Thu, 10 May 2007 06:38:00 GMT

《jsf入门》简体中文版.rar 142KB

来源: http://www.javaworld.com.tw/confluence/pages/viewpage.action?pageId=2630

今天费了好大劲找到了简体版的下载,和大家分享.

BeanSoft 2007-05-10 14:38 发表评论

转载: 来自 IBM 的 JSF 中文入门教程

BeanSoft — Thu, 26 Apr 2007 03:22:00 GMT

j-jsf.zip 976KB

内容有点老, 不过学习够用了.

来源: http://www-128.ibm.com/developerworks/cn/views/java/tutorials.jsp?cv_doc_id=85059

BeanSoft 2007-04-26 11:22 发表评论