初衷

一直希望VC開(kāi)發(fā)者能夠方便的開(kāi)發(fā)出細(xì)膩高品質(zhì)的用戶界面。我喜歡C++，選擇的平臺(tái)是Windows，所以大部分時(shí)間用VC。我自身不排斥其他技術(shù)或者開(kāi)發(fā)語(yǔ)言或者開(kāi)發(fā)工具，都去了解，了解的目的是想吸取好的思想補(bǔ)充VC開(kāi)發(fā)方面的不足。從事界面開(kāi)發(fā)方面的研究有5年了，學(xué)過(guò)很多，嘗試過(guò)很多，失敗過(guò)很多，但是沒(méi)有氣餒。感謝開(kāi)源，尤其是谷歌的Chrome開(kāi)源，使我再次提高。在論壇和代碼網(wǎng)站，都能看到一些界面方面作品，有源碼的也有純欣賞的，大多數(shù)一看上去還不錯(cuò)，本地執(zhí)行就會(huì)發(fā)現(xiàn)粗糙的地方，不細(xì)膩，難以商業(yè)化使用。總體來(lái)講，國(guó)內(nèi)很難看到好的界面方面的開(kāi)源框架，優(yōu)秀公司也以此為傲，不斷引導(dǎo)界面潮流，使得其他一些公司模仿起來(lái)都累得喘氣。

 
界面開(kāi)發(fā)跟所有其他開(kāi)發(fā)一樣，都是有技術(shù)含量的，對(duì)于真正研究的人來(lái)說(shuō)應(yīng)該清楚。我在初期也遇到有人問(wèn)我：xp換膚不是挺好嘛？vista都出來(lái)了，還需要換膚嘛？win7很漂亮，完全不需要額外的界面開(kāi)發(fā)呀？我想一直界面代表了一個(gè)企業(yè)的標(biāo)識(shí)文化，比如qq的藍(lán)色以及企鵝，迅雷的動(dòng)態(tài)效果窗口和蜂鳥(niǎo)。有興趣研究沒(méi)錯(cuò)，能做好更難得。

互聯(lián)網(wǎng)客戶端的特點(diǎn)是小巧靈，界面本身比較絢麗，背后依賴的界面引擎很重要。谷歌傾盡所有的開(kāi)源姿態(tài)，是對(duì)微軟的一種挑釁，在互聯(lián)網(wǎng)方面我打敗了你，在傳統(tǒng)桌面上無(wú)法打敗，把自己優(yōu)秀的桌面代碼開(kāi)源出去聯(lián)合所有人來(lái)不斷孤立你。

Chrome開(kāi)源牽扯的其他開(kāi)源達(dá)30多個(gè)，幾百個(gè)工程，一般的開(kāi)發(fā)者想要利用其中的部分功能需要花費(fèi)一些學(xué)習(xí)時(shí)間，要有移植大項(xiàng)目的經(jīng)驗(yàn)。這里我做的就是抽取其中的view部分，做出一個(gè)基本的開(kāi)發(fā)框架，斬?cái)噙^(guò)多的牽連，盡量利用Windows平臺(tái)的sdk，希望對(duì)渴望學(xué)習(xí)開(kāi)發(fā)者的或者有能力擴(kuò)展的公司有用。

背景

界面方面的研究，經(jīng)過(guò)了三個(gè)階段：傳統(tǒng)Win32窗口、Win32窗口的子類(lèi)化自繪、無(wú)窗口界面開(kāi)發(fā)(directui)。這三個(gè)階段有交集，大致還是按照時(shí)間推移不斷提高的。

第一階段：04-05年當(dāng)時(shí)處于研究生實(shí)習(xí)時(shí)期，在導(dǎo)師公司做gis平臺(tái)開(kāi)發(fā)，對(duì)于界面要求不高，但也有一些定制性開(kāi)發(fā)，那個(gè)時(shí)期基本上就是上codeproject，學(xué)習(xí)常規(guī)窗口編程技巧，那些api能做那些事，會(huì)引起什么效果，有那些附帶作用，久而久之就知道做一個(gè)效果最直接的辦法是組合那些api。當(dāng)時(shí)自繪的工作不多，但是長(zhǎng)時(shí)間的反復(fù)調(diào)用控件會(huì)讓人厭煩，當(dāng)時(shí)看了arcgis的平臺(tái)里面開(kāi)始使用網(wǎng)頁(yè)做一些界面，限于當(dāng)時(shí)的知識(shí)，無(wú)法獲取研究的途徑。后來(lái)我知道了一個(gè)叫BCG的界面開(kāi)發(fā)庫(kù)，從它開(kāi)始進(jìn)入了自繪階段。

第二階段：06-07年一開(kāi)始是對(duì)BCG界面庫(kù)的研究，說(shuō)起這件事，覺(jué)得泄露的代碼對(duì)我國(guó)軟件開(kāi)發(fā)水平的提高有很大幫助。BCG界面庫(kù)在當(dāng)時(shí)模擬的是office2003界面風(fēng)格，模擬的很像但它的代碼自身并不是非常清晰，模塊的劃分不一目了然。他在當(dāng)時(shí)是把開(kāi)源的CJLib打垮了，不過(guò)隨后又被CJLib的商業(yè)公司Codejoke干翻，直至最后跟VC8的mfc弱弱聯(lián)合，倉(cāng)促間形成一個(gè)mfcx，就現(xiàn)在來(lái)看使用的公司很少。Codejoke的xtp也是以泄漏的方式才能有機(jī)會(huì)學(xué)到，他的界面組件劃分比較合理，代碼很清晰，尤其是其中的skinframework框架，單獨(dú)拿出來(lái)編譯一個(gè)dll即可實(shí)現(xiàn)常規(guī)窗口的換膚，皮膚格式可以和xp的兼容。也是他，讓我徹底放棄常規(guī)窗口的子類(lèi)化自繪的工作，轉(zhuǎn)而是研究他的實(shí)現(xiàn)，因?yàn)樗呀?jīng)做到極致。后來(lái)我08年的畢業(yè)設(shè)計(jì)也是以他為基礎(chǔ)，題目是軟件構(gòu)造方面的，各種形式的界面插件構(gòu)造軟件框架。在這個(gè)時(shí)候qq已經(jīng)向無(wú)窗口發(fā)展了，這時(shí)候我得到了directui的概念，開(kāi)始了無(wú)窗口界面方面的研究。

