下载本文档
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
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
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 2024年数显读卡仪项目发展计划
- 市场研究委托协议
- 赡养老人的协议书
- 新高考语文一轮复习古诗文默写+阅读闯关练习第31篇 《梦游天姥吟留别》(原卷版)
- 2023年保山市中医医院招聘笔试真题
- 健身房新会员优惠合同
- 交通规划设计合同
- 盐城师范学院《编排设计》2021-2022学年第一学期期末试卷
- 产品返修合同范本
- 商务合同范本
- 《中国药典》2023年版目录
- 第五章一元一次方程微专题-应用题表格类训练 (北师大版数学七年级上册)
- 人工湖清理淤泥施工方案
- 改革开放简史智慧树知到课后章节答案2023年下北方工业大学
- 40万豪华装修清单
- 浅谈新课标下的小学英语课堂教学
- 江苏省住宅物业委托服务合同(示范文本)
- 我的家乡-黑龙江-英语PPT
- 新产品风险分析报告
- 网络安全教育ppt课件(图文)
- PMUT器件及其制备方法
评论
0/150
提交评论