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

例子

<b> 之前的任务，UISYS引入模块都是通过“超文本”(HTML)方式引入。

而交互性强的UI单独靠HTML描述是不够的，那么UISYS可以使用JS之类的语言来动态创建模块吗？</b>

<b>今天我们来看下UISYS 动态创建模块的例子。<b/>

首先我们准备一个交互模块，他是一个 64x64 正方形，点击时可以切换颜色。文件保存为 <b>D:/mession/05/Box.ui</b>

<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(){
			dom.style = "background-color:" + colors[i++%3];
		}
	}
</script>

接下来我们创建一个 640x640 像素的div。保存为 <b>D:/mession/05/Index.ui<b>

<@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++){
			dom.appendChild(new Box());
		}
	}
</script>

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

您可以进行Web访问了。

tech0502.png

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

tech05.png

tech0501.png

上图中右侧浏览器的“S”字符是是通过鼠标点击的，您也可以通过点击Box切换三种颜色。

考虑下如果想通过点击把Box重新置回白色应该怎样做呢？

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