UISYS 简介
UISYS 全称 “AIroot UISYS”,是由AIroot平台出品的 “UI服务系统”,是专为前端UI展现制定的一套编译服务平台,内嵌HTML、CSS、JavaScript解析引擎,并加入UI分析引擎为前端代码做模块化开发,UI引擎可以充分的发挥HTML“语义化”的思想,把开发人员的思想有效的转化为代码。
说明
UISYS的模块功能非常强大,可以通过超文本描述和JavaScript语言创建(支持new 关键字、支持构造函等)。经过上几篇文档,大家了解了UISYS的简单使用,今天我们来学习下UISYS通过JS语言创建模块的例子。
本文连接地址: http://www.airoot.cn/pages/Page05.ui?only
例子
之前的任务,UISYS引入模块都是通过“超文本”(HTML)方式引入。
而交互性强的UI单独靠HTML描述是不够的,那么UISYS可以使用JS之类的语言来动态创建模块吗?
今天我们来看下UISYS 动态创建模块的例子。
- 首先我们准备一个交互模块,他是一个 64x64 正方形,点击时可以切换颜色。文件保存为 D:/mession/05/Box.ui
<style> body{ float:left; cursor:pointer; width:64px; height:64px; box-sizing:border-box; border:1px solid #aaaaaa; } </style> <div></div> <script> var colors = ["#f00000","#00f000","#0000f0"]; var i = 0; function init(){ dom.onclick = function(){//为当前节点注册点击事件 //每次点击都会一次切换colors中的颜色。 dom.style = "background-color:" + colors[i++%3]; } } </script>
- 接下来我们创建一个 640x640 像素的div。保存为 D:/mession/05/Index.ui
<@pub/> <style> body{ width:640px; height:640px; border:1px solid #000000; } </style> <div> <!-- 这里要动态添加上面的Box模块 --> </div> <script> import ./Box; function init(){ for(var i = 0;i<100;i++){//动态创建100个Box,然后添加到当前节点内。 dom.appendChild(new Box());//实际上box里面是可以带入参数的,例如new Box("box name") } } </script>
- 启动UISYS工具,在平台中输入 pub D:/mession/05 :80, 如果命令行出现如下图绿色的文字,代表此目录已经发布成功了。
您可以进行Web访问了。
- 接下来,请打开Chrome浏览器,如果您能看到下面的页面,说明您成功了!
上图中右侧浏览器的“S”字符是是通过鼠标点击的,您也可以通过点击Box切换三种颜色。
考虑下如果想通过点击把Box重新置回白色应该怎样做呢?
这篇文章仅仅是JS创建模块最为简单的示例,UISYS的模块能力其实非常丰富,但是学习难度低,只要有面向对象的基础都可以了解。后续我回结合新的例子讲解JS创建模块的和使用模块的方法。