第三階段：07-現(xiàn)在。最開(kāi)始是研究http://www.viksoe.dk/code/windowless1.htm這個(gè)開(kāi)源，相信很多人都知道也研究過(guò)。他抽象了一些無(wú)窗口的界面元素，翻譯常規(guī)窗口消息解釋并重新派發(fā)給無(wú)窗口元素，引入了一些ddraw特效，當(dāng)時(shí)能接觸到這樣的代碼很興奮，界面初看起來(lái)很震撼，尤其是主界面的動(dòng)畫(huà)效果。他也有很明顯的缺點(diǎn)：不支持unicode，pretytext的計(jì)算有問(wèn)題，本地窗口跟無(wú)窗口的布局混合會(huì)遮蓋。基于他，我做出了自己的第一個(gè)界面框架，并應(yīng)用在公司商業(yè)化產(chǎn)品中，可以從這里欣賞：http://www.shnenglu.com/wlwlxj/archive/2007/08/28/31014.html。由于他對(duì)Windows的封裝和無(wú)窗口元素的抽象并不是很強(qiáng)大，所以想要真正的用它做很強(qiáng)大的界面框架有困難，后來(lái)看qq、迅雷的界面，感覺(jué)到之前的界面元素并不通用，且缺少動(dòng)態(tài)的能力，有一些想法在這個(gè)帖中提及：http://hi.baidu.com/wlwel/blog/item/ad08bfc8108ff78dc9176808.html。我后來(lái)想自己可能需要的是網(wǎng)頁(yè)那種動(dòng)態(tài)能力的界面，對(duì)圖形圖像的處理，以及界面的動(dòng)態(tài)布局拖拽，我想起手里的Win2000泄漏代碼，于是乎開(kāi)始了一件瘋狂的事情：移植其中的ie部分代碼，只要其中的界面引擎，帶上css和濾鏡，支持各種交互事件，這就是我當(dāng)時(shí)的想法。歷時(shí)8個(gè)月，出來(lái)的成果：http://www.shnenglu.com/wlwlxj/archive/2009/06/28/88695.html。這一次失敗了，沒(méi)法商業(yè)化應(yīng)用，有很多問(wèn)題，按鈕的焦點(diǎn)有1像素偏差，css由于那個(gè)ie版本比較低，非常有限且不規(guī)范，濾鏡由于一個(gè)組件創(chuàng)建不成功且無(wú)代碼沒(méi)法使用。整理的代碼有30多兆，代碼本身結(jié)構(gòu)不清晰，砍掉的地方也非常多且很亂，最終我也沒(méi)有能力去繼續(xù)修改。中間有很多次的放棄，又不服氣繼續(xù)，最終走了下來(lái)。這一次研究對(duì)我最大的幫助就是在一個(gè)巨大的軟件代碼中，如何找到自己想要的東西，如何大刀闊斧的砍代碼。里面就像大觀園，技術(shù)很全，學(xué)到的東西太多太多。后來(lái)我意識(shí)到網(wǎng)頁(yè)有網(wǎng)頁(yè)布局的特點(diǎn)，桌面軟件有桌面軟件的特點(diǎn)，需要的地方互操作即可。接下來(lái)，我又研究了幾個(gè)月comctl32部分，最后發(fā)現(xiàn)研究edit button需要走到ntuser部分，甚至想要朝顯卡驅(qū)動(dòng)調(diào)用方面走，就打住了，當(dāng)然也有一些成果：http://www.cnblogs.com/wlwel/archive/2010/05/10/1732160.html，是一個(gè)失敗的研究，但是學(xué)到了很多東西。有段時(shí)間我甚至刻意的躲避界面開(kāi)發(fā)，直到后來(lái)接觸到Chrome瀏覽器，看了他的開(kāi)源。

針對(duì)Chrome開(kāi)源所做的工作

Chrome開(kāi)源，主要是抽取其中的view部分代碼，依賴的有他的base、gfx、skia、app部分，我把base分成了base、message_framework、rfc_algorithm，skia用gdiplus替換合并到gfx，app劃分到animation和view_framework，去掉linux以及mac平臺(tái)的支持部分，去掉了一些不需要的功能比如網(wǎng)頁(yè)拖拽相關(guān)，形成了一個(gè)最小的開(kāi)發(fā)框架，并修改了標(biāo)題欄自繪的一個(gè)bug。Base部分起初想用boost替換，后來(lái)發(fā)現(xiàn)工作量很大，還是沒(méi)敢做。截圖如下：

所有整理代碼下載。

后續(xù)工作

繼續(xù)增加控件、功能、修改現(xiàn)有代碼中的一些注釋的問(wèn)題。接受所有的批評(píng)和建議，但不要人身攻擊。希望能看到更多其他人的作品，現(xiàn)在的開(kāi)源世界太豐富，很多東西不是接觸不到，而是肯不肯靜下心來(lái)研究。

注：工程是2005的，額外需要的頭文件<vsstyle.h> <vssym32.h>可以從vc2008的sdk中拷貝或者任意其他地方下載。2008直接轉(zhuǎn)換即可編譯。