DirectUI 图片（DirectUI）
DirectUI
传统的Windows界面开发需要在一个主窗口(Window)上放置各种控件(Control) ，这些控件也是一个个小窗口 ，可以响应相应的消息 。一般情况下 ，如果你想做出Windows标准风格的界面 ，用这种方法就可以 。但是问题就在于 ，人们喜欢做出越来越炫的界面 ，越来越与众不同 ，越来越新颖的界面 ，例如Office几乎每两个版本的界面风格就会有一次大变化 。
要做出很炫的界面 ，传统的方法就是利用窗口的自绘(Owner Draw)特性 。当你将一个窗口声明为Owner Draw的时候 ，你就可以让Windows系统在重绘这个窗口的时候调用你自己的窗口绘制代码 ，而不是缺省的绘制代码 。具体做法就是写一个绘制函数 ，在对应的WM_PAINT消息的事件响应函数中调用它 ，然后每当这个窗口上有任何消息(如鼠标移进 ，鼠标移出 ，按下鼠标 ，释放鼠标 ，移动鼠标 ，输入文字等)可能影响到窗口样子的时候 ，就用Invalidate函数通知窗口重绘 ，以调用你自己的重回函数 。
从上面的描述中就可以看出来 ，这个过程非常繁琐 。尤其很多控件/窗口都有多个状态 ，例如按钮就至少有普通 ，鼠标移进 ，按下 ，获得焦点等四种状态 ，复杂一点的控件 ，如树状视图和列表控件 ，自己绘制就更加麻烦了 。
光这些还不够 ，别忘了 ，Windows都是支持多主题的 。一般来说 ，自绘界面在缺省主题下可能表现得很炫 ，但是换了另一种主题就完全和环境格格不入了 ，看起来异常刺眼 。
针对以上问题 ，人们想出了DirectUI这种方法 。它的基本思路是用一个文件(现在通常是XML文件)专门描述整个窗口的界面布局 ，然后通过画图函数来绘制整个窗口 ，主窗口里面再没有任何子窗口 ，所有的控件 ，例如按钮 ，编辑框等等 ，都是自己通过贴图和GDI画图函数画出来 。
例如 ，下面就是某DirectUI框架库的一个界面布局XML的例子：
<layer title="My Main Window" appwin="1"></p> <p><header class="FrameTopBg" width="full" ><br /> <imgbtn id="101" class="handCursor" skin="BtnSysClose" pos="-25,5"/><br /> </header></p> <p><body class="FrameBodyBg" width="full" height="full"><br /> <text id="106" pos="160,30" class="msgText">大标题</text><br /> <link id="116" class="linkBlueText" pos="405,30" href="http://blog.raphaelzhang.com/">我的博客</link><br /> <imgbtn id="103" class="handCursor" skin="Btn1" pos="35,79"/><br /> <imgbtn id="104" class="handCursor" skin="Btn2" pos="184,79"/><br /> <imgbtn id="105" class="handCursor" skin="Btn3" pos="333,79"/></p> <p><realwnd id="138" ctrlid="138" pos="30,120,470,290" /></p> <p><link id="107" class="linkGrayText" pos="43,302" href="http://blog.raphaelzhang.com/">访问博客</link><br /> <link id="108" class="linkGrayText" pos="167,302" href="http://bitbucket.org/raphaelzhang">访问代码</link><br /> <link id="109" class="linkGrayText" pos="278,302" href="http://blog.raphaelzhang.com/about-me">关于</link><br /> </body></p> <p><footer class="FrameFootBg" width="full" ><br /> </footer></p> <p></layer>
可以看到布局文件将界面描述的很清楚 ，包括设定了很多控件 ，例如text ，link ，imgbtn ，等等 ，每个控件的属性 ，例如title ，width ，height ，id ，class等也都有 ，还可以设定贴图等 ，实际上非常类似于一个HTML文件 ，只不过里面没有那么丰富的控件 ，动态代码和CSS而已 。在程序里 ，代码可以通过id与每个控件通讯 ，获取或者设置它的状态 ，从而可以达到很炫的效果 。
实际上 ，现在很多软件 ，例如QQ ，例如360 ，例如迅雷等都是使用DirectUI技术绘制的界面 ，只不过每家用的框架都是自己开发的DirectUI框架罢了 。
现在国内有两家比较出名的开源DirectUI框架 ，分别是金山的BkWin(Bk是贝壳的简称 ，原来也是一个杀木马的软件) ，以及迅雷的Bolt 。上面的示例代码就是BkWin的界面布局文件格式 。
BkWin开源较早 ，文档和例子较多 ，但是我们需要将它的代码从整个金山的代码库里面分离出来才行 。主要是src/publish/目录下的bkwin ，bkres ，wtlhelper ，以及tinyxml目录 。BkWin是基于WTL开发的 ，因此还需要安装WTL才能编译 。它的程序逻辑都在VC的代码里 。
Bolt是最近刚刚放出的 ，与金山开源了整个软件不一样 ，它是一个专门的界面库 。它使用的界面布局文件也是XML文件 ，但是还需要Lua代码与界面进行沟通与交互 。实际上 ，这有点像现在的HTML代码编写 。Bolt里的XML对应HTML ，而Lua就相当于javascript 。当然 ，Lua语言本身是很弱的 ，还需要和VC的代码交互才能拥有真正的功能 ，例如迅雷的多线程下载等 。
其实 ，使用XML编写界面很早以前在火狐里就有了 。例如你打开火狐 ，在地址栏输入chrome://browser/content/browser.xul ，你就可以看到火狐自己的界面 。实际上 ，火狐自己的界面都是使用XUL + javascript构建起来的 ，XUL就是基于XML的界面语言 。在底层 ，火狐通过XPCOM(类似微软的COM技术 ，也使用IDL作为接口语言 ，但是是跨平台的 ，即所谓的Xross Platform) 。
此外 ，Glade也使用了XML作为界面描述语言 ，微软的XAML也是这方面的努力 。
要制作炫丽的界面 ，DirectUI只是一个选择 。实际上 ，我们可以使用多种技术达到这个目的 。例如：
HTA 。简单来说 ，HTA就是本地化的HTML ，直接把一个普通的HTML文件保存成HTA后缀的文件就得到了一个HTA 。但是HTA里面可以访问任何WSH Script Runtime ，以及WMI ，以及COM自动化组件 。更多的可以参考Javascript in WSH 。当然 ，HTA不适合编写复杂的程序 ，不适合编写高性能程序 ，也不适合编写源代码保密的程序 。 Flash Air 。在RIA里 ，Flash Air是异常强大的家伙 。你可以使用Air写代码 ，然后发布成可执行程序 ，iPhone App ，Android App ，网页形式 ，而且效果可以做得非常炫丽 ，功能也可以做得相当强大 。 HTML5 。这个HTML新版本已经完全超越了HTML之前的版本 ，几乎无所不能 。音频 ，视频 ，绘图 ，数据库 ，实时通讯…HTML 5 + CSS + javascript可以实现非常丰富的效果 。当然 ，缺点是 ，它仍然是Web页面 ，无法访问所有本地资源 。回过头再来说DirectUI ，现在看来 ，DirectUI最大的问题有下面几个：
因为它们大部分使用XML作为界面语言 ，而又需要精细的布局(至少要精确到像素) ，因此它们都需要一个强大的可视化编辑界面 ，方便设计师来快速搭建界面 ，并交付给开发人员 。现在的BkWin和Bolt都没有可视化界面构建工具 ，因此设计师做好了设计之后 ，还需要手工转换成XML ，每次修改一点点也需要如此操作 ，非常的麻烦 。相对来说 ，微软的XAML就有非常好的工具 需要有丰富的界面控件库 ，不然大部分界面都需要开发人员通过程序手绘 ，那是非常痛苦的 ，开发周期也会不必要的长 界面与代码之间的骨架代码一般来说仍然需要耗费不少时间来搭建 ，如果框架更完善 ，规则和工具更多 ，也可以大大减少这些痛苦如果能有效地解决上述问题 ，DirectUI一定会发展得更快 ，使用的人也会大大增加的 。
创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！