Er Get Started

安装edp

首先需要安装edp，命令是npm install -g edp，命令执行完毕之后，通过运行edp --version检查是否安装成功。

安装edp的riaproject扩展

git clone https://github.com/ecomfe/edpx-ria.git
cd edpx-ria
npm install .
edp help riaproject

初始化项目

mkdir my-project
edp riaproject init
edp riaproject genpage /hello/world

此时目录中应该有一些默认初始化好的代码，例如：

dep/ edp-webserver-config.js module.conf edp-build-config.js index.html src/

通过命令edp ws start启动web server，访问http://localhost:8848/#/hello/world，就能看到一个最基本的页面。

使用esui的控件

默认情况下，riaproject初始化的项目已经添加了esui的依赖，因此我们可以在模板中直接使用esui的控件，例如：

<!-- src/hello/world.tpl.html -->
<div><div data-ui="type:Button;id:btn">Hello World</div></div>

对于比较复杂的控件，比如esui Table，除了在模板中添加对应的代码之外，还需要在View中补充需要的内容。例如：

<!-- src/hello/world.tpl.html -->
<div data-ui="type:Table;id:table"></div>

我们还需要修改src/hello/WorldView.js，添加esui Table所需要的数据。

HelloWorldView.prototype = {
  template: 'helloWorld',
  ...
  uiProperties: {
    table: {
      datasource: tbDataSource,
      sortable: true,
      columnResizable: true,
      followHead: true,
      breakLine: 1,
      select: 'multi',
      noDataHtml: '<p style="margin:0;">nothing</p>',
      fields: [
        ...
      ]
    }
  },
  ...

esui数据初始化

上边的demo中，Table的数据是由uiProperties.table.datasource（Crumb是使用path，具体参考esui的demo）来初始化的，如果Table初始化的数据需要异步获取，则可以将数据写入Model.prototype.datasource，然后去掉uiProperties.table.datasource字段。

    //src/hello/HelloWorldModel.js
    var datasource = require( 'er/datasuorce' );
    ...
    function HelloWorldModel() {
        Model.apply( this, arguments );
    }

    HelloWorldModel.prototype = {
        // datasource不能是空对象，否则Model的处理逻辑有问题
        datasource: {
            tableData: datasource.remote(url,{
                method: 'POST',
                data: {'key': 'value'}
            })
        }
    };

我们还要在对应子模块下的html中加入一个替换标志data-ui-*:@ModelProAttr，这样UIView的处理过程中Model.datasource.tableData才会作为options出现，但是最后会用UIView.uiProperties覆盖一次，所以不要出现uiProperties.table.datasource字段Model初始化才有效。这个规则在ef/doc/UIView.md里边有说明，但是写错了，datasource属性的值应该是this.model.get('users')。

    <!-- src/hello/HelloWorld.tpl.html -->
    <div data-ui="type:Table;id:table;datasource:@tableData"></div>

Model.prototype.datasource的数据类型会影响到数据最后将被如何使用，具体请查阅er/datasource.js的方法和er/Model中datasource对象的一大片注释

更多控件的使用方式可以参考esui的demo

数据模拟

TODO

项目发布

貌似没啥好说的，直接edp build -f即可，生成的代码都在output目录里面。