列舉經(jīng)典
不知不覺又到設(shè)計(jì)UI的時(shí)候了，由于UI的設(shè)計(jì)與用戶的操作息息相關(guān)，于是我們得先看看用戶希望怎么操作這個(gè)插件：
點(diǎn)擊Ribbon上的Amazon Book按鈕打開搜索圖書的窗口；
輸入搜索關(guān)鍵字，并點(diǎn)擊搜索；
在搜索結(jié)果中選擇想要引用的圖書；
插入選中圖書的超鏈接。
此外，我們還需要進(jìn)一步細(xì)化搜索結(jié)果的那些數(shù)據(jù)將顯示在搜索圖書窗口里：
圖書的封面；
圖書的完整標(biāo)題；
圖書的作者列表。
有了上面這些準(zhǔn)備，我們就可以設(shè)計(jì)搜索圖書窗口了。首先，在項(xiàng)目里添加如下所示的窗口：
圖 1 - Search Book Window
這個(gè)窗口是使用Component Factory的Krypton Toolkit控件包開發(fā)的，里面包含：
給用戶輸入書名的編輯框；
執(zhí)行搜索的按鈕（Go按鈕）；
顯示搜索結(jié)果的ListView控件；
顯示選定圖書的書名的Label控件；
顯示選定圖書的作者的Label控件；
插入選定圖書的超鏈接的按鈕（Link按鈕）；
關(guān)閉窗口的按鈕（Close按鈕）。
一開始，用戶沒有在編輯框輸入任何東西，而ListView控件也沒有顯示任何結(jié)果，Go按鈕和Link按鈕應(yīng)該是屏蔽狀態(tài)（disable）的。當(dāng)用戶在編輯框了輸入了東西，Go按鈕會(huì)被激活：
Code 1 - Enable/Disable Go Button
同理，Link按鈕也會(huì)在用戶選定某本圖書后激活：
Code 2 - Enable/Disable Link Button
當(dāng)用戶點(diǎn)擊Go按鈕時(shí)，將執(zhí)行下列操作：
通過BookSearch.Search方法獲取搜索結(jié)果；
構(gòu)建用于ListView顯示圖書封面的ImageList對(duì)象；
向ListView填充搜索結(jié)果。
對(duì)于第二步，我們需要ImageManager的幫忙：
Code 3 - ImageManager
有了它，Go按鈕就可以完成它的任務(wù)了：
Code 4 - EventHandler for Click Event of Go Button
ListView是一個(gè)不錯(cuò)的東西，但它不能單獨(dú)為每個(gè)項(xiàng)指定圖標(biāo)，這是我最討厭的。另外，你也可以對(duì)圖片進(jìn)行本地緩存，并讓ImageManager在獲取圖片的時(shí)候先查看本地緩存，沒有的話再去Amazon.com那里要。
當(dāng)用戶選定某本圖書時(shí)，我們需要把它的書名和作者顯示在ListView下面的兩個(gè)Label上，于是我把ListView的SelectedIndexChanged事件委托修改了一下：
Code 5 - EventHandler for SelectedIndexChanged Event of ListView
回到Ribbon的設(shè)計(jì)上，我們需要一個(gè)按鈕來打開搜索圖書窗口，為此，我在Ribbon上添加了一個(gè)SplitButton，之所以選擇它而不是普通的Button，乃因我腦海里一個(gè)突如其來的想法，稍后將會(huì)為你剖析這個(gè)想法的來龍去脈。添加了SplitButton后的Ribbon如下圖所示：
圖 2 - Amazon Book SplitButton on Ribbon
相關(guān)閱讀