西北农林科技大学：《J2EE技术》课程教学资源（实验指导）实验2 在Eclipse环境下JSF的应用

实验2.在Eclipse环境下JSF的应用 实验内容 在这个实验中，将学习在MyEclipse8.x集成开发环境下创建Web应用，创建SF、Managed-Bean、 Servlet,并测试。 实验目的 ◆掌握MyEclipse中Web应用的开发以及在Bos中的部署和访问。 ◆掌握JSF、Managed--Bean和Servlet的开发。 实验介绍 本实验将实现一个简单的格式转换功能，用户在登录界面输入用户名和用户的一个朋友的信息。 朋友的信息需要进行格式转换。如果格式符合要求，会出现成功页面。 在这个实验中，将首先建立一个Web应用，名字是JSFDemo:然后进行视图层的实现，涉及2 个JSP页面：addjsp,show.jsp:接着进行模型层的实现，涉及2个类：Friend、UserBean::再接着是控 制层的主要实现涉及两个配置文件：最后对整个Wb应用进行测试。 环境要求 服务器：Jboss6.0 集成开发环境：MyEclipse8.6 实验指导 步臻l:创建Web应用myweb I.创建Web工程 a)在主菜单中选择【File】→【New】→【Web Project】,出现New Web Project对话框 如果没有【Web Project】则选择【File】→【New】→【Other】,在弹出的菜单中再选 择【Web Project】

实验 2. 在 Eclipse 环境下 JSF 的应用 实验内容 在这个实验中，将学习在 MyEclipse8.x 集成开发环境下创建 Web 应用，创建 JSF、Managed-Bean、 Servlet，并测试。 实验目的 ◆ 掌握 MyEclipse 中 Web 应用的开发以及在 JBoss 中的部署和访问。 ◆ 掌握 JSF、Managed-Bean 和 Servlet 的开发。 实验介绍 本实验将实现一个简单的格式转换功能，用户在登录界面输入用户名和用户的一个朋友的信息。 朋友的信息需要进行格式转换。如果格式符合要求，会出现成功页面。 在这个实验中，将首先建立一个 Web 应用，名字是 JSFDemo；然后进行视图层的实现，涉及 2 个 JSP 页面：add.jsp,show.jsp；接着进行模型层的实现，涉及 2 个类：Friend、UserBean；再接着是控 制层的主要实现涉及两个配置文件；最后对整个 Web 应用进行测试。 环境要求 服务器：Jboss6.0 集成开发环境：MyEclipse 8.6 实验指导 步骤 1：创建 Web 应用 myweb 1. 创建 Web 工程 a) 在主菜单中选择【File】→【New】→【Web Project】，出现 New Web Project 对话框。 如果没有【Web Project】则选择【File】→【New】→【Other】，在弹出的菜单中再选 择【Web Project】

New Web Project 回x Create a Web Project Create a web project in the workspace or an external location Yeb Project Details Project Nane: TSFDemo Location: ☑Use default location Directory D:\workspace_TSP_nev\JSFDem Source folder: Web root folder:WebRoot Context root URL:/JSPDemo J2EE Specification Level Java EE 5.0J2EE 1.4J2EE 1.3 aven Add laven support Learn more about MavendvEclipse. JSTL Support Add JSTL libraries to WEB-INF/lib folder? 〈Back Hext>Einish☐Cancel 图21 b)在New Web Project对话框的Project Name】文本框中输入JSFDemo:J2 EE Specification Level师洗择4 Tava Fe5.0”,占击【finish】按钮 c)观察【package】视图中出现如下内容，表示eb应用JSFDemo创建成功。 Package Expl ier archy日 4号JSme0 湾re 〉-昌JRE Systen Library[coa.sun java -昌Java E阻5 Libraries DWebRoot 图2-2 )右单击项目名称，添加JSF支持，具体操作如图2-3：

