[ZsUI]一步一步写个DirectUI.[连载贴]

ZsUI - 前言
提起DirectUI或者Windowsless相信很多人都会感到陌生.
先来看看百度百科:
http://baike.baidu.com/view/3102587.htm
如果还觉得概念模糊.可以找点参照.
VB中其实也有一些这样的控件,比如Label Image,这些都是直接画在窗体上,SPY+找不到句柄.
现在,开始一步一步的写一个自己的DirectUI.
由于此连载内容只是教学,为了简介方便,使用了效率一般的GDI+.大量地方未做优化.
(工程内引用了vIstaswx的GDI+ 声明模块)
每一步的代码都会打包放在百度的网盘里.
http://pan.baidu.com/netdisk/singlepublic?fid=295000_3835340436


ZsUI - 第一个例子
第一步,我们找个容器.
在VB里,Form或者PictureBox又或者其它那些有句柄的可视控件都能胜任.
接着,在脑子想象一个控件应该有的样子. 位置和尺寸(x.y.width.height).各种属性和状态.(image.status).
我们先用一个Type来描述它.
Type Zs_UI_Button '想象中的简陋按钮.
X As Integer
Y As Integer
Width As Integer
Height As Integer
Image As Long
Status As Long
End Type
第二部,给它来点实际的东西.
Dim ZButton1 As Zs_UI_Button
With ZButton1
.X = 30
.Y = 30
.Width = 92
.Height = 40
Call GdipLoadImageFromFile(StrPtr(App.Path & "/res/button.png"), pImage)
.Image = pImage
.Status = C_Status_Leave
End With
第三部,我们为它弄点"事件"并把它显示出来.
"事件"不可能凭空出现,这事得靠依附的那个容器了.
Private Sub Form_MouseMove(Button As Integer, Shift As Integer, X As Single, Y As Single) '容器的MouseMove事件
With ZButton1
If X > .X And X < .X + .Width And Y > .Y And Y < .Y + .Height Then '看看是不是轮到我出场了.MouseEnter和MouseLeave都是靠这句了.
If .Status And C_Status_Leave Then '为了防止一直重画,设置个状态标志.
Me.Cls '因为我们要做的控件是透明的,所以先要把容器背景重画一次.
Call GdipDrawImageRectRect(pGraphics, .Image, .X, .Y, .Width, .Height, 92, 0, 92, 40, UnitPixel) '根据一个状态画出对应的图.
.Status = C_Status_Hover '标记一下
End If
Else
If .Status = C_Status_Hover Then
Me.Cls
Call GdipDrawImageRectRect(pGraphics, .Image, .X, .Y, .Width, .Height, 0, 0, 92, 40, UnitPixel)
.Status = C_Status_Leave
End If
End If
End With
End Sub
Private Sub Form_Click() '处理容器的单击事件.
If ZButton1.Status = C_Status_Hover Then '如果鼠标还在虚拟控件的范围内,就吱一声.
MsgBox "ZButton_Click"
End If
End Sub
写完这些,运行来张效果图看看.

嘿,可爱的"控件"出现了.
不过这样的代码明显是各种BUG,糟糕透顶了.
一两个"控件"还好,多了就是一团糟.
下期我们开始把这些封装起来.让它更像"控件"一点.
本期代码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_4071038647


ZsUI - 思考已出现的问题
上一期的代码里,把所有的UI对象都放进一个数组,通过轮询数组来找出触发事件的对象,数组的中对象的顺序既是对象的Z序.
重绘的时候从数组第一个对象开始,也就是最底层.触发事件的时候从数组最后一个对象开始,也就是最顶层.
VB中数组很方便,可是用数组保存对象,这对于增删改对象的时候却非常的低效.个人觉得链表才是更好的选择.虽然链表在VB中实现也很麻烦.
关于重绘,上一期的代码重绘时有很严重的闪烁.而且系统的内存占用很大.
可以更改重绘方式为双缓冲定时重绘,即每50MS重绘一次.VB中多线程不稳定,用Timer代替.
(因UI对象都有透明度,这里重绘时选择全部重绘,而没有做裁剪优化.有心的可以自己去写一个)
在想象中,写一个Zs_UI_Base这样的基类,然后继承和重载是最好的选择,可以省去很多精力和劳力,可惜VB在类的继承上太脆弱了.
导致每写一个UI对象就要重新写一遍那些X,Y,Width,Height...之类的属性和方法.代码的臃肿可想而知.
这个暂时无解.或又谁知道取巧的可以指点下我.~.~.


年年有今日,岁岁有今朝.

谢谢大家支持.六一快乐.

很早前用PowerBasic写了一个框架,现在再看看发现以前写的实在有够烂,准备推翻重写了.
贴图部分最好是用自己写的函数,抛弃GDI+,那玩意儿实在是慢.
GDI+在这教程里用只是为了方便和简洁.效率什么的暂时不做考虑.

