
		 
		2008年10月4日		  
	
 
	
			
			前台:
Store:
var resource = new Ext.data.Store({
      fields: ['imgpath','typeImage','title', 'type'],
      url: 'teaching/resource/resourceAction.evi?method=getResourceList',
      reader: new Ext.data.XmlReader(
        {
          record: "Item",
          totalRecords: "TotalCount"
        },
      [{name:'title',mapping: 'title'}, {name:'type',mapping: 'type'},{name:'imgpath',mapping: 'imgpath'},{name:'typeImage',mapping: 'typeImage'} ]
    )
});
resource.addListener('load', function(st, rds, opts) {
        // st 是当前的store, rds是读到的Record[], opts是store的配置
   for( var c=0; c<rds.length; c++ ) {
       rds[c].set('typeImage', "<img src='./images/33.gif' width='12' height='12' />");
       //待定类别,先定死类别图片
      }
});
resource.load({params:{start:0,limit:10}});
var resourceType = new Ext.data.Store({
url:'teaching/resourceType/resourceTypeAction.evi?method=getResourceTypeList',
      reader: new Ext.data.XmlReader({
      record: "Item"
     }, [
      {name: 'resourceTypeId', mapping: 'resourceTypeId'},
       {name: 'resourceType', mapping: 'resourceType'}
      ])
   });
resourceType.load();
var languageType = new Ext.data.Store({
url:'teaching/languageType/languageTypeAction.evi?method=getLanguageTypeList',
      reader: new Ext.data.XmlReader({
      record: "Item"
     }, [
       {name: 'languageTypeId', mapping: 'languageTypeId'},
       {name: 'languageType', mapping: 'languageType'}
      ])
   });
languageType.load();
列表:
resourcePanel = new Ext.grid.GridPanel({
id: 'resources',
frame: true,
header: false,
width: 288,
autoWidth: true,
autoHeight: true,
loadMask:{msg:'正在加载数据,请稍侯……'},
iconCls:'icon-grid',
viewConfig: { forceFit: true },
   columns:[
  {header: " ",dataIndex: 'typeImage' , width:20},
  {header: "资源标题", width: 190, sortable: true, dataIndex: 'title'},
  {header: "类别", width: 80, sortable: true, dataIndex: 'type'}
   ],
  store: resource,
  selModel: new Ext.grid.RowSelectionModel({singleSelect:false}),
     bbar: new Ext.PagingToolbar({ 
  pageSize: 10, 
  store: resource, 
  displayInfo: false, 
  //displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
  emptyMsg: "没有记录"  
      }),
  listeners: {
  rowclick:function(e) {
   try {
    window.parent.parent.Ext.ux.MyTips.msg("提示", "双击该行可预览该资源");
    } catch(e) {}
    },
  rowdblclick:function(g, rIdx, e) {
   var rd = g.getStore().getAt(rIdx);
   var html = "<img src='./images/" + rd.get('imgpath') + "' />";
  window.parent.showWin({
      layout: 'fit',
      maximizable: true,
      title: rd.get('title'),
      width: 400,
      height: 400,
      //modal: true,
      //closeAction: 'hide',
      plain: true,
      items: [ {html: html} ]
    });
  }
}
});
FormPanel:
var rform = new Ext.form.FormPanel({
              id:'rform',
           header: false,
           frame: true,
           hideBorders: false,
           items: [
            new Ext.form.TextField({
             fieldLabel: '关键字',
             name:'keyword'
            }),
            new Ext.form.ComboBox({
             fieldLabel: '资源类别',
             mode: 'local',
             triggerAction: 'all',
             store: resourceType,
             typeAhead: true,
             hiddenName:'resourceTypeId',
             displayField: 'resourceType',
             valueField: 'resourceTypeId',
             readOnly: true,
             selectOnFocus: true
            }),
            new Ext.form.ComboBox({
             fieldLabel: '语言',
             mode: 'local',
             triggerAction: 'all',
             typeAhead: true,
             hiddenName:'languageTypeId',
             displayField:'languageType',
             valueField:'languageTypeId',
             readOnly: true,
             selectOnFocus: true,
             store:languageType
            }),
            new Ext.Panel({
             layout: 'table',
             buttonAlign: 'center',
             layoutConfig: { colspan: 3 },
             buttons:[{text: '搜  寻',
              handler: function() {
                             var keyword = Ext.get('keyword').dom.value;
                             var resourceTypeId = Ext.get('resourceTypeId').dom.value;
                             var languageTypeId = Ext.get('languageTypeId').dom.value;
                      resource.reload({params:{start:0,limit:3,keyword:keyword,resourceTypeId:resourceTypeId,languageTypeId:languageTypeId}});
   //这里不用再写ajax,Ext已经封装了ajax,只要把参数传进去就行了   
              }},
              {
                text: '重  置',
                handler: function() {
                   Ext.getCmp('rform').form.reset();
               }
               }
              ] 
            })
           ]
          })