图 2-1 b) 在New Web Project对话框的【Project Name】文本框中输入JSFDemo；J2EE Specification Level 项选择“Java EE 5.0”，点击【Finish】按钮。 c) 观察【package】视图中出现如下内容，表示 Web 应用 JSFDemo 创建成功。 图 2-2 d) 右单击项目名称，添加 JSF 支持，具体操作如图 2-3：

Herarchy Navipstor Right click 4 Copy 色Pa Delete Import ☒Ept Run As Click Add JSF Ad的and Rer dd Tapestry Ca Properties A做+E成r 图2.3 e)单击“Add JSF Capabilities'”,弹出如下窗口，配置JSF Capabilities. 回x pleaatetio SP fi F/faces-con5 Taces servlet ne Faces Servlet URL pattern: /faces/x ☑Copy 15 TLDs inteec 图2-4 )完成上面配置后，整个项目结构如下图

图 2-3 e) 单击“Add JSF Capabilities”,弹出如下窗口，配置 JSF Capabilities. 图 2-4 f) 完成上面配置后，整个项目结构如下图

日$ 4形SDm0 电c JRE Systen Library [com.sun j Jva5 Libraries 4合WEB-IF 合1ib faces-config xml x web.xml _了index.jsp 图25 8打开配置文件“faces--configxl”,如下图2-6 回 ffig 图2-6 h)在“outline”视图下右单击ManagedBean,创建ManagedBeanz类，如图2-7、图2-8所示

图2-5 g) 打开配置文件“faces-config.xml”，如下图2-6 图2-6 h) 在“outline”视图下右单击ManagedBean，创建ManagedBean类，如图2-7、图2-8所示

Outline 日 faces-config xnl Application factory 圈1 ifecycle 合Components Converters 汽 aged Bean Cut Curl +X G￥v1i Copy Ctrl +C Exte Paste Delete Delete Properties 图2-7 Managed Bean Scope session cn.edu.jsf.UserBean userBean Generate Source Code ext》 Finish Cancel 图2-8 i)在outline视图的Manage Bean下，右单击userBean,设计UserBeanf的两个属性：userName、 friend、converter,如图2-9所示

图2-7 图2-8 i) 在outline视图的Manage Bean下，右单击userBean，设计UserBean的两个属性：userName、 friend、converter，如图2-9所示