ZsUI - 抛弃原生事件改用子类化
VB自身高度封装的事件驱动给了我们很多便利,可是也制约了我们的自由.
随着我们需求的旺盛,容器妹纸自身已经满足不了我们了.
像MouseLeave,MouseWheel,Activate...等等,都是她无法给我们的爱.
是时候找个野蛮女友了.我那又爱又恨的...SubClass!!
开始调教第一步.
SetProp(ContainerObject.hWnd, C_Prop_UI_Container, ObjPtr(Me))
先把对象指针放到容器的属性表中,这样子类函数里就可以找到并且调用了.
SetWindowLong(ContainerObject.hWnd, GWL_WNDPROC, AddressOf Zs_UI_ObjectWndProc)
子类化容器对象,处理交给Zs_Proc模块的Zs_UI_ObjectWndProc函数.
SetTimer(ContainerObject.hWnd, Zs_Const_RefreshTimerId, RefreshCycle, AddressOf Zs_UI_ObjectTimerProc)
创建一个定时器替代原本的定时器控件,回调函数Zs_Proc模块的Zs_UI_ObjectTimerProc.
第二步就是在回调函数中把消息映射到对象的事件了.
Dim objX As Object
Call CopyMemory(objX, GetProp(hwnd, C_Prop_UI_Container), 4)
这样就获得了容器对象.
Dim dwSZ As Dword 'Dword是一个Type,用来取出lParam的高低位.
Case WM_SIZE
Call CopyMemory(dwSZ, lParam, 4)
Zs_UI_ObjectWndProc = objX.EventResize(dwSZ.Hi, dwSZ.Lo) '按消息执行对象的方法
Call CopyMemory(lParam, dwSZ, 4)
对象中有如下的方法.
Public Function EventResize(w As Integer, h As Integer) As Long
RaiseEvent Resize(w, h) '映射到对象的事件Resize
End Function
回调函数末尾需要用Call CopyMemory(objX, 0&, 4)来还原对象指针,
这样,一个映射机制基本实现,扩展的时候代码也不用做太大改动,需要什么事件只需添加相应的消息,再映射到对象上就可以了.
再把那些依赖容器属性的对象属性改为用API实现,从容器对象的捆绑中解脱出来.
一切搞定之后.
现在,我们的容器已经不局限于窗体.可以是PictureBox,可以是Frame...只要是有hWnd的对象都可以.

本期源码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_3144764738


ZsUI - 一个新的UI对象
当框架写到一定程度时,可以开始写UI对象了,根据UI对象的需要来完善框架.
现在开始写一个新的可视UI对象.Label.
根据自定的规范,它必须具有基本的Visible,Enabled,Left,Top,Width,Height属性和RefreshNow方法.
其它可自行选择扩充.
为了美观,文本绘制使用了路径.
文本路径用Zs_GdiPlus_CreateStringPath这个自定义封装函数创建.
引入一个"样式"概念.
Public Enum C_Enum_Style
CE_Style_Normal = &H0 '无边框无背景
CE_Style_Border = &H1 '具有边框
CE_Style_Back = &H2 '具有背景
CE_Style_BorderAndBack = CE_Style_Border Or CE_Style_Back '具有边框和背景
End Enum

本期源码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_3919581249


ZsUI - UI对象上的UI对象
当你创建一个新的UI对象时,也许要用到其它已存在的对象.
如TextBox里的ScrollBar,ComboBox里的ListBox...等等.
这时,我们需要的是直接利用这些现有的,而不是费力不讨好的重新创造.
于是,我们开始改写Zs_UI_Container类里RefreshNow函数.
先遍历第一层子对象,调用子对象的RefreshNow接口.
再用Zs_TsCtlRefreshMsg函数递归遍历所有子对象的子对象.
(Zs_TsCtlMouseMoveMsg函数与Zs_TsCtlRefreshMsg原理相同.)
另外.
容器UI对象要实现Container&Controls&Canvas接口,isRefresh属性.
这里,我用现有的Zs_UI_ImageButton和Zs_UI_Label写了一个TitleBar.

本期源码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_1208117474


ZsUI - 动画效果
不知道你们看到那些美轮美奂的UI动画效果时,是否也曾像我一样惊叹不已.
按钮的渐变式过度,图标的大小变换,弹出式窗体的爆炸效果...
这些华丽元素在DirectUI中占据了很重要的位置.
有了一个框架,现在让我们来天马行空.
思路:
一个动画是由N个关键帧构成.容器按固定频率刷新,所以每刷新一次为一帧.
先在刷新管理器中做一个接口OnFrame,参数RefreshCycle(每次刷新的间隔毫秒数).
每次刷新时通知所有UI元素.
需要通知的UI元素实现OnFrame这个接口.
Public Function OnFrame(ByVal RefreshCycle As Long)
在这里一般不重绘,只调节一些效果的参数.如Alpha,Size...
End Function
如果再接下来的重绘中根据参数进行绘制.