后台:
public ActionForward getResourceList(ActionMapping mapping,
   ActionForm form, HttpServletRequest request,
   HttpServletResponse response) throws IOException {
  Document document = DocumentHelper.createDocument();
  String start = request.getParameter("start");
  String limit = request.getParameter("limit");
  String keyword = request.getParameter("keyword");
  String resourceTypeId = request.getParameter("resourceTypeId");
  String languageTypeId = request.getParameter("languageTypeId");
  List<HqlCondition> hqlFilter = new LinkedList<HqlCondition>();
  if(keyword != null && keyword.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.title", "like", "%" + keyword + "%", HqlCondition.String) );
   hqlFilter.add( new HqlCondition("or", "rs.remarks", "like", "%" + keyword + "%", HqlCondition.String) );
  }
  if(resourceTypeId != null && resourceTypeId.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.resourceType.resourceTypeId", "=", new Long(resourceTypeId), HqlCondition.Long) );
  }
  if(languageTypeId != null && languageTypeId.length()>0){
   hqlFilter.add( new HqlCondition("and", "rs.languageType.languageTypeId", "=", new Integer(languageTypeId), HqlCondition.Integer) );
  }
  int pageno =1;
  int pagesize = 10;
  if(limit != null && limit.length()>0){
      pagesize = Integer.parseInt(limit);
  }
  if(!start.equalsIgnoreCase("0") && start != null && start.length()>0){
     int bpos = Integer.parseInt(start);
     pageno = (bpos + pagesize)/pagesize;
  }
  int total = this.rse.getResourceTotalCount(hqlFilter);
  Collection<BaseVO> coll = this.rse.getResourceList(hqlFilter,pageno,pagesize);
  Iterator<BaseVO> it = coll.iterator();
  while(it != null && it.hasNext()){
   BaseVO bv = it.next();
   ResourceType rt = this.rts.getResourceType(((ResourceType)bv.get("resourceType")).getResourceTypeId());
   bv.set("type", rt.getResourceType());
  }
  document.addElement("type");
  new OutputVOXml().writeXML(total,new LinkedList<BaseVO>(coll), response);
  return null;
}
 
			posted @ 
2008-10-04 22:43 Loy Fu 阅读(1390) | 
评论 (0) | 
编辑 收藏
			 Apache
提供的一个插件包,可以把Action
中的数据以JSON
做个封装然后返回。
它会将整个action中的变量转化为JSON数据(根对象在JSON中数据添加一个”root”标识)。如果要使用它,Action必须遵循以下几点:
1.       返回的页面类型中”content-type”必须是”application/json”.(这个已经Internet Community采用).
2.       JSON内容必须是符合格式要求的.
3.       Action中field必须有public的set方法.(是不是没有set方法就不会将field添加到JSON数据中,有待验证).
4.       它支持的类型有: 基本类型(int,long...String), Date, List, Map, Primitive Arrays, 其它class, 对象数组.
5.       在JSON中任何的Object会被封装在list或map中,数据会被封装程Long,如果是含有的数据则会被封装程Double,数组会被封装程List.
下面给出JSON的数据格式:
{
   "doubleValue": 10.10,
   "nestedBean": {
      "name": "Mr Bean"
   },
   "list": ["A", 10, 20.20, {
      "firstName": "El Zorro"
   }],
   "array": [10, 20] 
}
说明:
a.       这个插件支持以下几个注释:
    
        
            | 注释名 | 简介 | 默认值 | 序列化 | 反序列化 | 
        
            | name | 配置JSON中name | empty | yes | no | 
        
            | serialize | 在serialization中 | true | yes | no | 
        
            | deserialize | 在deserialization中 | true | no | yes | 
        
            | format | 格式化Date字段 | "yyyy-MM-dd'T'HH:mm:ss" | yes | yes | 
    
可以通过配置来显示指出要放在JSON中field,其中有个自己的验证规则需要研究.
<!-- Result fragment -->
<result type="json">
 <param name="excludeProperties">
    login.password,
    studentList.*".sin
 </param>
</result>
<!-- Interceptor fragment -->
<interceptor-ref name="json">
 <param name="enableSMD">true</param>
 <param name="excludeProperties">
    login.password,
    studentList.*".sin
 </param>
</interceptor-ref>
b.       根对象
 <result type="json">
 <param name="root">
    person.job
 </param>
</result>
也可以使用拦截器配置操作父对象
<interceptor-ref name="json">
 <param name="root">bean1.bean2</param>
</interceptor-ref>
c.       将JSON数据用注释封装
如果wrapWithComments设置为true(默认值为false),则生成的JSON数据会变成这样:
/* {
   "doubleVal": 10.10,
   "nestedBean": {
      "name": "Mr Bean"
   },
   "list": ["A", 10, 20.20, {
      "firstName": "El Zorro"
   }],
   "array": [10, 20] 
} */
这样做可以避免js中一些潜在的风险,使用时需要:
Var responseObject = eval("("+data.substring(data.indexOf(""/"*")+2, data.lastIndexOf(""*"/"))+")");
d.       父类
“root”对象中父类的field不会默认存放到JSON数据中,如果不想这样做,需要在配置时指定ignoreHierarchy为false:
<result type="json">
 <param name="ignoreHierarchy">false</param>