Outline 。-日 4①faces--config.xml ▣Application factory 野1 ifecycle Component Converters Managed Beans (P)name (P converter Navigation rules Referenced Beans Render Kits Validators 图2-9 iserBean.java代码如下： package cn.edu.isf: import javax.faces.context.FacesContext; import javax.faces.convert.Converter; .co rterException; import javax.faces.*; import javax.faces.component.*: public class UserBean private string name: private Friend friend private Converter converter public UserBean()( 1 public string getName()( return name; public void setName(string name) this.name =name public Friend getFriend()(

图2-9 UserBean.java代码如下： package cn.edu.jsf; import javax.faces.context.FacesContext; import javax.faces.convert.Converter; import javax.faces.convert.ConverterException; import javax.faces.*; import javax.faces.component.*; public class UserBean { private String name; private Friend friend; private Converter converter; public UserBean() { } public String getName() { return name; } public void setName(String name) { this.name = name; } public Friend getFriend() {

return friend; 1 public void setFriend(Friend friend)( this friend; public Converter getConverter(){ /采用匿名内部类实现一个转换器 return new Converter() //实现从字符串类型向目标类型转换的方法 public object getAsobject(FacesContext context, UIComponent component.String value) throws ConverterException try string[l values value.split (":") Friend friend-new Friend(values[0] Double .parseDouble(values(1]) Integer.parseInt(values[21)); return friend; //捕获所有自定义异常 catch (Exception ex) ex.printstackTrace(); /抛出ConverterException异常。 throw new ConverterException("无法转换！")； /实现从目标类型向字符串类型转换的方法 public String getAsstring(Facescontext context, UIComponent component,object value) Friend friend-(Friend)value; return "Friend [name-"+friend.getName +"height="+friend.getHeight() +"age="+friend.getAge()+"]"; public void setconverter(Converter converter){ this.converter converter;

return friend; } public void setFriend(Friend friend) { this.friend = friend; } public Converter getConverter() { //采用匿名内部类实现一个转换器 return new Converter() { //实现从字符串类型向目标类型转换的方法 public Object getAsObject(FacesContext context, UIComponent component, String value) throws ConverterException { try { String[] values = value.split(":"); Friend friend = new Friend(values[0] , Double.parseDouble(values[1]) , Integer.parseInt(values[2])); return friend; } //捕获所有自定义异常 catch (Exception ex) { ex.printStackTrace(); //抛出ConverterException异常。 throw new ConverterException("无法转换！"); } } //实现从目标类型向字符串类型转换的方法 public String getAsString(FacesContext context, UIComponent component, Object value) { Friend friend = (Friend)value; return "Friend[name=" + friend.getName() + ", height=" + friend.getHeight() + ", age=" + friend.getAge() + "]"; } }; } public void setConverter(Converter converter) { this.converter = converter;

public string add()( return "success" 在包“cn.edu.Jst”",设计一个Friend类，其结构如下： Outline 口日 唱&。女可 由cn.edu.jsf C Friend a name age int getName 0:String .● setName (String):void getHeight(:String setHeight String):void gethge(:int setAge(int):void 图2-10 Friend.java代码如下： package cn.edu.jsf; public class Friend private String name; private double height private int age; public Friend(string name, double height,int age)( this.name -name; this.height height this.age age; 1 public string getName()( return name; public void setName(string name)( this.namename;

} public String add(){ return "success"; } } j) 在包“cn.edu.jsf”，设计一个Friend类，其结构如下： 图2-10 Friend.java代码如下： package cn.edu.jsf; public class Friend { private String name; private double height; private int age; public Friend(String name, double height, int age) { this.name = name; this.height = height; this.age = age; } public String getName() { return name; } public void setName(String name) { this.name = name;

public double getHeight()( return height: 1 public void setHeight(double height)( this.height height; public int getAge()( return age; public void setAge(int age)( this.ageage; public String tostring() eturn this.name+":"tthis.height+":"tthis.age k)设计add.jsp页面，操作步骤如图2-11所示 0erem4618①s:ajwm 4 1.Click JSP Button 2.Click on the Canvas 回 JSP Wizard Pile Path File gone 3.Change name and select JSF templete 4.Click finsh Einish 图2-11 1)用同样的方法设计show.jsp页面，如图2-12所示

} public double getHeight() { return height; } public void setHeight(double height) { this.height = height; } public int getAge() { return age; } public void setAge(int age) { this.age = age; } public String toString(){ return this.name + ":" +this.height + ":" +this.age; } } k) 设计add.jsp页面，操作步骤如图2-11所示： 图2-11 l) 用同样的方法设计show.jsp页面，如图2-12所示

*facet-confi.xnl 83 UserBean iave 国 ⊙Create a nev Jpage. 回 Click JSP Button and Click again on the canvas to add it File Path /JSFDeno/YebRoot File Hane: Tenplate to use:Default JSF template Open the file after vizard completion Flow Desicn Source Einish Cancel 图2-12 m)打开add.jsp,切换到Design视图下，通过模板的“JSF Core'”和“JSF Html”添加表单，具体 操作如图2-13、图2-14、图2-15、图2-16所示。 rt This is my JSF JSP page ="java"pageEncoding="ISO-8 n.com/ f/htm path=request.getContextPath() 图2-13

图2-12 m) 打开add.jsp,切换到Design视图下,通过模板的“JSF Core”和“JSF Html”添加表单，具体 操作如图2-13、图2-14、图2-15、图2-16所示。 图2-13