UISYS 动态创建模块

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 动态创建模块的例子。

1. 首先我们准备一个交互模块，他是一个 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>

2. 接下来我们创建一个 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>

3. 启动UISYS工具，在平台中输入 pub D:/mession/05 :80, 如果命令行出现如下图绿色的文字，代表此目录已经发布成功了。
   您可以进行Web访问了。
   

4. 接下来，请打开Chrome浏览器，如果您能看到下面的页面，说明您成功了！
   
   

上图中右侧浏览器的“S”字符是是通过鼠标点击的，您也可以通过点击Box切换三种颜色。
考虑下如果想通过点击把Box重新置回白色应该怎样做呢？

这篇文章仅仅是JS创建模块最为简单的示例，UISYS的模块能力其实非常丰富，但是学习难度低，只要有面向对象的基础都可以了解。后续我回结合新的例子讲解JS创建模块的和使用模块的方法。