SUI-JavaScript富UI类库集成解决方案

bellstar

浏览: 150619 次
性别:
来自: 上海

最近访客更多访客>>

qingshou117

z09026040

zjxysl

michaelyn

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

UI JavaScript JSI EXT YUI

简介：
SUI不是一类UI的实现，也不是一套标准的UI标记语言，它只是帮助既有的UI框架（比如Ext、YUI之类）以标记的方式来声明和创建UI。这些标记的名称、属性、与及值都是可自定义的，因此你需要针对特定框架来编写一套转换机制来将标记的声明转换成创建这些UI所需要的参数，但通常情况下，不需要为这种转换做很多工作，因为SUI会以一种简单而实用的约定来实现这种转换，另外SUI的约定是非强制的，因此也可以针对特例实现自己的转换。
一、SUI的目标或者说特点
1、以标记声明来表示界面构造，好处很多：形象、编辑方便、节省代码量...
2、支持一般形式节点和指定命令空间的节点作为渲染目标，如<div sui="panel"><div><ui:panel></ui:panel>
3、标记声明和具体渲染程序间通过配置来关联，即同一个标记可以由不同的框架、不同的版本来渲染。但由于各种UI框架的API并不一样，因此不能像普通的HTML UI标记那样，一种UI在各个浏览器间使用一样的标记（实现情况也不是100％完全一样），但由于SUI是松耦合的，因此是支持标准标记的，你可以自己制定一套或者等待哪天它出现。
4、SUI默认使用JSI来导入JS，也就是说你无须再为命名冲突和该什么情况下导入哪些js文件烦恼了
5、支持多种UI框架组件组成的复杂界面，你可以在Ext的panel里放YUI的canlendar,也可以在YUI的panel里放jquery的maskinput
6、支持以配置节点的方式声明复杂组件的子部件，可以像asp.net那样声明grid
7、支持在配置文件里为某一种UI或某个渲染器渲染的该种UI设定默认的属性，这样的好处是可以减少在html页面里的代码量，也可以达到在一个地方修改，整个程序都改变的目的。但这个默认设置的优先级是最低的，因此页面中的设置或者适配器中的设置可以覆盖它。
8、支持以平常的方式声明事件触发时执行的代码,如<ui:button onclick="alert('hello sui')" ></ui:button>，但不推荐采用此种方式。
9、计划支持浏览器支持设定（目前在配置文件里可以设置，但尚未实现）。也就是说当某种ui:tagname在配置文件里的默认渲染器不支持当前浏览器的情况下，会查找其他支持的实现来渲染。
10、SUI支持主流的浏览器，我在Window下的以下浏览器测试过，IE6 IE7 FirefoxV3.0.5 OperaV9.6.3 Google-Chrome V1.0 Safari V3.2.1,Linux的FirefoxV3.0.5 OperaV9.6.3 测试过

二、布署与运行
1、下载SUI
svn checkout http://sui.googlecode.com/svn/trunk/ sui-read-only
2、下载Ext v2.1
下载Ext并解压到javascripts/org/ext/v2_1目录下
3、把SUI放到Tomcat或者IIS的web程序目录里，并把index.html设为默认页面
4、浏览index.html页面，点击!Render按钮运行

三、SUI是如何工作的
1、初始化指定渲染区域，为UI:tagname标记DOM对象扩展一些方法，使得可以监听该标记被渲染前后的事件
2、以从根至叶的方式渲染指定区域，在父节点被渲染之前，子节点会从父节点移出，并送入渲染栈。父节点渲染后，必须返回一个实现SUI组件或容器组件接口的临时对象，当父节点的每一个子节点渲染后，调用父节点的对映临时对象的add方法添加子节点对映的临时对象
3、渲染单个节点：首先SUI会从ui:tagname的父节点移除它并压入栈，SUI从config.xml查找UI:tagname对应的渲染适配器程序，找到后调用该渲染适配器的载入器载入并实例化，然后注册到SUI的renderMap，以备同样类型的声明调用。开始渲染前SUI收集UI:tagname的声明并转换成一个｛name:value}形式的声明对象，触发渲染前事件，调用渲染适配器，并传递声明对象给它，渲染适配器对声明对象进行转换，然后实例化一个具体框架（比如Ext)的UI组件并渲染它，渲染后返回一个实现SUI组件接口的临时对象，最后SUI触发渲染后事件，继续渲染其余节点
4、SUI如何载入js代码：SUI默认使用JSIhttp://www.iteye.com/wiki/JSI载入自身代码及适配器代码，但也可以针对特定框架（比如YUI）实现SUI的loader接口来以自己的方式载入。
四、ExtUI标记示例及渲染结果

