NetBeans中JSF应用开发.doc

这是JSF技术系列讲座的第1个，整个讲座包括两大部分，第1部分是在NetBeans中的开发过程，第二部分是JSF相关技术的全面介绍。JavaServer Faces是Web应用中构建用户接口组件的标注Java API。可以把JSF框架想象成充满随时可以使用的组件的工具箱，这些组件可以在Web应用中快速和方便的重用。这些组件可能是简单的，例如存取用户数据的输入框，可能非常复杂，例如使用弹出式日历来格式化日期的输入框。可以把这些组件嵌入到JSP页面，然后使用框架来处理不同页面之间的导航。目标：创建一个JSF应用。使用JSF框架创建一个Web应用在NetBeans中，可以在创建应用的时候为Web应用添加JSF支持，也可以为已有的应用添加JSF支持。Sun应用服务器已经包含了JSF库，所以不需要下载和安装。我们在创建应用的时候添加JSF支持。1. 选择 File New Project (Ctrl-Shift-N), 从Web目录中的 Web Application，点击Next. 2. 指定工程的名字为jAstrologer, 并为工厂指定位置，选择Sun应用服务器作为服务器，设置Java EE的版本为Java EE 5，然后点击Next. 3. 选中JavaServer Faces 复选框，然后点击Finish. NetBeans完成Web应用的创建。展开工程的Libraries 中的 Sun Java System Application Server节点.可以看到JSF库，例如jsf-impl.jar已经添加到classpath中了。展开Configuration Files可以看到IDE已经创建了faces-config.xml文件，该文件控制Web应用中JSF组件的行为。IDE还在web.xml部署描述符中注册了FacesServlet。FacesServlet处理JSF框架所控制的JSP页面之间的导航。创建JSP页面我们将创建一个新的JSP页面greeting.jsp，该页面作为欢迎界面并且用于收集他们的信息,然后创建一个success.jsp，为用户显示祝贺信息。创建欢迎页面1. 右键点击工程节点，选择 New 选择 JSP，命名为greeting, 点击Finish. 确保选中JSP File (Standard Syntax) 。 2. 现在需要在JSF文件中声明JSF标签库，修改下面的代码；%-%改成:注意可以使用代码生成器帮助添加标签名字和属性。代码生成器同样可以帮助你添加标签库的URI。3. 把title和h1标签改成Welcome to jAstrologer. 4. 向文件中添加一个JSF表单。在Palette中，点击JSF Form按钮，然后拖拽到h1标签的下面。在对话框中，选择Empty Form，然后点击OK。IDE会生成如下代码（粗体部分）。Welcome to jAstrologer 5. 我们准备使用inputText组件获取用户输入，实用commandButton组件提交表单。在源文件编辑区，把h:form元素的内容修改成： Enter your name: Enter your birthday: 创建成功的页面现在要创建一个仅仅输出Congratulations的页面。1. 像上面一样创建一个新的JSP文件，命名为success。 2. 把文件的内容修改成： Congratulations Congratulations Youve successfully registered with jAstrologer. 注意：我们这里使用的是纯HTML，所以不需要声明JSF标签库。设置页面导航JSF框架中页面的导航是由faces-config.xml文件控制的，该文件位于工程窗口中的Configuration Files节点下。对于每个页面，你可以设置一个包含一个或多个导航情况的导航规则。现在，我们仅仅将commandButton的submit动作提交给success.jsp，因此不论用户在输入框中输入什么信息，都可以看到成功的消息。1. 双击faces-config.xml打开Source Editor。 2. 右键单击文件的任何地方，选择Java ServerFaces，然后选择 Add Navigation Rule。然后在Rule from View 输入框中输入/greeting.jsp，然后输入规则的描述（可选的），然后点击Add。在faces-config.xml中生成了下面的代码： handle user input /greeting.jsp 3. 在faces-config.xml中右键单击，然后选择Java ServerFaces选择Add Navigation Case，设置如下：n From View: /greeting.jspn From Outcome: submitn To View: /success.jsp点击Add。在faces-config.xml中生成了下面的代码（粗体部分）： handle user input /greeting.jsp submit /success.jsp 配置和运行程序现在对IDE进行设置，当运行这个应用的时候，显示greeting.jsp，然后测试这个应用。1. 右键点击工程，然后先择Properties. 2. 点击Run，然后在Relative URL输入框中输入/faces/greeting.jsp，然后点击OK。 3. 右键点击工程，然后选择Run。IDE会build工程，启动应用服务器，部署应用，并在浏览器中显示下面的页面。当您点击Submit按钮的时候，可以看到下面的输入结果：目标：在JSF应用中使用管理Bean在上一节中，我们使用JSF组件创建了一个简单的web应用。但是，我们的Web应用还不能做任何有意义的事情。为了丰富我们的JSF应用的功能，可以建立辅助Bean（Backing Bean）与UI组件的关联。辅助Bean又称为JSF管理Bean，是一个普通的JavaBean组件，但是他们的属性和方法可以供JSF组件访问。在我们的例子中，我们将创建一个UserBean管理Bean，有两个属性name和birthday。1. 右键点击工程，选择New，然后选择 File/Folder。在Web 分类中，选择JSF Managed Bean template，然后点击 Next。2. 把bean命名为UserBean，放在astrologer.user中，其他的设置和默认值不用修改，然后点击Finish。IDE会在源代码编辑区打开UserBean.java，并在faces-config.xml中添加下面的bean声明： UserBean astrologer.user.UserBean request 3. 在UserBean.java中添加唉下面的域声明public class UserBean String name; String birthday;4. 然后为域生成getter和setter方法。在文件的任何地方右键点击，然后选择Refactor中的 Encapsulate Fields。选择对话框中的Next，然后在重构窗口中重构。IDE把域的访问控制修改成private，然后创建getter和setter方法。5. 在greeting.jsp中，作如下修改（粗体部分）。注意：UserBeans.java中可以使用代码完成器。 Enter your name: Enter your birthday: 6. 在success.jsp中添加JSF标签库声明，可以从greeting.jsp中拷贝粘贴。7. 通过点击控制窗口的JSF Form按钮并拖拽到原文件编辑器中的h1标记下面，为success.jsp添加一个空的JSF表单。8. 修改success.jsp如下： Congratulations Youve successfully registered with jAstrologer. Your name is Your birthday is 9. 右键点击工程，然后选择Run Project。当工程部署之后您会看到同样的欢迎界面。输入值并点击Submit，success.jsp会显示您输入的值，如下图所示：目标：使用标准的验证器和转换器设置某个域为必填的首先我们需要做的是确保用户为name域输入一些信息，我们可以通过使用inputText组件的required属性轻松做到。1. 打开greeting.jsp，然后修改inputText组件如下：Enter your name: 我们必须做的是给名字输入框一个ID，这样我们可以指定消息是哪个组件的消息。我们已经指定这个域是必填的，因此如果用户不输入任何信息，Web应用将显示错误信息。2. 运行工程，然后不输入任何信息就点击Submit，您将会得到如下错误信息：使用转换器现在我们需要把我们的生日作为日期来处理，而不是任意的字符串。JSF框架提供了很多转换器，使用这些转换器可以把文本转换成对象类型，例如布尔类型等等。在转换数据的过程中，要验证数据对于要转换成的数据类型来说是否有效。对于我们的生日输入域来说非常方便，因为我们可以指定日期的格式，对输入进行验证，并同时得到一个Date对象。1. 打开greeting.jsp，修改生日输入框inputText组件如下： Enter your birthday: (dd/mm/yyyy) 我们必修做的是给生日一个ID，这样我们可以指定消息显示的时候是对应哪个组件的。然后把转换器的格式设置为dd/MM/yyyy。如果用户输入的信息不能匹配这个格式，将重新显示greeting.jsp文件，并显示错误信息。我们同样指定了这个域是必须的，就像姓名域一样。2. 现在需要把UserBean.java中生日属性的类型修改为Date。打开UserBean.java，修改如下（粗体部分），并添加一个import语句，引入java.util.Date。 private String name; private Date birthday; . public Date getBirthday() return birthday; public void setBirthday(Date birthday) this.birthday = birthday; 3. 运行工程。如果不输入日期就点击Submit，你将得到下面的错误信息：如果你输入了一个无效的日期，你将得到下面的错误信息：目标：修改默认的错误消息每种类型的验证错误所显示的错误信息是由Mperties文件控制的，该文件位于jsf-impl.jar中的javax.faces包中。可以通过如下方式查看，展开Libraries Sun Java System Application Server jsf-impl.jar javax.faces，然后双击Mperties。你可以通过替换应用所使用的属性文件来创建自定义的消息。1. 右键点击jAstrologer工程，然后选择New File/Folder。在Other分类中选择Properties File，然后点击Next。把文件命名为MyMessages,输入文件夹位置：src/java/astrologer/ui，然后点击Finish。MyMperties文件显示在源代码编辑区。在Files窗口，展开文件夹src/java/astrologer/ui来查看文件。2. 把下面的属性从Mperties拷贝到MyMperties中：ponent.UIInput.REQUIRED=0: Validation Error: Value is required.javax.faces.converter.DateTimeConverter.DATE=2: 0 could not be understood as a date.javax.faces.converter.DateTimeConverter.DATE_detail=2: 0 could not be understood as a date. Example: 13. 修改属性的值：ponent.UIInput.REQUIRED=Please enter a value for this field.javax.faces.converter.DateTimeConverter.DATE=Please enter a valid date.javax.faces.converter.DateTimeConverter.DATE_detail=Please enter a valid date. Example: 14. 打开faces-config.xml (在Projects窗口的Configuration Files节点下)，并在faces-config主元素下输入下面的内容： . astrologer.ui.MyMessages 5. 右键点击应用，然后选择Run Project。如果你在必填域中不输入任何信息或者在生日输入框中输入了不正确的日期格式，应用将显示下面的错误信息。注意：那些在自定义属性文件中没有指定的信息将从jsf-impl.jar中的Mperties中获取。同样，您可以为错误信息指定一个CSS样式，然后通过如下方式在message标记中指定该样式。创建自定义验证器如果标准的JSF验证器不能满足您的要求，你可以编写自己的验证器。在我们的例子中，我们将编写一个验证器来验证一个字符串是否是一个合法的email。要创建一个自定义验证器，需要创建一个实现javax.faces.validator.Validator接口的类，并在faces-config.xml中配置，可以通过标记来使用验证器。1. 右键点击工程节点，然后选择New Java Class，把类命名为EmailValidator，把这个类放在包astrologer.validate中，然后点击Finish。2. 在类的声明中，实现Validator，如下：public class EmailValidator implements Validator 3. 使用提示来实现validate方法。4. 修改方法的签名，然后增加下面的代码： public void validate(FacesContext facesContext, UIComponent uIComponent, Object value) throws ValidatorException /Get the components contents and cast it to a String String enteredEmail = (String)value; /Set the email pattern string Pattern p = Ppile(.+.+.a-z+); /Match the given string with the pattern Matcher m = p.matcher(enteredEmail); /Check whether match is found boolean matchFound = m.matches(); if (!matchFound) FacesMessage message = new FacesMessage(); message.setDetail(Email not valid - The email must be in the format ); message.setSummary(Email not valid - The email must be in the format ); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ValidatorException(message); 5. 使用Alt+Shift+F 添加必须的import语句。(您应该选择引入java.util.regex.Matcher, java.util.regex.Pattern and javax.faces.application.FacesMessage.) 6. 打开faces-config.xml，然后添加下面的代码： . astrologer.EmailValidator astrologer.validate.EmailValidator 7. 打开greeting.jsp，然后添加email域： . Enter your name: Enter your email: Enter your birthday: .8. 运行工程，如果你输入了一个无效的email，你将会得到下面的错误：创建自定义转换器尽管使用必填域和转换器进行验证非常简单，但是也非常有限。例如，验证器可以验证生日域是一个有效的日期，但是不能验证日期是之前的日期。为了调整日期验证的方式，我们将创建一个自定义验证器。我们的验证器将验证日期的格式是正确的并且是过去的日期。如果遇到错误，验证器将显示相应的消息。要创建一个自定义转换器，你需要创建一个实现javax.faces.converter.Converter接口的类，并且在faces-config.xml中注册这个类。你可以通过标记来使用转换器。1. 右键点击工程节点，然后选择New Java Class，把类命名为MyDateConverter，并放在astrologer.convert包中，然后点击Finish。2. 在类的声明中，实现Converter接口，如下：public class MyDateConverter implements Converter 3. 使用IDE的提示来添加合适的import语句，并实现抽象方法。 (在前面部分，你使用了IDE提示来实现validate方法)。IDE生成两个方法：getAsObject and getAsString。4. 把下面的代码添加在方法getAsObject中(确保把方法声明中的String参数改成value): public Object getAsObject(FacesContext context, UIComponent component, String value) throws ConverterException String pattern = dd/MM/yyyy; SimpleDateFormat sdf = new SimpleDateFormat(pattern); Date nDate; try nDate = sdf.parse(value); catch (ParseException ex) FacesMessage message = new FacesMessage(); message.setDetail(Date is missing or not valid); message.setSummary(Date is missing or not valid); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ConverterException(message); if(nDate.getTime() new Date().getTime() FacesMessage message = new FacesMessage(); message.setDetail(Date is bigger than current date); message.setSummary(Date is bigger than current date); message.setSeverity(FacesMessage.SEVERITY_ERROR); throw new ConverterException(message); return nDate; 5. 修改方法的签名，并把下面的代码添加到getAsString方法中 (在方法签名中，确保把Object参数的名字修改为value)：public String getAsString(FacesContext facesContext, UIComponent uIComponent, Object value) return value.toString();6. 使用Alt+Shift+F添加必须的import语句。 (你应该选择引入java.text.ParseException和java.util.Date) 7. 代开faces-config.xml，然后添加下面的代码： astrologer.MyDateConverter astrologer.convert.MyDateConverter 8. 打开greeting.jsp更新表单：Enter your name: Enter your email: Enter your birthday: (dd/mm/yyyy) 9. 运行工程，当您输入一个无效的日期或者将来的日期，您将会看到下面的错误信息：NetBeans Visual Web JSF 应用程序开发入门 由 NetBeans 教程团队和维护团队贡献2007 年 12 月修订版本号：V6.0由 NetBeans 中文社区的 赵钟秋 翻译（2008 年 2 月）本教程将为您对 NetBeans IDE 6.0 中的 Visual Web JSF 应用程序开发提供一个快速参考。本教程向您展示了典型的 Web 应用程序开发阶段中如何使用 Visual Web JSF 应用程序的功能和 JavaServer Faces 1.2（Woodstock）组件。您不必以任何特殊的顺序阅读本教程。您可以快速浏览，然后在时间允许的时候返回各个章节。如果您更喜欢逐步渐进的教程，您也许首先要尝试 JSF Web 应用程序开发。目录-开始一个项目-创建 Web 页-向 Web 页添加组件-获得帮助-生成和测试 Web 应用程序-连接 Web 页并处理用户 Action-编辑 Java 代码-处理用户输入-存储和处理数据-连接到数据库-调试 Web 应用程序本教程可用以下技术和资源运作JavaServer Faces 组件/Java EE 平台1.2 和 Java EE 5*1.1 和 J2EE 1.4 Travel 数据库某些小节必需* 要发挥 NetBeans IDE 6.0 的 Java EE 5 性能的优势，请使用与 Java EE 5 规范完全兼容的应用服务器，例如 Sun Java System Application Server 9GlassFish。本教程是为 GlassFish v2 应用程序服务器而定制的。如果您正在使用其他服务器，请参考发行说明和 FAQ 以了解已知的问题和变通的方法。 开始一个项目项目相当于您的 web 应用程序的工作环境。当您在 NetBeans IDE 中新建一个 Visual Web JSF 应用程序项目并且您已经指定了 GlassFish V2 或者更新的版本，IDE 会创建一个使用 JavaServer Faces 1.2 组件的基于 Java EE 5 的 web 应用程序。默认情况下，这个 web 应用程序被创建在一个符合用于 web 应用程序的 Java BluePrints 项目规范的目录结构中。尝试1. 使用以下列表中适当的步骤启动 IDE：o Windows，Solaris 和 Linux。 双击 NetBeans 桌面图标。 o Mac。 在 MacOS 上，6.0 可执行程序被安装在 /Applications/NetBeans/ 目录下。双击该文件夹中的 NetBeans 图标。 2. 新建一个 Visual Web JSF 应用程序项目：a. 从主菜单中选择“文件”“新建项目”。 b. 在“新建项目”向导中，选择“Web”类别和“Web 应用程序”项目类型，并点击“下一步”。 c. 把项目命名为 GettingStarted。注意默认的项目位置。假如您喜欢，可以点击“浏览”并选择一个不同的位置。 d. 选择一个服务器和 Java EE 版本。例如，默认的服务器是 GlassFish V2，Java EE 5 是默认的 Java EE 版本。 e. 点击“下一步”。 f. 选择 Visual Web JavaServer Faces 框架并点击“完成”，在默认位置或者 c 步骤中选择的位置新建一个项目。 3. IDE 在选择的（或默认的）项目文件夹中创建项目目录，并命名为与项目名称相同的名字。 4. 探索“项目”窗口。如下图所示，“项目”窗口按照类别将内容分组。展开各个节点来看看每个分类中都有哪些类型。图 1：“项目”窗口5.6. 在“Web 页”节点下是“Page1.jsp”节点。IDE 默认创建这个页面并将它设为起始页面。节点旁的箭头标记 标志了此页面是起始页面。如果您想使用不同的页面作为起始页面，右键点击那个页面的节点并在弹出菜单中选择“设置为起始页”。 7. 点击“文件”标签，或者从主菜单中选择“窗口”“文件”，“文件”窗口将显示在前端。此窗口按照文件的物理存储组织它们。展开节点来看看目录结构。注意显示在“ApplicationBean1.java”节点旁边和它下面其它几个节点例如“Page1.java”节点旁边的 标记。此标记表示该文件需要被编译。当您生成项目时 IDE 会自动编译这些文件。 图 2：文件窗口8. 在图 2 中，注意 GettingStarted src java gettingstarted Page1.java 节点。这个 Java 类是 Page1.jsp 文件的辅助 bean。只要您向项目添加一个页面，IDE会同时为这个页面创建一个 .jsp 文件和一个 .java 文件。您将在下一节学习到更多关于 .jsp 和 .java 文件的内容。 了解更多 从主菜单中选择“帮助”“帮助内容”来打开帮助文件。在左边的“目录”窗格中，选择“Web 应用程序”“关于 Web 应用程序”“使用 Web 应用程序”。 创建 Web 页使用 Visual Web JSF 应用程序，您可以用 JavaServer Pages（JSP）技术和 page bean（也称为辅助 bean）替代 HTML 页面。JSP 页面是一个模板，它从服务器生成 HTML 响应被显示在浏览器（客户端）上。Page bean 包含了当服务器生成 HTML 响应时和当用户提交页面时执行的逻辑。当您在 Visual Web JSF 应用程序中添加一个 web 页时，IDE同时为您创建了一个 JSP 文件和一个 Java 源文件。您主要使用可视设计器和“属性”窗口来开发 web 页。IDE 修改 JSP 代码和 Java 代码来实现您的设计。您的大部分工作可以在可视设计器和“属性”窗口中完成。注意事项：IDE 生成的 JSP 页面是 JSP 文档。JSP 文档是一个 XML 文档，因此，必须是良好格式化的。虽然大部分 JSP 元素遵守 XML 语法，但还是有一些元素是不属于 XML 规范的，例如注释，声明，指令，表达式，和脚本。了解 JSP 文档语法，请参见 JavaServer Pages 语法参考。尝试1. 在“项目”窗口中，右键单击“Web 页”节点，选择“新建”“Visual Web JSF 页”，如下图所示。图 3：右键点击“Web 页”节点2. 接受默认的 Page2 作为文件名，点击“完成”按钮。IDE 将在编辑区域的可视设计器中打开 Page2，如下图所示。图 4：可视设计器3. 点击编辑工具栏的“Java”按钮查看 page bean 的源代码，如下图所示。当编辑区域显示 Java 源代码时，“导航”窗口列出了所有的成员字段和方法。注意，页面源代码中有用于访问 Application Bean，Session Bean，和 Request Bean 的方法。请参见本教程的存储和处理数据小节，查看这三种 bean 类型的说明。图 5：Page Bean 的 Java 源代码4. 源代码中还有在页面被请求和页面被绘制完成之间的某些生命周期事件中被调用的方法。提示：在“导航”窗口中双击一个成员，可以打开源代码编辑器并将光标定位到该成员被声明的地方。您还可以在“导航”窗口中点击任何一个地方，并输入一个成员名称的头几个字母，可以打开“快速搜索”对话框。继续输入直到 IDE 高亮显示出列表中您想要找到的项，如下图所示。然后您可以输入 Enter 键来打开源代码编辑器并将光标定位在匹配的成员声明处。图 6：“导航”窗口中的快速搜索5. 点击编辑工具栏的“JSP”按钮查看页面的 JSP 代码，如下图所示。注意 JSP 页面如何使用 JSP 文档语法。图 7：JSP 视图6. 点击编辑工具栏的“设计”按钮切换到可视设计器并在“导航”窗口中显示页面的表示。如果您打开“Page2”节点下的节点，您可以看到如下图所示的节点。注意 JSP 文件中的标签如何在“导航”窗口中被表示。图 8：“导航”窗口了解更多 从主菜单中选择“帮助”“帮助内容”来打开帮助文件。在左边的“目录”窗格中，选择“Web 应用程序”“创建 Web 应用程序”“关于创建 Web 应用程序”。 JavaServer Pages 技术 - 文档 向 Web 页添加组件您可以通过从“组件面板”窗口将组件拖动到可视设计器中的 web 页面上来设计 web 页面。下图显示了添加了“按钮”，“文本字段”，“消息”，“下拉列表”，和“单选按钮组”组件的 Page2 页面。所有这些组件都是“基本”类别中可用的组件。这些组件是通过修改它们的属性被定制过的。您将在本节学习到关于组件的属性。图 9：可视设计器中的组件注意事项：“组件面板”中可用的组件是依照设计时 API 增强的 JavaServer Faces（JSF）组件，以便它们的属性可以在可视设计器和“属性”窗口中使用。您可以在 web 应用程序中使用您自己使用 IDE 生成的其它组件，但是您不能在这些组件上使用 IDE 交互式的设计时特性，除非它们是依照设计时 API 的需求定制的。如果 Java EE 版本被设置为 Java EE 5，“组件面板”将提供 JSF 1.2 的组件。如果您将 Java EE 的版本设置为 1.3 或 1.4，“组件面板”则提供 JSF 1.1 的组件。您用到的大部分组件在“组件面板”的“基本”，“布局”，和“复合”类别中。以下表格按照功能显示了一些常用的组件。表 1：输入组件组件描述组件面板类别文本字段一个单行文本输入字段。基本文本区域一个多行文本输入字段。基本下拉列表一个下拉菜单，也作为一个组合框被引用。基本列表框一个根据配置，用户可以选择一个或多个选项的列表。基本复选框一个用户可以选择（选中）或清除的单一符号框。基本单选按钮一个用户可以选择（选中）的单个单选按钮。基本口令字段一个将输入的字符回显为替换的字符以屏蔽输入内容的输入字段。基本文件上载一个用于指定一个文件以便上载的