UISYS dynamically creates modules

Introduction to UISYS

The full name of UISYS is "AIroot UISYS". It is a "UI service system" produced by the AIroot platform. It is a set of compilation service platform designed for front-end UI display. HTML, CSS, and JavaScript analysis engines are embedded, and UI analysis engine is added as the front-end Modular development of code, UI engine can give full play to HTML "semantic" thinking, and effectively transform developers' ideas into code.

Description

UISYS modules are very powerful and can be created through hypertext description and JavaScript language (support new keyword, support structure letter, etc.). After the last few documents, everyone has learned about the simple use of UISYS. Today we will learn an example of UISYS creating modules through JS language.

Link to this article: http://www.airoot.cn/pages/Page05.ui?only

example

In the previous tasks, UISYS imported modules were introduced through "hypertext" (HTML).
However, HTML description alone is not enough for a highly interactive UI. Can UISYS use languages ​​such as JS to dynamically create modules?
Today we look at an example of UISYS dynamically creating modules.

1. First, we prepare an interactive module, which is a 64x64 square, and you can switch the color when you click it. Save the file as 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. Next we create a div of 640x640 pixels. Save as 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. Start the UISYS tool, and enter pub D:/mession/05:80 in the platform. If the green text in the following figure appears on the command line, it means that the catalog has been published successfully.
   You can access the web.
   

4. Next, please open the Chrome browser, if you can see the following page, you have succeeded!
   
   

The "S" character in the browser on the right side of the picture above was clicked with the mouse, and you can also switch between the three colors by clicking the Box.
Consider what to do if you want to reset the Box to white by clicking it?

This article is just the simplest example of JS creating a module. UISYS's module capabilities are actually very rich, but the difficulty of learning is low, as long as you have an object-oriented foundation, you can understand it. Later, I will explain how to create and use modules in JS with a new example.