UAP 前端简单总结

   前几篇文章回忆了DataForm和DataGird的代码创建过程，这些也是项目中遇到经常用的一些功能点。看完这两篇以后代码也许会懂一些不过为什么这么写还是需要在简单的总结总结记一下。

     首先是表单的创建

         导入创建表单所需的js类。
         定义与表单交互数据的服务器url。
         创建表单数据容器。
         创建表单实例。
         切记表单要load才能显示。
         将表单添加到容器中。

表单要load才能显示这是比较重要的一点，在项目开发的前期经常会发现表单的代码写完了却没有显示，这些都是忘记表单的load。

    表单示例展示步骤

        新建一个表单
        将表单数据保存到数据库
        展现要编辑的数据
        定制表单-皮肤

表格的示例功能

        表格数据的显示。
        表格数据的编辑。
        表格数据的新建。
        表格数据的删除。
       表格数据的导出成excel文件。
       表格数据的查询。

表格中带有导出excel文件不过在项目中没有用到。

创建表格和表单步骤是类似的从两篇文章的对比就可以看出来

      与表单类似，创建一个表格主要也包括以下步骤：
      导入创建表格所需的js类。
      定义与表格交互数据的服务器url。
      创建表格数据容器。
     创建表格实例
     调用表格load方法。
     将表格添加到容器中

从上面的一些小总结可以清楚的知道如何创建表单和表格了，再实现代码就容易很多了，下面是一个表单和表格的联动过程实例的关键代码：

列表与表单联动示例功能
      列表显示数据。
       列表新增数据，以表单形式新增。
     列表编辑数据, 表单显示数据。

 新增数据:

   

    me._btnNew_onclick = function()    {         //通过视图控制器获取视图对象         var mvc = new form.views.FormDetailViewController();         var _detailView = new mvc.getView();        _detailView.objID = null;        //将视图对象展现出来        me._showView(_detailView);    };    me._btnNew_onclick = function()    {         //通过视图控制器获取视图对象         var mvc = new form.views.FormDetailViewController();         var _detailView = new mvc.getView();        _detailView.objID = null;        //将视图对象展现出来        me._showView(_detailView);    };

     me._showView = function(p_view)    {                //TODO: 表单视图保存后事件处理。p_view.formEntityContainer.on("saved", function(e){mx.indicate("info","保存成功");me.view.dataGrid.load();me.view.hsplit.removeControl(p_view);                 });        //加载详细信息页面对象。         p_view.load();        if(me.view.hsplit.controls.length<3){           //将表单视图对象添加到hsplit中           me.view.hsplit.addControl(p_view,1);        }    }

onsave事件在前两篇文章的表单和表格的保存中都有用到，这里的表单和表格联动也是通过这个方法来实现的。表单和表格在项目中遇到的内容就这些，当然还有一些高深的“皮肤”应用，这个项目中没有用到我只是在前期有个简单的了解也是很熟悉所以这里就不在这里写了。再有不懂的内容通过查看API和UAP提供的实例就差不多能明白了，刚开接触要会学习和有耐心。