MiniUI系统架构

Toturial » MiniUI系统架构

章节目录：

跨平台展现层控件
模块化设计
继承体系
控件分类
创建和使用控件对象
HTML标签化方式创建对象
与第三方控件集成

跨平台展现层控件

MiniUI是一套Javascript实现的控件库，包含表单、表格、树形、布局、导航等系列控件，满足一体化WEB界面开发的功能需要。

它处于WEB客户端，为客户端使用者提供丰富的功能操作和强大控件。

支持JSP、ASP.NET、PHP、ASP、ColdFusion、Ruby on Rails等WEB开发平台。

支持IE6+、FireFox、Chrome、Safari、Opera等浏览器。

模块化设计

MiniUI是基于模块化思想设计开发的。

一个单独的控件就是一个独立的功能模块，控件与控件之间实现松耦合，互不影响。

比如开发者可以单独使用datagrid、menu、tree等控件，而不用额外加载其他控件，减少javascipt代码量加载，优化生成效率。

Note：MiniUI默认包含了所有控件，压缩后，js体积不超过200k。开发者也可以视开发需要，只加载使用的控件，不加载额外控件。

继承体系

MiniUI控件是基于"面向对象"思想开发的，控件之间能实现继承体系，减少重复代码的出现。

mini.Control是控件基类，实现了id、style、cls、width、height、enabled等属性，以及render方法。

其他控件都基于mini.Control继承并扩展而来，从而获得尺寸、样式外观和渲染呈现的能力。

MiniUI的继承树非常简单，尽量避免复杂的继承关系。任何控件，向上追溯1~3个父类，就可以找到mini.Control。

控件分类

任何一个控件都有属于自己的功能价值，这也是它为什么设计开发的原因。

MiniUI将控件分为如下五个大类：

表单控件：实现输入框、单选、多选等功能。
数据表格：实现列表数据显示、操作等功能。
树形控件：实现树形数据显示、操作等功能。
布局控件：实现整体、局部界面特殊方式布局显示等功能。
导航控件：实现界面分类、数据导航显示等功能。

每一个控件分类都由一个以上控件组成，以实现更细化、更具体的功能。

表格和树形控件是两个特殊的分类，它们都是高级而复杂的控件，实现了复杂而丰富的功能。

创建和使用控件对象

在上一个章节"Hello, MiniUI!"，我们学习了第一个MiniUI示例。我们回顾下，如何创建和使用MiniUI控件对象。

首先，使用 "new" 关键字来创建一个控件实例：

var button = new mini.Button();

MiniUI的所有控件，都是"mini."开头，再加上控件名称。比如"mini.DataGrid"、"mini.ComboBox"等。

然后，设置属性，并监听处理事件：

button.setText("Hello");            //设置属性
button.on("click", onHelloClick);   //监听处理事件

最后，需要将控件对象呈现到页面内：

button.render(document.body);

HTML标签化方式创建对象

MiniUI提供了另外一种更简单的方式来创建和使用控件对象。代码如下：

<input id="helloBtn" class="mini-button" text="Hello" onclick="onHelloClick"/>

解释如下：

class="mini-button"：表示此标签是mini.Button控件对象。
text="Hello"：设置对象属性。
onclick="onHelloClick"：监听处理事件

Note：HTML的位置就是控件对象呈现的地方。不需要另外使用render方法将控件渲染呈现到DOM元素内。

MiniUI的所有示例都是用HTML标签化方式编写的。

使用HTML方式创建对象，减少80%的Javascript代码量，更易写、易读、易维护。

只有一些事件处理函数，才需要另外写Javascript方法。

与第三方控件集成

MiniUI非常注重与第三方控件的集成问题。因为控件的功能是有限的，而软件开发的需求是无限的。

第三方控件有两种形式：

Javascript控件：比如jQuery、YUI、Dojo、ExtJS等。
插件控件：比如Flash图表、Silverlight工作流引擎等。

MiniUI的所有控件，有一个获得控件DOM元素的方法：

var button = mini.get("helloBtn");
var el = button.getEl();

开发者获得控件的DOM元素后，可以appendChild等方法，将其移动到任何DOM元素内。

如果开发者想将一个Flash图表对象，设置到mini.Panel面板内，可以这样操作：

var swfChart = document.getElementById("swfChart"); //获得Flash图表DOM元素
var pbodyEl = panel.getBodyEl();                    //获得Panel的bodyEl
pbodyEl.appendChild(swfChart);                      //将Flash图表DOM元素，加入到Panel内

Note：通过暴露控件DOM元素对象的方法，开发者可以将MiniUI与任何第三方控件轻松集成。