java和UI接口规范Word格式.docx
《java和UI接口规范Word格式.docx》由会员分享，可在线阅读，更多相关《java和UI接口规范Word格式.docx（10页珍藏版）》请在冰豆网上搜索。
scriptsrc="
assets/scripts/require.js"
>
/script>
Jquery插件
assets/scripts/jquery.js"
Javascript核心底层工具包
assets/scripts/v8natives.js"
3.3.2BootStrap
使用bootstrap框架进行整体的css控制和布局。
Widget模块里可以重写全局样式，生成自己的样式。
3.3.3界面排版
Index.html主要由四个widget组成：
顶端widget，树widget，主体widget，底端widget。
介绍一下如何在index.html页面上引用一个treewidget
第一步、在index.html合适的位置放置一个tree占位符。
第二部、在script脚本区域增加下面的代码就可以。
这段代码也可以放到一个js文件进行统一加载。
script>
require（[
"
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;
}）;
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模块化开发的优势
在之前我们做一些功能的时候使用第三方插件。
看到他部分功能在对我们的项目中带来好处，随着项目的发展业务需求的变化。
第三方的插件就很难支持新的需求，就要对第三的插件进行扩展，不能扩展的只能进行源代码的修改。
ulid="
tebe_tree"
class="
ztreetree-container"
/ul>
$.fn.zTree.getZTreeObj（"
面向过程的开发方式，要换成别的tree都不能换。
现在我们是顶一个Tree的Widget的模板，你可以用自己写的tree实现或者用第三方的tree控件实现。
我们定义的Tree的widget名称是TSTree。
使用方式很简单，在要是用的js里require（["
]）引用进来
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"
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"
endRow"
totalPages"
1
},
rows"
[
{
"
id"
name"
sn"
4e2c"
ip"
},
32c7a32d-467e-405b-808a-ffb4e239276e"
IVM107"
4e2d"
172.24.23.107"
}
]
4.2树组件数据
前端UI的tree控件定义了一个标准的数据格式，用户java接口对tree进行处理:
//节点ID
pid"
//父节点ID
type"
0,//节点类型
//节点名称
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模板中的用法
span>
${messageKey}<
/span>
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：
spring:
messagecode="
/>
[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/
升级会员 