MiniGUI 自定义控件教程3

接着上次的教程继续。之前介绍了子类化已有的控件实例的方法，现在介绍子类化类和完全自己重新开始写控件类的方法。这个2种区别就是：子类化类，其实就是OOP里的继承，继承一个已有的控件类，在其基础上作扩展。完全自己重新开始写控件类是我自己的叫法，可以理解为MFC（我个人对MFC相对来说熟悉些，就拿这个做类比了）里的继承自CObject。 这次先介绍完全自己重新开始写控件类的方法。这里我以我自己写的一个MiniGUI的扩展控件类为例子来介绍。MiniGUI里原来的有CTRL_BUTTON这个控件类。刚开始2.0.4 classic风格我觉得不怎么好看（其实是我头头觉得不怎么好看），后来折腾了下弄成fashion风格了的，BS_AUTOCHECKBOX和 BS_RADIOBUTTON已经感觉不错了，不输给台式机的那些控件库了，不过基本的Button功能和那些.net，java的Button比起来还是有一定差距。其实最主要的是我接手的一个项目里，之前负责人，弄了一个类似.net，java，winXP那样的Button，就是鼠标放上去会有外观变化的，然后全部用图片来表现Button。刚开始感觉不错，后来拿到代码一看。额的个神啊，他竟然每个窗口里使用一些CTRL_STATIC来充当Button，然后窗口相应鼠标事件，检测当鼠标移动到某个STATIC上的时候就加载不同的图片。额的个神、额的个神，光光是这些判断代码都快烦死了，而已都是一大堆、一大堆的坐标计算；最要命的是每个窗口都有。一个项目那么多个界面（窗口），要我维护这个，想整死我啊。以前用MFC起手的我，立刻想到了把这玩意封装成控件。他原意其实就是要Button好看点，好我就以这个扩展的Button为例子来说明。

一、功能确定

首先我把这个扩展控件取名为CTRL_BUTTONEX（”button_ex”）。ButtonEx首先就要尽量具备MiniGUI CTRL_BUTTON BS_PUSHBUTTON的基本功能，这样才能在功能上不影响使用者的使用。其次，就是美观，这也是扩展这个控件的原始目的。看看.net，java的Button，他们首先Button的背景都比较好看；其实他们支持在Button上放图标（icon），并且放了图标后还能写文本上去；最后他们Disable的状态也比较好看。所以我们基本就可以确定ButtonEx的功能了。（其实以下这些功能是经过我好几个版本的更新才得到的，其中参考了MiniGUI原来Button的实现和网上不少其他扩展控件的实现）：

1、Button的基本功能。能发送按钮按下通知码；在WS_TABSTOP风格下能在Dialog中使用TAB键遍历焦点；在焦点状态能使用Space和Enter键执行按下操作。这些都是MiniGUI PushButton? 的基本功能。

2、Button原有的界面表现。正常状态，按下状态，焦点状态和无效状态。新增鼠标移动到控件客户区时自动进入焦点状态。

3、支持图标文本混合显示方式。

二、概要设计

好，功能确定了，下面进行设计。首先我把这个控件取名为CTRL_BUTTONEX（”button_ex”）。然后先设计ButtonEx的最基本功能Button它有4种状态：正常（Normal），控件在没有焦点，使能情况下的状态；焦点（Focus），控件出处输入焦点的状态；点击、按下（Click），控件在焦点状态下被按下或者鼠标点击的状态；无效（Disable），控件被EnableWindow设置成无效时的状态。这4种状态的转化我在MiniGUI原来基础上新增鼠标移入客户区进入Focus状态。其他就是MiniGUI原来Button的状态转化了：Noraml就多说了。控件在tab（left、up、right、down）便利到的情况下下进入Focus状态；在Focus下，按下鼠标左键、space、enter键进入到Click状态；在Click下，鼠标左键在客户区弹起、space、enter键弹起，进入到Focus状态（并判定发送Click事件，向父窗口发送Click通知码）；如果鼠标左键在客户区之外弹起则进入Normal状态（并判定无Click事件发生，不向父窗口发送通知码）；Disable windows事件发生进入到Disable状态；Enable window事件发送进入到Normal状态。状态图转化详见下图：

 
图 1 状态转化图

然后控件能在WS_TABSTOP风格下在Dialog中能被tab、left、up、right、down便利焦点。在焦点状态下按下space、enter键发送按下事件。这些靠处理MSG_KEYDOWN来实现。

最后我们来设计ButtonEx的外观表现形式。这里我经过了几个版本的升级，参考了MiniGUI原来Button的表现手法和网上一些扩展控件的表现方法，决定设计出几种不同的风格来供使用者选择。

1：BEXS_IMAGE

我把这个叫做图片风格。分别用4张不同的图片来表现4种状态。图片支持bmp（支持透明色）、png（支持alpha通道）、gif、jpeg（支持透明色）。外观全部交由图片负责，因此这个风格不支持显示文本。好不好看全靠外部图片PS处理。这里说明下，现在一般使用MiniGUI的色深是16bit，但是载入24bit的bmp只要PS里颜色渐变不是特别BT，不会有太大的失真。32bit带alpha通道的png在2.0.4的API下也能保留alpha通道信息。因此这种可以做出外观上不规则的Button（它响应鼠标还是以矩形来算的）。bmp、jpg在设置了透明色后也能有这种效果，不过图层边缘的渐变造成透明时的锯齿问题（这里的透明平滑算法我至今还没弄出来，现在只能在图像处理软件里弄）。最终效果如下：

 
图 2 BEXS_IMAGE效果

2：BEXS_BKIMAGE

我把这个风格叫做背景图片风格。它用4张不同的图片来变现4种状态的背景。然后能在其基础上放置图标（icon），写文本，图标和文本能在Click中显示动态效果，图标能在Disable状态下表现alpha混合特效。它的背景图片模式与BEXS_IMAGE一致，支持bmp、png、gif、jpeg，也能透过alpha通道或是透明色变现出不规则形状。Icon支持的图片格式和背景图片一样。可以显示文本，在有icon的情况下显示文本。Icon和文本的动态点击效果其实只要在Focus和Click下稍微改动下Icon和文本位置形成一定的位置偏差就即可看到动态效果。至于Disable下Icon的alpha混合特效，是应用了2.0.4的newgal接口提供的高级图像处理API来完成的。方法是在Disable下把Icon以一定的alpha值，半透明的绘制在背景上，这样看上去就像背景透过了一部分Icon一样，从而达到表现Dsiable状态的效果。文本让用户设置2种不同的颜色，分别在Disable和非Disable下显示。这些其实就是.net，java里Button控件的功能。不过这个风格用好了，效果不