列舉經(jīng)典

不知不覺(jué)又到設(shè)計(jì)UI的時(shí)候了，由于UI的設(shè)計(jì)與用戶的操作息息相關(guān)，于是我們得先看看用戶希望怎么操作這個(gè)插件：

點(diǎn)擊Ribbon上的Amazon Book按鈕打開(kāi)搜索圖書(shū)的窗口；
輸入搜索關(guān)鍵字，并點(diǎn)擊搜索；
在搜索結(jié)果中選擇想要引用的圖書(shū)；
插入選中圖書(shū)的超鏈接。
此外，我們還需要進(jìn)一步細(xì)化搜索結(jié)果的那些數(shù)據(jù)將顯示在搜索圖書(shū)窗口里：

圖書(shū)的封面；
圖書(shū)的完整標(biāo)題；
圖書(shū)的作者列表。
有了上面這些準(zhǔn)備，我們就可以設(shè)計(jì)搜索圖書(shū)窗口了。首先，在項(xiàng)目里添加如下所示的窗口：

圖 1 - Search Book Window

這個(gè)窗口是使用Component Factory的Krypton Toolkit控件包開(kāi)發(fā)的，里面包含：

給用戶輸入書(shū)名的編輯框；
執(zhí)行搜索的按鈕（Go按鈕）；
顯示搜索結(jié)果的ListView控件；
顯示選定圖書(shū)的書(shū)名的Label控件；
顯示選定圖書(shū)的作者的Label控件；
插入選定圖書(shū)的超鏈接的按鈕（Link按鈕）；
關(guān)閉窗口的按鈕（Close按鈕）。
一開(kāi)始，用戶沒(méi)有在編輯框輸入任何東西，而ListView控件也沒(méi)有顯示任何結(jié)果，Go按鈕和Link按鈕應(yīng)該是屏蔽狀態(tài)（disable）的。當(dāng)用戶在編輯框了輸入了東西，Go按鈕會(huì)被激活：

Code 1 - Enable/Disable Go Button

同理，Link按鈕也會(huì)在用戶選定某本圖書(shū)后激活：

Code 2 - Enable/Disable Link Button

當(dāng)用戶點(diǎn)擊Go按鈕時(shí)，將執(zhí)行下列操作：

通過(guò)BookSearch.Search方法獲取搜索結(jié)果；
構(gòu)建用于ListView顯示圖書(shū)封面的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í)候先查看本地緩存，沒(méi)有的話再去Amazon.com那里要。

當(dāng)用戶選定某本圖書(shū)時(shí)，我們需要把它的書(shū)名和作者顯示在ListView下面的兩個(gè)Label上，于是我把ListView的SelectedIndexChanged事件委托修改了一下：

Code 5 - EventHandler for SelectedIndexChanged Event of ListView

回到Ribbon的設(shè)計(jì)上，我們需要一個(gè)按鈕來(lái)打開(kāi)搜索圖書(shū)窗口，為此，我在Ribbon上添加了一個(gè)SplitButton，之所以選擇它而不是普通的Button，乃因我腦海里一個(gè)突如其來(lái)的想法，稍后將會(huì)為你剖析這個(gè)想法的來(lái)龍去脈。添加了SplitButton后的Ribbon如下圖所示：

圖 2 - Amazon Book SplitButton on Ribbon