当前位置：首页 > CN2资讯 > 正文内容

我的世界Java电脑怎么导入皮肤

2天前CN2资讯

在使用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页

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",//类型声明为 form uploadMode: "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.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(); break; case “uapsb”: //选中节点为设备节点,则初始化设备视图 _initDeviceView(); 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.selId me._tree_selectionchanged = function(e) { //节点 id selId = ; //树节点员工 if(e.selection.itemType == "emp") { var empId = ; 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 = ; var text = e.selection.text; //部门视图上级部门变量 me.view.depDetailView.ssbm = depId; var tabControl = me.view.tabControl.selection; if( == "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.sex, emp.ssbm,, 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 为当前视图ID JSON.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]; // =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：

后台java代码：

控制层： /** * 根据id获取申请工作项信息 * @param recordid 申请修改业务主键 * @return 申请修改业务信息 */ @RequestMapping(value = "/getApplyInfo", method = RequestMethod. POST) public @ItemResponseBody List 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 @ItemResponseBody QueryResultObject queryZzxh(@RequestParam(value="emp",required=false) String emp)

单个参数传参：
前台：

后台：

@RequestMapping(value = "/yzxx", method = RequestMethod.GET) public @RawResponseBody boolean 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 @TreeResponseBody List<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 = ; 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-dd var 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.隐藏分页栏

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

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

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类。配置控制类路径。

逻辑构件配置文件（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 /> </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透视图。
任务执行组件每个任务执行步骤的业务操作的实现组件，具体可包括脚本和插件。