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访问了。
接下来,请打开Chrome浏览器,如果您能看到下面的页面,说明您成功了!
上图中右侧浏览器的“S”字符是是通过鼠标点击的,您也可以通过点击Box切换三种颜色。
考虑下如果想通过点击把Box重新置回白色应该怎样做呢?
这篇文章仅仅是JS创建模块最为简单的示例,UISYS的模块能力其实非常丰富,但是学习难度低,只要有面向对象的基础都可以了解。后续我回结合新的例子讲解JS创建模块的和使用模块的方法。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。
本文系转载,前往查看
如有侵权,请联系 cloudcommunity@tencent.com 删除。