MyEclipse JSF 入门学习
目录
JSF Quickstart 中文版... 1
1. 前言... 1
2. 介绍... 1
3. 系统需求... 2
4. 设置新项目和目录结构... 2
5. 创建消息包... 7
6. 创建受管 Bean. 8
7. 创建 JSP 页面... 14
8. 运行应用程序... 32
9. 总结... 36
10. 用户反馈... 37
--------------------------------------------------------------------------------
1. 前言
这个文档基于下列环境编写: Sun JDK 1.5.0, Eclipse 3.1 和 MyEclipse 4.0. 如果你注意到这个文档和你正在操作的Eclipse/MyEclipse的版本不一致, 在使用这个向导时遇到困难或者无法根据向导进行操作, 请参考 用户反馈 部分来了解如何汇报这个问题.
2. 介绍
在这个教程中我们将使用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 /> 标签, 以及bean标签所允许的消息包属性来完成这套功能.
在 JSF里面, 我们可以在JSP页面里加入一行代码来加载消息包:
<f:loadBundle basename="com.jsfdemo.MessageBundle" var= "bundle"/>
注意: 这一行代码创建了一个生命周期为页面的消息包, 这个包可以稍后在页面中通过变量名'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