金山衛(wèi)士界面源碼解讀及界面庫分離.pdf
(239.76 KB)
通過前面兩篇文章的介紹,相信同學(xué)們對(duì)Kui這個(gè)庫的大體使用方法有了了解. 接下來,我們就可以開始實(shí)際演練了,下面我們將展現(xiàn)基礎(chǔ)控件的使用. 不過在這里要提一下此庫的一些沒完善的地方,因?yàn)檎搲腥颂岬搅? 一.沒有鍵盤接口,所以對(duì)Tab等按鍵無法反應(yīng). 二.還沒有換膚功能 三.xml必須手工編輯. 四.其實(shí)也是很多人提到的,就是代碼缺乏注釋,很多時(shí)候還可能發(fā)現(xiàn)代碼有些零亂,的確不應(yīng)該是金山這種頂級(jí)軟件公司所應(yīng)該展現(xiàn)的樣子. 不過這方面金山已經(jīng)作了相關(guān)說明.代碼需要和商業(yè)代碼相分離,很多做法可能是暫時(shí)的. 對(duì)于這些弊端,可以自己來完善,我如果一直對(duì)它保持著興趣,相信也會(huì)去完善它的. 好了,下面我們將以第一篇文章的代碼Sample2為例子,講解Kui庫中的基礎(chǔ)控件.Kui庫的基礎(chǔ)控件并不多,只有簡單的幾個(gè)基礎(chǔ)控件.不過相信對(duì)于大部分的需求來說還是可以應(yīng)付的.畢竟它是針對(duì)金山衛(wèi)士進(jìn)行開發(fā)的,而金山衛(wèi)士是作為商業(yè)級(jí)來應(yīng)用的.一般的功能性軟件還是夠用了. 而且以后將講解對(duì)庫的擴(kuò)充方法,那樣針對(duì)你的應(yīng)用來,在Kui框架下編寫特定控件也是很簡單的. 窗體布局 在上一篇文章金山衛(wèi)士界面源碼解讀及界面庫分離(2) 中,我們說過Kui窗體是分為上中下三部分的, 分別為Header,Body,Footer 這三部分內(nèi)容是通過xml來定義的.其實(shí)Kui所有的資源都是通過xml來定義的.他們分別如下所示: xmls.xml 定義其他需要使用到的xml images.xml 定義圖片 strings.xml 定義文本 通過定義之后就可以通過ID來使用資源了. 我們將需要使用的所有圖片都在images.xml中定義. 如果你需要程序支持多語言,可以在strings.xml里定義所有需要展現(xiàn)的文本.那樣需要多語言支持只需要提供另一個(gè)xml,而不需要修改程序代碼 然后我們?cè)趚mls.xml里面定義了三個(gè)文件,分別是 def_skin.xml 皮膚定義 def_style.xml 樣式定義 dlg_main.xml 窗口定義 他們分別是皮膚,樣式和主窗口. 主窗口結(jié)構(gòu)就是定義在dlg_main.xml 所以我們需要定義窗體時(shí)主要是通過主dlg_main.xml來布局窗口中的元素. 我們看看Sample2中如何定義出一個(gè)窗口. 界面如下: 
dlg_main.xml代碼如下: view plaincopy to clipboardprint? 01. 02. 03. 04. 05. 06. 07. 08. 09. 10. 11. 12. 13. 14. 15. 16. 17. 18. 19. 20. 21. 22. 23. 24. 25. 26. 27. 28. 30. 首先所有窗口必須以layer為根節(jié)點(diǎn).并設(shè)置其屬性與窗口屬性對(duì)應(yīng).關(guān)于具體的屬性解釋,我會(huì)在以后以文檔方式提供. 簡單說明如下: width是窗體寬度，可用full定義自動(dòng)填滿寬度,height是高度可用full自動(dòng)填滿高度, appwin表示是一個(gè)程序窗口,那將使其顯示于任務(wù)欄. 然后是前面所說的上中下三部分的定義. 他們分別以header,mainbody,footer為節(jié)點(diǎn),但他們實(shí)際都是屬于KUI里面的KuiDialog虛擬窗體.是作為子控件的容器的. 這三部分不是都需要的,你可以只取三個(gè)中的部分,假如你不需要footer,可以直接去掉.但一般來說標(biāo)題欄還是要的,否則很難拖動(dòng)窗口了. header說明： header里面包含的子控件有一個(gè)圖標(biāo)，三個(gè)典型的系統(tǒng)按鈕，以及一個(gè)顯示標(biāo)題的文本控件。 他們分別以節(jié)點(diǎn)icon,imgbtn,text節(jié)點(diǎn)定義。同樣他們的具體說明將以后用文檔提供。 簡單說明如下： pos 是指出控件位置，是所有控件的共有屬性。 icon 以src指明了圖標(biāo)位置。 text的class指明了所使用的樣式。 imgbtn的id是比較重要的，點(diǎn)擊按鈕后將id以通知方式發(fā)送給主窗口，主窗口就可以根據(jù)按鈕作相應(yīng)動(dòng)作。樣式和皮膚則指明了按鈕外觀 其中按鈕的通知可在程序代碼里如此接收. view plaincopy to clipboardprint? 01.KUI_NOTIFY_MAP(IDC_RICHVIEW_WIN) 02. KUI_NOTIFY_ID_COMMAND(60001, OnBkBtnClose) 03. KUI_NOTIFY_ID_COMMAND(60002, OnBkBtnMax) 04. KUI_NOTIFY_ID_COMMAND(60003, OnBkBtnMin) 05. KUI_NOTIFY_MAP_END() KUI_NOTIFY_MAP(IDC_RICHVIEW_WIN) KUI_NOTIFY_ID_COMMAND(60001, OnBkBtnClose) KUI_NOTIFY_ID_COMMAND(60002, OnBkBtnMax) KUI_NOTIFY_ID_COMMAND(60003, OnBkBtnMin) KUI_NOTIFY_MAP_END() 其中IDC_RICHVIEW_WIN是要接收的控件的ID,一般固定設(shè)置成該值就可以了.60001對(duì)應(yīng)著xml中關(guān)閉按鈕的id,這樣就可以將通知消息映射到了OnBkBtnClose函數(shù)當(dāng)中.用戶再編寫該函數(shù)實(shí)現(xiàn)就可以了.跟MFC挺相似的. body的說明： body里面我們展現(xiàn)了普通按鈕，靜態(tài)文本，分割線，check按鈕，radio按鈕，進(jìn)度條，楨動(dòng)畫控件 普通按鈕同樣以id通知，樣式是normalbtn， 需要注意的是普通按鈕雖然看起來比windows原有按鈕漂亮，但他是直接以不同顏色畫出來的，沒有用到貼圖。 線控件以節(jié)點(diǎn)[ hr ]表示，直接在界面上畫一條橫線。 check控件和radio控件是直接用window的主題來畫的，所以可以由程序員改變的地方不多。不過一般程序都是以這種外觀展現(xiàn)的。 progress以min和max屬性定義了值范圍，當(dāng)前值以value表示。showpercent指明是否要顯示百分比文字 img是一系列的小圖片，由subwidth指定每幅圖片的寬度，通過sub屬性來指定當(dāng)前需要顯示第幾幅圖片。可用于禎動(dòng)畫或狀態(tài)圖標(biāo)顯示。 footer 一般只是狀態(tài)顯示，沒什么地方需要特別說明。 以上文件通過打包成zip文件，并命名為sample2.kui,然后用資源形式隨程序一起提供。資源代碼如下 kuires.dat SKIN "res\\sample1.kui" 可以看到其實(shí)Kui提供的基礎(chǔ)控件還是比較少的。不過這對(duì)于一般的應(yīng)用還是可以的。 依據(jù)二八原則，應(yīng)該是百分之八十的程序都是用這些基礎(chǔ)控件的。所以各位同學(xué)將就著用吧。 金山衛(wèi)士就是通過這些基礎(chǔ)控件搭配幾個(gè)高級(jí)控件完成了整個(gè)金山衛(wèi)士的構(gòu)建。 |
