java和UI接口规范Word格式.docx

1、scriptsrc=assets/scripts/require.js/scriptJquery插件assets/scripts/jquery.jsJavascript核心底层工具包assets/scripts/v8natives.js3.3.2 BootStrap使用bootstrap框架进行整体的css控制和布局。Widget模块里可以重写全局样式，生成自己的样式。3.3.3 界面排版Index.html主要由四个widget组成：顶端widget，树widget，主体widget，底端widget。介绍一下如何在index.html页面上引用一个tree widget第一步、在index

2、.html合适的位置放置一个tree占位符。第二部、在script脚本区域增加下面的代码就可以。这段代码也可以放到一个js文件进行统一加载。script require（ ts/t3/TSTree,/通过require加载器将TSTree加载进来 ,function（TSTree）vartree=new TSTree （）;/实例化一个tree对象 tree.load（require.toUrl（ts/t3/compute/platform/PlatformSummary.json）;/ajax初始化tree数据 tree.placeAt（#TS_tree /找到index.html的占位符进

3、行替换 window.tree =tree; ）;3.4 Widget模块开发上面说了如何引用widget，下面介绍如何开发widgetWidget现在类似java的一个类。下面是一个简单的例子，后期会补充widget api开发手册。define（ts/t3/compute/platform/PlatformSummary, ts/t3/TSWidget,ts/t3/TSEventdojo/text!ts/t3/compute/platform/PlatformSummary.htmdojo/css!ts/t3/compute/platform/PlatformSummary.cssjque

4、ry,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,func

5、tion（event） this.renderData（event.data）; functionrenderData（data） platforms, hostslpars.forEach（function（key,index） thiskey.innerText=datakey; ,this.attachPoints）; function load（url） var that=this; $.ajax（url）.done（function（data） that.dataProvider=data; ExtendClass（PlatformSummary,TSWidget）; Install

6、Functions（PlatformSummary.prototype,DONT_ENUM,load,load,renderData,renderData ）; returnPlatformSummary;）;3.4.1 使用widget模块化开发的优势在之前我们做一些功能的时候使用第三方插件。看到他部分功能在对我们的项目中带来好处，随着项目的发展业务需求的变化。第三方的插件就很难支持新的需求，就要对第三的插件进行扩展，不能扩展的只能进行源代码的修改。ul id=tebe_tree class=ztree tree-container/ul$.fn.zTree.getZTreeObj（面向过程

7、的开发方式，要换成别的tree都不能换。现在我们是顶一个Tree的Widget的模板，你可以用自己写的tree实现或者用第三方的tree控件实现。我们定义的Tree的widget名称是TSTree。使用方式很简单，在要是用的js里require（）引用进来var tree = new TSTree（）;tree.placeAt（页面占位符id这样我们只要针对TSTree进行开发就可以了。widget划分为两类： 第一类，页面基本控件widget 主要有Tree、DataGrid、Dialog、tabs、form等控件 第二类，根据基本控件widget扩展具体业务widget 例如：platfo

8、rm Summary、createCluster dialog、add Component dialog之类4 页面跳转方式UI层的页面跳转是纯静态的跳转。html页面跳转时，先提交到js脚本。js脚本跳转到下一个页面，在进入页面的时候执行一个js脚本，ajax调用java接口获取数据，再由js处理数据封装html。5 widget组件的数据5.1 Summary组件数据页面数据在页面加载时，执行js脚本请求java接口，返回数据，再由js将数据填充渲染HTML。实例: 主机摘要页面，java接口输出的JSON数据格式hostName:IVM106hostPcid32c7a32d-467e-4

9、05b-808a-ffb4e239276dhostSn06056AAipAddr172.24.23.106memoryAvailable 51968,modelType8246-L2DplatformNameplatformPcidcfefcab2-e61d-4c44-98c5-e946099593dcplatformType0processorsAvailable 13.6,pvAvailableSize 572325,pvTotalSize 1144650,state1storageAvailableSize 932773,storageTotalSize 1716042,vgAvaila

