简介:
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默认使用JSI
http://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>
- 大小: 203.9 KB
分享到:
相关推荐
电流互感器SUI-101A说明书以及STM32/C51测量值读取程序
matlab开发-JavaScript 项目-vue-sui-demo.zip
SUI-101A说明书及测量值读取程序:内附有接线说明书,和使用说明书 ,C51和STM32读取程序
SUI-101A资料(内含SUI-101A使用说明书、单片机读取SUI-101A例程、Modbus读写测试、外挂互感器接线说明)
SUI-101A交流变送器模块资源 有以下资源 1、SUI-101A使用说明书2023/7/6 18:46文件夹 2、单片机读取SUI-101A测量值例程文件夹2023/7/6 18:46 3、电脑Modbus读写测试文件夹2023/7/6 18:46 4、外挂互感器接线说明(15A...
无线信道建模原理及SUI-3信道的MATlab仿真.pdf无线信道建模原理及SUI-3信道的MATlab仿真.pdf
sui-mobile路由加载js,css问题的解决方案,仅供参考
SUI-Mobile组件库 city-picker.js SUI-Mobile组件库 city-picker.js
这是一个用 Vue 和 SUI-Mobile 写的移动端 Demo,可以用来学习 Vue.js。项目线上预览,效果图如下:
电流互感器SUI-101A说明书及测量值读取程序
matlab写的sui-3的信道仿真,802.16推荐下的仿真代码
将sui-theme导入到您的sui-component中,包括index.scss的路径: @import ' ~@s-ui/theme/lib/index ' ; 如果您想自定义您的组件,创建自己的主题,它只是隋主题导入前添加到您的组件。 @import ' ../custom-...
无线信道建模原理及SUI-3信道的MATlab仿真 (2).docx无线信道建模原理及SUI-3信道的MATlab仿真 (2).docx
无线信道建模原理及SUI-3信道的MATlab仿真 (2).pdf无线信道建模原理及SUI-3信道的MATlab仿真 (2).pdf
sui-componentssui 组件库在线文档使用yarn add sui-components示例// libimport { Wrapper, Logo, Menu, RouterPage, Avatar} from 'sui-components';const { PageWrapper, LeftWrapper, RightWrapper, Header, ...
测试框架的小例子,可以用于参考和使用,内容是博客文档附加代码。
随机共振的源代码,对微弱信号检测有很大 作用,仅供参考使用
[SUI Mobile](http://m.sui.taobao.org/) 是阿里巴巴国际UED前端团队出品的移动端 __UI库__。 没有重复造轮子。主要借鉴 __Framework7__ 的形态并以此为基础,参考Ratchet、Ionic、Onsen各种不同的思路,强化功能,...
sui-components快速SSR测试 准备组件 组件文件夹(您要测试的组件)中要做的事情 1.-构建生产版本 npm run build 2.-使用NPM进行链接,这样您就可以直接在其他项目中使用它了,例如,在AtomTooltip组件的文件夹中( ...
SUI React组件 SUI组件是React组件的开源,高质量库,使团队可以轻松制作任何产品。 :desktop_computer: 环境支援现代浏览器和Internet Explorer 11+(带有 ) 服务器端渲染 :sparkles: 产品特点经过测试的,可用于...