說起GacUI（www.gaclib.net，gac.codeplex.com），其實(shí)這個(gè)想法在我還在上大三的時(shí)候就已經(jīng)有了。但是由于經(jīng)驗(yàn)不足，在當(dāng)時(shí)并沒能夠把這個(gè)東西給做出來，直到去年（2011）的國慶節(jié)為止。想想到現(xiàn)在也做了快一年了，GacUI也可以用來寫一些不是特別殘暴的C++GUI程序了。前幾天有人問道，為什么在PC都快完蛋了并且大部分GUI都已經(jīng)用C#來做的時(shí)候，我還要做這個(gè)東西呢？其實(shí)，這有兩個(gè)原因：第一個(gè)我喜歡折騰C++；第二個(gè)C++好像也沒什么特別好的GUI，因此也想嘗試一下，如果做成了就維護(hù)下去，做不成了好歹還可以提高自己的水平，總之是不會(huì)浪費(fèi)時(shí)間的。所以我就在想，GacUI寫到現(xiàn)在也快一年了，并且我最近也看到cppblog上面有幾個(gè)人也想搞搞GUI，因此我想把GacUI的一些設(shè)計(jì)思想，和我得到這些思想的過程寫出來，順便也介紹一下GacUI的架構(gòu)，讓一些有興趣的人（特別是裝配腦袋）也可以來折騰折騰。

GacUI的架構(gòu)的最重要一點(diǎn)就是要跨平臺(tái)。當(dāng)然這不一定意味著我將來一定會(huì)把GacUI移植到別的什么操作系統(tǒng)去，但至少Windows的Classic Desktop和Metro的兩套API就毫無相似之處，同時(shí)搞定他們，也算是跨平臺(tái)了。而且就算是基于同一種API，上面還有不同的渲染器的API，譬如說GDI，譬如說Direct2D，他們也是截然不同。GacUI的設(shè)計(jì)至少要可以屏蔽掉他們的區(qū)別。當(dāng)然，這在技術(shù)上有一個(gè)很好的方法來保證，就是GacUIIncludes.h里面不包含Windows.h的任何內(nèi)容——因此至少在頭文件里面，所有的東西都是跟Windows無關(guān)的。當(dāng)然在非GUI的部分，我們還是需要Windows.h的，并且有些人喜歡對(duì)GacUI做點(diǎn)hack的操作，因此我還是在GacUI.h里面提供了幾個(gè)額外的依賴于Windows.h的函數(shù)來暴露一些內(nèi)部細(xì)節(jié)。那這樣如何跨Classic Desktop和Metro呢？有一個(gè)簡單的方法，就是可以在編譯的時(shí)候給些宏開關(guān)，譬如說GACUI_WINDOWS_CLASSIC_DESKTOP（缺省）或者GACUI_WINDOWS_METRO之類的東西，來屏蔽掉不需要的部分。當(dāng)然這部分在移植到Metro之前我不會(huì)加進(jìn)去。

基于這個(gè)想法，如果大家閱讀了GacUI的代碼的話，會(huì)發(fā)現(xiàn)在文件\Libraries\GacUI\Source\NativeWindow\GuiNativeWindow.h里面定義了一個(gè)INativeController接口，而且目前只有Windows Classic Desktop一個(gè)實(shí)現(xiàn)。INativeController的內(nèi)容很多，提供了跟具體的平臺(tái)有關(guān)的操作，譬如說讀寫圖片文件啦、創(chuàng)建消滅窗口啦、顯示器操作啦、還有各種其他的輸入輸出等等。實(shí)現(xiàn)一個(gè)從頭INativeController還是比較繁瑣的，因?yàn)?/span>GUI這種對(duì)操作系統(tǒng)重度依賴的東西，想剝離開來，就會(huì)發(fā)現(xiàn)他依賴了一大坨API。這也解釋了為什么INativeController的各個(gè)XXXService函數(shù)返回的對(duì)象的方法的總和有上百個(gè)。不過從Classic Desktop移植到Metro還是相對(duì)比較簡單的，因?yàn)榇蟛糠謨?nèi)容還是可以共享的。

其次就是渲染器了。渲染器跟平臺(tái)是交叉依賴的。譬如說OpenGL在linux上和Classic Desktop上都可以用，Direct2D在Classic Desktop上和Metro上都可以用，GDI只能在Classic Desktop上面用。因此這就是為什么我最終沒有把渲染器也寫在INativeController里面，而是把渲染器整個(gè)給屏蔽掉了，根本沒有在GacUIIncludes.h里面給出他的接口。但是考慮到GacUI是一個(gè)支持換膚的GUI庫，因此肯定需要讓皮膚來自己決定如何繪圖。后來我就想了一個(gè)辦法，把渲染器的結(jié)構(gòu)整個(gè)拿掉，替換成各種各樣的圖元（IGuiGraphicsElement）。所謂的圖元就是類似于方形啊，圓形啊，填充啊，漸變啊，文字之類的東西。皮膚自己把圖元按照一定的排版關(guān)系（在下文中有描述）拼裝好，然后GacUI內(nèi)部的一個(gè)小系統(tǒng)會(huì)利用Bridge和Abstract Factory兩個(gè)模式的結(jié)合體（參考\Libraries\GacUI\Source\GraphicsElement\GuiGraphicsElement.h）來為這些圖元分配好渲染器對(duì)象（IGuiGraphicsRenderer）。然后圖元和渲染器之間用了Listener模式在交換信息。這樣的好處是，當(dāng)圖元受到改動(dòng)的時(shí)候，這個(gè)圖元對(duì)象的專用渲染器對(duì)象可以選擇cache一些信息，然后在窗口渲染的時(shí)候，只需要訪問所有的渲染器對(duì)象（在排版對(duì)象GuiGraphicsComposition的組合項(xiàng)形成了一棵樹），讓他們渲染自己就可以了。

