关闭

JSF开发实战

3211人阅读 评论(2) 收藏 举报

      JSF将是J2EE5.0中所包含的web开发框架,这应该是第一个成为jcp标准,并且随j2eesdk一起发布的web框架,可以看出sun对它的期望很高。JSF最大的竞争对手是tapestry,是apache的产品,但是apache又弄出了个myfaces,是对jsf标准的一个实现。也许你也和我一样,在jsf和tapestry之间犹豫很久,将来从apache的态度上应该可以看出二者的走向。在tss上有一篇比较jsf 1.0与tapestry 3.0的文章,内容很扎实到位:http://www.theserverside.com/articles/article.tss?l=JSFTapestry
JSF的竞争对手不是struts/webwork之流,它们基本上已经是不同阶段上的东西了,放在一起比较意义不大。

    JSF的开发流程和asp.net中所倡导的code behind方式很相似,核心是事件驱动,组件和标签的封装程度非常高,很多典型应用已经不需要开发者去处理http。页面操作会被自动映射到对应的java bean中,后台逻辑只需要同java bean发生交互。整个过程是通过“依赖注入(DI)”来实现的,看来这是目前解偶合的最佳途径啊,spring的影响真是深远。不过正式因为jsf采用了这样的方式,导致开发工作和以前的jsp/struts等都有非常大的不同,需要一定的时间去学习。学习之前建议先对依赖注入有比较清楚的认识,可以参考我的learn Spring in spring系列的第一篇。

    本系列将以两个例子来讲解jsf的基本开发,第一个例子当然是hello world。目前可用的jsf ide不多,ibm要到06年才能放出支持jsf的wtp版本。所以我们的例子基本以手写为主,这样也能让我们有更清楚的认识,同时推荐目前最好的jsf开发工具:myeclipse 4.0 GA。后面的例子将会有jsf和hibernate的内容,它都能给予很好的支持。由于myeclipse并不免费,所以我们除了讲解在ide中如何操作外,还会叙述手动操作的具体内容,以免过于依赖开发工具。用什么服务器都可以,这里采用了jboss 4.0.2。如果你的服务器是高版本的tomcat(5.5+),那么必须要删除它自带的一些包才能很好的支持jsf,具体细节请查看它的文档。

    请自行下载jsf ri和JSTL 1.1。

废话少说,开始了。

    在myeclipse 4.0GA中新建一个web项目,命名为hello,为项目增加对JSTL的支持:


 
在JSTL的版本中选择1.1。
该操作实际上是把jstl.jar和standard.jar加到工程中。

采用类似的操作为项目添加对jsf的支持:myeclipse?add jsf capabilities
如图:
 


其中的jsf implementation是选择使用哪中JSF实现,我们采用的是sun的jsf ri
JSF config path是配置文件的位置,保持不变
URL pattern是jsf servlet的映射方式,有两种选择,具体细节后面说明。
以上操作上是为项目加入了jsf需要的jar和tld文件,并且创建了一个faces-config.xml的配置文件。涉及到的jar有:commons-beanutils.jar    commons-collections.jar        commons-digester.jar    commons-logging.jar    jsf-api.jar        jsf-impl.jar
涉及到了jsf中所有的tld文件。

当前的faces-config.xml文件的内容是:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE faces-config PUBLIC "-//Sun Microsystems, Inc.//DTD JavaServer Faces Config 1.1//EN" "http://java.sun.com/dtd/web-facesconfig_1_1.dtd">

<faces-config>

</faces-config>

环境已经建立好了,现在我们要建立一个程序,它的功能是让用户在表单中输入名字,提交后系统会返回一个问候。使用jsf的以后好处是,开发人员会很自然的把mvc各层分开,不会像使用strtus那样别扭,这一点在后面的开发中感觉得到。

首先开发model层,它是个很简单的bean:
package org.bromon.jsf.model.hello;

public class SayHello {
    public String say(String name)
    {
        return "你好,"+name;
    }
}

