如何集成NUI控件实现快速开发 技术解决方案

访问demo: http://ui.67815.cn/common/scripts/design_ui.jsp

1.1   问题或场景

在成飞ERP3.0项目中，客户在使用我们公司的EOS开发过程中，反应了很多Jsp页面中的开发问题，问题包括：

1、eos6.5中的ui控件的某个属性的作用；

2、在JSP中如何编码实现某个控件的展现；

3、页面比较复杂，嵌套较多，不知道如何布局；

4、页面中使用除RichWEB控件以外的ui组件或插件,引入后导致RichWeb中的某些控件不兼容，如：EXT.js、Fexinchart.js；

5、开发系统功能时，页面花销的时间占80%以上；

等等。。。

 

1.2   目的

1、针对基于B/S系统的项目开发中提高开发效率；

2、让业务人员可以快速画出用户需求的页面原型；

3、开发人员无需大量的重复工作，只需要修改原型页面中配置即可实现业务功能；

4、实现前端页面美工和业务逻辑程序的完美分工；

5、实现所见即所得的在线UI设计工具;

6、开发人员使用NUI就能满足各种各样的页面需求，无需考虑与其它UI组件的在一起共处的兼容性;

7、在UI设计页面中，只需要通过鼠标拖拽就能布局，通过属性面板编辑就能马上渲染页面效果,减少大量时间去查阅控件api属性;

1.3   参考资料

nui-3.1.1/doc/api

1.4   工具和技术

开发语言：Javascript

 

1.5   系统运行环境

浏览器：IE7及以上、Firefox、GoogleChrome

2    总体解决方案

在集成NUI控件实现快速开发页面主要分为三个步骤：

一、归纳整理NUI的所有控件;

二、实现所有控件的模版类，并配置控件模版类;

三、在集成后的UI设计页面中创建控件对象;

2.1   归纳整理NUI的所有控件

在基于NUI控件的页面开发过程中，我们可以根据Primeton NUI Demo或者api文档看到使用Nui开发页面的统一规范，即：所有的控件都是基于html原生态元素标签进行属性扩展的！

由此，我们需要通过查阅NUI控件的api整理出控件的属性列表。我们整理好控件的属性列表后，将会配置到模版类中。最终整理的属性列表会在原型页面设计时展现在UI设计工具的属性面板中。

另外，在Nui控件存在比较特殊的控件，在设计DataGrid和TreeGrid控件原型时，还需要展现DataGrid或者TreeGrid字段列表，并提供对字段的增删改查功能。在保存时渲染控件效果。

2.2   实现所有的NUI控件模版类，并配置控件模版类

首先，在实现控件的模版类前，先介绍下模版类的定义规则：

      

定义名

类型

功能描述

备注

pkg

属性

控件的命名控件定义，如met.nui

用于定义控件的包名,定义包名时都要小写

clazzName

属性

控件的类名，如:TreeGrid

定义类名时用英文，首字母大写

Cons

方法

控件的构造器

该方法是控件的构造器

Stat

对象

在Stat区域中定义的属性和方法为静态属性或者静态方法；

例如：我们在met.nui.TreeGrid类的Stat区域中定义了属性Props,那么就可以通过met.nui.TreeGrid.Props来访问到静态属性

Props

数组

定义控件的属性列表

当我们通过NUIApi或者Primeton NUI Demo查阅到控件的属性列表，并一一列到该数组中即可满足控件的属性列表配置了

 

columns

数组

定义表格控件(DataGrid)或者树表格(TreeGrid)控件的列的属性列表

需要查阅DataGrid或TreeGrid的api，将列的属性列表配置到属性上。在原型页面设计时，该控件的列的属性列表就会以表格的方式展现并提供配置

 

Priv

对象

在Priv区域中，配置的属性或者方法，将在创建该控件对象后，可以通过对象访问属性或者方法；或者在构造器中调用对象的权限方法或者属性。

如：我们在met.nui.DataGrid的Priv区域中定义了url属性，访问方式如下：

Var obj = new met.nui.DataGrid();

alert(obj.url);

init(cfg)

方法

在Priv区域中定义该方法，并且在构造器中调用该方法；

在控件模版类的对象创建时，执行该方法。

getColumnArray

方法

在Priv区域中定义的方法，该方法是针对TreeGrid和DataGrid而定义的接口。目的是在原型页面设计时，展现表格的所有列的属性列表到属性面板下方的表格中

 

toHtml

方法

在Priv中定义的方法，所有控件模版类都要实现该方法，功能包括：1、为了在创建该模版对象后，能正常渲染到原型设计页面中

2、为了正确输出控件的html代码

 

showChange

方法

在Priv中定义的方法，所有控件模版类都要实现该方法，功能：在UI页面设计的属性面板中，当修改属性后就会执行该方法并渲染该控件属性修改后的效果到页面中

 

toScript

方法

在Priv中定义，目前所有控件定义了该空方法

该方法是为了扩展UI设计工具的脚本功能

toCode

方法

在Priv中定义，目前所有控件定义了该空方法

该方法是类扩展UI设计工具的复杂编码功能

propsToArray

方法

