Clouda.UI简介

clouda.UI是什么?

clouda.UI是一套拟合Web Components规范的新型UI框架,提供将UI组件封装为形如的HTML标签的能力,使HTML标签变身为包含内部模板,样式和动态逻辑的组件。

使用clouda.UI封装后的组件,称为胶囊组件, 取其内部细节对使用者透明且完全自包含之意。正如你可能已经想到的,一个大胶囊可以由若干个小胶囊构成。

与Clouda框架的关系

clouda.UI可完全独立运行,也可与Clouda框架配合使用,获得更好开发体验

运行环境

clouda.UI仅依赖于浏览器,不依赖于node.js等server端运行环境。

独立使用clouda.UI

如果您需要独立使用clouda.UI,引入clouda-ui.js即可。

<script src="http://bcs.duapp.com/cloudaui/clouda-ui-0.1.2.js"></script>

提示:如果是本地开发,需要提供静态文件服务的http服务器环境

在Clouda框架中使用

升级至Clouda最新版,即可直接在视图(view)中使用

一个简单的UI组件

首先我们通过一个实例来了解一下clouda.UI的开发流程。

(1)首先在/clouda-ui/component/下新建名为x-foo.html文件,并创建一个名为x-foo的组件

<clouda-component name="x-foo" attributes="attr">
    <template>
        <input name="attr" value="{{attr}}" id="input"/>
        <p>{{attr}}</p>
    </template>
    <script>
        cloudaui({
            attr: 'testName',           
            attrChanged : function(val){
                console.log("attr change!",val);
            }
        });
    </script>
</clouda-component> 

(2)然后在/clouda-ui/下创建一个index.html文件(如果存在就修改该文件),并在index.html中使用创建得x-foo组件。

<!DOCTYPE html>
<html>
    <head>
        <script type="text/javascript" src="http://code.baidu.com/touch-0.2.8.js"></script>
        <script src="http://bcs.duapp.com/cloudaui/clouda-ui-0.1.2.js"></script>
    </head>

    <body>
        <x-foo id="x-foo" attr="John">inner html</x-foo>
        <script type="text/javascript">
            clouda.ui.import('./component/x-foo.html');
        </script>
    </body>
</html>

到此,就完成了一个简单UI组件的创建和使用,大家看到在上面的实例中使用了import和x-foo的标签,下面详细介绍他们的语法。

  • import

    加载需要使用的组件,参数为组件的路径

    clouda.ui.import('./component/x-foo.html');
    
  • x-foo标签

    在步骤(1)我们创建名为x-foo的标签,在index.html中就可以直接使用name作为标签名来使用组件,其中attr为组件的公开属性,关于如何设置公开属性将在后续章节中详细介绍。

(3)在浏览器中使用http://localhost/clouda-ui访问(如果是本地开发,需要提供静态文件服务的http服务器环境)