</result>
e.       枚举类型
默认处理枚举类型时,会被处理成JSON数据中name等于枚举中value而value等于枚举中name.
public enum AnEnum {
     ValueA,
     ValueB
 }
 JSON: "myEnum":"ValueA"
如果在处理枚举类型时,在xml中配置了enumAsBean,则会被当作一个Bean处理,在JSON数据中会有一个特别的属性”_name”值为name().这个枚举中的所有属性都会被处理.
public enum AnEnum {
     ValueA("A"),
     ValueB("B");
     private String val;
     public AnEnum(val) {
        this.val = val;
     }
     public getVal() {
        return val;
     }
   }
 JSON: myEnum: { "_name": "ValueA", "val": "A" }
Xml中配置:
<result type="json">
 <param name="enumAsBean">true</param>
</result>
f.        例子
a)         Action
import java.util.HashMap;
import java.util.Map;
import com.opensymphony.xwork2.Action;
public class JSONExample {
    private String field1 = "str";
    private int[] ints = {10, 20};
    private Map map = new HashMap();
    private String customName = "custom";
    //'transient' fields are not serialized
    private transient String field2;
    //fields without getter method are not serialized
    private String field3;
    public String execute() {
        map.put("John", "Galt");
        return Action.SUCCESS;
    }
    public String getField1() {
        return field1;
    }
    public void setField1(String field1) {
        this.field1 = field1;
    }
    public int[] getInts() {
        return ints;
    }
    public void setInts(int[] ints) {
        this.ints = ints;
    }
    public Map getMap() {
        return map;
    }
    public void setMap(Map map) {
        this.map = map;
    }
    @JSON(name="newName")
    public String getCustomName() {
        return this.customName;
    }
}
b)        Xml配置
 <?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE struts PUBLIC
    "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"
    "http://struts.apache.org/dtds/struts-2.0.dtd">
<struts>
 <package name="example" extends="json-default">
     <action name="JSONExample" class="example.JSONExample">
        <result type="json"/>
     </action>
 </package>
</struts>
这里有两个地方需要注意:
1)      需要继承json-default包
2)      <result>签的定义
c)         JSON数据
 { 
   "field1" : "str", 
   "ints": [10, 20],
   "map": {
       "John":"Galt"
   },
   "newName": "custom"
}
d)        JSON RPC
JSON插件可以在js中调用action方法,返回执行结果。这个已经在dojo中有了实现,可以用Simple Method Definition调用远程服务。来一起看看下面的例子:
首先写一个Action:
package smd;
import com.googlecode.jsonplugin.annotations.SMDMethod;
import com.opensymphony.xwork2.Action;
public class SMDAction {
    public String smd() {
        return Action.SUCCESS;
    }
    @SMDMethod
    public Bean doSomething(Bean bean, int quantity) {
        bean.setPrice(quantity * 10);
        return bean;
    }
}
e)         方法必须用SMDMethod加上注解,这样才能被远程调用,为了安全因素。这个方法会产生一个bean对象,实现修改价格的功能。Action被添加上SMD注解会生成一个SMD,同时参数也会被加上SMDMethodParameter注解。像你所看到的,Action中定义了一个空方法:smd。这个方法是作为Simple Method Definition (定义class中提供的服务),在struts.xml配置<result>时使用type属性值为”json”。
下面是bean的定义:
package smd;
public class Bean {
    private String type;
    private int price;
    public String getType() {
        return type;
    }
    public void setType(String type) {
        this.type = type;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }
}
Xml文件:
<package name="RPC" namespace="/nodecorate" extends="json-default">
    <action name="SMDAction" class="smd.SMDAction" method="smd">
        <interceptor-ref name="json">
            <param name="enableSMD">true</param>
        </interceptor-ref>
        <result type="json">
             <param name="enableSMD">true</param>
        </result>
    </action>
</package>
这里需要注意一点:” enableSMD”这个必须在interceptor和result都要配置.
Js代码:
<s:url id="smdUrl" namespace="/nodecorate" action="SMDAction" />
<script type="text/javascript">
    //load dojo RPC
    dojo.require("dojo.rpc.*");
    //create service object(proxy) using SMD (generated by the json result)
    var service = new dojo.rpc.JsonService("${smdUrl}");
    //function called when remote method returns
    var callback = function(bean) {
        alert("Price for " + bean.name + " is " + bean.price);
    };
    //parameter
    var bean = {name: "Mocca"};
    //execute remote method
    var defered = service.doSomething(bean, 5);
    //attach callback to defered object
    defered.addCallback(callback);
