UISYS crea módulos dinámicamente

Introducción a UISYS

El nombre completo de UISYS es "AIroot UISYS". Es un "sistema de servicio de interfaz de usuario" producido por la plataforma AIroot. Es una plataforma de servicio de compilación diseñada para la visualización de interfaz de usuario de interfaz de usuario, con HTML, CSS y motores de análisis de JavaScript integrados, y se agrega un motor de análisis de interfaz de usuario como interfaz de usuario El desarrollo modular de código, el motor de interfaz de usuario puede dar pleno rendimiento al pensamiento "semántico" HTML y transformar eficazmente las ideas de los desarrolladores en código.

Descripción

Los módulos UISYS son muy poderosos y se pueden crear a través de la descripción de hipertexto y el lenguaje JavaScript (admite nuevas palabras clave, estructura de soporte, etc.). Después de los últimos documentos, todos han aprendido sobre el uso simple de UISYS, hoy aprenderemos un ejemplo de UISYS creando módulos a través del lenguaje JS.

Enlace a este artículo: http://www.airoot.cn/pages/Page05.ui?only

ejemplo

En las tareas anteriores, los módulos importados de UISYS se introdujeron mediante "hipertexto" (HTML).
Sin embargo, la descripción HTML por sí sola no es suficiente para la interfaz de usuario interactiva, entonces, ¿puede UISYS usar lenguajes como JS para crear módulos dinámicamente?
Hoy veremos un ejemplo de UISYS creando módulos dinámicamente.

1. Primero, preparamos un módulo interactivo, que es un cuadrado de 64x64, y puede cambiar el color al hacer clic en él. Guarde el archivo como 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. A continuación, creamos un div de 640x640 píxeles. Guardar como 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. Inicie la herramienta UISYS e ingrese pub D: / mession / 05: 80 en la plataforma Si el texto verde en la siguiente figura aparece en la línea de comando, significa que el catálogo se ha publicado correctamente.
   Puede acceder a la web.
   

4. A continuación, abra el navegador Chrome, si puede ver la siguiente página, ¡lo ha logrado!
   
   

Se hizo clic con el mouse en el carácter "S" del navegador en el lado derecho de la imagen de arriba, y también puede cambiar entre los tres colores haciendo clic en el Cuadro.
Considere qué hacer si desea restablecer el cuadro a blanco haciendo clic en él.

Este artículo es solo el ejemplo más simple de JS creando un módulo. Las capacidades del módulo de UISYS son realmente muy ricas, pero la dificultad de aprendizaje es baja, siempre y cuando tenga una base orientada a objetos. Más adelante, explicaré cómo crear y usar módulos en JS con un nuevo ejemplo.