<body>
	<input type="button" value="!Render" onclick="btnRender_click()"/>
	<ui:panel id="p2" style='visibility:visible;' title="小面板" width="300" collapsible="true">
			<ui:colorpalette visibility="visible" id='c1' render_name="Ext" render_version="2.1" disabled="false" notbool="~false" value="" intp="356" floatp="352.7" boolp="false" onchange="javascript:alert('i changed')"></ui:colorpalette>		
		</ui:panel>
	<ui:button id="extButton" text="Click me!" onclick="alert('hello,sui')" ></ui:button>
	<ui:panel id='p1' title="cool大面板" width="500" collapsible="true" oncollapse="pnl1_collapse(this)" >
		<ui:slider id="suiSlider" width="200" min_value="0" value="50" max_value="100" increment="10"></ui:slider>
		北京欢迎你！     
		<ui:datepicker id="d1" fieldLabel="Date of Birth1" name="dob2" width="190" allowBlank="true"></ui:datepicker>
		<input type="text" />
  </ui:panel> 
<div sui="window"  title="windows sui" layout="fit" width="500" x="100" auto_show="true"  plain="true" height="300" close_action="hide"  id="win2" >
	<div>abc</div>
</div>
	<ui:window id="suiWin"  title="windows sui" layout="fit" width="500" x="100" auto_show="true"  plain="true" height="300" close_action="hide" >
		<ui:progressbar id="extProgressBar" width="200" height="20"  value="0.35" text="uploading..." ></ui:progressbar>
	</ui:window>
	<ui:grid id="egrid" stripe_rows="true" auto_expand_column="company" height="150" width="600"  title="array grid" >
		<ui:configure>
			<ui:columns>
				<ui:column id="company" header="Company" width="160" sortable="true" data_index="company" ></ui:column>	
			</ui:columns>
		</ui:configure>
	</ui:grid>
	<ui:form id="f1" label_align = "top" _dont_render_children="true" frame = "true" title = "Multi Column, Nested Layouts and Anchoring" body_style="padding:5px 5px 0" width="600">
		<ui:configure>
		<ui:items>
		<ui:panel id="col1" layout="column" >
			<ui:items>
				<ui:panel layout="form" column_width="0.5" >
					<ui:items>
						<ui:textfield xtype="textfield" id="txtFname"  field_label="First name" anchor='95%' name="first" ></ui:textfield>
						<ui:textfield xtype="textfield" id="txtCompany"  field_label="Company" anchor='95%' name="company" ></ui:textfield>				
					</ui:items>
				</ui:panel>
				<ui:panel layout="form" column_width="0.5" >
					<ui:items>
						<ui:textfield xtype="textfield" id="txtLname"  field_label="Last name" anchor='95%' name="last" ></ui:textfield>
						<ui:textfield xtype="textfield" id="txtEmail"  field_label="Email" anchor='95%' name="email" vtype="email" ></ui:textfield>
					</ui:items>
				</ui:panel>			
			</ui:items>
		</ui:panel>
		<ui:htmleditor _dont_render="true" xtype="htmleditor" id="bio" height="200" anchor='98%' field_label="Biography"></ui:htmleditor>
		</ui:items>
		<ui:buttons id="f1btns" _dont_render="true">				
			<ui:button id="btnCancel" text="Cancel" ></ui:button>			 
			<ui:button id="btnSave" text="Save"  ></ui:button>
		</ui:buttons>
		</ui:configure>
</ui:form>
</body>