MiniUI系统架构

Toturial » MiniUI系统架构

章节目录:

跨平台展现层控件

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"/>

解释如下:

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

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

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

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

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

与第三方控件集成

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

第三方控件有两种形式:

  1. Javascript控件:比如jQuery、YUI、Dojo、ExtJS等。
  2. 插件控件:比如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与任何第三方控件轻松集成。