JSF开发实战(二)

jinjianlee

JSF开发实战(二)
By  bromon 发表于 2005-10-27 14:49:00  
JSF开发实战(二)

bromon原创　请尊重版权

        JSF开发实战的第一篇(
jsf开发实战(一)
)演示了如何建立一个最简单的JSF应用，从那个例子中我们可以观察到JSF的页面组件是如何与后台的javabean绑定的，也看到了JSF标签的最基本使用。在本文中我们会演示一个更加复杂的应用，它包含了更丰富的JSF标签。

        要开发的例子是一个用户管理程序，管理员输入帐号与密码登陆，然后它可以看到所有用户的列表，并且可以修改或者删除其中的一些数据。利用myeclipse所带的jsf-config.xml设计器，页面流程如下：



         

        可以看出，这个应用设计到的业务逻辑有：

用户登陆、修改用户信息、增加新用户、删除用户

        我们在后台的数据库操作中使用hibernate框架来辅助开发，相关的技术细节请自行查阅文档。

        首先建立pojo文件：User.java，它包含几个基本属性：

private int id;
private String name;
private String password;
private int power;

请自行完成set/get方法，并且编写对应的hbm.xml文件。

我们的主要工作之一，是要建立好供jsf页面组件使用的javabean，把它命名为UMDelegater.java。它会调用UserManager
来完成业务逻辑，这里是一个代理模式。UserManager的内容只是简单的增/删/查/改的操作，这里不再具体列出。UMDelegater的内容
是：
package org.bromon.jsf.control;

import java.util.List;

import javax.faces.model.DataModel;
import javax.faces.model.ListDataModel;

import org.bromon.jsf.model.UserManager;//自行建立的工具类，负责所有的hibernate操作
import org.bromon.jsf.model.pojo.User;//pojo对象

public class UMDeletager {
        private UserManager um=new UserManager();//所有具体的方法都由它来实现
        private User user=new User();
                private DataModel allUsers=new ListDataModel();//JSF的内置对象，用来封装html中table的数据

                //----------set/get方法---------------------
        public DataModel getAllUsers() {
                return allUsers;
        }

        public void setAllUsers(List list) {
                allUsers.setWrappedData(list);
        }
        public UserManager getUm() {
                return um;
        }
        public void setUm(UserManager um) {
                this.um = um;
        }
        public User getUser() {
                return user;
        }
        public void setUser(User user) {
                this.user = user;
        }
       
        //-----功能方法---------
        public String login()
        {
                String s=um.login(this.getUser());
                if(s.equals("ok"))
                {
                        this.setAllUsers(um.loadAll());//如果登陆成功，就取出所有的用户信息
                        return "login:ok";
                }else
                {
                        swapper.setLoginFailInfo(s);
                        return "login:fail";
                }
        }
       
        public String edit()
        {
                this.user=(User)allUsers.getRowData();//页面中的table自动返回含有id的user对象
                this.user=um.loadById(user.getId());
                if(user!=null)
                {
                        return "edit";
                }else
                {
                        return "error";
                }
        }
       
        public String update()
        {
                um.update(this.getUser());
                this.setAllUsers(um.loadAll());//重新取一次数据，目的是更新缓存
                return "update:ok";
        }
       
        public String addNew()
        {
                this.setUser(new User());//生成一个新的user对象，不含任何数据，它会被自动映射成一个没有数据的form
                return "add";
        }
       
        public String add()
        {
                um.add(this.getUser());
                this.setAllUsers(um.loadAll());//重新取一次数据，目的是更新缓存
                return "add:ok";
        }
}

        在jsf-config.xml中声明这个bean：

＜managed-bean＞
                ＜managed-bean-name＞UMDelegater＜/managed-bean-name＞
＜managed-bean-class＞org.bromon.jsf.control.UMDeletager＜/managed-bean-class＞
                ＜managed-bean-scope＞session＜/managed-bean-scope＞
        ＜/managed-bean＞

业务逻辑就设计完成了，下面可以开始编写jsf文件，首先是index.jsp:

首先引入标签库，并且声明page属性：





然后是构建页面：