在model层中你可以随意的实现业务的数据逻辑,不需要与web层有任何的关系。

下面开发控制层,它负责存取web层的数据,并且调用model层的逻辑:
/**
 * jsf的控制层方法
 * @author bromon
 */
package org.bromon.jsf.control.hello;

import org.bromon.jsf.model.hello.*;

public class HelloDelegater {
    
    //------属性---------
    private String name;//表单中的文本框数据会传到这里
    private String result;//web页会从这里取得运行结果
    private SayHello sayHello;//model层的对象,并不事例化,由系统注入
    
    //-----set/get--------
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public SayHello getSayHello() {
        return sayHello;
    }
    public void setSayHello(SayHello sayHello) {
        this.sayHello = sayHello;
    }
    public String getResult() {
        return result;
    }
    public void setResult(String result) {
        this.result = result;
    }
    
    //-----逻辑方法---------
    public String say()
    {
        this.setResult(sayHello.say(this.getName()));
        return "ok";
    }
}

需要注意的是,属性的名字、set/get方法的名字必须严格按照java bean规范编写,因为它们要被注入依赖时使用。sayHello对象并没有被实例化,它会在运行时由系统注入。

这两个bean当然要在系统中申明,否则无法实现DI。在faces-config.xml文件中添加内容:
<managed-bean>
        <managed-bean-name>SayHello</managed-bean-name>
        <managed-bean-class>
            org.bromon.jsf.model.hello.SayHello
        </managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
    </managed-bean>
    <managed-bean>
        <managed-bean-name>HelloDelegater</managed-bean-name>
        <managed-bean-class>
            org.bromon.jsf.control.hello.HelloDelegater
        </managed-bean-class>
        <managed-bean-scope>request</managed-bean-scope>
        <managed-property>
            <property-name>sayHello</property-name>
            <value>#{SayHello}</value>
        </managed-property>
    </managed-bean>

    在后一个bean中,它的sayHello属性被指定要在运行时注入一个org.bromon.jsf.model.hello.SayHello的实例。

下面要编写表示层的页面,只有一个index.jsp:
需要引入两个标签库:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
下面是构造jsf标签:

<body>
    <f:view>
        <h:form>
            <h:panelGrid columns="3">
                <h:outputLabel for="name" value="姓名:"/>
                <h:inputText id="name" value="#{HelloDelegater.name}" required="true"/>
                <h:message for="name"/>
                
                <h:outputLabel value="#{HelloDelegater.result}"/>
            </h:panelGrid>
            <h:panelGroup>
                <h:commandButton action="#{HelloDelegater.say}" value="提交"/>
            </h:panelGroup>
        </h:form>
    </f:view>
  </body>

页面中包含了一个文本框和一个label,他们分别被绑定到了HelloDelegater类的两个属性上,具体的绑定工作有系统通过翻转控制的方式调用对应的set/get方式实现。提交按钮被绑定到了HelloDelegater.say方法,该方法会把计算结果赋给result属性,它会在页面中显示出来。

因为我们在url pattern中选择了*.faces,所以我们应该访问如下地址来查看程序:
http://localhost:8080/hello/index.faces
相应的,如果你选择了/faces/*,那么就应该是:
http://localhost:8080/hello/faces/index.jsp

程序执行结果如下:


 

    下一篇文章中,将介绍一个更加复杂的用户管理程序,可以更清楚的看到jsf的特征,还会涉及到jsf的model对象一些组件的使用。

   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属性:

<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

然后是构建页面:

<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中,我们不必再自己去写循环,生成若干的<tr>、<td>来生成一个table。在list.jsp中我们会看到如何使用DataModel。

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

<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的世界,自行研究解决其他细节。

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:1063129次
    • 积分:14591
    • 等级:
    • 排名:第862名
    • 原创:313篇
    • 转载:266篇
    • 译文:0篇
    • 评论:239条
    最新评论