圖元包含了所有需要渲染的數(shù)據(jù)，但是唯獨(dú)沒有把尺寸寫進(jìn)去，因?yàn)槌叽邕@種東西不應(yīng)該讓渲染器來負(fù)責(zé)，而應(yīng)該讓排版對(duì)象來負(fù)責(zé)。排版對(duì)象自己是一棵樹，然后節(jié)點(diǎn)根節(jié)點(diǎn)之間有一些關(guān)系，這樣就可以實(shí)現(xiàn)堆棧排版、表格排版、對(duì)齊（到某一些邊上的）排版等等具體的排版算法。一個(gè)排版對(duì)象可以放置一個(gè)圖元對(duì)象并讓這個(gè)圖元充滿他，所以顯而易見，有一些排版對(duì)象僅僅是用來計(jì)算尺寸的中間結(jié)果，上面不一定有圖元對(duì)象的。當(dāng)渲染開始的時(shí)候，排版對(duì)象首先跟圖元對(duì)象獲取數(shù)據(jù)，然后遞歸計(jì)算好整棵排版樹的尺寸，最后把尺寸交給附著在上面的圖元對(duì)象的專用渲染器對(duì)象來渲染。

大家可能會(huì)想，如果渲染一次都需要調(diào)用成千上萬個(gè)虛函數(shù)的話，會(huì)不會(huì)性能低下啊？當(dāng)然編譯成Release運(yùn)行會(huì)發(fā)現(xiàn)GacUI的性能還是相當(dāng)高的。原因有兩個(gè)。第一個(gè)是我對(duì)排版對(duì)象做了一些優(yōu)化。舉個(gè)例子，一個(gè)對(duì)象的尺寸至少要大于所有子對(duì)象的尺寸，這個(gè)事情計(jì)算起來是相當(dāng)快的，不需要做cache。但是一個(gè)表格排版里面的所有小格子會(huì)互相擠來擠去，這個(gè)東西計(jì)算起來相當(dāng)復(fù)雜（復(fù)雜度大越是平方，而且系數(shù)也不笑），所以結(jié)果要做cache。但是什么時(shí)候需要重新計(jì)算呢？度量方法很簡單，就是每一個(gè)格子的最小尺寸發(fā)生了變化的時(shí)候。而且事實(shí)上大部分皮膚都是用表格來排版的，所以等于說大部分結(jié)果都有cache。所以排版部分的尺寸在每一次渲染的時(shí)候只需要做一些小計(jì)算就可以了。復(fù)雜的排版每一個(gè)排版對(duì)象相互之間都是有關(guān)系的，一個(gè)排版對(duì)象發(fā)生了變化，有可能導(dǎo)致另一個(gè)排版對(duì)象的尺寸需要修改，所以最簡單的方法就是，不保存尺寸，每一次都直接重新算一次就可以了。在這個(gè)基礎(chǔ)上，表格排版做一下cache，整個(gè)計(jì)算過程就會(huì)變得飛快。所以盡管每一次拖動(dòng)窗口，或者鼠標(biāo)滑過一次窗口，都要進(jìn)行相當(dāng)多的計(jì)算，但是因?yàn)橛幸粋€(gè)智能的cache，使得不僅運(yùn)算速度變快，而且在添加新的排版對(duì)象類型的時(shí)候也根本不需要考慮自己會(huì)不會(huì)被cache的問題，開發(fā)起來也相當(dāng)愉悅。

所以上面的三大模塊（操作系統(tǒng)API隔離、渲染器、排版對(duì)象）已經(jīng)足以讓我在系統(tǒng)里面開一個(gè)窗口然后在上面放各種各樣的東西了，譬如說組合成一個(gè)非常接近Windows7的按鈕外觀的一個(gè)矢量圖。那控件要怎么辦呢？其實(shí)一個(gè)控件，就是通過接收用戶的輸入，對(duì)一個(gè)排版對(duì)象上承載的一大堆圖元進(jìn)行更改。用戶的輸入和控件（GuiControl）本身的狀態(tài)進(jìn)行互動(dòng)，然后控件把狀態(tài)的變更提交給控件的皮膚（GuiControl::IStyleController），最后皮膚通過修改圖元來把狀態(tài)變更最終展現(xiàn)給用戶。一個(gè)典型的例子就是，在使用Windows7皮膚的時(shí)候，鼠標(biāo)移動(dòng)到按鈕上面去，他會(huì)觸發(fā)一個(gè)動(dòng)畫慢慢變成藍(lán)色。

GacUI的大體架構(gòu)就是這個(gè)樣子了。在接下來的幾篇文章里面，我會(huì)詳細(xì)介紹每一個(gè)子系統(tǒng)的內(nèi)部結(jié)構(gòu)，順帶做以下代碼導(dǎo)讀，大家敬請(qǐng)期待。