dwr使用笔记

来源：互联网发布：mac怎么截屏快捷键编辑：程序博客网时间：2024/05/16 04:44

1、Ext2.0目录结构

1.1、adapter目录,负责将里面提供第三方底层库（包括Ext自带的底层库）映射为Ext所支持的底层库ext-xxxx-adapter.js

    1.1.1、/ext/ext-base.js 必备基础引用***

1.2、example目录Ext2.0应用实例

1.3、resource目录 Ext UI资源文件目录，如CSS、图片文件都存放在这里面。

    1.3.1、/css/ext-all.css 必备基础引用***

1.4、ext-all-debug.js 无压缩的Ext全部的源码(用于调试)

1.5、ext-all.js    压缩后的Ext全部源码，加速执行效率,必备基础引用***

1.6、source目录 Ext js源文件目录，用于查看js的函数实现和注释，其中的locale目录是Ext国际化可以引入的资源文件

    1.6.1、/locale/ext-lang-<%=request.getLocale().toString()%>.js 必备基础引用***

---------------------------------------------------

2、 Grid的使用实例(包含分页和httpProxy)

2.1、在jsp文件中引入js、css文件，文件的引入是有顺序的

    <script type='text/javascript' src='<%=strContextPath%>/dwr/util.js'></script>

    <link rel="stylesheet" type="text/css" href="<%=strContextPath%>/script/ext/resources/css/ext-all.css" >
    <script type="text/javascript" src="<%=strContextPath%>/script/ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="<%=strContextPath%>/script/ext/ext-all.js"></script>
    <script type="text/javascript" src="<%=strContextPath%>/script/ext/source/local/ext-lang-<%=request.getLocale().toString()%>.js"></script>
    <script type="text/javascript" src="<%=strContextPath%>/script/ext/newbee/page_grid.js"></script>

    util.js 引入此文件为了使用$操作符根据ID获取页面的组件等系列工具函数，例如：$('local-states').value
    ext-all.css Ext用到的css式样
    ext-base.js Ext必备基础引用，它和ext-all.js、ext-lang-<%=request.getLocale().toString()%>.js文件的引入必须保持现有的顺序
    ext-all.js Ext主文件，如果要在调试模式下使用可以替换为ext-all-debug.js
    ext-lang-<%=request.getLocale().toString()%>.js Ext国际化文件的动态写法，根据浏览器的语言设定引入不同的国际化文件
    page_grid.js 自定义Grid的js文件

2.2、添加grid-div

    <div id="grid-newbee"></div>

