前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >强大的airoot-uisys v1版本发布了

强大的airoot-uisys v1版本发布了

作者头像
金刚
修改2020-04-09 10:11:02
5890
修改2020-04-09 10:11:02
举报
文章被收录于专栏:用户2629543的专栏

AIroot UISYS

www.airoot.cn

A powerful web ui tool, so we call it uisys! 一个功能强大的 WEB UI 开发工具,所以我们叫它UISYS。

例子

代码语言:txt
复制
<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <MyBox/>
  <MyBox/>
</div>

如何运行呢?

你需要使用 uisys 工具 , 点击这里下载 然后保存上面的文件到 D:\test\index.ui 最后, 运行 uisys.exe, 然后在uisys的命令行里面输入下面命令:

代码语言:txt
复制
pub D:\test\ :90

完美, 打开 Chrome 或者 Firefox 浏览器, 然后输入 http://localhost:90/index.ui

这时候你能看到两行 "Hello Baby!" 文字在你的浏览器里。其他例子

您也可以使用JavaScript来创建,如下:

代码语言:txt
复制
<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div>
  <!-- dom 内部区域-->
</div>

<script>
  function init(){
    var box = new MyBox();
    dom.appendChild(box);
  }
</script>

或者可以这样写:

代码语言:txt
复制
<@pub/>

<!-- 定义一个模块 -->
<@define name="MyBox">
  <div>Hello Baby!</div>
</@define>

<!-- 你要展现的代码写在下面. -->
<div id="ct"></div>

<script>
  function init(){
  var box = new MyBox();
  #ct.appendChild(box);
  }
</script>

如果您希望 MyBox 模块保存为文件,单独使用, 例如:

创建文件 MyBox.ui, 代码如下:

代码语言:txt
复制
<!-- MyBox 模块代码放在 D:\test\MyBox.ui -->
<div>Hello Baby!</div>

创建文件Index.ui 代码如下:

代码语言:txt
复制
<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<div>
  <MyBox/>
  <MyBox/>
</div>

打开浏览器查看结果, 你仍然可以看到两行 "Hello Baby!" 文字。

使用 package 思想

如果你希望把文件放到文件夹里, 你可以这样做:

例如, 将 D:\test\MyBox.ui 移动到 D:\test\mymod\mybox.ui 下。

然后在 Index. UI 模块中导入 MyBox.UI 模块,需要更改下Index.ui的代码:

代码语言:txt
复制
<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<div>
  <mymod.MyBox/>
  <mymod.MyBox/>
</div>

或者可以全局导入MyBox.ui:

代码语言:txt
复制
<!-- Index 模块代码放在 D:\test\Index.ui -->
<@pub/>
<@import value="mymod.MyBox" />
<div>
  <MyBox/>
  <MyBox/>
</div>

打开浏览器查看结果, 你仍然可以看到两行 "Hello Baby!" 文字。

本文系外文翻译,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系外文翻译前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • AIroot UISYS
    • 例子
      • 如何运行呢?
        • 使用 package 思想
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档