界面UI系统雏形

标签：

最近一直在做界面的灵活性，界面UI的设计可以说是一个永不褪色的话题，怎么说呢？首先给用户第一直观感受的肯定是你这款软件的界面设计好坏与否？所以界面UI应该予以重视。

界面UI系统的流程图：

第一步：页面模板，即动态生成页面

为什么需要动态生成页面呢？我们都知道一个JSP页面包括很多的信息，包括HTML表头、系统div块、显示数据的表格、添加/编辑的弹框。而这些都是每一个页面中都需要重复的。如何避免这些重复的代码，减少开发人员的工作量呢？这就引出了动态生成页面，即动态的创建业务页面，不需要手写HTML表头，不需要手写数据表格控件等等。。。当然，上面生成的页面只是一个半成品，但是我们可以通过编辑页面或是自己在生成好的jsp页面中补充不能满足的那部分HTML。

动态生成页面，有两部分组成，一是页面模板，主要是利用freemarker工具生成。二是自定义拼接控件类，该类主要被各个业务子系统调用，应对于业务系统的需求变更。

第二部：选择实体

界面UI系统如何控制各个被管理的业务系统？通过上传实体，让UI系统来管理各个业务系统的实体。业务各系统将自己的实体打成jar包，上传到UI系统。UI系统通过解析jar包，获取实体类名、描述、属性名、属性描述、属性类型

、长度等传到数据库。

第三步：生成页面

根据上传的实体类，选择实体生成表单。首先会默认生成一套不完善的表单，如果需要进一步完善，则在编辑表单中进行完善。

第四步：编辑表单

控制界面是否为列显示或者表单显示，以及显示的控件类型。 这里涉及到根据表单查询出所对应的属性，进行动态拼接控件，并且动态填充数据到控件中。  如下图：

JS实现拼控件流程： 

1. 查询表单属性，返回JSON串

<!--打开编辑弹出框- 朱火云-  start-->
		var detailSourceList = "";
		function updateForm(index) {
			
			$('#dg').datagrid('selectRow', index);
			var row= $('#dg').datagrid('getSelected');
			
				if (!row || row.length == 0) {
					 $.messager.alert("提示", "请选择编辑项目");
					return;
				}
				if (row.length > 1) {
					$.messager.alert("提示","请选择一条记录再编辑");
					return;
				}	
				
			var id = row.id; 
			var tableName = row.tableName;            //获取表名
			var content = row.content;               // 获取表描述		
			isexitControl();    //打开编辑框之前先判断是否有缓存控件，有则进行删除
			 $.ajax({			
				  url:"findAllField",    //根据表单id查询表单所对应的属性
				  type: "GET",
				  async:false,
				  dataType: "json",
				  data: { headId:id},   
				  //根据HeadId查询表单属性
				  success: function(data){
					 //调用创建表和动态填充数据方法						
				    createDetailTable(data);  
				    }				  
			 });		   	
			 
			$('#formobj').form('load',{
				headId : id,				
				tableName : tableName,
				content : content, 													
				});		
			$('#updateDiv').dialog('open').dialog('setTitle', '编辑表单');	

		}

2.根据返回的JSON串拼接对应的控件

	
		function createDetailTable(detailSourceList){			
			//返回的json，表格中需要显示的记录；有记录的话就拼table，绑定数据					
			if(detailSourceList.length>0){		
				for(var i =0; i < detailSourceList.length-1; i++){
					//1. 动态拼接table
					 var row = tab_div_database.insertRow(tab_div_database.rows.length);			
					 var col = row.insertCell(0);
					col.innerHTML = "<input name='chck' type='checkbox' style='width:30px' /><input  name='courseIdAdd'  type='hidden'/><input id='fieldLength' tabindex='" + rowIndex +"'  type='hidden'/>";
					col = row.insertCell(1);
					col.innerHTML = "<input name='fieldName' style='width:130px' ><input  name='teacherIdAdd'  type='hidden'>";
					col = row.insertCell(2);
					col.innerHTML = "<input name='fieldDesc' style='width:130px' ><input  name='termIdAdd'  type='hidden'>";
					col = row.insertCell(3);
					col.innerHTML = "<input name='fieldLength' style='width:50px' >";
					col = row.insertCell(4);
					col.innerHTML = "<input  name='pointLength' style='width:50px' >";
					col = row.insertCell(5);
					col.innerHTML = "<input  name='fieldDefault' style='width:50px' >";
					col = row.insertCell(6);
					//拼接下拉列表,easyUI样式不起作用
                    var strSelect = "<select style='width: 100px' name='type'>";
					
                    //下拉列表根据返回的type类型，默认显示
                    if('String' == detailSourceList[i].type){
						col.innerHTML=strSelect + "<option value='String' selected='true'>String</option> <option value='Integer'>Integer</option><option value='Float'>Float</option></select>";
					}
					else if('Integer' == detailSourceList[i].type){
						col.innerHTML=strSelect + "<option value='Integer' selected='true'>Integer</option><option value='String'>String</option><option value='Float'>Float</option></select>";
					}
					else if('Float' == detailSourceList[i].type){
						col.innerHTML=strSelect + "<option value='Float' selected='true'>Float</option><option value='Integer'>Integer</option><option value='String'>String</option></select>";
					}
					else{
						col.innerHTML=strSelect + "<option value='xuanzhe' selected='true'>请选择</option><option value='String'>String</option><option value='Integer'>Integer</option><option value='Float'>Float</option></select>";
					}		
					
					col = row.insertCell(7);	
					col.innerHTML = "<input name='isKey' type='checkbox' style='width:30px' />";
					col = row.insertCell(8);	
					col.innerHTML = "<input name='isNull' type='checkbox' style='width:30px' /><input  id ='fieldId' name='fieldId'  type='hidden'/>";
					row.setAttribute("id","row" + rowIndex);
					rowIndex++; 
				}

3.给控件动态填充数据

	//2.动态填充数据到具体控件
	//遍历Table的所有row
	for(var j = 1; j < tab_div_database.rows.length; j++ ){	
		fieldIdList[j-1].value = detailSourceList[j-1].id;
		fieldNameList[j-1].value = detailSourceList[j-1].fieldName;
		fieldDescList[j-1].value = detailSourceList[j-1].fieldDesc;
		fieldLengthList[j-1].value = detailSourceList[j-1].fieldLength;
		fieldDefaultList[j-1].value = detailSourceList[j-1].pointLength;
		isKeyList[j-1].value = detailSourceList[j-1].isKey;
		isNullList[j-1].value = detailSourceList[j-1].isNull;
	       }
		}else{
				
	     }	
	}
			

这次的界面UI系统只完成了一个Demo，还有很多需要待完善的东西，比如说动态布局、CSS和JS的封装等等。。。。。

界面UI系统雏形

标签：

原文地址：http://blog.csdn.net/mingxuanyun/article/details/44685871