10、bleSize 360448,vgTotalSize 5713925.2 DataGrid组件数据在页面中执行脚本创建组件，调用java接口获取数据，调用组件的load方法解析数据填充到组件中实例：JSON数据样本如下:meta pageSize 20,pageNo 1,totalRows 2,startRowendRowtotalPages 1 ,rows idnamesn4e2cip ,32c7a32d-467e-405b-808a-ffb4e239276eIVM1074e2d172.24.23.107 4.2 树组件数据前端UI的tree控件定义了一个标准的数据格式，用户java接口对t

11、ree进行处理:, /节点IDpid, /父节点IDtype 0, /节点类型, /节点名称titledescription, /节点title属性hrefmodule.html, /节点链接target_frame, /节点链接的target属性iconvm /节点的图标testtesttest6 AJAX操作数据在提交操作，验证数据名称重复、pv、vg是否被使用时，通常使用AJAX调用java接口进行处理，处理结束后，将结果统一封装成MessageJson对象，转化为JSON格式输出到页面，由前台进行处理。MessageJson的数据格式:/* * 状态标志 * 1: 真 0:假 */ p

12、rivate String flag ; /* * 消息 private String msg ; * 获取任务集合 private List tasks; * 数据集 SuppressWarnings（unchecked） private List items;7 国际化设计国际化分前端界面国际化、后台消息国际化6.1 前端界面国际化前端国际化由客户端根据当前语言设置请求所需json，并将数据对象封装为MessageBundle API对象应用范围:+ 静态界面元素：如按钮，标签，等无需依赖后台控制的6.1.1 数据载体application/json文件 如： navigator.lang

13、uageen-USnavigator.vendorGoogle Inc.navigator.appNameNetscapenavigator.userAgentMozilla/5.0 ., 6.1.2 处理程序jsm/util/MessageBundle6.1.3 JavaScript i18n APIMessageBundle#getMessage（messageKey:String, .args:*）6.1.4 在htm模板中的用法span$messageKey6.2 后台消息国际化后台国际化由Web应用根据当前用户所需语言，返回相应的消息6.2.1 数据载体：text/x-java-pr

14、operties文件 如：navigator.language=en-USnavigator.vendor=Google Inc.navigator.appName=Netscapenavigator.userAgent=Mozilla/5.0 .6.2.2 加载程序：* 内置：java.util.ResourceBundle* spring:com.*.ReloadableResourceBundleMessageSource6.2.3 Java i18n API:* 使用内置ResourceBundle：String msg=i18n.getString（String key）;1 内置R

15、esourceBundle API属低级，或可对其进行封装，使其支持带参数替换* 使用Spring webApplicationContext.getMessage（String messagekey, Object args, Locale locale）每次调用得传locale，在Action中调用时可以在BaseAction封装上述方法再调用BaseAction对应的方法，以减少代码量6.2.4 在jsp中的用法：* 使用EL： $i18nmessageKey2注：1i18n为来自session的一个ResourceBundle对象2请查阅spring i18n用法7包结构* WebRo

16、ot/* index.html* login.html* assets/ （存放无需后台处理的静态资源，包括js css png json woff等）* scripts/ （js根目录, requirejs的baseUrl所在目录）* jquery.js （第三方脚本）* require.js （第三方脚本）* jsm/ （Web标准接口层，以及Teamsun Widget接口层）* ts/ （Teamsun的Widget实现以及实用工具类）* widgets/* TSWidget.js* controls/（控件相关widgets）* TSDataGrid.js* TSTree.js* c

17、ontainers/（容器相关widgets）* TSDialog.js* TSPanel.js* navigators （导航相关widgets）* TSTabs.js* TSAccordion.js* events/ （存放事件类）* TSEvents.js* TSEventTarget.js* TSMessageEvent.js* TSChangeEvent.js* TSCustomEvent.js* util/* styles/ （样式根目录）* t3/* global.css （项目全局样式）* index.css （index页面私有样式）* login.css （login页面私有样式）* bootstrap.css （第三方样式.）* 960grid.css （第三方样式.）* images/* locales/* fonts/