mx-framework前端框架使用经验积累(SG-UAP)

在使用SG-UAPV2.8及mx-framework前台框架开发项目的过程中，积累了一些前端框架的使用技巧，基本上涵盖了大部分常用点。如有需要可以打开“”后，直接全文搜索你想知道的问题。若未查询到可以留言告诉我，我也会尽力解答。
**

1.布局控件

**
创建一个布局控件主要包括以下步骤：导入js类创建实例将实例添加到容器中
导入所需的js类。
创建实例。
将实例添加到容器中。

## 1.1上下分割窗口布局

**
//1.导入类代码

$import("mx.containers.HSplit");

//2. 创建实例

 me.hsplit = new mx.containers.HSplit({rows: “300, auto“ ,//窗口的两部分大小borderThick:”0px”//设置边框粗细});

//3.将实例添加到容器中

me.addControl(me.hsplit);

1.2左右分割窗口布局

**
//1.导入类代码

$import("mx.containers.VSplit");

//2. 创建实例

me.vsplit = new mx.containers.VSplit({cols: “300, auto“ //窗口的两部分大小});

//3.将实例添加到容器中

me.addControl(me.vsplit);

1.3手风琴式菜单
//1.导入类代码

$import("mx.containers.Accordion");

//2. 创建菜单实例

me.accordion = new mx.containers.Accordion({ "height":"60%", "width":"20%",panels:[ { title: "综合评价", name: "zhpj" }, { title: "参建队伍", name: "cjdw" } ],onselectionchanged:me.controller.accordionChanged});

//3.将实例添加到容器中

 me.addControl(me.accordion);

1.4Tab页

var tabControl = new mx.containers.TabControl({ pages:[  { text: "常规", name: "general" }, { text: "角色", name: "role" } ],onselectionchanging: _selection_changing, onselectionchanged: _selection_changed }); function _selection_changing(e) {if (!confirm("确定需要更改选择项?")) { e.cancel = true; } };function _selection_changed() {alert("选择页发生了改变，当前选择项为：" + tabControl.selection.text); }//除第1个tab页pages[0] 视图加载 需要 先初始化
me.tabControl.pages[1].init();
me.tabControl.pages[1].addControl(me.depDetailView);

2. 创建表格

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

//1.导入类代码

$import("mx.datacontainers.GridEntityContainer");
$import("mx.datacontrols.DataGrid");

//2.定义服务端url

     var restUrl = "~/mxdemo/rest/uapsb/";/* 初始化表单数据容器EntityContainer */        me.gridEntityContainer = new     mx.datacontainers.GridEntityContainer({baseUrl : restUrl,primaryKey: "objId"});

//3. 创建表格实例

me.dataGrid = new mx.datacontrols.DataGrid({   columns:[{name: "objId", caption: "主键" , editorType: "TextEditor"},{name: "mc", caption: "设备名称      " , editorType: "TextEditor"},{name: "sbxh", caption: " 设备型号" , editorType: "TextEditor"},{name: "bdz", caption: "变电站 " , editorType: "TextEditor"},{name: "jgdy", caption: "间隔单元" , editorType: "TextEditor"},{name: "azrq", caption: "安装日期" , editorType: "TextEditor"},{name: "sblx", caption: "设备类型" , editorType: "DropDownEditor"},{name: "sfzy", caption: "是否在用" , editorType: "DropDownEditor"},{name: "ssbm", caption: "所属部门" , editorType: "DropDownEditor"},{name: "sfwx", caption: " 是否已维修" , editorType: "DropDownEditor"},{name: "sysm", caption: "使用说明" , editorType: "TextEditor"}],displayCheckBox: true,displayPrimaryKey:false,//列表是否显示主键allowEditing: true,    //列表默认不可编辑entityContainer: me.gridEntityContainer，onitemclick ：me.controller._dataGrid_onClick  //定义 表格点击事件     });

//5.调用表格load方法

me.dataGrid.load();

//6.将表格添加到页面上

me.addControl(me.dataGrid);

2.1隐藏searchBox
//将searchBox置为空白 setDisplay or setVisible

me.projunitDetailView.getDataGrid().searchBox.setDisplay("none");

//将searchBox高度设为空

me.projunitDetailView.getDataGrid().searchBox.resizeTo("100%", "0%");

//调整高度

me.projunitDetailView.getDataGrid().$grid.animate({top : 26},"fast");

2.2单元格浮动提示框
//表格加载完事件

me._dataGrid_onLoad = function(p_item, $p_cell)
{ //鼠标移动时的提示狂me.qxmsDiv = $("<div style='padding:2px;background-color:#ffffff;border:1px solid;position:absolute'></div>");me.view.append(me.qxmsDiv);//绑定鼠标经过移出事件    me.view.getDataGrid().$bodyTable.find('#biaoti').on("mouseover",me._jymsonmouseover);me.view.getDataGrid().$bodyTable.find('#biaoti').on("mouseout",me._jymsonmouseout);}//鼠标经过事件me._jymsonmouseover = function(e){if(e.target.innerText!=null&&e.target.innerText.length>0){me.qxmsDiv[0].style.display = "";me.qxmsDiv[0].innerText = e.target.innerText;me.qxmsDiv[0].style.left=e.clientX+"px";me.qxmsDiv[0].style.top=e.clientY+"px";}else{me.qxmsDiv[0].style.display = "none";}}//鼠标移出me._jymsonmouseout = function(e){me.qxmsDiv[0].style.display = "none";}

3.创建表单

**
创建一个表单主要包括以下步骤：
导入创建表单所需的js类。
定义与表单交互数据的服务器url。
创建表单数据容器。
创建表单实例。
切记表单要load才能显示。
将表单添加到容器中
//1.导入类代码

$import("mx.datacontrols.DataForm");
$import("mx.datacontainers.FormEntityContainer");

//2.定义服务端url

var restUrl = "~/mxdemo/rest/uapsb/";

//3.创建表单数据容器

     /* 初始化表单数据容器EntityContainer */
me.formEntityContainer = new mx.datacontainers.FormEntityContainer({ baseUrl : weblet的ID值.mappath(restUrl),primaryKey: "objId"});

//4. 创建表单实例

me.form = new mx.datacontrols.DataForm({fields: [{name: "objId", caption: "主键",   editorType: "TextEditor", visible:false},{name: "mc",    caption: "设备名称 ", editorType: "TextEditor"},{name: "sbxh",  caption: "设备型号", editorType: "TextEditor"},{name: "bdz",   caption: "变电站 ",  editorType: "TextEditor"},{name: "jgdy",  caption: "间隔单元", editorType: "NumberEditor","width":"145px"},{name: "azrq",  caption: "安装日期", editorType: "DateTimeEditor","width":"145px"},{name: "sblx",  caption: "设备类型", editorType: "DropDownEditor","width":"145px"},{name: "sfzy",  caption: "是否在用", editorType: "DropDownEditor","width":"145px"},{name: "ssbm",  caption: "所属部门", editorType: "DropDownEditor","width":"145px"},{name: "sysm",  caption: "使用说明", editorType: "TextEditor"}],entityContainer: me.formEntityContainer});

// 5.表单要load才能显示

me.form.load();

//6.将表单添加到页面上

 me.addControl(me.form);

3.1表单弹窗视图
列表显示数据。
列表新增数据，以表单形式新增。
列表编辑数据, 表单显示数据。

新增数据:

// 新增按钮点击事件  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);}}

3.2表单皮肤
定制一个表单皮肤主要包括以下步骤：
导入创建表单皮肤所需的js类。
定义与表单交互数据的服务器url。
创建表单数据容器。
创建表单实例,注册皮肤所在目录url。
切记表单要load才能显示。
将表单添加到容器中。
//1.导入类代码

$import("mx.datacontainers.FormEntityContainer");
$import("mx.datacontrols.SkinDataForm");

//2.定义服务端url

var restUrl = "~/mxdemo/rest/uapsb/";

//3.创建表单数据容器

  /* 初始化表单数据容器EntityContainer */      me.formEntityContainer = new mx.datacontainers.FormEntityContainer({ baseUrl : weblet的ID值.mappath(restUrl),primaryKey: "objId" });

//4. 创建表单皮肤实例

me.skinForm=new mx.datacontrols.SkinDataForm({skinUrl:“~/mxdemo/form/resources/skins/form.html”,   //参见项目文件entityContainer: me.formEntityContainer});   // 5.表单要load才能显示me. skinForm.load();    //6.将表单添加到页面上me.addControl(me. skinForm);

3.3在表单中文件上传
JavaScript 代码

var dataForm = new mx.datacontrols.DataForm( {fields: [ {name: "deptId",caption: "DEPT_ID",editorType: "TextEditor",visible: false}, {name: "deptName",caption: "DEPT_NAME",editorType: "FileEditor",//类型为文件编辑器type: "form",//类型声明为 formuploadMode: "file",//保存方式为file，文件会保存到服务器指定磁盘路径；为blob会保存到数据库的BLOB类型字段中。tableName: "DEPT",//数据对应的表名，必须是数据库中的物理表名primaryKey: "DEPT_ID",//数据表的主键字段名colName: "DEPT_NAME"//当前字段在数据库中的物理名称} ],entityContainer: me.formEntityContainer
});

3.4加载表单赋值/ 赋时间值

//MainView.js
//员工 视图
me.empMvc = new emp.views.MainViewController();
me.empView = me.empMvc.getView();
//MainViewController.js
//树 节点 改变
me._tree_selectionchanged = function(e)
{
me.id = e.selection.id;
//员工 详细页面 me.ssbm 变量赋值
me.empDetailView = new me.view.depMvc._getDetailFromView;
me.empDetailView.ssbm = depId;
}
//DetailView.js me.load = function(){//加载表单信息_form.load(me.objID,function (){//时间 赋值var date = new Date();var year = date.getFullYear();var month = date.getMonth()+1;var day = date.getDate();var time = year+"-"+month+"-"+day;_form.editors.skmc.setValue(me.skmc);_form.editors.ksrq.setValue(time);_form.editors.jsrq.setValue(time);//不可修改_form.editors.skmc.setReadOnly(true);   _form.entityContainer.setValue("skmc",me.skmc);_form.entityContainer.setValue("ksrq",time);_form.entityContainer.setValue("jsrq",time);            });
}

3.5表单打印

var printCon = new mx.utils.PrintUtil({dataControl : me.view.getForm(),maxCols : 2,printHideFields : true});printCon.printControl();

3.6表单验证

Var numberEditor = new mx.editors.NumberEditor({ min: 10, increment: 1, onchanged: _numberEditor_changed });
_form = new mx.datacontrols.DataForm({ width: 500, fields: [ { name: "bdzbh", caption: "变电站编号", readOnly: true , nullable: false} ], onvalidate : form_validate, entityContainer: formEntityContainer // 绑定表单数据容器 });
function  form_validate()  { alert("validate:" + mx.utils.CheckUtil.isEmail(_form.editors["bdzbh"].value)); }{name: "note", caption: "备注" , editorType: "NumberEditor", formatString:"0.00",
customValidate:function(p_editor){var check = new mx.utils.CheckUtilClass();var result = check. isDigit (p_editor.value);return { successful: result, hint:"验证失败！" }}    },
{name: "email", caption: "邮箱", editorType: "TextEditor", validType:"EMAIL",validateMessage :"请输入有效邮箱"},
{name: "phone", caption: "手机", editorType: "TextEditor", validType:"MOBILE",lineBreak:false},
{name: "identitycardId", caption: "身份证号", editorType: "TextEditor",validType:"IDCARD",onchanged:birth}//自定义方法//身份证 号码 改变事件
function birth(e)
{var idcard = e.target.value;var year = idcard.substring(6,10);var mouth = idcard.substring(10,12);var day = idcard.substring(12,14);var birthday = year+"-"+mouth+"-"+day;_form.editors.birthday.setValue(birthday);_form.entityContainer.setValue("birthday",birthday);}

3.7表单样式设置

<DIV class=container style=\"MARGIN-LEFT: 15px; MARGIN-RIGHT: 5px\">
<LABEL title=图例位置: style=\"WIDTH: 120px\">图例位置:</LABEL>\r\n
<DIV class=editor style=\"MARGIN-LEFT: 120px\">\r\n
<DIV class=comboEditor style=\"HEIGHT: 21px; WIDTH: 100%\" >\r\n
<DIV id=inputContainer><INPUT type=text value=图形上方 ></DIV>//加载表单信息_form.load(me.objID,function(){//设置 行 高度_form.$e.find("td").css({"padding-top":"12px","text-align":"left"});//右边距_form.$e.find("td>div").css({"margin-right":"20px"});//上边距_form.$e.find("td:eq(1)").css({"padding-top":"30px",});//文字标题_form.$e.find("label").css({"width":"105px","text-align":"right"});//输入框_form.$e.find(".editor").css({"width":"130px","margin-left": "110px"});});

4.创建树

**
创建一棵树主要包括以下步骤：
导入所需的js类。
定义与树交互数据的服务器url。
调用树的load方法。
将树实例添加到容器中。
//1.导入类代码

$import("mx.datacontainers.TreeEntityContainer");
$import("mx.datacontrols.DataTree");

//2.定义服务端url

var restUrl = "~/mxdemo/rest/uapbm/tree”;//路径为树场景 生成的java 后台方法

//3. 创建树实例

 me.treeView = new mx.datacontrols.DataTree({baseUrl: restUrl,displayCheckBox: true,  // 是否需要在树中显示选中框onselectionchanged: me.controller._tree_selectionchanged});

//4. 调用树的load方法

 me.treeView.load();

//5.将树实例添加到页面上

 me.addControl(me.treeView);/******** 树节点选中事件 **********/me._tree_selectionchanged = function(e){if(e.selection.hasChildren){   //如果选中节点有子节点,则展开该节点e.selection.expand();     //展开该节点}switch(e.selection.itemType)     //根据返回的itemType，设置不同的业务逻辑{case “uapbm”:               //选中节点为部门节点,则初始化部门表_initDepartView(e.selection.id);break;case “uapsb”:           //选中节点为设备节点,则初始化设备视图_initDeviceView(e.selection.id);break;}};

4.1实现树节点示例定位
实现树节点示例定位主要包括以下步骤：
创建一颗树。
前端发送输入请求数据到服务器端。
服务器端接收数据并处理、返回。
前端接收并处理

前端发送请求数据到服务器端:

    me._btnLocate_click=function(){//获取输入值var nodeValue=me.view.textEditor.value;//创建ESTClient实例,用于发送请求var restClient=new mx.rpc.RESTClient();restClient.get(“~/mxdemo/rest/uapbm/tree/check”,     //请求url{ nodeName: nodeValue},  // 将 appSuite 先转换为 JSON 字符串，然后作为 POST 参数                                 传递到服务端function(p_context)      // 回调函数,p_context为返回数据{ if(p_context!=null){for(var i=0;i<p_context.length;i++){var node = me.view.treeView.findNode(“#”+p_context[i]);      //查找节点node.expand();  //展开节点me.view.treeView.selectNode(node, false);                   //选中节点}}else{alert("REST 服务调用失败。");}} // End of callback function);  // End of client.post}

服务端Controller层接收并处理前端请求 :

@RequestMapping(value="/tree/check",method=RequestMethod.GET)
@RawResponseBody
public Object findNode(@RequestParam("nodeName") String nodeName){List idList = treeBizc.findNodeId(nodeName);if(idList.size()!=0){return idList;}else{return null;}
}

服务端Biz层访问数据库:

 public List findNodeId(String nodeName){String sql="select obj_id from uap_bm where bmmc like     '%"+nodeName+"%'";List idList = hibernateDao.executeSqlQuery(sql);return idList;
}

mx.utils.CheckUtilClass提供一个检查字符串格式的工具类。该类在运行时唯一静态实例是 mx.utils.CheckUtil 对象。

$import("mx.utils.CheckUtilClass");check=new mx.utils.CheckUtilClass();alert(check.isEmail(a));alert(check.isDigit(a));if(check.isDigit(a)==true){me.view.form.save();}else{alert("注册资金必须是数字");me.view.form.getEditor("regMoney").focus();}

4.2树节点刷新

me.view._depTree.getNode(selId).refresh();
//      me.view._depTree.getNode(selId).expand();
//      me.view._depTree.selection.parent.refresh();
//      me.view._depTree.selection.parent.expand();
//      me.view._depTree.selection.refresh();
//      me.view._depTree.selection.select();        me.view._depTree.selection.refresh();me.view._depTree.selection.select()

5.方法

**
5.1树表联动 tab页切换

//定义 全局变量
Var selId = null; //方法外定义变量 或 方法内定义 me.selIdme._tree_selectionchanged = function(e)
{//节点 idselId = e.selection.id;//树节点 员工if(e.selection.itemType == "emp"){var empId = e.selection.id;me.view.tabControl.pages[1].hide();me.view.tabControl.pages[0].show();me.view.tabControl.selectPage(me.view.tabControl.pages[0]);//员工 详细信息 显示me.view.tabControl.pages[0].removeControl(me.view.depDetailView);me.view.tabControl.pages[0].addControl(me.view.empDetailView);//加载 员工详细信息me.view.empDetailView.objID = empId;me.view.empDetailView.load();}//树节点 部门if(e.selection.itemType == "dept"){me.view.tabControl.pages[0].show();me.view.tabControl.pages[1].show();   var depId = e.selection.id;var text = e.selection.text;//部门视图 上级部门 变量me.view.depDetailView.ssbm = depId;var tabControl = me.view.tabControl.selection;if(tabControl.name == "emp"){//员工列表 显示me.view.tabControl.pages[1].addControl(me.view.empView);me.view.empView.getDataGrid().setFilter({ssbm:depId});me.view.empView.getDataGrid().load();}else{me.view.tabControl.pages[0].removeControl(me.view.empDetailView);me.view.tabControl.pages[0].addControl(me.view.depDetailView);//加载 部门详细信息me.view.depDetailView.objID = depId;me.view.depDetailView.load();}}
}

5.2Toolbar方法

5.2.1重置新建方法新建插入行

//重新定义新建事件
me.empGrid.toolBar.items["#new"].off("click", me.controller._btnNew_onclick);
me.empGrid.toolBar.items["#new"].on("click", me.controller._btnNew1_onclick);
//去除新建按钮me.empView.getDataGrid().toolBar.removeByIndex(0);me.empView.getDataGrid().toolBar.removeByName("new");//插入新建按钮me.empView.getDataGrid().toolBar.insertItem(0,"-",true);me.empView.getDataGrid().toolBar.insertItem(0,{ name: "new", text: mx.msg("NEW"), toolTip: mx.msg("NEW"), imageKey : "new", onclick: me.controller._empView_onclick},true);
//新建 插入行me._empView_onclick = function()
{//selId 树节点Id var _ssbm = selId;//插入行 所属部门 赋值me.view.empView.getDataGrid().appendItem({"ssbm" : _ssbm});}

5.2.2添加导出按键

me.empView.getDataGrid().onload.addEventListener(me.controller._empView_onload);
me.empDetView.getForm().entityContainer.onsaved.addEventListener(me.controller._empDetView_saved);_dataGrid.searchBox.searchButton.onclick.clear();
_dataGrid.searchBox.searchButton.onclick.addEventListener(me.controller.searchButtom_onClick);
//添加导出按键me.empView.getDataGrid().toolBar.insertItem(10, "-", true);me.empView.getDataGrid().toolBar.insertItem(11,{ name : "exportExcel",text : "导出",toolTip : "导出",//imageKey : "export",
imageUrl :"~/main/resources/images/excel.gif",//图片onclick : me.controller. _idxinfoView_exportExcel}, true);//导出表格me._idxinfoView_exportExcel = function(){me.view.idxinfoView.getDataGrid().exportExcel({tableName:" mw_app.mwt_yyjc_idx_tab",columnNames:"IDX_NODE_CODE,IDX_NODE_NAME,DUTY_DEPT_NAME,IDX_FREQ,CALC_FORMU",columnCaptions:"指标编码,指标名称,责任部门名称,指标频度,计算公式",filter:"grp_id = '"+me.selId+"'",fileName:"指标信息"});
}//查询 多表导出 字段前不能 用表 别名 me._btnEdit_exportExcel = function(){me.view.empView.getDataGrid().exportExcel({tableName:"emp,dept",columnNames:" emp.obj_id, emp.mc, emp.sex, emp.ssbm,d.mc, emp.createtime",columnCaptions:"编号,姓名,性别,所属部门,时间",filter:" emp.ssbm='"+selId+"' and emp.ssbm = dept.obj_id",fileName:"部门员工"});}

5.2.3添加按键

 var btnSend = _toolBar.appendItem("cancel", "中止");btnSend.setImageKey("moveDown");
//btnSend.setImageUrl(mx.mappath("~/todo/resources/images/draw.png"));btnSend.on("click", btnClick);_toolBar.appendSeparator();

5.3自定义查询

//引入包

$import("mx.rpc.RESTClient");
me._btnSearch_onclick = function(){var nodeValue = me.view.textEditor1.value;var nodeValue2 = me.view.dropDownEditor.value;if(nodeValue2 == null){nodeValue2 = "";}//封装 变量var params=new Object();params.items=new Array();params.items.push({"mc":nodeValue},{"ssbm":nodeValue2});//创建ESTClient实例,用于发送请求var restClient = new mx.rpc.RESTClient();restClient.post(main.mappath("~/rest/emp/search"),//main 为当前视图IDJSON.stringify(params),function(p_context) //回调函数，p_context为返回数据{if(p_context.successful){var items=p_context.resultValue.items;//返回数据 为普通集合 需要 重新组装 赋给表格
//                       var data=[];
//                       for(i=0;i<items.length;i++)
//                       {
//                           var obj=new Object();
//                           obj.objId=items[i][0];
//                           obj.mc=items[i][1];
//                           obj.sex=items[i][2];
//                           obj.ssbm=items[i][3];
//                           obj.createtime=items[i][4];;
//                           data.push(obj);
//                       }
//                      me.view.empView.getDataGrid().setItems(data);//按照 一定格式返回的集合 直接赋予表格me.view.empView.getDataGrid().setItems(items);}else{mx.indicate("fail", "无此节点！");}});}

//控制层

@RequestMapping(value = "/search2", method = RequestMethod.POST)
public @ItemResponseBody
QueryResultObject search(@ItemsRequestBody List<Map> list)
{QueryResultObject query = new QueryResultObject();List<Emp> idList = empdbcjBizc.searchEmp(list);query.setItems(idList);return query;
}

//接口

public List<Emp> searchEmp(List<Map> list);

//逻辑层

@SuppressWarnings("unchecked")public List<Emp> searchEmp(List<Map> list) {QueryCriteria qc = new QueryCriteria();List<Emp> result = null;qc.addFrom(Emp.class);if (list != null) {String mc = (String) list.get(0).get("mc");String ssbm = (String) list.get(1).get("ssbm");if(mc != ""){qc.addWhere(" mc like '%"+mc+"%' ");}if(ssbm != ""){qc.addWhere(" ssbm = '"+ssbm+"'");}result = hibernateDao.findAllByCriteria(qc);}

5.4模糊查询 更改系统查询方法
逻辑层查询方法

 /*** 根据输入条件查询记录* @param queryCondition* @return*/
public QueryResultObject query(RequestCondition queryCondition) {QueryCriteria qc = new QueryCriteria();List<MwtYyjcIdxTab> result = null;int count = 0;qc.addFrom(MwtYyjcIdxTab.class);if (queryCondition != null) {qc = wrapQuery(queryCondition, qc);count = getRecordCount(qc);qc = wrapPage(queryCondition, qc);result = hibernateDao.findAllByCriteria(qc);} else {result = hibernateDao.findAllByCriteria(qc);count = getRecordCount(qc);}return RestUtils.wrappQueryResult(result, count).addDicItems(wrapDictList());}private QueryCriteria wrapQuery(RequestCondition queryCondition,QueryCriteria qc) {List<QueryFilter> wheres = queryCondition.getQueryFilter(MwtYyjcIdxTabVO.class);if (wheres != null && wheres.size() > 0) {//解析 wheres条件 更改 内容int    size = wheres.size();for(int i=0;i<size;i++){
String filedName = (String)wheres.get(i).getFieldName();if("grpId".equals(filedName)){String value = (String) wheres.get(i).getValue(); if("CD8E302C-4345-4236-A4EA-64D76BB700A7-01579".equals(value)){wheres.get(i).setValue("null");wheres.get(i).setOperator("!=");}}if("idxNodeName".equals(filedName)){String value = (String) wheres.get(i).getValue(); value = "%"+value+"%";wheres.get(i).setValue(value);wheres.get(i).setOperator("like");}if("idxNodeCode".equals(filedName)){//简便方法 与上一个同样结果
wheres.get(i).setOperator("like");}}  CrudUtils.addQCWhere(qc, wheres, MwtYyjcIdxTab.class.getName());}String orders = queryCondition.getSorter();if (orders != null) {qc.addOrder(orders.replaceAll("&", ","));}return qc;}

weblet引用

$import("xmjc.views.MainViewController");
mx.weblets.WebletManager.register({id: "xmjc",name: "",requires: ["chart","promgr","rightgrid"],onload: function(e){ },
});

5.5后台定义数据字典
//query 方法

RestUtils.wrappQueryResult(result,count).addDicItems(wrapDictList());

/**
* 初始化字典值
*

 * @return QueryResultObject*/public QueryResultObject initDict() {QueryResultObject query = new QueryResultObject();return query.addDicItems(wrapDictList());}

// 将字典对象封装为list

private List<DicItems> wrapDictList() {List<DicItems> dicts = new ArrayList<DicItems>();dicts.add(translateFromDB("mc", "com.sguap.empdbcj.po.Emp", "mc", "mc"));dicts.add(translateFromFile("sex", "EMP.SEX"));return dicts;
}

// 从属性文件中查询字典

private DicItems translateFromFile(String fieldName, String dicId) {List<Map<String, String>> list = dataDictionaryBizC.translateFromFile(dicId, "value", "text");DicItems dict = new DicItems();dict.setName(fieldName);dict.setValues(list);return dict;}

// 从数据库中查询字典

private DicItems translateFromDB(String fieldName, String poName,String keyField, String valueField) {List<Map<String, String>> list = dataDictionaryBizC.translateFromDB(poName, "value", "text", keyField, valueField,"1=1");DicItems dict = new DicItems();dict.setName(fieldName);dict.setValues(list);return dict;}

/**
*注入数据字典构件
*

 * @param dataDictionaryBizC*/public void setDataDictionaryBizC(IDataDictionaryBizC dataDictionaryBizC) {this.dataDictionaryBizC = dataDictionaryBizC;}

5.6 前后台交互传参

1集合：
前台js：

var params = new Object();params.items = new Array();          params.items.push({"cdmc":me.view.cdmc.value,"deptid":_deptID});var restClient = new mx.rpc.RESTClient({async:false});restClient.post(zhutwh.mappath("~/rest/applychangeyd/getApplyInfo"),JSON.stringify(params),function(p_context) //回调函数，p_context为返回数据{var items = p_context.resultValue.items;if(items.length > 0){mx.indicate("info","此要点的申请流程启动中");return;}});

后台java代码：

控制层：
/*** 根据id获取申请工作项信息 * @param recordid 申请修改业务主键* @return 申请修改业务信息*/@RequestMapping(value = "/getApplyInfo", method = RequestMethod. POST)public @ItemResponseBodyList getApplyInfo(@ItemsRequestBody List<Map> list) {return applychangeBizc.getApplyInfo(list);
}
逻辑层：
/*** 根据id获取申请工作项信息 * @param recordid 申请修改业务主键* @return 申请修改业务信息*/
public List getApplyInfo(List<Map> list) {
List<Map<String,String>> result = new ArrayList<Map<String,String>>();if(list.size() > 0){String idxCode = (String) list.get(0).get("idxCode");StringBuffer sql = new StringBuffer();sql.append(" select idx.idx_node_code ");sql.append(" from MWT_YYJC_IM_IDX ");sql.append(" where idx.idx_node_code = '"+idxCode+"' ");result = hibernateDao.queryForListWithSql(sql.toString());}return result;
}

2数组：

前台js：var bd = new Array();bd.add(eddy);bd.add(dytz);var param = {params:bd.join(",")};var rest = new mx.rpc.RESTClient({baseUrl:"~/rest/condition"});rest.get("/save",param,function(p_context){if(p_context.successful){alert("测点新建成功！");}});

后台java代码：

@RequestMapping("/save")public @ItemResponseBody QueryResultObject save(@RequestParam(value="params") String[] params){String[] statis = params[0].split(",");}

3单个参数：
前台js：

var restClient = new mx.rpc.RESTClient({async:false});
restClient.get(main.mappath("~/rest/emp/search"),{emp:nodeValue},function(p_context) //回调函数，p_context为返回数据{})

后台java代码：

@RequestMapping("/getZzxh")public @ItemResponseBodyQueryResultObject queryZzxh(@RequestParam(value="emp",required=false) String emp)

单个参数传参：
前台：

var params={itemType:me.view.getForm().editors.yhm.value};//里面的
var client =new mx.rpc.RESTClient();
client.get(user.mappath("~/rest/testuser/yzxx"),
{params:JSON.stringify(params)},
function(p_context){//前面的params是固定的格式，后边括号内的params可以随意起名});

后台：

@RequestMapping(value = "/yzxx", method = RequestMethod.GET)public @RawResponseBodyboolean yzxx(@ItemRequestParam("params") String itemType){}

单个传参时，注意get或post用法(用post接收不到值)

4多个参数：
前台js：

var cdlb = "";var dydj = "";var param = {cdlb:cdlb,dydj:dydj};

后台java代码：

@SuppressWarnings("unchecked")@RequestMapping("/getDydj")public @ItemResponseBody QueryResultObject queryDydj(@RequestParam(value="cdlb") String cdlb,@RequestParam(value="dydj") String dydj){}

5通过URL传递参数：
前台js：

 me.treeView = new mx.datacontrols.DataTree({baseUrl: "~/rest/mwtpdscdeps/tree/"+deptId+"",displayCheckBox: false, // 是否需要在树中显示选中框onselectionchanged: me.controller._tree_selectionchanged});

后台java代码：

@RequestMapping(value = "/tree/{id}", method = RequestMethod.GET)public @TreeResponseBodyList<TreeNode> getNodes(@PathVariable String id,@ItemRequestParam("params") String itemType

5.7Grid 单元格方法
1数值格式两位小数

//数值 两位小数
{   name: "zcsw", caption: "正常水位(米)" , editorType: "NumberEditor",valueType:"NUMBER",formatString :"0.00" },
//输入水位时检测输入的是不是数字，最大不能超过10位，精度最大为2
{   name: "fee", caption: "报销费用" , editorType: "NumberEditor",   renderCell:function(p_item, $p_cell){var value = p_item.getValue("fee");if(value != null){if(me.empLevel != null){if(me.empLevel == 0){if(value > 5000){$p_cell[0].style.color="red";}}else if(me.empLevel == 1){if(value > 10000){$p_cell[0].style.color="red";}}} $p_cell.text(value);}else{$p_cell.text("");}  }   }

2数值改变字体变红/值大小限定

oncelledited:me.controller._feeGrid_oncelledited//费用 编辑 数字改变字体变为红色。 根据级别 限定 费用限度me._feeGrid_oncelledited = function(e){var column = e.column.name;if(column == "fee"){
// 数值 是否 改变
var changed = me.view.getDataGrid().entityContainer.changed;if(changed){var fee = e.item.values.fee;if(fee != null){if(me.view.empLevel != null){if(me.view.empLevel == 0){if(fee > 5000){alert("报销费用不能大于5000");e.item.values.fee = 0;e.target.entityContainer.editingItem.fee = 0;return;}else{e.cell[0].style.color = "red";}}if(me.view.empLevel == 1){if(fee > 10000){e.cell[0].style.innerHTML= "";e.cell[0].style.innerText= "";alert("报销费用不能大于10000");return;}else{e.cell[0].style.color = "red";}}else{e.cell[0].style.color = "red";}}}}
me.view.getDataGrid().entityContainer.changed = false;}}

3新建插入行赋值不可改变

//新建插入行 员工ID 赋值 不可修改me.view.feeView.getDataGrid().appendItem({"empId" : empId});me.view.feeView.getDataGrid().columns.empId.readOnly = true;

4加链接

//加链接
{   name: "mc", caption: "部门名称" , editorType: "LinkEditor", renderCell:function(p_item, $p_cell){var value = p_item.getValue("mc");if(value != null){
//                  $p_cell[0].style.color="blue";
//                  $p_cell[0].style.textDecoration="underline";
//                  $p_cell[0].style.cursor="hand";                                          $p_cell.css({"color":"blue","cursor":"hand"});$p_cell[0].onclick=function(){
p_item.checked = true;            me.controller._btnEdit_onclick(p_item.getValue("objId"));};$p_cell.text(value);}else{$p_cell.text("");}  }},
me._btnEdit_onclick = function(selObj){}

5.8声明/重定义方法
1.列表点击事件
MainView.js

_dataGrid = new mx.datacontrols.ComplexGrid({   。。。create: me.controller._btnNew_onclick,remove: me.controller._btnDelete_onclick,onitemclick:me.controller._unitGid_onItemClick});
MainViewController.js
me._unitGid_onItemClick = function()
{
}

//其他视图重新定义方法

me.unitView.getDataGrid().onitemclick.clear();
me.unitView.getDataGrid().onitemclick.addEventListener(me.controller._unitGid_onItemClick);

2.列表选择事件

//datagrid 定义事件
_dataGrid = new mx.datacontrols.ComplexGrid({   …
autoSelect:true,onselectionchanged:changed
})
function changed(e)
{
}

//其他视图重新定义方法

me.unitView.getDataGrid().onselectionchanged.clear();
me.unitView.getDataGrid().onselectionchanged.addEventListener(changed);

3.查询方法重写

_dataGrid.searchBox.searchButton.onclick.clear();
_dataGrid.searchBox.searchButton.onclick.addEventListener(me.controller.searchButtom_onClick);

4.新建，编辑方法重写
//去除新建按钮

me.chartrqView.getDataGrid().toolBar.removeByIndex(0);
me.chartrqView.getDataGrid().toolBar.removeByName("new");

//插入新建按钮

me.chartrqView.getDataGrid().toolBar.insertItem(0,"-",true);
me.chartrqView.getDataGrid().toolBar.insertItem(0,{name: "add",
text: mx.msg("NEW"),
toolTip: mx.msg("NEW"),
imageKey : "add",
onclick: me.controller._chartrqAdd_onclick},true);

//重置编辑方法

me.chartrqView.getDataGrid().toolBar.items["#edit"].onclick.clear();
me.chartrqView.getDataGrid().toolBar.items["#edit"].onclick.addEventListener(me.controller._chartrqEdit_onclick);
me.chartrqView.getDataGrid().toolBar.items["#edit"].on("click", me.controller._btnView_onclick);

5.9方法

**
1.统计周期时间判断

//统计周期 起始时间me._time1_changed = function(e){//清除 验证信息e.target.$e.removeClass("error");e.target.$e.toolTip("destroy")//yyyy-MM-ddvar time1 = e.target.value;var searchDate1 = time1.replace(/\-/g,"");//今天var date = new Date();date = Date.format(date,"yyyyMMdd");if(searchDate1 > date){mx.indicate("info", "查询时间大于今天");e.target.markError(true, "查询时间大于今天");return;}var time2 = me.view.dataTimeEditor2.value;if($notEmpty(time2)){var searchDate2 = time2.replace(/\-/g,"");if(searchDate1 > searchDate2){mx.indicate("info", "起始时间小于终止时间");e.target.markError(true, "起始时间小于终止时间");return;}}}

2.添加、清除验证信息

//添加 验证信息
e.target.markError(true, "查询时间大于今天");
//清除 验证信息formEditors.xzhousj.$e.removeClass("error");formEditors.xzhousj.$e.toolTip("destroy")

3.查询区，工具条换位

// 把toolbar放在serachBox之后
_dataGrid.toolBar.$e.insertAfter(_dataGrid.searchBox.$e);
// 通过此方法的重写实现SearchBox收缩，无此方法，收缩后工具栏将看不到
ontoggleShowState : function(e) {_dataGrid.$grid.css("top", e.height + 26);
}

此方法写在searchbox 里面

4.隐藏分页栏

me.idxdimView.getDataGrid().pageNaviBar.hide();
me.idxdimView.getDataGrid().$grid.css({bottom:0})
me.idxdimView.getDataGrid().toolBar.hide();
me.idxdimView.getDataGrid().toolBar.setVisible(false)

5.弹窗返回值定义关闭事件

window.open(mx.mappath("http://localhost:9000/testuap/basemanager/zhutiydwh/index.jsp"),"显示窗口", "height=800, width=1200, top=0, left=0, toolbar=yes, menubar=yes, scrollbars=yes,"resizable=yes, location=yes, status=yes");
var options = {title:"指标与维度关系维护页面",reusable: true, displayMaxButton:true,width:450, height:600};
me.winDim = new mx.windows.WindowManager().create(options);
//me.winDim = jishifx.context.windowManager.create(options);me.winDim.addControl(button);
me.winDim.setView(me.view.mainIdxdimView);
//返回值 回调函数 获取返回值
me.winDim.showDialog(function(p_dialog){var result = p_dialog.dialogResult.saved;}
);
//me.winDimVal.$e.find(".closeButton");
//窗口关闭me.winDimVal.$e.find("span")[1].attachEvent("onclick",_btnClose_onclick);
//返回值
me.winDimVal.setDialogResult({saved:me.saved    });
//加载选择单表页面var options = {title:"选择单表",reusable: true, width:"500", height:"70%",displayMaxButton:true,resizable:false};me.winDimVal = new mx.windows.WindowManager().create(options);//整个页面 上下分割me.hSplit = new mx.containers.HSplit({rows:"90%,10%",borderThick:"0"})me.winDimVal.addControl(me.hSplit);me.hSplit.addControl(me.view.bjgView,0);me.view.bjgView.getDataGrid().load();var container = new mx.containers.Container({width:"100%",height:"100%"});var label = new mx.controls.Label({width:"30%",height:"100%"});var submit = new mx.controls.Button({text: "确定",onclick:next});var label2 = new mx.controls.Label({width:"100",height:"100%"});var cancel2 = new mx.controls.Button({text: "取消"});cancel2.on("click", function(){me.winDimVal.hide();});me.hSplit.addControl(container,1);container.addControl(label);container.addControl(submit);container.addControl(label2);container.addControl(cancel2);me.winDimVal.showDialog();

6.表头加复选框

me.chartrqView.getDataGrid().load(function(){var checkTd = $("<div><span id='checkBox2'/></div>");
//            me.chartrqView.getDataGrid().$headTable.find("td")[2].firstChild.appendChild(checkTd[0]);me.chartrqView.getDataGrid().$headTable.find("td")[2].innerHTML = "<div><span><input id='checkBox2' type='checkbox'/></SAPN><SPAN id=caption>高度</SPAN></div>";me.chartrqView.getDataGrid().$e.on("click", "#checkBox2", _item_checkBox_click);});

7.表格第一列分组合并单元格

renderCell : function(p_item, $p_cell) {debugger;var value = p_item.values.fz;var newValue = null;var data = me.gridEntityContainer.data;if (typeof (value) != "undefined") {if (tempDept != value) {// 统计相同记录条数for (i = 0; i < data.length; i++) {if (data[i].fz == value) {count++;}$p_cell.attr("rowspan", count);$p_cell.text(value);num = 1;}}if (tempDept == value && num >= 2) {$p_cell.hide();count = 0;}num += 1;$p_cell.css({"color" : "green","background-color" : "#ADD8E6"});}}

8.多表查询
控制层更改query 查询方法
逻辑层自定义查询方法myquery
（文件编码UTF-8）

9.查询区 split 背景色修改

//查询区 改颜色
_dataGrid.$e.find(".dataGridSearchBox").css({"background-color":"#D1E9E9"});
_dataGrid.searchBox.$e.find("TD").css({"background-color":"#D1E9E9"});//split 单个分区 背景色
me.hsplit.$panel1.css({"background-color":"#D1E9E9"});

10.日期时间转换

var searchDate =  new Date(temptime);
var firstDate = searchDate.addDays(-6);
searchDate = Date.format(searchDate,"MM月dd日");
firstDate = Date.format(firstDate,"MM月dd日");

11.清空容器

var container = me.view.rightContainer;var length = container.controls.length;for(var i=0; i<length; i++){                   container.removeControl(container.controls[0]);}

12.下拉树

{    name : "shangjizt",caption : "上级专题",
editorType : "DropDownTreeEditor",
url : zhuantifxwh.mappath("~/rest/tfxzhuantifx/tree"),
displayCheckBox : false }

13.表格字段标题添加按键

me.view.getDataGrid().load(function(){var button = new mx.controls.Button({text: "△",width:"10px",height:"20px"});me.view.getDataGrid().$head.find("#calendarDate #caption").width("60%");
//          var span = "<SPAN width='20px' style='left:40px position:absolute width:20px'>sdfsf</SPAN>";
//          me.view.getDataGrid().$head.find("#calendarDate div").append($(span));me.view.getDataGrid().$head.find("#calendarDate div").append(button.$e);
});

系统结构

界面层：基于AJAX框架自主开发可复用的界面标签，可以灵活组合满足不同客户的需求。
交互层：响应用户请求并将请求分发到不同展现构件，由展现构件组织逻辑层来协同处理这些请求，返回结果到界面层。
逻辑层：提供通用组件，对通用业务逻辑、工具包以及公共套件提供的服务进行封装，以便业务逻辑的复用和组装。
持久层：为业务系统与数据库的交互提供简单一致的接口，并优化了数据库操作性能。实现通用数据访问服务组件，支持多种形式的数据存取，实现数据库相关对象的OR Mapping机制及复杂的业务数据获取规则。

MX展现框架可分为6部分：基础层、工具层、控件层、视图层、Weblet小程序以及可视化设计器。
基础层：JavaScript语言扩展、JavaScript运行时扩展、国际化以及主题。
工具层：通用工具库、安全机制和REST服务客户端。
控件层：基础控件、编辑器控件、容器控件、数据控件以及数据实体容器。
视图层包括视图、视图控制器、视图容器以及数据实体容器。
Weblet小程序：是web应用的最小逻辑单元，它将页面文件、脚本文件和资源文件按照一定的目录结构管理。
可视化设计器：是为基于MX框架的二次开发人员提供的集成开发工具，方便开发人员快速构建一个web应用。
层次
持久层
提供统一的接口IHibernateDao。
接口中封装一系列的持久化方法。
在逻辑层中调用持久层的方法完成对业务的逻辑操作。
主要方法：findAll，saveOrUpdate，removeObject，getObject.
逻辑层
平台的逻辑层主要是编写逻辑构件。
一个逻辑构件是由接口，实现类和配置文件组成。
例如：接口为IBizc,实现类为Bizc。配置文件为：

<bizc:logic id="treeBizc"><bizc:implementation type="java"    target="com.sgcc.uap.test.bizc. Bizc" /><bizc:service  interface="com.sgcc.uap.test.bizc.IBizc"></bizc:service>
</bizc:logic>

逻辑构件在控制层中调用，将逻辑构件注入到逻辑层。

@Autowired
private ITreeBizc treeBizc;

----配置文件中定义的逻辑构件的ID。
控制层
控制层主要是与前端进行交互。
在控制层中定义与前端约定的请求URL地址，参数和请求方法，映射到具体控制类和方法中
接收前端请求，将请求数据拦截通过注解将数据翻译为后台理解的信息，执行相应操作后将返回值翻译为前端理解信息返回给前端显示。

配置文件
控制类配置文件(testResource.xml)
主要定义要扫描的package，package中存在有注解@Controller标记的java类。配置控制类路径。

<beans xmlns="http://www.springframework.org/schema/beans"…<context:component-scan base-package="com.sgcc.uap.test" />
</beans>

逻辑构件配置文件（testBizc.xml）
配置逻辑构件的接口和实现类，还可以进行事务配置。

<bizc:logic id="bdqxBizc"><!--配置逻辑构件的接口和实现类 --><bizc:implementation type="java" target="com.sgcc.uap.test.bizc.TestBizc" />  <bizc:service interface="com.sgcc.uap. test.bizc.ITestBizc"></bizc:service></bizc:logic>

持久层配置文件(moduleEntityPersistence.xml)

<beans xmlns="http://www.springframework.org/schema/beans"…>  <module:entity id="testEntity" sessionFactory="sessionFactory"><module:mappingFile>
classpath:com/sgcc/uap/test/po/MwtUdSbdyxBdqxjl.hbm.xml
</module:mappingFile></module:entity>
</beans>

配置持久化类的映射文件（***.hbm.xml）。

<id name="objId" type="string" length="42"><column name="OBJ_ID"><comment>OBJ_ID</comment></column><generator class="assigned"/>
</id>
<property name="objDispidx" type="big_decimal"  length="22"  not-null="true"><column name="OBJ_DISPIDX"><comment>OBJ_DISPIDX</comment></column></property>

主题

局部修改主题：在index.jsp中，<mx:Framework theme=“default”/>
整体修改主题：UAP项目下platformconfig.properties添加MX_THEME=default

名词相关解释
SG-UAP SERVER 提供SG-UAP平台的模块，整个项目组共用一个，由项目管理人员统一维护，
开发人员只需要知道SG-UAP平台服务端的地址。（简称“服务端”）
SG-UAP IDE SG-UAP集成开发工具（SG-UAP Development Environment）
UAP项目依赖于SG-UAP平台服务端的标准的空的Web应用
模块具有OSGi规范（Open Service Gateway Initiative ，开放服务网关规范）
特定描述的Java程序包，是OSGi规范定义的模块化实体单元。SG-UAP平台
的动态模块框架对标准的OSGi模块进行扩展形成了动态模块，以上两者统
称为模块。
Weblet 是种功能独立的部件，页面的最小组成单位。
VO对象 Value Object数据对象，也称为业务对象，存活在业务层的，供业务逻辑
使用的。
PO对象 Persistence Object持久对象,是与数据库中表相映射的java对象。是服务端的实体类，与VO对象相对应，两者是通过*Transfer.java建立关联的
任务执行组件每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件
报表模板报表模板由数据连接、数据查询、报表对象及布局信息组成，它在报表设计
器中被创建，并且符合XML规范。
报表项页眉、页脚、数据首、数据体、数据尾、分组首、分组尾、文本、图片及图表。
数据项数据连接、数据集、参数、系统变量及合计
报表项属性边框、背景、绑定数据源、位置等几十种属性
报表类型自由报表、列表、表格、分组报表、交叉报表、图文混合报表等
统一应用平台 State Grid Unified Application Platform，缩写SG-UAP，国家电网公司
新一代应用开发与运维平台，提供一套技术统一、架构柔性、性能高效、安
全可靠的企业级信息系统基础框架和公共套件集，支撑业务系统的设计、开
发、测试、发布、运行的全过程。
Studio 统一应用平台的集成及可视化开发环境，集设计、编码、测试调试和部署于
一体，为不同的开发阶段提供了指导和帮助，优化了软件开发过程和团队开
发流程。
统一应用平台模
块仓库提供不同版本的统一应用平台的模块，整个项目组公用一个，由项目管理人
员统一维护，开发人员只需要知道SG-UAP平台模块仓库的地址。
模块项目为应用系统中相对独立的功能模块开发一个模块项目
扩展模块当需要对UAP开发平台的某个模块进行修改时，可以创建扩展模块，在扩展模块中对同路径同名资源进行修改。被扩展的模块称为主模块。
持久模型数据库中的表在Studio中的体现形式，按照Herbernate配置文件
的规范对表进行了封装。
持久模型文件保存持久模型信息的文件，以.pm后缀结尾。
场景对用户常用的业务模块进行分析和抽象，发现这些模块的代码在结
构上高度类似，具有通用性或定制批量生成特性，因此归纳出了以
下常用场景：单表场景、主从表场景、树场景、Tab场景（多表场
景）。
Web编辑器编辑Jsp文件的一个可视化编辑器，用户可以通过拖放的方式来设
计Jsp页面。
平台基础设施统一应用平台中最底层的部分，其中包含核心框架和平台微内核。
平台公共套件统一应用平台提供的各类公共服务：如任务调度、数据报表、数据
缓存、信息通信等。
一体化平台门户、可视化体系、BPM、统一授权平台、数据中心等服务统称一
体化平台。
模块框架一个控制、管理模块运行的框架。
模块系统中的某个独立的业务处理功能，可被复用。
延迟加载/懒加载延迟加载/懒加载（lazy load），为了避免无谓的性能开销，在真
正需要数据的时候，才执行数据加载操作。
比较常用的场景：树展现组件，先只加载父节点，展开父节点时再
加载子节点； Hibernate3中关联关系对象默认的加载方式，只有
在使用的时候，才会发出sql语句进行查询。
透视图在集成开发工具上的对某个插件的开发模式，如debug透视图。
任务执行组件每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件。