SGUAP平台前端功能扩展地要求规范化操作说明书

1、wordSG-UAP平台前端功能扩展的规X化操作说明1 .扩展原如此1.1 最小化原如此通常情况下,通过新建 MXFramework的扩展模块工程来对前端框架进展扩 展,扩展模块只需要包含所需要扩展的文件脚本文件、样式文件等,切记不要把整个MXFramework的拷贝过来.1.2 继承扩展原如此当MXFramework提供的控件满足大局部用户需要的时候,只需要对其进展 继承扩展,以满足局部个性化的需求.1.3 组合扩展原如此当一个通用组件涉与到俩个以上控件组合实现的时候,使用组合扩展方式.1.4 面向接口扩展原如此当用户扩展一个现有控件的时候,应当针对公共接口和保护方法扩展,切记 不要重写该控

2、件,如需重写请创立一个全新的控件.2 .功能扩展方法2.1 继承扩展即继承一个MXFramework现有的控件,扩展个性化的功能.例如：我们需 要一个垂直选项控件VTabControl,如下所示：$ns( " mx.containers ");mx.containers.VTabControl = function.var me = $extend(mx.containers.Container);wordvar base = ;base.init = me.init;me.init = function()base.init();_init();function _ini

3、t()/自定义初始化逻辑return me.endOfClass(arguments);2.2 组合扩展即将两个以上的MXFramework提供的控件通过组合的方式扩展.例如,我 们需要一个包含工具条的表格控件,如下所示：$ns( " mx.datacontrols ");mx.datacontrols.positeGrid = function()var me = $extend(mx.containers.Container);var base = ;me.dataGrid = null;me.toolBar = null;wordbase.init = me.init

4、;me.init = function()(base.init();_init();)function _init()(me.dataGrid = $instanceOf(me.dataGrid, mx.datacontrols.DataGrid) ? me.dataGrid: (new mx.datacontrols.DataGrid(me.dataGrid);me.toolBar = $instanceOf(me.toolBar, mx.controls.ToolBar) me.toolBar: (new mx.controls.ToolBar(me.toolBar);me.addCont

5、rol(me.toolBar);me.dataControl(me.dataGrid);)return me.endOfClass(arguments);)2.3 自定义扩展自定义扩展时用户创立一个全新的控件,即遵循MXFramework的类编写规X创立一个全新的控件,切记创立的新控件的名称不要与平台已有的控件重名.3 .样式扩展方法3.1 默认样式扩展默认样式是指前端框架提供的 Default和Aero主题样式.扩展的默认样式可word以应用到所有的模块工程中,只需要在扩展模块中对默认的样式文件进展修改即 可.例如：TabControl控件默认的标签头是在顶部,我们需要标签头在底部,修 改的

6、样式文件如下：.mx.tabControlbottom : 0px;top : auto ; height : 33px;>#head.mx.tabControlbottom : 32px; top : 0px;padding : 5px; >#body.mx.tabControl border-bottom>#head >a:1pxsolid#898C95 ;border-top : none;margin-top : 0px;height : 33px;background : url(images/tab_control_button_bg.png)一 一一.mx

7、.tabControl >#head >a:hover border-top : none;color : #FFFFFF;background : url(images/tab_control_button_selected.png) 一 一一.mx.tabControl >#head >a.selected top : 0px;height : 33px;border-top : none;border-bottom : 1pxsolid#898C95 ;color : #FFFFFF;background : url(images/tab_control_butt

8、on_selected.png)_一 一 一word.mx.tabControl >#head >a.selected:hover ( border-bottom : 1pxsolid#898C95 ; border-top : none;需要注意的是,扩展默认样式的时候,样式文件中须要包含未修改局部和修改局 部,因此默认样式扩展缺乏一定的灵活性,并且代码冗余.3.2 通用样式扩展默认样式扩展是对平台已有样式文件的修改,这种修改会应用到所有模块项目中.当用户需要灵活配置扩展样式时,默认样式扩展方式便无法实现.例如： 用户需要在模块1中使用标签头在底部的TabControl,而在模块

9、2中使用默认的标 签头在顶部的TabControl,如果采用默认扩展方式便无法实现了.通用样式扩展是指在一个模块工程新建一个通用扩展Weblet,在这个通用扩展Weblet中定义扩展样式,而需要运用该扩展样式的Weblet需要在注册时添加对通用扩展 Weblet的依赖.例如：我们通过通用样式扩展方式修改TabControl标签头的位置.首先,需要新建一个通用扩展 Weblet(Ext);然后在 resources/themes/defau时新建一个 TabControl.css文件,文件内容如下： .ext.tabControl >#head ( bottom : 0px; top :

10、auto ; height : 33px; .ext .b1 .ext .b2 .ext.tabControl >#body bottom : 32px; top : 0px;padding : 5px;word).ext.tabControl >#head>a ( border-bottom : 1pxsolid#898C95 ; border-top : none; margin-top : 0px; height : 33px; background : url(images/tab_control_button_bg.png);)一 一一.ext.tabControl

11、 >#head>a:hover ( border-top : none; color : #FFFFFF; background : url(images/tab_control_button_selected.png);)一 一一.ext.tabControl >#head>a.selected ( top : 0px; height : 33px; border-top : none; border-bottom : 1pxsolid#898C95 ; color : #FFFFFF; background : url(images/tab_control_butt

12、on_selected.png);)一 一一.ext.tabControl >#head>a.selected:hover ( border-bottom : 1pxsolid#898C95 ; border-top : none; )最后将样式应用到相应的 Weblet中,我们需要在Weblet的注册文件中添加对Ext 的依赖,如下所示：mx.weblets.WebletManager.register( id: "DefectManage", name:"缺陷治理", requires: "PMSExtention/ext&qu

13、ot; , "bpm/bpmintegrate" , onload: function (e) word,onstart: function (e)(var mvc=newDefectManage.views.MainViewController();e.context.rootViewPort.setViewController(mvc););同时,在 MainViewControlle的me._onactivate方法中添加以下代码：me.getView().$e.parent().addClass("ext");值得注意的是,通用样式扩展的样式文件

14、仅仅包含修改的局部,不需要包含未修改的局部,因此通用样式扩展不存在样式文件内容冗余,使用更加灵活.3.3 Weblet样式扩展Weblet样式扩展即在当前Weblet中定义样式扩展文件.该扩展样式仅在当前 Weblet使用.仍然以扩展TabControl为例.首先在 Weblet例如DefectManage 的resources/themes/aer神新建一个TabControl.css文件,文件内容如下：.DefectManage .tabControl >#head (bottom : 0px;top : auto ;height : 33px;.DefectManage .tool

15、baritem >div(bottom : 0px;top : auto ;height : 33px;.DefectManage .tabControl >#body (bottom : 32px;top : 0px;padding : 5px;>#head >awordborder-bottom : 1pxsolid#898C95 ; border-top : none;margin-top : 0px;height : 33px;background : url(images/tab_control_button_bg.png);>#head >a:h

16、over border-top : none; color : #FFFFFF; background : url(images/tab_control_button_selected.png);>#head >a.selectedtop : 0px;height : 33px;border-top : none;border-bottom : 1pxsolid#898C95 ; color : #FFFFFF;background : url(images/tab_control_button_selected.png);>#head >a.selected:hoverborder-bottom : 1pxsolid#898C95 ; border-top : none;最后引入扩展样式,需要在 Weblet的onload事件中引入扩展样式文件, mx.weblets.WebletManager.register( id: "DefectManage", name:"缺陷治理", onload: function (e)DefectManage. include ("$theme/tabControl.css&quo