</script>
JsonService会发出一个请求到action加载SMD,同时远程方法会返回一个JSON对象,这个过程是Dojo给action中的方法创建了一个Proxy。因为这是异步调用过程,当远程方法执行的时候,它会返回一个对象到callback方法中。
f)         代理的对象
当使用的注解不是继承自Java,可能你使用代理会出现一些问题。比如:当你使用aop拦截你的action的时候。在这种情况下,这个插件不会自动发现注解的方法。为了避免这种情况发生,你需要在xml中配置ignoreInterfaces为false,这样插件会自己查找注解的所有接口和父类。
注意:这个参数只有在Action执行的过程是通过注解来运行的时候才应该设为false。
<action name="contact" class="package.ContactAction" method="smd">
   <interceptor-ref name="json">
      <param name="enableSMD">true</param>
      <param name="ignoreInterfaces">false</param>
   </interceptor-ref>
   <result type="json">
      <param name="enableSMD">true</param>
      <param name="ignoreInterfaces">false</param>
   </result>
   <interceptor-ref name="default"/>
</action>
			posted @ 
2008-10-04 14:45 Loy Fu 阅读(7773) | 
评论 (2) | 
编辑 收藏的
json plugin的位置在:http://code.google.com/p/
jsonplugin/
下载
json plugin的jar包,放到/WEB-INF/lib/目录下就可以了
Spring + Struts + JPA的项目结构如其他例子中的一致
首先是web.xml
xml 代码
 
    - <?xml version="1.0" encoding="UTF-8"?>  
    
- <web-app id="WebApp_ID" version="2.4"  
    
-     xmlns="http://java.sun.com/xml/ns/j2ee"  
    
-     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    
-     xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">  
    
-     <display-name>quickstart</display-name>  
    
-     <filter>  
    
-         <filter-name>struts2</filter-name>  
    
-         <filter-class>  
    
-             org.apache.struts2.dispatcher.FilterDispatcher  
    
-         </filter-class>  
    
-     </filter>  
    
-     <filter>  
    
-         <filter-name>jpaFilter</filter-name>  
    
-         <filter-class>  
    
-             org.springframework.orm.jpa.support.OpenEntityManagerInViewFilter  
    
-         </filter-class>  
    
-         <init-param>  
    
-             <param-name>entityManagerFactory</param-name>  
    
-             <param-value>entityManagerFactory</param-value>  
    
-         </init-param>  
    
-     </filter>  
    
-     <filter-mapping>  
    
-         <filter-name>jpaFilter</filter-name>  
    
-         <url-pattern>*.action</url-pattern>  
    
-     </filter-mapping>  
    
-     <filter-mapping>  
    
-         <filter-name>struts2</filter-name>  
    
