点击这里给我发消息 点击这里给我发消息

web开发框架——JSF开发实战二(图)

添加时间:2013-12-7
    相关阅读: 设计 开发 技术 页面 数据库 程序 框架

  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,这个页面可以修改用户资料。这是通过如下代码实现的:
  
咨询热线:020-85648757 85648755 85648616 0755-27912581 客服:020-85648756 0755-27912581 业务传真:020-32579052
广州市网景网络科技有限公司 Copyright◎2003-2008 Veelink.com. All Rights Reserved.
广州商务地址:广东省广州市黄埔大道中203号(海景园区)海景花园C栋501室
= 深圳商务地址:深圳市宝源路华丰宝源大厦606
研发中心:广东广州市天河软件园海景园区 粤ICP备05103322号 工商注册