2.3、编写 page_grid.js 文件的注意事项

    2.3.1、Ext.data.Record.create()创建常用属性

        name : String
        The name by which the field is referenced within the Record. This is referenced by, for example the dataIndex property in column definition objects passed to Ext.grid.ColumnModel

        mapping : String
        (Optional) A path specification for use by the Ext.data.Reader implementation that is creating the Record to access the data value from the data object. If an Ext.data.JsonReader is being used, then this is a string containing the javascript expression to reference the data relative to the record item's root. If an Ext.data.XmlReader is being used, this is an Ext.DomQuery path to the data item relative to the record element. If the mapping expression is the same as the field name, this may be omitted.

        type : String
        (Optional) The data type for conversion to displayable value. Possible values are

        auto (Default, implies no conversion)
        string
        int
        float
        boolean
        date

        dateFormat : String
        (Optional) A format String for the Date.parseDate function.

        var TopicRecord = Ext.data.Record.create([
            {name: 'title', mapping: 'topic_title'},
            {name: 'author', mapping: 'username'},
            {name: 'totalPosts', mapping: 'topic_replies', type: 'int'},
            {name: 'lastPost', mapping: 'post_time', type: 'date', dateFormat: 'Y-m-d H:i:s'},
            {name: 'lastPoster', mapping: 'user2'},
            {name: 'excerpt', mapping: 'post_text'}
        ]);

    2.3.2、autoExpandColumn参数值引用的是ColumnModel中的ID而不是dataIndex

    var grid = new Ext.grid.GridPanel({
        store: store,
        sm : sm,
        columns: [
            new Ext.grid.RowNumberer(),
            sm,
            {header: '编号', width: 10, sortable: true, dataIndex: 'verNumber'},
            {id:'strName',header: '内容', width: 75, sortable: true, dataIndex: 'strName'}, // 指定id是为了在autoExpandColumn属性中使用
            {header: '课程', width: 10, sortable: true, dataIndex: 'CourseName'},
            {header: '题型', width: 10, sortable: true, dataIndex: 'QuestionTypeName'},
            {header: '难度', width: 10, sortable: true, dataIndex: 'DifficultyName'},
            {header: '区分度', width: 10, sortable: true, dataIndex: 'DistinguishName'},
            {header: '要求', width: 10, sortable: true, dataIndex: 'DemandName'},
            {header: '编辑', width: 10, sortable: true, dataIndex: 'ModifierName'},
            {header: '编辑日期', width: 15, sortable: true, renderer: Ext.util.Format.dateRenderer('Y-m-d H:i:s'), dataIndex: 'dtModifyTime'}],
        stripeRows: true,
        autoExpandColumn: 'strName',    // 这里引用的是列id，而不是dataIndex
        height:Ext.get("grid-newbee").getHeight(),
        width:Ext.get("grid-newbee").getWidth(),
        title:'试题列表',
        bbar: new Ext.PagingToolbar({
            pageSize: newBeePageSize,
            store: store,
            displayInfo: true,
            displayMsg: '显示 {0} - {1}，共 {2} 条',
            emptyMsg: '没有数据需要显示'
        }),
        tbar: new Ext.PagingToolbar({
            pageSize: newBeePageSize,
            store: store,
            displayInfo: true
        })
    });

2.4、提供数据的servlet，web.xml配置

2.5、改进Ext执行效率

    2.5.1、修改 ext-base.js 文件，把BLANK_IMAGE_URL : "http:/"+"/extjs.com/s.gif"改为BLANK_IMAGE_URL:"../../resources/images/default/s.gif"

    2.5.2、自定义字符需要国际化请使用java方式：在主jsp文件中定义js变量，并使用内嵌java代码给变量赋值，然后在其他js代码中引用这些变量。

------------------------------------------------------------------------------

3、DWR使用手册

1、下载 dwr.jar 包，把它放到你的 webapp 的 WEB-INF/lib 目录下。