＜body＞
     ＜f:view＞
             ＜h:form＞
                     ＜h:panelGrid columns="3"＞
                             ＜h:outputLabel for="name" value="帐号:"/＞
                             ＜h:inputText id="name" value="#{UMDelegater.user.name}" required="true"/＞
                             ＜h:message for="name"/＞
                            
                             ＜h:outputLabel for="password" value="密码:"/＞
                             ＜h:inputSecret id="password" value="#{UMDelegater.user.password}" required="true" /＞
                             ＜h:message for="password"/＞
                     ＜/h:panelGrid＞
                     ＜h:panelGroup＞
                             ＜h:commandButton value="登陆" action="#{UMDelegater.login}"/＞
                     ＜/h:panelGroup＞
             ＜/h:form＞
     ＜/f:view＞
   ＜/body＞

页面中声明了两个文本框，分别映射UMDelegater对象中user对象的name属性，和UMDelegater对象中user对象的
password属性。一旦这个表单被提交，这两个文本框的值就会被自动赋给user对象，我们只需要从user中取数据就行了，不用再去执行麻烦的
request.getParameter(“”)，更改编码，转换数据类型等操作。

我们同时还声明了一个button，它与UMDelegater对象的login方法绑定，点击该按钮，系统会执行UMDelegater.login方
法，该方法从user对象中取出name和password，和数据库中的记录进行比较。如果合法，那么就取出所有的数据，放到一个DataModel对
象中，具体代码是：

List userList=UserManager.getAllUser();//取得所有用户数据，放到一个List中
DataModel allUser=new ListDataModel ();//DataModel是一个接口，ListDataModel是它的一个实现

allUsers.setWrappedData(userList);//将数据填充进去备用

使用DataModel意义何在呢？JSF中，我们可以把一个html页面上的table和一个DataModel绑定起来，这些数据会自动填充到table中，我们不必再自己去写循环，生成若干的来生成一个table。在list.jsp中我们会看到如何使用DataModel。

放好数据之后，登陆成功的操作就完成了，返回一个login:ok，就可以重定向到list.jsp。如果用户登陆失败，那么会返回login:fail，重定向到error.jsp，它的内容就不叙说了。下面我们看看list.jsp里面有什么，下面是它的代码：

＜body＞
     ＜f:view＞
             ＜h:form＞
                     ＜h:dataTable id="users" value="#{UMDelegater.allUsers}" var="u" border="1" width="80%" ＞
                             ＜h:column＞
                                     ＜f:facet name="header"＞
                                             ＜h:outputText value="id"/＞
                                     ＜/f:facet＞
                                     ＜h:outputText value="#{u.id}"/＞
                             ＜/h:column＞
                            
                             ＜h:column＞
                                     ＜f:facet name="header"＞
                                             ＜h:outputText value="帐号"/＞
                                     ＜/f:facet＞
                                     ＜h:commandLink action="#{UMDelegater.edit}"＞
                                             ＜h:outputText value="#{u.name}"/＞
                                     ＜/h:commandLink＞
                             ＜/h:column＞
                            
                             ＜h:column＞
                                     ＜f:facet name="header"＞
                                             ＜h:outputText value="密码"/＞
                                     ＜/f:facet＞
                                     ＜h:outputText value="#{u.password}"/＞
                             ＜/h:column＞
                            
                             ＜h:column＞
                                     ＜f:facet name="header"＞
                                             ＜h:outputText value="权限代码"/＞
                                     ＜/f:facet＞
                                     ＜h:outputText value="#{u.power}"/＞
                             ＜/h:column＞
                     ＜/h:dataTable＞
                     ＜p＞
                             ＜h:commandLink action="#{UMDelegater.addNew}" value="增加用户" /＞
                     ＜/p＞
             ＜/h:form＞
     ＜/f:view＞
   ＜/body＞

我们使用了一个h:dataTable标签，它是JSF独有的东西，它会被翻译为一个html的table，通过指定h:dataTable的value
="#{UMDelegater.allUsers}"属性，它就与我们刚才生成的DataModel对象关联起来，数据会被自动填充。我们只需要声明
dataTable中的每一列的表头，数据来自哪个字段就可以了，如下：
＜h:column＞
     ＜f:facet name="header"＞
             ＜h:outputText value="id"/＞
     ＜/f:facet＞
     ＜h:outputText value="#{u.id}"/＞
