开源DirectUI类库介绍及类图分析

开源DirectUI类库介绍及类图分析2011-8-25丹麦作者bjarke（比亚克）的开源DirectUI类库UIlib类图源码及相关资料参见http://www.viksoe.dk/code/index.htm类图分析绘制：borlittle请放大后查看另附上bjarke的一篇关于DirectUI的经典文章《无窗口的UI》UI:Becomewindowlesshttp://www.viksoe.dk/code/windowless1.htm原作者：bjarke（比亚克）国籍：丹麦翻译：borlittleArequestontheYahooWTLnewsgroupandablog-articlesparkedsomeinteresttolookcloseratcreatingawindowlessuser-interface.Traditionally,WindowsapplicationsarebuiltupontheGDI/Userwindowinghierarchy,andthusrestrictedinseveralareas.Whileyoucancertainlygenerateaniceapplicationquicklywiththebuilt-incontrol-setandgetastandardcleanlook,youwillsoonenoughstumbleuponthelimitationsoftheWindowscontrols-especiallyifyouwanttobuildsomethingthatlooksalittlemoreflashy.ThenativeWin32custom-draw/owner-drawtechniqueislimited,nexttonosupportfortransparentwindows,rigidcontrolscaling/resizingandtheCommonControlsaremerelyremnantsofWindowsExplorer,OfficeorInternetExplorerwidgets.YahooWTL新闻小组上的一个要求和一个博客闪现出了一些对于创建一个无窗口用户接口的兴趣。传统意义上，窗口应用时构建在GDI/User窗口体系之上的，因此在一些地方受到限制。当你能够使用内建的控件集快速的生成一个好看的应用以及得到一个标准干净的外观时你就会深刻感受到Windows控件的局限带来的困难，尤其是你想要构建一些看起来有些华丽的界面。之前的Win32custom-draw/owner-draw技术有许多限制，如几乎不支持透明窗口，生硬的控件缩放和调整，这些通用控件如今基本上只保留作WindowsExplorer,OfficeorInternetExplorer上的小部件了。Awindowlessuser-interfacedoesn'tmakeuseofthenativeWin32controls.Insteaditcustompaintseverycontrolandwidgetonthescreen-includinglabels,buttons,listcontrol,etc.etc.Variationsofthiskindofinterfaceisnotnew:"Skinning"hasbeenwidelyacceptedforitscoolapplication-look,asseeninNullsoft'sWinAmpandtheMSMediaPlayer.Butskinningisusuallyonlyfeasibleforsmallapplicationshostingalimitednumberofdialogs.Ifyou'rebuildingalargedatabase-drivenapplication,you'llwanttohaveasolidframeworktobackyourdialogdesignup.一个无窗口的用户接口UI不会使用传统的Win32控件。而是在屏幕上自绘所有的控件和部件，包括标签、按钮、列表控件等等。大量的这种接口并不新奇：皮肤技术作为绚丽的应用外观已经被广泛的接受，如Nullsoft'sWinAmp和MSMediaPlayer。但是皮肤通常只是在小型的只包含有限数量的对话框应用中。如果你要构建一个大型的数据库驱动应用，你会需要一个固定一致的框架来支撑你的对话框设计。SoIwaslookingattheMicrosoftCRMapplication.Inmyopinion,thisisoneofthemostsuccessfulDHTMLinterfacesI'veseen(IshouldknowbecauseI'vepreviouslybeenassignedonalargebrowser-basedCRMproduct).TheMSCRMinterfacelooksveryWindowsXP-like,butitalsohasseveralcoolfeatures,suchasanavigationbar,ahighlyflexiblelistcontrolandseveralshaded/gradienttoolpanels.Ithoughtthiswouldbeanicelooktobuildformywindowlessframework.I'vepreviouslytestedaDHTMLinterfacewiththislook,butwasn'tsatisfied-mostlybecauseintegratingwiththebrowser(IE)waspainfullycomplicated.所以我一直在关注MicrosoftCRM（微软的客户关系管理）应用。我认为这是我看的最为成功的DHTML接口之一（我应该知道的，因为我之前已经分配到一个大型的基于浏览器的CRM产品。MSCRM界面看起来非常有WindowsXP风格，但是它也有一些很酷的特征，比如一个导航条、一个高度浮动的列表控件以及一些阴影/灰度工具面板。我想这应该会是我的无窗口框架很好的外表。我之前已经测试了一个这种界面的DHTML接口，但是并不满意，主要是因为和浏览器IE结合是一件非常痛苦的事。Evenifconstructingawindowlessuser-interfaceisalotofhardwork,itpaysoffintheend.Butyoudoneedtoimplementyourowndialogbuilder,button-design,keyboardinterfaceandlotsoflittlethingsyoutakeforgranted.Actuallyit'snotthepaintingofbuttonsandtoolbarsthattakethemostplanningandeffort;it'ssupportingkeyboardshortcuts,tab-navigation,automatictooltipsandascalabledesign.Andthentherearethemandatory-butoftenoverlooked-features,suchaslistcolumn-sorting,intuitivefocuschangesandoverflowscrollingthatneedtobeaddressed.尽管构建一个无窗口的用户接口UI是一件非常难的工作，最终是值得这样做的。但是你的确需要实现你自己的对话框构建器，按钮设计，键盘接口和许多你认为需要的东西。实际上绘制按钮和工具条并不是最费考量和努力的而是支持快捷键、tab导航、自动提示和可扩展的设计。然后是托管—但经常被忽略的特征，如列表列排序、直觉焦点切换和卷动溢出需要重点考虑的。Thedesign设计MyDirectUIuser-interfacetakesbitsandpiecesfromotherUImodels.我的DirectUI用户接口或多或少借用了其他UI模型。Specificallyitborrowsideasofthe"controls-inside-controls"designfromtheJavaAWTframework,XMLdialog-resourcesfrom.NET,event-bubblingfromDHTMLandC++helperclassesfromMFC.Thecodedoesn'tactuallyusetheWTLlibrarylikemostofmyotheruserinterfacesamplesonthiswebsite.It'spureWin32calls.尤其是它借用了JAVAAWT框架“控件中的控件”设计思想，.NET的XML对话框资源，DHTML的事件起泡和MFC的C++帮助类。这些代码实际上并没有像其他UI例子一样使用了WTL库。它是纯粹的Win32调用。OneoftherequirementsfortheframeworkwasthatitcouldbeplacedinanexternalDLL.Thishadanastyimpactonthedesign,becauseC++templatesarenotbyanysanemethodexportableinaDLL.So,acleanC++old-skool(MFC)designisenforced,withsingleinheritanceandfew(ifnotnone)macros.对控件的一个要求是它必须放置在一个扩展的DLL中。这对设计有负面的影响，因为C++模板在任何健全DLL中不能被导出。因此一个干净的C++守旧设计(MFC)通过简单的继承和一些宏定义是被迫的。Awindowisbuiltbynestingcontrolsinsideeachother.Somecontrolsarecontainers(suchastheToolBar,whichcontainsToolButtons).ToinsertaToolBarbutton,yousimplyconstructaCToolButtonC++classandaddittotheCToolPanelcontrolcontainer.Mostcontainersdefinelayoutalgorithmssuchastheverticallayout-panel,whicharrangesthecontainedelementsbeloweachother-afeatureknownfromJavaAWT.一个窗口必须由互相嵌套的控件构成。另一些控件是容器，如工具条包含了工具按钮。为了插入工具条按钮，你只需简单的构建一个CToolButtonC++类然后将其添加到CToolPanel控件容器，它会安排包含的元素在底层-这个特征来源于JavaAWT。UsingaJava-likedesign,suchasthelayoutcontainers,makesurethatyourcontrolswillrescaleautomaticallywhenthewindowisresized.ButanyonewhohasdoneanyJavadevelopmentknowshowlimitingitscontrollayoutfeaturesareandhaswishedtokicktheauthorsoftheGridBagLayoutclassinthenuts.Sothere'salsoroomforadialoglayout-panel,whichallowsyoutoputcontrolsatafixedposition,butwiththeoptionofscalingbasedonvariousstretchingrules.使用一个像JAVA的设计，诸如层容器，一定要保证当窗口大小改变时你的控件是能够自动的调节的。但是任何一个做过一些JAVA开发的都知道它的层控件特征有多么局限而且很想踢nuts中GridBagLayout类的作者。因而对于一个对话框层面板有空间允许你把控件放在一个固定的位置，但是使用尺度变换基于变化的拉伸规则。Constructinganentirewindowbyhandistedious,sothere'sasmallXMLparserincluded(extremelyfast,extremelynon-compliant)whichparsesandbuildsawindowfromanXMLstring.手动的构建一个完整的窗口是非常枯燥的，因而需要包含一个小的XML解析器（相当的快）用于从一个XML字符串中解析和构建一个窗口。TheframeworkcachesallofitsWin32brushesandpens.MostoftheGDIresourcessavedonwindowhandlesareprobablyspentonthis.Butthesekindsofobjectsarelight-weight;it'sthepaintjobthatgetsanincredibleoverhaul.框架隐藏了所有的Win32刷子和画笔。大多数的节省的窗口句柄的GDI资源可以用到这上面。但是这些对象是轻量级的，但是绘画的工作需要严格的检查。NativeWin32controlsareusedonlyfortheEDITcontrol.Thiscontrolcontainssomuchfunctionalitythatitwouldtakeagestodoadecentreplacement.Single-lineeditcontrolsarecreatedonthefly(whenyouclickontheframe)andmulti-lineeditsarealwaysvisible.SotheframeworkdoeshavetheabilitytoembednativeWin32controlsandevenActiveXcontrols,butattheexpenseofscreenflickeringandsevererestrictionsinthevisualeffectsI'mplanning.传统的Win32控件只用于EDIT编辑控件。这个控件包含了许多的可能需要很多时间才能完成像样替换的功能特性。单行编辑控件在fly（当你点击框架时）时创建而多行编辑框总是可见的。所以框架也有能力去嵌入传统的Win32控件甚至ActiveX控件，但是我主要考虑的是屏幕的闪烁和视觉上的严格约束。Alluringtext吸引人眼球的文字Therealbenefitsofthistypeofinterfacearethesimplethings.Forinstance,youcanwithonesingleswoopreplacealloccurencesofWin32DrawText()withDrawPrettyHtmlFormattedText()-whichinstantlygivesyouicons,customizabletext-colorsandclickablehyperlinksintheentireuser-interface.Withonesinglelineofcode,youcannowaddHTMLlinksinthestatusbarpanel.这种接口的实际好处是很简单的事。比如你可以用一个简单的DrawPrettyHtmlFormattedText()替换所有出现的Win32DrawText()函数，这快速的使你的图标、用户定制的文字颜色和可点击的超链接为完整的UI。使用一行代码，你现在可以添加HTML链接到状态条面板。Similar,youarenotrestrictedtoonlyputCToolButtoncontrolsinsidetheToolBar.Anykindofcontrolcanbeadded.Thisalsogoesforthelistcontrol,whichquicklycanbemadecoolbyaddingsomegroup-labels,orjustbyaddingbuttonsorHTMLlinks.Sincetheindividualcontrolsrarelyerasethebackground,mostofthemwillactuallyfittransparentlyinsidetheothercontainercontrols,soonceyou'vemadeaneatwidgetitcanbereusedintheentireuserinterface.类似的，你不用局限于只把CToolButton控件放到ToolBar中。任何类型的控件都可以添加。这也适用于列表控件，这使得可以快速的添加一些群标签或者只是添加一些按钮或者HTML链接而变得酷起来。由于独立的控件很少擦除背景，它们大多数会实际上适合在别的容器控件中变得透明。所以一旦你已经生成了一个灵巧的部件它就可以被UI完全的重用。3DAnimations3D动画Anothercooleffectthatcanbeeasilyaddedistheabilitytodo3Drenderingdirectlyonthecanvas.JustthrowinsomeDirectXcallsandyou'llbeabletowritecoolpagetransitions,highlightacontrolwithsomecoolsparklingparticle-effectorjustputsomegloweffectontheedit-boxwithfocus.YoucanalsoreadabouthowIintegratedDirectXintotheapplication.另外一个很酷的效果是可以轻易的添加这个性能来直接在画布上实现3D渲染。只需要扔一些DirectX调用你就可以写出很酷的页面渐变、用一些很酷的发光粒子效果高亮一个控件或者当一个编辑框获得焦点时添加一些发光效果。你可以阅读一些我如何集成DirectX到应用中。Thesample例子Thismayallsoundverynice.However,thesamplepresentedhereisjusttheinitialstageofawindowlessframeworkI'lluseforfurthertesting.ThelibrarywillneedtomatureabitandgothroughafewrewritecyclesbeforeI'llattempttoactuallyincorporateitinarealapplication.Still,it'sprettyfunctionalalready.Enjoy.这可能听起来非常不错。但是，这里提供的示例只是我以后要用于更多测试无窗口框架的初步阶段。库将会更成熟一些而且在我尝试实际结合到实际的应用之前会经过一些重写周期。尽管如此，它也工作得非常好了。尽情享受吧。WangchyzhasaprojectonGoogleCodewhere'she'stryingtoextendthelibrary,addingfixesandnewsamples.Wangchyz已经在GoogleCode上有一个项目，他正在尝试扩展这个库，添加和修正一些新的例子。ThesampleshouldberunwithDirectX9installedandamodern3Dgraphicscard.Otherwiseyouwillnotbeabletoviewthepretty3Danimations.例子应该在装了DirectX9和一个新一些的3D图形卡的系统上。否则你可能看不到漂亮的3D动画。SourceCodeDependencies源代码支持MicrosoftVisualC++6.0MicrosoftDirectX9SDKUsefulLinks有用的链接Anextendedversion:DuilibDownloadFiles下载文件Demonstration(92Kb)SourceCode(127Kb)关于DirectUI的更多文章和资料，可以参考http://www.taxue.org/http://my.oschina.net/achellies/blog/17654http://www.cppblog.com/sleepwom/archive/2010/08/07/122554.htmlhttp://blog.csdn.net/jiangsheng/article/details/5404320http://blog.csdn.net/wangchyz/article/details/5818669国内开源Duilib项目类库类图源码及相关资料参见http://code.google.com/p/duilib/类图分析绘制：borlittle请放大后查看DuilibV1.1如图所示：DuilibV1-1类图与UIlib的改变如图所示：上图中红色部分即为已经更改了的类和结构，可参照UIlib类图和Duilib类图。 丹麦作者bjarke（比亚克）的开源DirectUI类库UIlib类图 UI:Becomewindowless 国内开源Duilib项目类库类图 DuilibV1.1 DuilibV1-1类图与UIlib的改变