2、编辑配置文件,需要把下面的代码加到 WEB-INF/web.xml 文件中。<servlet> 那部分需要和其他的 <servlet> 在一起，<servlet-mapping> 部分也一样。

    <servlet>
        <servlet-name>dwr-invoker</servlet-name>
        <servlet-class>uk.ltd.getahead.dwr.DWRServlet</servlet-class>
        <init-param>
            <param-name>debug</param-name>
            <param-value>true</param-value>
        </init-param>
        <init-param>
          <param-name>config-newbeeg</param-name>
          <param-value>/WEB-INF/dwr-newbee.xml</param-value>
        </init-param>
    </servlet>
    <servlet-mapping>
        <servlet-name>dwr-invoker</servlet-name>
        <url-pattern>/dwr/*</url-pattern>
    </servlet-mapping>

    注意：debug参数在正式发布时要设为false；configXXXX参数指定了dwr的主配置文件。

3、开发DWR服务组件和数据组件

    3.1、使用jre已有类作为服务组件。比如：java.util.Date

    3.2、开发单实例公用服务组件。

    public class ServicFactory {

        // 以下为类域

        private static final ServicFactory instance = new ServicFactory();

        @SuppressWarnings("unused")
        private static ServicFactory getInstance() {
            return instance;
        }

        /**
        * 用户登录验证
        *
        * @param userName 用户名
        * @param password 用户密码
        * @return boolean 返回true表示可以登录，false表示不能登录
        * @Author guo
        * @EditTime 2008-9-26 下午09:17:16
        */
        public static boolean canLogin(String userName, String password){

            return true;
        }

        // 以下为对象域

        private ServicFactory() {
        }


    }

    3.3、开发对象隔离服务组件

    public class ServiceSum {

        public ServiceSum() {
        }

        public int sum(int[] array){
            int result = 0;
            for (int i = 0; i < array.length; i++) {
                result+=array[i];
            }
            return result;
        }

        public void setNCount(int count) {
            System.out.println(count);
        }

    }

    3.4、数据Bean

    public class User {

        private String id;
        private String name;

        public User() {
        }

        public User(String id,String name) {
            this.id = id;
            this.name = name;
        }

        public String getId() {
            return id;
        }

        public void setId(String id) {
            this.id = id;
        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

    }


4、在WEB-INF目录下的web.xml旁边创建一个dwr.xml文件。可以从最简单的配置开始：

    <!DOCTYPE dwr PUBLIC
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN"
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd">
    <dwr>
    <allow>
        <create creator="new" javascript="JDate">
          <param name="class" value="java.util.Date"/>
        </create>

        <create creator="new" javascript="ServiceSum">
          <param name="class" value="com.newbee.service.ServiceSum"/>
          <include method="sum"/>
          <include method="setNCount"/>
        </create>

        <create creator="none" javascript="ServicFactory">
          <param name="class" value="com.newbee.service.ServicFactory"/>
          <include method="canLogin"/>
          <include method="getUser" />
        </create>

        <convert match="com.newbee.bean.*" converter="bean"/>
    </allow>
    </dwr>

    注意：
        3.1、creator="new",表示生成一个对象；creator="none"，表示调用类方法和属性(static)
        3.2、javascript 指出在页面调用此方法活属性的js对象名称
        3.3、include和exclude属性来更精确的控制远程可以被调用的方法
        3.4、<convert match="com.newbee.bean.*" converter="bean"/>，把指定包中的Bean与页面中的js对象进行转换(bean必需包含无参数构造函数)
        3.5、原生类型，String，像BigDecimal这样的简单对象及其数组和集合的转换器已经有了，不需要再指定。

5、获取DWR服务组件列表和使用某一组件需要引入的js文件

    5.1、访问以下地址获取服务组件列表

        http://localhost:8080/[YOUR-WEBAPP]/dwr/

    5.2、获取使用某一组件要引入的js文件，点击上面列表中相应组件的链接可以看到如下的引入文件

        <script type='text/javascript' src='/[应用名称]/dwr/interface/[组件名称].js'></script>
        <script type='text/javascript' src='/[应用名称]/dwr/engine.js'></script>
        <script type='text/javascript' src='/[应用名称]/dwr/util.js'></script>

        注意： /[应用名称] 路径可以用 request.getContextPath() 替代。

6、在页面中使用定义的js对象

    <script type='text/javascript' src='/newbee/dwr/interface/ServicFactory.js'></script>
    <script type='text/javascript' src='/newbee/dwr/interface/ServiceSum.js'></script>
    <script type='text/javascript' src='/newbee/dwr/interface/JDate.js'></script>
    <script type='text/javascript' src='/newbee/dwr/engine.js'></script>
    <script type='text/javascript' src='/newbee/dwr/util.js'></script>

    <script language="javascript">

        ServicFactory.canLogin('sean','123',
            {
                callback: function(msg) { alert(msg); },
                timeout: 3000,
                errorHandler: function(msg) { alert(msg); }
            }
        );

        ServicFactory.getUser('12',
            {
                callback: function(user) { debugger;alert(user.id+'#'+user.name); },
                timeout: 3000,
                errorHandler: function(msg) { alert(msg); }
            }
        );

        var arr=[12,23,5,3,25,98,76,54,56,76,3000];
        ServiceSum.sum(arr,
            {
                callback: function(msg) { alert(msg); },
                timeout: 3000,
                errorHandler: function(msg) { alert(msg); }
            }
        );

        ServiceSum.setNCount(100);

        JDate.toString({
                callback: function(msg) { alert(msg); },
                timeout: 3000,
                errorHandler: function(msg) { alert(msg); }
            });

    </script>

7、使用DWR开发流程

    7.1、开发新服务组件类或添加服务组件中的方法
    7.2、修改dwr配置文件
    7.3、如果是开发的新服务器组件就需要在页面文件中引入对应的js文件