基础知识漫谈（2）：从设计UI框架开始
说UI能延展出一丢丢的东西来，光java就有swing，swt/jface乃至javafx等等UI toolkit，在桌面上它们甚至都不是主流，在web端又有canvas、svg等等。
基于这些UI工具包\框架，又产生了大量通用的或者业务性的UI框架，比如Draw2d、GEF、easyUI乃至国内的EChart、白鹭等等。
这些框架的业务范围各异，一个程序员的时间和精力有限，你不可能全部都掌握，又不能预言出是哪一个将来会独步天下，甚至，连当前哪一个最流行，都够打一阵嘴炮。
那，我们应该学什么？
本章节谈谈，如果，我们只有一个GC（graphic creator\capability）的时候，如何设计一套UI框架出来，了解了这些，在学习新的UI框架的时候，会更加容易。同时，这里提到的分析思路也可以应用到其他类型框架中，辅助学习。
切记，1、复杂由简单构成；2、构成具备规律。
可想而知，再复杂的框架，划拉到底层的时候，也都是你早就应当掌握的基础知识。不同的框架需要的基础知识可能不一样，但是规律（思想）大多是接近的。
我们先来定义一下，什么是GC？
每一个使用过上面提及的UI toolkit的程序员，应该都注意到了，它们很多都有提供“绘制”功能。在SWT中，提供该能力的是org.eclipse.swt.graphics.GC，在H5 canvas中，则是CanvasRender（也就是canvas element#getContext(‘2d’)得到的对象）。
它们有什么共同点？
可以设置ARGB信息，可以调用来绘制图片、线段、形状，等等。
为了方便起见，这里统一称为GC，它是UI框架的基础。
来思考一个问题，一个下图所示的界面，如果用GC自行绘制的话，你要怎么做？
不用想太多，完整实现是不科学的，写到颓，颓到秃。来看下最常见的解决方案吧：
把该界面上的各个部件拆开来，相同特性的归为一类，每一类都提供一个绘制的方法，比如一个按钮，就需要GC绘制四条边、阴影线以及其中的文本。
然后，让遍历所有的部件，让文本的归文本，按钮的归按钮。
有没有突然感觉简单了？这就是所谓的UI框架干的事儿。
如何构建这个UI框架呢？本文采取的思路是：面向对象建模。
具备面向对象知识的你，应当能分析出以下结论：控件，控件的布局，以及各种事件的处理，这三个元素组成了一个基本的UI框架。
1、控件
按钮、文本框等可操作对象以及包裹它们的容器，这里称之为控件。
所以，我们需要创建出以下对象，继承关系以树形结构表示：
其中父子级只表达继承关系，Control和Composite它们的实体关系图，则可能是如下所示：
其中，Control提供两个方法：
paint(GC)负责调用GC，来绘制自身。
getBounds()负责提供当前控件的位置、大小信息，一般包括x,y,width,height。
Composite作为复合控件，它既具备Control的两个方法，用于正确的绘制自身，又具备一个children列表，里面全都装的是Control，当它的paint方法调用的时候，应当迭代自己的所有children，调用它们的paint。
具备此种结构之后，任何UI界面是不是都成为了某种单根结构？
根节点是一个Root Composite，叶子节点则是具体的某个Control。再联想之前的打印窗口，它的实体结构大概会是这样：
来活动活动思维吧，这是什么数据结构？各个控件的paint()方法调用顺序是怎样的？
2、布局
明明是有bounds的，为什么还需要“布局”呢？
其实啊，bounds（x,y,width,height）也可以视为一种布局，我称之为自由布局，这种布局其实并不好，结论太粗暴难以接受么？大概讲解一下：
你需要非常精确的控制x,y,width,height四个变量，设想你要制作一张两行四列的表格，每个单元格你都得控制它们的位置，bounds信息如下所示：
[0,0,100,20],[100,0,100,20],[200,0,100,20],[300,0,100,20],
[0,20,100,20],[100,40,100,20],[200,60,100,20],[300,80,100,20]
如此你可以推论出一个公式，设i为行号，j为列号，单个cell的bounds信息公式为[i*width,j*height,width,height]，注意到问题没有，你需要自己维护一个嵌套循环，来为每一个单元格赋值。
控制相对位置需要花费大力气。明确一个事实，在该“自由布局”里，child的范围是有可能超出parent的边框的（因为bounds的x,y目前指代的是GC使用到的x,y，也就是整个画布的基准点），除非，你把每一个child的计算公式都改为[i*width+offsetX,j*height+offsetY,width,height]，这里的offset代表parent的绝对位置。
很难控制缩放。比如你要对上述的表格进行缩放，则你需要修改bounds信息，确定缩放的策略，比如整体缩小一个zoom值，列出的公式大概会变成这个样子[i*width*zoom,j*height*zoom,width*zoom,height*zoom]
仅仅说明一个方式不好，并不能证明其他的方式好，很多人已经想到了，我们可以把上面的这些“公式”抽离出来，整理出可复用的代码。如果有其他的布局方案，也可以整理出对应的复用代码，在paint之前应用上去，不就好了么？
对，其实，这个可复用的方案\策略，也就是“布局”。
以伪码说明实现方式：
define Composite{ LayoutManager layoutManager; /** *绘制 */ void paint(){ layout(); //dopaint } /** *执行布局 */ void layout(){ layoutManager.layout(this); } } define LayoutManager{ void layout(Composite parent){ int index=0; //遍历所有的children，获取它们的layoutData，修改它们的位置 foreach(Control child:parent.getChildren()){ //根据child的index以及布局配置计算出偏移量 offset=computeOffset(index); //获取child的布局数据 LayoutData data=child.getLayoutData(); //使用布局数据修改child的bounds信息 data.computeBounds(child,index,offset); index++; } } }
从上面伪码我们可以看出，控件具备layoutData这个成员函数，容器（复合控件）具备layout这个成员函数.
layout用于规定该容器内部的布局类型（比如网格类型GridLayout），整体的布局规划（体现在上述代码中的offset对象，为下一个需要布局的child提供偏移量）。
layoutData负责具体的某一个child在整体中的排布。
由于封装在layout和layoutData中的都是算法（体现在computeXXX方法中），所以，我们可以灵活的规定、服用不同的组合方式，比如把一个控件布置在容器的整体居中位置。
完成了这些，你的UI框架就能用于展示各种视图了。
3、事件分发
仅仅用于展示自然是不够的，不然UI框架完全可以称之为视图框架，这个UI框架应当可以接收各种类型的键盘、鼠标输入。
以H5的canvas为例，我们知道canvas是可以添加鼠标\键盘监听的，你完成了控件和布局，点击按钮控件，响应事件的是按钮还是canvas？
自然是canvas，浏览器哪里知道你写了个“按钮”出来。
对于不熟悉MVC模式的同学可能会有些疑惑，一个“绘制”上去的假按钮，要如何响应事件呢？
我们再来看下这棵树：
推论如下：
1、根容器的bounds等同于canvas的位置大小。
2、如果canvas接收到了鼠标事件，鼠标一定位于某个根容器下某个控件位置上。
3、树遍历控件，即可快速找到事件发生的时候，鼠标处于哪个控件之上。
鉴于JS在某些浏览器上的执行效率（我不是说微信），我们还可以做更多的优化。这里抛砖引玉：
1、引入层（layer）的概念，对树结构再做一个横向划分，优先查找层数高的控件，也可以让某些层的控件不参与查找。
2、对控件本身设置可点击属性，毕竟if判断的速度要比计算(x,y)是否位于bounds范围内要快。
下一篇我来讲讲，如何制作游戏\动画框架，再以后应该不会谈UI相关的东西了，毕竟我也不是做这个的。
