DirectUI

DirectUI

飞熊在天 | 知之者不如好之者，好之者不如乐之者 | 第 3 页

 

DirectUI

发表于 2012 年 3 月 21 日 由 raphaelzhang

回复

 

 

传统的Windows界面开发需要在一个主窗口(Window)上放置各种控件(Control)，这些控件也是一个个小窗口，可以响应相应的消息。一般情况下，如果你想做出Windows标准风格的界面，用这种方法就可以。但是问题就在于，人们喜欢做出越来越炫的界面，越来越与众不同，越来越新颖的界面，例如Office几乎每两个版本的界面风格就会有一次大变化。

要做出很炫的界面，传统的方法就是利用窗口的自绘(Owner Draw)特性。当你将一个窗口声明为Owner Draw的时候，你就可以让Windows系统在重绘这个窗口的时候调用你自己的窗口绘制代码，而不是缺省的绘制代码。具体做法就是写一个绘制函数，在对应的WM_PAINT消息的事件响应函数中调用它，然后每当这个窗口上有任何消息(如鼠标移进，鼠标移出，按下鼠标，释放鼠标，移动鼠标，输入文字等)可能影响到窗口样子的时候，就用Invalidate函数通知窗口重绘，以调用你自己的重回函数。

从上面的描述中就可以看出来，这个过程非常繁琐。尤其很多控件/窗口都有多个状态，例如按钮就至少有普通，鼠标移进，按下，获得焦点等四种状态，复杂一点的控件，如树状视图和列表控件，自己绘制就更加麻烦了。

光这些还不够，别忘了，Windows都是支持多主题的。一般来说，自绘界面在缺省主题下可能表现得很炫，但是换了另一种主题就完全和环境格格不入了，看起来异常刺眼。

针对以上问题，人们想出了DirectUI这种方法。它的基本思路是用一个文件(现在通常是XML文件)专门描述整个窗口的界面布局，然后通过画图函数来绘制整个窗口，主窗口里面再没有任何子窗口，所有的控件，例如按钮，编辑框等等，都是自己通过贴图和GDI画图函数画出来。

例如，下面就是某DirectUI框架库的一个界面布局XML的例子：

 

  XHTML

  

    
  

  
    大标题
    我的博客
    
    
    

    

    访问博客
    访问代码
    关于
  

  

  

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

title = "My Main Window" width = "504" height = "354" appwin = "1" >    class = "FrameTopBg" width = "full" height = "29" >      id = "101" class = "handCursor" skin = "BtnSysClose" pos = "-25,5" />       class = "FrameBodyBg" width = "full" height = "full" >      id = "106" pos = "160,30" class = "msgText" > 大标题      id = "116" class = "linkBlueText" pos = "405,30" href = "http://blog.raphaelzhang.com/" > 我的博客      id = "103" class = "handCursor" skin = "Btn1" pos = "35,79" />      id = "104" class = "handCursor" skin = "Btn2" pos = "184,79" />      id = "105" class = "handCursor" skin = "Btn3" pos = "333,79" />      id = "138" ctrlid = "138" pos = "30,120,470,290" />      id = "107" class = "linkGrayText" pos = "43,302" href = "http://blog.raphaelzhang.com/" > 访问博客      id = "108" class = "linkGrayText" pos = "167,302" href = "http://bitbucket.org/raphaelzhang" > 访问代码      id = "109" class = "linkGrayText" pos = "278,302" href = "http://blog.raphaelzhang.com/about-me" > 关于       class = "FrameFootBg" width = "full" height = "0" >

可以看到布局文件将界面描述的很清楚，包括设定了很多控件，例如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一定会发展得更快，使用的人也会大大增加的。

posted on 2012-04-27 08:03  lexus 阅读( ...) 评论( ...) 编辑 收藏

转载于:https://www.cnblogs.com/lexus/archive/2012/04/27/2472939.html