金现代实习总结

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

1.2左右分割窗口布局

**
//1.导入类代码

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

//2. 创建实例

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

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

me.addControl(me.vsplit);

1
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
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");

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

me._dataGrid_onLoad = function(p_item, $p_cell)
{ 
   //鼠标移动时的提示狂
	me.qxmsDiv = $("
");
	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/";

1
//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();

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

 me.addControl(me.form);

1
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.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表单样式设置

图例位置:\r\n
\r\n
\r\n

	//加载表单信息
    	_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

服务端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 = 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 为当前视图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

//控制层

@RequestMapping(value = "/search2", method = RequestMethod.POST)
public @ItemResponseBody
QueryResultObject search(@ItemsRequestBody List

//接口

public List searchEmp(List

//逻辑层

@SuppressWarnings("unchecked")
	public List searchEmp(List

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

 /**
    	 * 根据输入条件查询记录
    	 * @param queryCondition
    	 * @return
    	 */
public QueryResultObject query(RequestCondition queryCondition) {

		QueryCriteria qc = new QueryCriteria();
		List 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 wheres = queryCondition.getQueryFilter(MwtYyjcIdxTabVO.class);
		if (wheres != null && wheres.size() > 0) {
			//解析 wheres条件 更改 内容
			int	 size = wheres.size();
			for(int i=0;i

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());
1
/**
* 初始化字典值
*

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

// 将字典对象封装为list

private List wrapDictList() {
		List dicts = new ArrayList();

    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> 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> 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 @ItemResponseBody
    List getApplyInfo(@ItemsRequestBody List

逻辑层：

/**
     * 根据id获取申请工作项信息 
     * @param recordid 申请修改业务主键
     * @return 申请修改业务信息
     */
public List getApplyInfo(List

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) 

后台java代码：

@RequestMapping("/getZzxh")
			public @ItemResponseBody
			QueryResultObject 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 @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 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.列表点击事件

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

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

2.列表选择事件

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()
{	
}

//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.隐藏 分页栏

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 = $("
");
//    		  me.chartrqView.getDataGrid().$headTable.find("td")[2].firstChild.appendChild(checkTd[0]);
    		  me.chartrqView.getDataGrid().$headTable.find("td")[2].innerHTML = "
高度
";
    		  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

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 = "sdfsf";
//			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。配置文件为：

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

@Autowired
private ITreeBizc treeBizc;

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

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

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

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

  
  
   
classpath:com/sgcc/uap/test/po/MwtUdSbdyxBdqxjl.hbm.xml

  

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

	    
    	    OBJ_ID
	    
       
     

	   
           OBJ_DISPIDX
	   
   

**

主题
**

局部修改主题：在index.jsp中，
整体修改主题：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透视图。