本期源码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_304251574


ZsUI - Option对象2012-06-08 10:57
Option对象最重要的特性就是同组之间多个对象之间的"互斥".
一开始我犹豫是不是要把这一特**给Zs_UI_Container来实现.
不过越想越觉得复杂,所以在Zs_UI_Option内部自己写了个接口来处理.
以下是"队长"和"队员"的关系.
Public Property Let TsMutexObject(ByVal objX As Object)
Set m_TsMutexObject = objX '每个Option对象里都保存着一个"队长",它负责处理互斥.
End Property
Public Sub TsMutex(ByVal objX As Object) '处理互斥的接口,担任"队长"时使用.
m_NowObject.Value = False
Set m_NowObject = objX
End Sub
Public Sub Link(ParamArray objX() As Variant) '""队长"专用,用来链接一组Option对象.
Dim i As Long
Set m_NowObject = Me
Me.Value = True '"队长"的Value默认为True.
Me.TsMutexObject = Me '"队长"是自己.
For i = 0 To UBound(objX) '遍历这个"队伍".
If TypeName(objX(i)) = TypeName(Me) Then '如果是跟自己一个类型的对象.
objX(i).TsMutexObject = Me '告诉它,我是"队长".
objX(i).Value = False '"队员"的Value默认是False.
End If
Next i
End Sub

本期源码下载地址(修复了前期多个Bug):http://pan.baidu.com/netdisk/singlepublic?fid=295000_3631883641


搁置了很久,今天继续更新两期.

ZsUI - 布局与换肤模块
在DirectUI中,布局与换肤模块是必不可少的.
像那些商业UI中一样,我们使用XML来配置界面和皮肤.
VB中使用XML一般需要引用MSXML2.DOMDocument来读写.
可是这东西太笨重了点,还要考虑可能的版本兼容问题.所以,我们写一个简单的XML读取类Zs_File_Xml.
Zs_File_Xml.Load (xmlFile)
用Zs_File_Xml读取到了布局数据,接下来再写一个Zs_UI_Layout类用来把布局数据转换成显示的界面.
Zs_UI_Layout.SetLayout (Zs_UI_Object)
关于XML配置文件的格式:
<zs_ui> -根
<Resources> -资源节点,Zs_UI_Layout类会把所有资源建成一个资源表.
<image name="Form1.StyleImage" src="\Res\Basic_Ruby\back.png"/> -一个名叫Form1.StyleImage的image类型的资源.
<pen name="ZLabel.BorderPen" color="HAA555555" size="1"/> '一个名叫ZLabel.BorderPen的pen类型的资源
</Resources>
<Default> -默认配置节点
<Zs_UI_Label ForePen="@ZLabel.ForePen" BorderPen="@ZLabel.BorderPen" BackBrush="@ZLabel.BackBrush" FillBrush="@ZLabel.FillBrush" fontname="微软雅黑" fontsize="14"/>
-上面的配置内容是所有Zs_UI_Label的默认配置."@ZLabel.ForePen"中的"@"意思为资源表中名字为"ZLabel.ForePen"的资源.
</Default>
<Zs_UI_Container name="Form1" StyleImage="@Form1.StyleImage"> -以容器为单位的节点,容器中所有的UI元素都可以再节点内配置.
<Zs_UI_TitleBar name="ZTitleBar2" StyleImage="@ZTitleBar.StyleImage" OffsetW="8" OffsetH="6"> -一个Zs_UI_TitleBar,一些属性.
<Zs_UI_Label name="ZLabelSysCaption" BorderPen="@ZLabel.BorderPen" BackBrush="@ZLabel.BackBrush" FillBrush="@ZLabel.FillBrush"/> -Zs_UI_TitleBar的显示标签,如果未配置属性,则所有属性为<Default>中<Zs_UI_Label>的默认属性.
<Zs_UI_ImageButtonEx name="ZImageButtonSysMin" StyleImage="@ZTitleBar.StyleImage.Button.Min"/> -Zs_UI_TitleBar的Min按钮.
<Zs_UI_ImageButtonEx name="ZImageButtonSysMax" StyleImage="@ZTitleBar.StyleImage.Button.Max"/> -...
<Zs_UI_ImageButtonEx name="ZImageButtonSysClose" StyleImage="@ZTitleBar.StyleImage.Button.Close"/> -...
</Zs_UI_TitleBar>
</Zs_UI_Container>
<Zs_UI_Window name="Form2" StyleImage="@Form2.StyleImage"> -以窗体为单位的节点,容器中所有的UI元素都可以再节点内配置.
......................同<Zs_UI_Container>
</Zs_UI_Window>
</zs_ui>


本期源码下载地址:http://pan.baidu.com/netdisk/singlepublic?fid=295000_1685805782