《SGUAP平台前端功能扩展的规范化操作说明》由会员分享，可在线阅读，更多相关《SGUAP平台前端功能扩展的规范化操作说明（10页珍藏版）》请在金锄头文库上搜索。
1、SG-UAP平台前端功能扩展的规范化操作说明1. 扩展原则1.1最小化原则通常情况下，通过新建 MXFramework的扩展模块项目来对前端框架进行扩 展，扩展模块只需要包含所需要扩展的文件(脚本文件、样式文件等)，切记不要把整个MXFramework的拷贝过来。1.2继承扩展原则当MXFramework提供的控件满足大部分用户需要的时候，只需要对其进行 继承扩展，以满足部分个性化的需求。1.3组合扩展原则当一个通用组件涉及到俩个以上控件组合实现的时候，使用组合扩展方式。1.4面向接口扩展原则当用户扩展一个现有控件的时候，应当针对公共接口和保护方法扩展，切记 不要重写该控件，如需重写请创建一个
2、全新的控件。2. 功能扩展方法2.1继承扩展即继承一个MXFramework现有的控件，扩展个性化的功能。例如：我们需 要一个垂直选项控件VTabControl，如下所示：$ns( rnx.containers”);mx.c on tai ners.VTabC on trol = fun cti on() var me = $exte nd(mx.c ontain ers.C ontainer);var base = ;base.i nit = me.i nit;me.i nit = fun cti on()base.i nit();ni t()；fun cti on _i nit()/自定义
3、初始化逻辑return me.e ndOfClass(argume nts);2.2组合扩展即将两个以上的MXFramework提供的控件通过组合的方式扩展。例如，我 们需要一个包含工具条的表格控件，如下所示：$ns(“ mx.datac on trols”);mx.datac on trols.CompositeGrid = fun cti on()var me = $exte nd(mx.c ontain ers.C ontain er);var base = ;me.dataGrid = n ull;me.toolBar = n ull;base.i nit = me.i nit;me.
4、i nit = fun cti on()base.i nit();ni t()；fun cti on _i nit()me.dataGrid = $i nsta nceOf(me.dataGrid,mx.datac on trols.DataGrid) ? me.dataGrid: (newmx.datac on trols.DataGrid(me.dataGrid);me.toolBar = $in sta nceOf(me.toolBar, mx.c on trols.ToolBar)me.toolBar: (new mx.c on trols.ToolBar(me.toolBar);me
5、.addC on trol(me.toolBar);me.dataC on trol(me.dataGrid);return me.e ndOfClass(argume nts);2.3自定义扩展自定义扩展时用户创建一个全新的控件，即遵循MXFramework的类编写规范创建一个全新的控件，切记创建的新控件的名称不要与平台已有的控件重名。3. 样式扩展方法 3.1默认样式扩展默认样式是指前端框架提供的 Default和Aero主题样式。扩展的默认样式可 以应用到所有的模块项目中，只需要在扩展模块中对默认的样式文件进行修改即 可。例如：TabControl控件默认的标签头是在顶部，我们需要标签头
6、在底部，修 改的样式文件如下：.mx .tabControl #headbottom : 0px;top : auto ; height : 33px;.mx .tabControl #bodybottom : 32px;top : 0px;padding : 5px;.mx .tabControl #head aborder-bottom : 1px solid #898C95;border-top : none;margin-top : 0px;height : 33px;background : url(images/tab_control_button_bg.png);.mx .tab
7、Control #head a:hoverborder-top : none;color : #FFFFFF;background : url(images/tab_control_button_selected.png); .mx .tabControl #head a.selectedtop : 0px;height : 33px;border-top : none;border-bottom : 1px solid #898C95;color : #FFFFFF;background : url(images/tab_control_button_selected.png);.mx .t
8、abControl #head a.selected:hoverborder-bottom : 1px solid #898C95;border-top : none;需要注意的是，扩展默认样式的时候，样式文件中须要包含未修改部分和修改部 分，因此默认样式扩展缺乏一定的灵活性，并且代码冗余。3.2通用样式扩展默认样式扩展是对平台已有样式文件的修改，这种修改会应用到所有模块项目中。当用户需要灵活配置扩展样式时，默认样式扩展方式便无法实现。例如： 用户需要在模块1中使用标签头在底部的TabControl,而在模块2中使用默认的标 签头在顶部的TabControl,如果采用默认扩展方式便无法实现了。
9、通用样式扩展是指在一个模块项目新建一个通用扩展Weblet，在这个通用扩展Weblet中定义扩展样式，而需要运用该扩展样式的Weblet需要在注册时添加对通用扩展 Weblet的依赖。例如：我们通过通用样式扩展方式修改TabControl标签头的位置。首先，需要新建一个通用扩展 Weblet(Ext);然后在 resources/themes/defaul中新建一个 TabControl.css文件，文件内容如下：.ext.tabControl #headbottom : 0px;top : auto ;height : 33px;.ext .b1 .ext .b2 .ext.tabContr
10、ol #bodybottom : 32px;top : 0px;padding : 5px;.ext.tabControl #head aborder-bottom : 1px solid #898C95; border-top : none;margin-top : 0px;height : 33px;background : url(images/tab_control_button_bg.png); .ext.tabControl #head a:hoverborder-top : none;color : #FFFFFF;background : url(images/tab_cont
11、rol_button_selected.png); .ext.tabControl #head a.selectedtop : 0px;height : 33px;border-top : none;border-bottom : 1px solid #898C95;color : #FFFFFF;background : url(images/tab_control_button_selected.png); .ext.tabControl #head a.selected:hoverborder-bottom : 1px solid #898C95; border-top : none;最
12、后将样式应用到相应的 Weblet中，我们需要在Weblet的注册文件中添加对Ext 的依赖，如下所示：mx.weblets.WebletMa nager.register(id: DefectMa nage, name:缺陷管理,requires: PMSExte nti on /ext, bpm/bpm in tegrate,onl oad:function (e),on start:function (e)var mvc = new DefectManage.views.MainViewController(); e.c on text.rootViewPort.setViewC on
13、troller(mvc););同时，在 Mai nV iewCo ntrolle的me.o nactivate方法中添加以下代码：me.getView().$e.parent().addClass(ext);值得注意的是，通用样式扩展的样式文件仅仅包含修改的部分,不需要包含未修 改的部分，因此通用样式扩展不存在样式文件内容冗余，使用更加灵活。3.3 Weblet样式扩展Weblet样式扩展即在当前Weblet中定义样式扩展文件。该扩展样式仅在当前 Weblet使用。仍然以扩展TabControl为例。首先在 Weblet(例如DefectManag的 resources/themes/aer中
14、新建一个 TabControl.css文件，文件内容如下:.DefectManage .tabControl #headbottom : 0px;top : auto ; height : 33px;.DefectManage .toolbaritem div bottom : 0px;top : auto ; height : 33px;.DefectManage .tabControl #body bottom : 32px;top : 0px; padding : 5px;.DefectMa nage.tabC on trol #head aborder-bottom : 1px solid #898C95; border-top : none;margin-top : Opx;height : 33px;background : url(images/tab_control_button_bg.png) .DefectManage.tabControl #head a:hoverborder-top : none;color : #FFFFFF;background : url(images/tab_control_butto