＜/h:column＞

表格最后还有一个“增加用户”的按钮，它与UMDelegater.addNew绑定，它会把我们重定向到add.jsp。
需要注意的是，每个用户名都是个超链接，点击之后可以重定向到edit.jsp，这个页面可以修改用户资料。这是通过如下代码实现的：

＜h:commandLink action="#{UMDelegater.edit}"＞
        ＜h:outputText value="#{u.name}"/＞
＜/h:commandLink＞

可以看出，实际上系统调用了UMDelegater.edit方法，该方法的功能是根据页面传过来的用户id查询数据库，找到相关记录后返回一个User
对象，然后重定向到edit.jsp，由于我们后面编写edit.jsp的时候会把form元素与User对象绑定，所以该User对象所含有的数据会自
动显示到各个form元素上。

list.jsp的显示效果如下：

  


看到这里你也许会问，那么我如何来美化这个表格？实际上这正式JSF这类框架面临的最大问题，它大量的使用了标签库，目前流行的网页制作工具(如
deamweaver)又没有提供足够的支持，所以只能依靠挖掘dataTable标签的各个属性，并且大量依赖css才能实现页面的美化。如果java
世界能有一个强大的JSF IDE，能够提供vs.net一样的能力，那么JSF也许会更容易流行。

下面我们来看看edit.jsp的内容，如下：

＜body＞
     ＜f:view＞
             ＜h:form＞
                     ＜h:inputHidden id="id" value="#{UMDelegater.user.id}"/＞
                     ＜h:panelGrid columns="3"＞
                             ＜h:outputLabel for="name" value="帐号"/＞
                             ＜h:inputText id="name" value="#{UMDelegater.user.name}" required="true"/＞
                             ＜h:message for="name"/＞
                            
                             ＜h:outputLabel for="power" value="权限"/＞
                             ＜h:inputText id="power" value="#{UMDelegater.user.power}" required="true"/＞
                             ＜h:message for="power"/＞
                     ＜/h:panelGrid＞
                     ＜h:panelGroup＞
                             ＜h:commandButton value="保存" action="#{UMDelegater.update}"/＞
                     ＜/h:panelGroup＞
             ＜/h:form＞
     ＜/f:view＞
   ＜/body＞

可以看出，edit.jsp并没有什么特别需要留意的，只是一个最简单的form与bean的绑定，“保存”按钮与UMDelegater.update方法绑定，它的功能是把修改后的form数据写入数据库，然后重新取一次数据，以免缓存做怪，看不到修改的效果。

Add.jsp也和edit.jsp很类似，它的内容如下：

＜body＞
     ＜f:view＞
                   ＜h:form＞
                           ＜h:panelGrid columns="3"＞
                                   ＜h:outputLabel for="name" value="帐号:" /＞
                                   ＜h:inputText id="name" value="#{UMDelegater.user.name}" required="true"/＞
                                   ＜h:message for="name"/＞
                                  
                                   ＜h:outputLabel for="password" value="密码:"/＞
                                   ＜h:inputText id="password" value="#{UMDelegater.user.password}" required="true"/＞
                                   ＜h:message for="password"/＞
                                  
                                   ＜h:outputLabel for="power" value="权限"/＞
                                   ＜h:inputText id="power" value="#{UMDelegater.user.power}" required="true"/＞
                                   ＜h:message for="power"/＞
                           ＜/h:panelGrid＞
                           ＜h:panelGroup＞
                                   ＜h:commandButton value="保存" action="#{UMDelegater.add}"/＞
                           ＜/h:panelGroup＞
                   ＜/h:form＞
           ＜/f:view＞
   ＜/body＞

以上代码和edit.jsp几乎相同，请大家自行阅读理解，一口气写了8页，不想再啰唆了。

由于最近时间很不充裕，所以JSF系列暂时打住，无限期搁置。我想这两篇文章已经能够说明很多问题，已经足够引导大家进入JSF的世界，自行研究解决其他细节。
               
               
               

本文来自ChinaUnix博客，如果查看原文请点：http://blog.chinaunix.net/u/10369/showart_254501.html