java和UI接口规范

java和UI接口规范设计说明书修订记录修订章节修订时间备注初稿2014-03-03java和UI接口规范1规范描述对UI层的开发设计、页面跳转、页面中组件调用java接口的数据、AJAX与java交互的数据进行了规范。2设计原则1)统一的页面的开发设计2)统一的页面跳转方式3)统一的数据格式3前端开发设计3.1前台开发工具Eclipse，IE9+,Chrome,fireFox3.2前台开发语言HTML、javascript、css3.3前台组成部分1)页面主体框架：index.html页面2)使用bootstrap框架来进行css布局3)对布局后的框架划分功能模块，进行widget的模块化开发。3.3.1Index.htmlIndex.htm为首页框架的界面。全局的css主要控制整体风格，每个单独的widget可以再内部定义自己的css样式linkrel=stylesheethref=assets/styles/app/index.css/Require.js是javascript的一个加载器，它也加载html和cssscriptsrc=assets/scripts/require.js/scriptJquery插件scriptsrc=assets/scripts/jquery.js/scriptJavascript核心底层工具包scriptsrc=assets/scripts/v8natives.js/script3.3.2BootStrap使用bootstrap框架进行整体的css控制和布局。Widget模块里可以重写全局样式，生成自己的样式。3.3.3界面排版Index.html主要由四个widget组成：顶端widget，树widget，主体widget，底端widget。介绍一下如何在index.html页面上引用一个treewidget第一步、在index.html合适的位置放置一个tree占位符。第二部、在script脚本区域增加下面的代码就可以。这段代码也可以放到一个js文件进行统一加载。scriptrequire([ts/t3/TSTree,//通过require加载器将TSTree加载进来],function(TSTree){vartree=newTSTree();//实例化一个tree对象tree.load(require.toUrl(ts/t3/compute/platform/PlatformSummary.json);//ajax初始化tree数据tree.placeAt(#TS_tree);//找到index.html的占位符进行替换window.tree=tree;});/script3.4Widget模块开发上面说了如何引用widget，下面介绍如何开发widgetWidget现在类似java的一个类。下面是一个简单的例子，后期会补充widgetapi开发手册。define(ts/t3/compute/platform/PlatformSummary,[ts/t3/TSWidget,ts/t3/TSEvent,顶端widget树widget主体widget底端widgetdojo/text!ts/t3/compute/platform/PlatformSummary.htm,dojo/css!ts/t3/compute/platform/PlatformSummary.css,jquery],function(TSWidget,TSEvent,htm,css,$){var__super__=TSWidget.prototype;functionPlatformSummary(id,initParams){this.templateString=htm;__super__.constructor.call(this,id,initParams);initParams=Object(initParams);SetProperty(this,DONT_ENUM,__data__,{data:null,state:,});this.addEventListener(data,function(event){this.renderData(event.data);});}functionrenderData(data){[platforms,hosts,lpars].forEach(function(key,index){this[key].innerText=data[key];},this.attachPoints);}functionload(url){varthat=this;$.ajax(url).done(function(data){that.dataProvider=data;});}ExtendClass(PlatformSummary,TSWidget);InstallFunctions(PlatformSummary.prototype,DONT_ENUM,[load,load,renderData,renderData]);returnPlatformSummary;});3.4.1使用widget模块化开发的优势在之前我们做一些功能的时候使用第三方插件。看到他部分功能在对我们的项目中带来好处，随着项目的发展业务需求的变化。第三方的插件就很难支持新的需求，就要对第三的插件进行扩展，不能扩展的只能进行源代码的修改。ulid=tebe_treeclass=ztreetree-container/ul$.fn.zTree.getZTreeObj(tebe_tree);面向过程的开发方式，要换成别的tree都不能换。现在我们是顶一个Tree的Widget的模板，你可以用自己写的tree实现或者用第三方的tree控件实现。我们定义的Tree的widget名称是TSTree。使用方式很简单，在要是用的js里require([“ts/t3/TSTree”])引用进来vartree=newTSTree();tree.placeAt(“页面占位符id”);这样我们只要针对TSTree进行开发就可以了。widget划分为两类：第一类，页面基本控件widget主要有Tree、DataGrid、Dialog、tabs、form等控件第二类，根据基本控件widget扩展具体业务widget例如：platformSummary、createClusterdialog、addComponentdialog之类4页面跳转方式UI层的页面跳转是纯静态的跳转。html页面跳转时，先提交到js脚本。js脚本跳转到下一个页面，在进入页面的时候执行一个js脚本，ajax调用java接口获取数据，再由js处理数据封装html。5widget组件的数据5.1Summary组件数据页面数据在页面加载时，执行js脚本请求java接口，返回数据，再由js将数据填充渲染HTML。实例:主机摘要页面，java接口输出的JSON数据格式{hostName:IVM106,hostPcid:32c7a32d-467e-405b-808a-ffb4e239276d,hostSn:06056AA,ipAddr:172.24.23.106,memoryAvailable:51968,modelType:8246-L2D,platformName:IVM106,platformPcid:cfefcab2-e61d-4c44-98c5-e946099593dc,platformType:0,processorsAvailable:13.6,pvAvailableSize:572325,pvTotalSize:1144650,state:1,storageAvailableSize:932773,storageTotalSize:1716042,vgAvailableSize:360448,vgTotalSize:571392}5.2DataGrid组件数据在页面中执行脚本创建组件，调用java接口获取数据，调用组件的load方法解析数据填充到组件中实例：JSON数据样本如下:{meta:{pageSize:20,pageNo:1,totalRows:2,startRow:1,endRow:2,totalPages:1},rows:[{id:32c7a32d-467e-405b-808a-ffb4e239276d,name:IVM106,sn:4e2c,ip:172.24.23.106,},{id:32c7a32d-467e-405b-808a-ffb4e239276e,name:IVM107,sn:4e2d,ip:172.24.23.107}]}4.2树组件数据前端UI的tree控件定义了一个标准的数据格式，用户java接口对tree进行处理:{id:1,//节点IDpid:0,//父节点IDtype:0,//节点类型name:name,//节点名称title:description,//节点title属性href:module.html,//节点链接target:_frame,//节点链接的target属性icon:vm//节点的图标}testtesttest6AJAX操作数据在提交操作，验证数据名称重复、pv、vg是否被使用时，通常使用AJAX调用java接口进行处理，处理结束后，将结果统一封装成MessageJson对象，转化为JSON格式输出到页面，由前台进行处理。MessageJson的数据格式:/***状态标志*1:真0:假*/privateStringflag;/***消息*/privateStringmsg;/***获取任务集合*/privateListtasks;/***数据集*/@SuppressWarnings(unchecked)privateListitems;7国际化设计国际化分前端界面国际化、后台消息国际化6.1前端界面国际化前端国际化由客户端根据当前语言设置请求所需json，并将数据对象封装为MessageBundleAPI对象应用范围::+静态界面元素：如按钮，标签，等无需依赖后台控制的6.1.1数据载体application/json文件如：{navigator.language:en-US,navigator.vendor:GoogleInc.,navigator.appName:Netscape,navigator.userAgent:Mozilla/5.0...,}6.1.2处理程序jsm/util/MessageBundle6.1.3JavaScripti18nAPIMessageBundle#getMessage(messageKey:String,...args:*)6.1.4在htm模板中的用法span${messageKey}/span6.2后台消息国际化后台国际化由Web应用根据当前用户所需语言，返回相应的消息6.2.1数据载体：text/x-java-properties文件如：navigator.language=en-USnavigator.vendor=GoogleInc.navigator.appName=Netscapenavigator.userAgent=Mozilla/5.0...6.2.2加载程序：内置：java.util.ResourceBundlespring:com.**.ReloadableResourceBundleMessageSource6.2.3Javai18nAPI:使用内置ResourceBundle：Stringmsg=i18n.getString(Stringkey);[1]内置ResourceBundleAPI属低级，或可对其进行封装，使其支持带参数替换使用SpringwebApplicationContext.getMessage(Stringmessagekey,Obj