金山衛士界面源碼解讀及界面庫分離.pdf
(239.76 KB)
通過前面三篇的基礎學習相信大家已經對Kui庫的使用比較熟悉了。主要分三步走。 首先構建程序代碼框架 然后根據界面布局編寫xml布局 最后添加程序的交互代碼。 所以構建好主程序代碼框架后，不同的界面只需要通過改動xml，然后添加交互代碼就可以了。主程序代碼一般都固定的。 中級界面 本來打算這篇文章介紹金山的高級界面,如TAB及RichText,不過剛編寫了一個IM登陸界面, 那么先展示那個例子先,就定義為中級界面吧. 通過這個例子,我們可以看到如何添加窗口控件,因為只要能添加窗口控件,那么基本上的擴充才不會遇到阻礙, 因為一旦KUI無法勝任時就可以使用Windows系統控件來進行實現,不至于束手無策。 同時進一步熟悉KUI的使用方法。 先看下模擬MSN的登陸界面效果吧。 
這個界面對程序代碼改動不多，全部只是通過修改xml來構建的，所以可以發現在DirectUI中，界面是可以完全和代碼分開的。 你甚至可以讓美工直接來編輯界面xml了，這樣美工可以和程序員分開工作。不過最理想的還是有一個界面可視化的編輯器。 下面來全面察看下這個登陸界面的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. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,250" class="linktext">Forget your password? 24. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,270" class="linktext">Service status 25. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,290" class="linktext">Sign up for a Windows Live ID 26. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,310" class="linktext">rivacy statement 27. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,330" class="linktext">Windows Live Messager BETA 28. 29. 30. 31. 34. http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,250" class="linktext">Forget your password? http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,270" class="linktext">Service status http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,290" class="linktext">Sign up for a Windows Live ID http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,310" class="linktext">rivacy statement http://www.qqpet.com/" mce_href="http://www.qqpet.com/" pos="20,330" class="linktext">Windows Live Messager BETA Header部分和前面沒有什么區別，Footer我們添加了一個小圖片裝飾一下。 關鍵是mainbody部分，我們加入了幾個新控件，同時應用了一些新的屬性技巧。 首先是頂部的一個圖片，這個圖片沒什么特別，就是一個img節點，與html的差不多，特別的是他的位置屬性。 我們看到位置定義為pos="|-69,20,|69"，這代表了什么呢？ 在Kui當中，|代表以中間來布局，這樣即便窗口大小改變，他也能動態調整，自動中間對齊。還有位置可以負數哦，下面來具體解釋。 |-69，表示中間向左69像素，|69表示中間向右69像素，這樣圖片就居中顯示了。有點半人工對齊，呵呵，沒有align屬性來得直接。不過更好理解一些。所以整個pos="|-69,20,|69"屬性就表示： 以窗口左右居中，top位置為20的位置繪制圖片。 再然后我們定義一個dlg節點，以讓下面的控件統一布局。 接著我們定義兩個文本提示用戶名和密碼輸入位置，并定義兩個realwnd節點，這個節點比較特殊，它實際上定義了一個與真實窗口相連接的接口，鏈接的樞紐就是通過ctrlid與真實窗口的控件ID相聯系。我們通過這兩個窗口定義了兩個編輯框。這兩個窗口需要程序代碼來配合創建，我們后面將提到。 再下面定義的三個check按鈕以及一個登陸按鈕，我們前面文章已經介紹了。這里不再重復。 最后看看是連續5個link控件，這個link控件可是好東西，它可以定義各種樣式，并可以像普通按鈕那樣發送通知消息。 所以你可以發現要在標題欄那里放入一個[ 設置 ]字樣，鼠標移到上面可以變色，并可以接受點擊消息，是如此簡單。金山就是那么做的。 我們在這里可以定義五個超鏈接，就跟網頁上面的超鏈接一樣，點擊后就到達相關網頁，只要設置href為要到達的網址，就是如此簡單。 整個登陸界面的定義，解釋出來就是如上所述而已。有沒發現其實也蠻簡單的，其實世界上很多事只要手熟以后就發現也不是很麻煩的。 百步穿楊和油壺不滴表面看來都是神乎奇技，其實唯手熟也。提到這個是想說明其實平時用慣了MFC的窗口布局，自然對其他的布局方式感覺到麻煩，其實并非完全是兩者技術的差別，還有的因素是大家用慣了的緣故。 轉入正題，我們前面前面定義的xml界面還有點工作需要程序代碼來完成。 xml定義了兩個realwnd，這兩個真實窗口需要在程序代碼里面定義，我們要在對話框創建之時同時創建兩個Edit子窗口。 首先在頭文件MainWnd.h定義兩個Edit控件 view plaincopy to clipboardprint? 01.CEdit m_ctlUserName; 02.CEdit m_ctlUserPass; CEdit m_ctlUserName; CEdit m_ctlUserPass; 然后在對話框初始化時創建窗口。 view plaincopy to clipboardprint? 01.LRESULT CMainWnd::OnInitDialog( HWND hDlg, LPARAM lParam ) 02.{ 03. if( m_ctlUserName.Create( GetRichWnd(), NULL, NULL, WS_CHILD | WS_VISIBLE | WS_BORDER ) ) 04. m_ctlUserName.SetDlgCtrlID( 2 ); 05. if( m_ctlUserPass.Create( GetRichWnd(), NULL, NULL, WS_CHILD | WS_VISIBLE | WS_BORDER | ES_PASSWORD ) ) 06. m_ctlUserPass.SetDlgCtrlID( 3 ); 07. SetTimer( 1, 80 ); 08. return TRUE; 09.} LRESULT CMainWnd::OnInitDialog( HWND hDlg, LPARAM lParam ) { if( m_ctlUserName.Create( GetRichWnd(), NULL, NULL, WS_CHILD | WS_VISIBLE | WS_BORDER ) ) m_ctlUserName.SetDlgCtrlID( 2 ); if( m_ctlUserPass.Create( GetRichWnd(), NULL, NULL, WS_CHILD | WS_VISIBLE | WS_BORDER | ES_PASSWORD ) ) m_ctlUserPass.SetDlgCtrlID( 3 ); SetTimer( 1, 80 ); return TRUE; } 怎么樣，編譯一下看看吧。 因為只是一個示例代碼就不上傳到CSDN了，同學們可以直接自己編輯一下，或用SVN到以下地址更新代碼。 |