在Priv中定义，所有控件模版类都要实现该方法；功能：在UI设计工具设计页面时中，该方法是为了将控件的所有属性以列表的方法罗列到属性面板中

 

setPropValue

方法

在Priv中定义，所有控件模版类需要实现该方法；功能：在UI设计工具设计页面时，在属性面板中修改属性后，自动将属性值赋值给控件模版的对象

 

模版类的定义方式参考附件【met.nui.TreeGrid.js,met.nui.Button.js】;

 

其次，按照如上规范实现控件的模版类后，就需要将模版类配置到原型设计页面中。配置方式参考:

1、配置控件列表：{id:"datagrid_cmp",pid:"default",text:"DataGrid"}

2、配置控件的创建功能（点击控件列表中的控件时创建该控件对象）:

 "datagrid_cmp" :{

                     create:function(cfg){

                           varo = new met.nui.DataGrid();

                           varcmp = com.primeton.Drag.createCmp(o,cfg);

                           if(!!nui.get(o.erp3_o_id).url){

                                    //nui.get(o.id).load();

                            }

                            return cmp;

                     }

}

3、配置控件路径:

com.Tool.loadFiles([

               'common/scripts/nuiclazz/met.nui.DataGrid.js',

               …

               …  

               ]);

2.3   在集成后的UI设计页面中创建控件对象

1、将控件模版部署到应用中,将common.rar压缩文件中的内容解压到部署应用的根目录下，访问UI设计页面/common/scripts/design_ui.jsp

参考路径：http://localhost:8080/default/common/scripts/design_ui.jsp

参考页面：

2、在UI设计页面中创建所集成的NUI控件模版对象

在控件列表中选择某个控件，使用鼠标左键单击控件，在设计区会自动创建控件的对象；

 

3、鼠标左键单击控件，然后释放鼠标。在属性面板中会自动加载该控件的属性列表和NUI控件模版对象的属性默认值；

4、鼠标左键点击控件右下方的黑色区域两次，然后再鼠标左键按住黑色区域后拖拽就能改变设计控件的大小；释放鼠标后，UI设计页面自动记录控件的大小、位置信息到当前设计控件的模版对象中

 

5、生成页面代码

 

6、预览页面效果

7、自动布局

取消控件的style样式，让控件自适应

8、自动布局所有

取消当前设计页面中的所有控件的Style样式，让所有控件自适应

9、获取控件配置

获取当前控件的配置项

10、         获取页面元素列表

该功能是针对于FormLayout而提供的表单设计功能。在设计FormLayout布局表单时，需要创建Label对象和控件对象，创建顺序必须是：先创建Label，再创建控件对象；然后再创建Label，再创建控件对象，依次类推。

而我们在创建FormLayout的表单布局时进行“自动布局所有”处理后，点击“获取页面元素列表”，UI设计页面会自动按照Label——>UI控件的顺序将元素列表以Json格式弹出显示,全选复制Json内容；

最后，重新打开新页面访问UI设计页面，在设计页面中创建FormLayout表单布局对象,并将所复制的Json内容粘贴到属性面板中FormLayout控件的elementsData属性值中，编辑完成后，UI设计区中自动渲染UI表单页面。

 

 

 

3    注意事项

一、要实现UI控件的所见即所得功能，必须要按照控件模版类标准规范实现；

二、在设计UI页面中鼠标点击创建控件对象，不能连续不断的点击创建对象；

三、在拖拽布局控件时，按住鼠标平滑移动，不能来回拖动不停拖动以免影响性能；

四、在设计含有容器控件的页面时，需要分步骤实现，先设计容器控件内的页面，再设计容器控件页面；在设计好容器内部页面后，生成代码，并将代码复制到容器控件的content的属性值中即可。

4    不足及改进建议

一、含有容器控件的设计需要优化布局

二、含有数据集控件的设计需要提供对数据集的设计

三、对控件的事件进行集成设计，提供脚本配置功能

4.1   含有容器控件的设计需要优化布局

目前，在设计含有容器控件的页面时（其中容器控件包括：Layouts和Navigations中的控件列表），需要先设计容器控件内容页（即容器控件的content属性值）；设计好容器内容页面后，生成代码并复制代码到容器控件的content属性值中即可。

这个过程设计操作并不是最简便的，还需要设计父子控件之间的拖拽布局来实现容器控件的content属性值填充。并能在容器控件设计页面中还能对内容页进行所见即所得的设计实现。

4.2   含有数据集控件的设计需要提供数据集设计

目前在设计含有数据集控件的页面时（其中含有数据集的控件包括：DataGrid,Tree,TreeGrid,ComboSelect等等，这些控件一般都含有url属性），如果要填充控件的数据集，需要在后台实现逻辑流，或者创建静态数据；然后在设计页面中，修改控件的url属性即可。

     通过在线UI设计页面快速创建数据集，并在修改url属性时能够通过选择数据集的方式来填充控件数据，这个更利于后期的开发工作。

4.3   对控件的事件进行集成设计，提供脚本配置功能

目前在设计UI页面时，并不支持对控件脚本的配置，需要将UI控件的事件集成到在线UI设计页面的事件区域，实现对脚本的简单编辑和规范化输出。