java和UI接口规范.docx
《java和UI接口规范.docx》由会员分享，可在线阅读，更多相关《java和UI接口规范.docx（10页珍藏版）》请在冰豆网上搜索。
java和UI接口规范
java和UI接口规范
设计说明书
修订记录
修订章节
修订时间
备注
初稿
2014-03-03
java和UI接口规范
1规范描述
对UI层的开发设计、页面跳转、页面中组件调用java接口的数据、AJAX与java交互的数据进行了规范。
2设计原则
1）统一的页面的开发设计
2）统一的页面跳转方式
3）统一的数据格式
3前端开发设计
3.1前台开发工具
Eclipse，IE9+,Chrome,fireFox
3.2前台开发语言
HTML、javascript、css
3.3前台组成部分
1）页面主体框架：
index.html页面
2）使用bootstrap框架来进行css布局
3）对布局后的框架划分功能模块，进行widget的模块化开发。
3.3.1Index.html
Index.htm为首页框架的界面。
全局的css主要控制整体风格，每个单独的widget可以再内部定义自己的css样式
Require.js是javascript的一个加载器，它也加载html和css
Jquery插件
Javascript核心底层工具包
3.3.2BootStrap
使用bootstrap框架进行整体的css控制和布局。
Widget模块里可以重写全局样式，生成自己的样式。
3.3.3界面排版
Index.html主要由四个widget组成：
顶端widget，树widget，主体widget，底端widget。
介绍一下如何在index.html页面上引用一个treewidget
第一步、在index.html合适的位置放置一个tree占位符。
第二部、在script脚本区域增加下面的代码就可以。
这段代码也可以放到一个js文件进行统一加载。
3.4Widget模块开发
上面说了如何引用widget，下面介绍如何开发widget
Widget现在类似java的一个类。
下面是一个简单的例子，后期会补充widgetapi开发手册。
define（"ts/t3/compute/platform/PlatformSummary",[
"ts/t3/TSWidget",
"ts/t3/TSEvent",
"dojo/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模块化开发的优势
在之前我们做一些功能的时候使用第三方插件。
看到他部分功能在对我们的项目中带来好处，随着项目的发展业务需求的变化。
第三方的插件就很难支持新的需求，就要对第三的插件进行扩展，不能扩展的只能进行源代码的修改。
$.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",//节点ID
"pid":
"0",//父节点ID
"type":
0,//节点类型
"name":
"name",//节点名称
"title":
"description",//节点title属性
"href":
"module.html",//节点链接
"target":
"_frame",//节点链接的target属性
"icon":
"vm"//节点的图标
}
test
testt
est
6AJAX操作数据
在提交操作，验证数据名称重复、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/MessageBundle
6.1.3JavaScripti18nAPI
MessageBundle#getMessage（messageKey:
String,...args:
*）
6.1.4在htm模板中的用法
${messageKey}
6.2后台消息国际化
后台国际化由Web应用根据当前用户所需语言，返回相应的消息
6.2.1数据载体：
text/x-java-properties文件如：
navigator.language=en-US
navigator.vendor=GoogleInc.
navigator.appName=Netscape
navigator.userAgent=Mozilla/5.0...
6.2.2加载程序：
*内置：
java.util.ResourceBundle
*spring:
com.**.ReloadableResourceBundleMessageSource
6.2.3Javai18nAPI:
*使用内置ResourceBundle：
Stringmsg=i18n.getString（Stringkey）;[1]
内置ResourceBundleAPI属低级，或可对其进行封装，使其支持带参数替换
*使用SpringwebApplicationContext.getMessage（Stringmessagekey,Object[]args,Localelocale）
每次调用得传locale，在Action中调用时可以在BaseAction封装上述方法再调用BaseAction对应的方法，以减少代码量
6.2.4在jsp中的用法：
*使用EL：
${i18n["messageKey"]}[1]
*使用spring：
messagecode="messageKey"/>
[2]
注：
[1]i18n为来自session的一个ResourceBundle对象
[2]请查阅springi18n用法
7包结构
*WebRoot/
*index.html
*login.html
*assets/（存放无需后台处理的静态资源，包括jscsspngjsonwoff等）
*scripts/（js根目录,requirejs的baseUrl所在目录）
*jquery.js（第三方脚本）
*require.js（第三方脚本）
*jsm/（Web标准接口层，以及TeamsunWidget接口层）
*ts/（Teamsun的Widget实现以及实用工具类）
*widgets/
*TSWidget.js
*controls/（控件相关widgets）
*TSDataGrid.js
*TSTree.js
*containers/（容器相关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/
升级会员 