-         <url-pattern>/*</url-pattern>  
    
-     </filter-mapping>  
    
-     <welcome-file-list>  
    
-         <welcome-file>index.jsp</welcome-file>  
    
-     </welcome-file-list>  
    
-     <listener>  
    
-         <listener-class>  
    
-             org.springframework.web.context.ContextLoaderListener  
    
-         </listener-class>  
    
-     </listener>  
    
- </web-app>   
 
加入
jpaFilter,是为了不让hibernate的session过早关闭,因为有的action会通过ajax动态调用。
下面是struts.xml,注意struts.xml需要放在源代码目录下面:
xml 代码
 
    - <?xml version="1.0" encoding="UTF-8" ?>  
    
- <!DOCTYPE struts PUBLIC  
    
-     "-//Apache Software Foundation//DTD Struts Configuration 2.0//EN"  
    
-     "http://struts.apache.org/dtds/struts-2.0.dtd">  
    
- <struts>  
    
-     <constant name="struts.objectFactory" value="spring" />  
    
-     <constant name="struts.devMode" value="true" />  
    
-     <constant name="struts.i18n.encoding" value="UTF-8"/>  
    
-     <package name="person" extends="json-default">  
    
-         <action name="list" method="execute" class="personaction">  
    
-             <result type="json"/>  
    
-         </action>         
    
-     </package>  
    
- </struts>   
 
这里注意,struts.objectFactory告诉struts所有的action都到spring的上下文里面去找,另外还需要注意,我们自己的包要继承自json-default,这样才可以在result的type属性中使用json。
下面是spring的配置文件applicationContext.xml:
xml 代码
 
    - <?xml version="1.0" encoding="UTF-8"?>  
    
- <beans xmlns="http://www.springframework.org/schema/beans"  
    
-     xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"  
    
-     xmlns:aop="http://www.springframework.org/schema/aop"  
    
-     xmlns:tx="http://www.springframework.org/schema/tx"  
    
-     xsi:schemaLocation="  
    
-     http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans-2.0.xsd  
    
-     http://www.springframework.org/schema/tx http://www.springframework.org/schema/tx/spring-tx-2.0.xsd  
    
-     http://www.springframework.org/schema/aop http://www.springframework.org/schema/aop/spring-aop-2.0.xsd">  
    
-     <bean  
    
-         class="org.springframework.orm.jpa.support.PersistenceAnnotationBeanPostProcessor" />  
    
-     <bean id="entityManagerFactory"  
    
-         class="org.springframework.orm.jpa.LocalContainerEntityManagerFactoryBean">  
    
-         <property name="dataSource" ref="dataSource" />  
    
-         <property name="jpaVendorAdapter">  
    
-             <bean  
    
-                 class="org.springframework.orm.jpa.vendor.HibernateJpaVendorAdapter">  
    
-                 <property name="database" value="MYSQL" />  
    
-                 <property name="showSql" value="true" />  
    
-             </bean>  
    
-         </property>  
    
-     </bean>  
    
-     <bean id="dataSource"  
    
-         class="org.springframework.jdbc.datasource.DriverManagerDataSource">  
    
-         <property name="driverClassName" value="com.mysql.jdbc.Driver" />  
    
-         <property name="url" value="jdbc:mysql://localhost/extjs" />  
    
-         <property name="username" value="root" />  
    
-         <property name="password" value="" />  
    
-     </bean>  
    
-   
    
-       
    
-     <bean id="transactionManager"  
    
-         class="org.springframework.orm.jpa.JpaTransactionManager">  
    
-         <property name="entityManagerFactory"  
    
-             ref="entityManagerFactory" />  
    
-     </bean>  
    
-     <tx:annotation-driven transaction-manager="transactionManager" />  
    
-       
    
-     <bean id="personService" class="com.myext.service.impl.PersonServiceJpaImpl"/>  
    
-     <bean id="personaction" class="com.myext.action.PersonPageAction">  
    
-         <property name="person" ref="personService"/>  
    
-     </bean>  
    
- </beans>   
 
这里的bean personaction和strutx.xml中的action class一致就可以了,下面是代码:
action:
java 代码
    - package com.myext.action; 
    
- 
    
- import java.util.ArrayList; 
    
- import java.util.List; 
    
- 
    
- import com.myext.service.PersonService; 
    
- 
    
- public class PersonPageAction { 
    
- private int limit=10; 
    
- private int start=0; 
    
- private PersonService person; 
    
- private int total=0; 
    
- private List persons = new ArrayList(); 
    
- private boolean success=true; 
    
- public boolean getSuccess(){ 
    
- return this.success; 
    
- } 
    
- public void setLimit(int limit) { 
    
- this.limit = limit; 
    
- } 
    
- 
    
- public void setStart(int start) { 
    
- this.start = start; 
    
- } 
    
- 
    
- 
    
- public void setPerson(PersonService person) { 
    
- this.person = person; 
    
- } 
    
- 
    
- public int getTotal() { 
    
- return total; 
    
- } 
    
- 
    
- public void setTotal(int total) { 
    
- this.total = total; 
    
- } 
    
- 
    
- public List getPersons() { 
    
- return persons; 
    
- } 
    
- 
    
- public void setPersons(List persons) { 
    
- this.persons = persons; 
    
- } 
    
- 
    
- public String execute(){ 
    
- this.total = person.getTotal(); 
    
- this.persons = person.getPage(this.start, this.limit); 
    
- return "success"; 
    
- } 
    
- } 
 
service:
java 代码
    - package com.myext.service.impl; 
    
- 
    
- import java.util.List; 
    
- 
    
- import javax.persistence.EntityManager; 
    
- import javax.persistence.PersistenceContext; 
    
- import javax.persistence.Query; 
    
- 
    
- import com.myext.model.Person; 
    
- import com.myext.service.PersonService; 
    
- 
    
- public class PersonServiceJpaImpl implements PersonService { 
    
- private EntityManager em; 
    
- private static String poname = Person.class.getName(); 
    
- @PersistenceContext 
    
- public void setEntityManager(EntityManager em){ 
    
- this.em = em; 
    
- } 
    
- @SuppressWarnings("unchecked") 
    
- @Override 
    
- public List getPage( int start, int limit) { 
    
- Query q = this.em.createQuery("from " + poname ); 
    
- q.setFirstResult(start); 
    
- q.setMaxResults(limit); 
    
- return q.getResultList(); 
    
- } 
    
- @Override 
    
- public int getTotal() { 
    
- return this.em.createQuery("from " + poname).getResultList().size(); 
    
- } 
    
- 
    
- } 
 
页面的代码:
xml 代码
    - xml version="1.0" encoding="UTF-8" ?> 
    
- <%@ page language="java" contentType="text/html; charset=UTF-8" 
    
- pageEncoding="UTF-8"%> 
    
- > 
    
- <html xmlns="http://www.w3.org/1999/xhtml"> 
    
- <head> 
    
- <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    
- <title>Grid3title> 
    
- <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css" /> 
    
- 
    
- <script type="text/javascript" src="extjs/adapter/ext/ext-base.js">script> 
    
- 
    
- <script type="text/javascript" src="extjs/ext-all.js">script> 
    
- <script type="text/javascript" src="extjs/ext-lang-zh_CN.js">script> 
    
- head> 
    
- <body> 
    
- <script type="text/javascript" src="grid3.js">script> 
    
- <div id="grid3" > 
    
- div> 
    
- body> 
    
- html> 
 
grid3.js代码
js 代码
    -  
    
-  
    
-  
    
- Ext.onReady(function(){ 
    
- Ext.BLANK_IMAGE_URL = 'extjs/resources/images/default/s.gif'; 
    
- Ext.QuickTips.init(); 
    
- var sm = new Ext.grid.CheckboxSelectionModel(); //CheckBox选择列 
    
- var cm = new Ext.grid.ColumnModel([ 
    
- new Ext.grid.RowNumberer(), //行号列 
    
- sm, 
    
- {header:'编号',dataIndex:'id'}, 
    
- {header:'性别',dataIndex:'sex',renderer:function(value){ 
    
- if(value=='male'){ 
    
- return "男"; 
    
- }else{ 
    
- return "女"; 
    
- } 
    
- }},  
    
- {header:'名称',dataIndex:'name'}, 
    
- {header:'描述',dataIndex:'descn'} 
    
- ]); 
    
- 
    
- 
    
- var ds = new Ext.data.Store({ 
    
- proxy: new Ext.data.HttpProxy({url:'list.action'}),//调用的动作 
    
- reader: new Ext.data.JsonReader({ 
    
- totalProperty: 'total', 
    
- root: 'persons', 
    
- successProperty :'success' 
    
- }, [ 
    
- {name: 'id',mapping:'id',type:'int'}, 
    
- {name: 'sex',mapping:'sex',type:'string'}, 
    
- {name: 'name',mapping:'name',type:'string'}, 
    
- {name: 'descn',mapping:'descn',type:'string'} //列的映射 
    
- ]) 
    
- }); 
    
- 
    
- 
    
- var grid = new Ext.grid.GridPanel({ 
    
- el: 'grid3', 
    
- ds: ds, 
    
- sm: sm, 
    
- cm: cm, 
    
- width:700, 
    
- height:280, 
    
- bbar: new Ext.PagingToolbar({ 
    
- pageSize: 10, 
    
- store: ds, 
    
- displayInfo: true, 
    
- displayMsg: '显示第 {0} 条到 {1} 条记录,一共 {2} 条', 
    
- emptyMsg: "没有记录" 
    
- }) //页脚显示分页 
    
- }); 
    
-  
    
- grid.render(); 
    
- ds.load({params:{start:0, limit:10}}); //加载数据 
    
- }); 
 
注意,这里的gridpanel一定要设置高度,否则数据是显示不出来的。
最后启动tomcat,在浏览器里输入http://localhost:8080/extjs/grid3.jsp,就可以看到效果
			posted @ 
2008-10-04 14:35 Loy Fu 阅读(4558) | 
评论 (2) | 
编辑 收藏
			     摘要: http://prototype.conio.net/dist/ 
下载(对Ajax支持的prototype--js函数库):
    prototype-1.4.0.js
    或
    prototype-1.4.0.tar.gz 
 
http://code.google.com/p/jsonplugin/downloads/list
下载(Struts2...  
阅读全文
			posted @ 
2008-10-04 14:19 Loy Fu 阅读(2071) | 
评论 (0) | 
编辑 收藏摘要:介绍Struts2中的零配置(Zero Configuration),以及如何用COC来更好地简化Struts2的配置。在第一章,我使用Maven来创建一个起点项目;第二章,以该项目为例,讲解如何使用Struts2的零配置;第三章,论述第二章中的实现方式的缺陷,然后讲解如何使用COC来改进这些缺陷,并进一步简化Struts2的配置。附件是这篇文章用到的示例代码。
一、从零开始
这里,我将建立一个新的示例项目,作为讲解的起点。我使用JDK 6、Maven 2、Eclipse 3.3来建立这个示例,如果读者对Maven2不熟也没关系,这只是个示例。
首先,运行下边的命令:
                mvn archetype:create -DgroupId=demo.struts -DartifactId=demo-struts-coc -DarchetypeArtifactId=maven-archetype-webapp
这会建立如下的目录结构:
 |- POM.xml
 |- src
     |- main
         |- resources
         |- webapp
             |- index.jsp
             |- WEB-INF
                 |- web.xml
然后我们在src/main目录下新建一个名为java的目录,用来放置java代码。在src下建立test目录,并在test目录下建立java目录,用来放置测试代码。另外,我这个示例不想使用JSP,所以我将src/main/webapp目录下的index.jsp改为index.html。
现在,需要配置该项目要用到哪些lib。在POM.xml中加入struts2-core:
xml 代码
 
    - <dependency>  
    
-     <groupId>org.apache.struts</groupId>  
    
-     <artifactId>struts2-core</artifactId>  
    
-     <version>2.0.9</version>  
    
- </dependency>   
 
另外,我想在Eclipse里使用jetty来启动项目并进行测试,所以在POM.xml中再加入jetty、jetty-util、servlet-api等的依赖,详情见附件。
我希望使用Eclipse来作为这个项目的IDE,所以,我在命令行状态下,进入这个项目所在的目录,运行:
                mvn eclipse:eclipse
然后使用Eclipse导入这个项目。如果你是第一次用Eclipse导入用Maven生成的项目,那你需要在Eclipse里配置一个名叫M2_REPO的Variable,指向你的Maven 2的repository目录。缺省情况下,它应该位于${user.home}/.m2/repository。
OK!现在我们已经可以在Eclipse中进行工作了。
修改src/main/webapp/WEB-INF/web.xml,加入struts2的FilterDispatcher并设置filter-mapping。在这个示例中我将url-pattern设为"/app/*",也就是说,url的匹配是基于路径来做的。这只是我的个人喜好而已,你也可以将它设成"*"。
既然是在讲struts2的零配置,当然是可以不要任何配置文件的。但是为了更好地进行“配置”,我还是建立了struts.xml文件(在src/main/resources目录下)。我不喜欢url最后都有个action后缀,现在,我在struts.xml中配置struts.action.extension,将这个后缀去掉:
xml 代码
 
    - <struts>  
    
-     <constant name="struts.action.extension" value="" />  
    
- </struts>   
 
然后我在src/test/java下建立demo/RunJetty.java文件,main方法如下:
java 代码
 
    - public static void main(String[] args) throws Exception {  
    
-     Server server = new Server(8080);   
    
-     File rootDir = new File(RunJetty.class.getResource("/").getPath()).getParentFile().getParentFile();  
    
-     String webAppPath = new File(rootDir, "src/main/webapp").getPath();  
    
-     new WebAppContext(server, webAppPath, "/");  
    
-     server.start();  
    
- }   
 
现在,在Eclipse里运行或调试这个RunJetty.java,用浏览器打开http://localhost:8080/看看吧。如果不出问题,应该可以访问到webapp目录下的index.html了。有了Jetty,你还在用MyEclipse或其它插件么?
二、零配置
首先要澄清一点,这里说的零配置并不是一点配置都没有,只是说配置很少而已。
Struts2(我只用过Struts 2.0.6和2.0.9,不清楚其它版本是否支持零配置)引入了零配置的新特性,元数据可以通过规则和注解来表达:A "Zero Configuration" Struts application or plugin uses no additional XML or properties files. Metadata is expressed through convention and annotation.
目前,这个新特性还在测试阶段,但经过一段时间的使用,我觉得这个特性已经可用。下面我讲一下如何使用它。
1. Actions的定位
以前需要在xml配置文件中配置Action的name和class,如果使用零配置,所带来的一个问题就是如何定位这些Action。我们需要在web.xml中找到struts2的filter的配置,增加一个名为actionPackages的init-param,它的值是一个以逗号分隔的Java包名列表,比如:demo.actions1,demo.actions2。struts2将会扫描这些包(包括这些包下边的子包),在这些包下,所有实现了Action接口的或者是类名以“Action”结尾的类都会被检查到,并被当做Action。
以前,我们写Action必须要实现Action接口或者继承ActionSupport。但是,上面提到的类名以"Action"结尾的类并不需要这样做,它可以是一个POJO,Struts2支持POJO Action!
下面是actionPackages的配置示例:
xml 代码
 
    - <filter>  
    
-   <filter-name>struts2</filter-name>  
    
-   <filter-class>org.apache.struts2.dispatcher.FilterDispatcher</filter-class>  
    
-   <init-param>  
    
-     <param-name>actionPackages</param-name>  
    
-     <param-value>demo.actions1,demo.actions2</param-value>  
    
-   </init-param>  
    
- </filter>   
 
2. 示例
现在我们建立demo.actions1.app.person和demo.actions2.app.group两个包,在demo.actions1.app.person包下建立ListPeopleAction.java,在demo.actions2.app.group下建立ListGroupAction.java。作为示例,这两个类只是包含一个execute方法,返回"success"或"error",其它什么都不做:
java 代码
 
    - public String execute() {  
    
-     return "success";  
    
- }   
 
在Filter的配置中,我指定actionPackages为demo.actions1,demo.actions2,当系统启动时,Struts2就会在这两个包下扫描到demo.actions1.app.person.ListPeopleAction和demo.actions2.app.group.ListGroupAction。
3. Action and Package name
Struts2扫描到Action后,从actionPackages指定的包开始,子包名会成为这个Action的namespace,而Action的name则由这个Action的类名决定。将类名首字母小写,如果类名以Action结尾,则去掉"Action"后缀,形成的名字就是这个Action的名字。在如上所述的示例中,actionPackages指定为demo.actions1,demo.actions2,那么你可以这样访问demo.actions1.app.person.ListPeopleAction:
                http://localhost:8080/app/person/listPeople
4. Results
Struts2是通过"Result"和"Results"两个类级别的annotations来指定Results的。
作为示例,我们在webapp目录下建两个html文件:success.html和error.html,随便写点什么内容都可以。现在假设我们访问/app/person/listPeople时,或Action返回success就转到success.html页面,若是error就转到error.html页面,这只需要在ListPeopleAction类上加上一段注解就可以了:
java 代码
 
    - @Results({  
    
-     @Result(name="success", type=NullResult.class, value = "/success.html", params = {}),  
    
-     @Result(name="error", type=NullResult.class, value = "/error.html", params = {})  
    
- })  
    
- public class ListPeopleAction {  
    
-     public String execute() {  
    
-         return "success";  
    
-     }  
    
- }   
 
同上,我们给ListGroupAction也加上注解。
现在,我们已经完成了一个零配置的示例。我们并没有在xml文件里配置ListPeopleAction和ListGroupAction,但它们已经可以工作了!
用Eclipse运行RunJetty,然后用浏览器访问http://localhost:8080/app/person/listPeople和http://localhost:8080/app/group/listGroup看看,是不是正是success.html(或error.html)的内容?
5. Namespaces
如上所述,namespace由包名所形成,但我们可以使用"Namespace"注解来自己指定namespace。
6. Parent Package
这个配置用得较少。Struts2提供一个"ParentPackage"注解来标识Action应该是属于哪个package。
三、使用COC
如上所述,Struts2用注解来实现零配置。然而,这不是我喜欢的方式。在我看来,这不过是将配置从XML格式换成了注解方式,并不是真的零配置。而且,这种方式也未必比XML形式的配置更好。另外,对元数据的修改必然会导致项目的重新编译和部署。还有,现在的Struts2版本似乎对Result注解中的params的处理有些问题。
其实,Struts2的actionPackages配置已经使用了COC,那为什么不能为Results也实现COC,从而去除这些每个Action都要写的注解?
在严谨的项目中,package、action的名称和页面的路径、名称一定存在着某种关系。比如,页面的路径可能和package是对应的,页面的名称可能和action的名称是对应的,或是根据某种法则运算得到。我们知道webwork2和struts2有个配置叫global-results。我们为什么不能根据这些对应规则写个Result,将它配到global-results中,从而真正免去result的配置?
事实上,我推荐Struts2的使用者只用Struts2输出XML或JSON,放弃UI,页面这层还是使用标准的HTML、CSS和一些JS组件来展现。许多人反映Struts2慢,确实,Struts2是慢,很慢!慢在哪儿?很大一部分因素是UI这层引起的,特别是使用了过多的Struts2的tag,并使用了ajax theme。但是,如果我们放弃了Struts2的笨拙的UI,Result只输出XML或JSON,UI则使用标准的HTML+CSS,使用JS组件(DOJO、Adobe Spry Framework、YUI-Ext等)来操作Struts2的输出数据,情况将会如何?我们会得到一个高性能、高可配的、UI和应用服务器的职责分割更为明确、合理的、更易于静态化部署的开发组合。
这似乎是阉割了Struts2,但是这样阉割过的Struts2摆脱了性能低下的包袱,更轻、更现代化。
有些扯远了,言归正传,不管是让Struts2输出XML或JSON,还是输出页面,我们都有办法根据项目的规则写一个Result,将它配到global-results中,从而大大减少Result的配置。
假设我们让Struts2只输出JSON,有个jsonplugin可以做这件事。使用JsonResult时,不再需要知道页面的位置、名称等信息,它仅仅是数据输出,那么我们就可以将这个Result配成全局的,大部分Action将不再需要Result的配置。
作为示例,我假设我的例子中输出的两个html页面(success.html和error.html)是JSON,我们看看怎么免去我例子中的两个Action的Result注解。
首先,我们删去ListPeopleAction和ListGroupAction两个Action的注解,并修改struts.xml文件,加入:
xml 代码
 
    - <package name="demo-default" extends="struts-default">  
    
- <global-results>  
    
- <result name="success">/success.html</result>  
    
- </global-results>  
    
- </package>   
 
请记住这只是一个示例,为了方便,我没在项目中加入jsonplugin来作真实的演示,我只是假设这个success是json输出,读者可以自行使用jsonplugin来作实验。
现在,离成功不远了,但是项目仍然不能正常运行。我们的Action返回success,但并不会匹配到global-results中配置。为什么呢?因为,我们这里是把global-results配置到"demo-default"这个package下的,而Struts2根据actionPackages找到的Action不会匹配到这个package上。解决办法也很简单,还记得上面讲到的Parent Package吧?给Action加个注解,指定ParentPackage为"demo-default"。但这样可不是我喜欢的,其实有更好的办法,我们在struts.xml中加个constant就好了:
xml 代码
 
    - <constant name="struts.configuration.classpath.defaultParentPackage" value="demo-default" />   
 
现在,大功告成!运行RunJetty来测试下吧!你可以访问/app/person/listPeople,可以访问/app/group/listGroup,而所有的配置仅仅是web.xml和struts.xml中的几行,我们的Java代码中也没有加注解。如果再加上几百个Action呢?配置仍然就这几行。
可是,某些Action确实需要配置怎么办?对这些Action,你可以加注解,也可以针对这些Action来写些XML配置。一个项目中,大部分Action的配置是可以遵从一定规则的,可以使用规则来简化配置,只有少部分需要配置,这就是COC。
posted @ 
2008-10-04 14:08 Loy Fu 阅读(1056) | 
评论 (0) | 
编辑 收藏