用GWT(Google Web Toolkit)開(kāi)發(fā)Ajax-圖片瀏覽
| 摘要 |
從本文開(kāi)始我們開(kāi)始一個(gè)有點(diǎn)實(shí)際意義的應(yīng)用，圖片瀏覽器，初步我們只實(shí)現(xiàn)簡(jiǎn)單的框架來(lái)實(shí)現(xiàn)圖片瀏覽的基本功能，然后再繼續(xù)深化，做出更好的界面，和更多的管理功能。 |
| 關(guān)鍵字 |
Google Web Toolkit GWT Ajax 圖片瀏覽 |
設(shè)想一下簡(jiǎn)單的界面效果，和已經(jīng)實(shí)現(xiàn)這個(gè)效果需要的提供的數(shù)據(jù)服務(wù)。
打開(kāi)畫圖版，簡(jiǎn)單的畫一下界面。
圖片瀏覽
 |
界面說(shuō)明
- 最頂上一個(gè)橫向的標(biāo)題欄
- 中間左邊一個(gè)是小的預(yù)覽圖片列表
- 中間右邊是圖片瀏覽主窗口
- 最底部有一個(gè)簡(jiǎn)單的版權(quán)之類的說(shuō)明
數(shù)據(jù)服務(wù)
- 一保存圖片信息的數(shù)據(jù)結(jié)構(gòu)
- 一個(gè)能獲取指定要求的圖片的集合的服務(wù)
創(chuàng)建界面頁(yè)面構(gòu)成，參看已經(jīng)設(shè)計(jì)的界面，從外往內(nèi)一個(gè)一個(gè)結(jié)構(gòu)，把界面分成上中下三個(gè)面板，其中第二塊分割成左右兩個(gè)面板。這樣不難得到這樣的結(jié)果，在onModuleLoad方法中添加實(shí)現(xiàn)一下功能的代碼:
VerticalPanel mainPanel;//主面板
HorizontalPanel topPart;//頂端部分
HorizontalPanel centerPart;//中間部分
HorizontalPanel bottomPart;//底端部分
HorizontalPanel imagesPart;//圖片列表
HorizontalPanel previewPart;//圖片預(yù)覽
//按照以下安裝過(guò)程組裝
mainPanel.add(topPart);
mainPanel.add(centerPart);
mainPanel.add(bottomPart);
centerPart.add(imagesPart);
centerPart.add(previewPart);
注意可能我們的圖片會(huì)很多,希望不會(huì)把頁(yè)面撐得很長(zhǎng)很長(zhǎng),GWT提供了不過(guò)的ScrollPanel，只要把
centerPart.add(imagesPart);修改成
centerPart.add(new ScrollPanel(imagesPart));就可以了。
同樣圖片也可能會(huì)很大，也一樣在previewPart上添加一個(gè)滾動(dòng)面板。
圖片服務(wù)實(shí)現(xiàn)
- 一個(gè)保存圖片數(shù)據(jù)的數(shù)據(jù)結(jié)構(gòu)，簡(jiǎn)單點(diǎn)，創(chuàng)建一個(gè)org.jmg.client.ImageData implements IsSerializable，這個(gè)類中只有兩個(gè)屬性，title,url，這兩個(gè)屬性已經(jīng)很好的表明他們的用途了，不再細(xì)說(shuō)。至于getter, setter,我只提供了get,初始化用構(gòu)造函數(shù)傳參，你也可以根據(jù)自己習(xí)慣修改。個(gè)人原則，能不提供的方法盡量不提供。需要注意一點(diǎn)很重要，這個(gè)類一定要實(shí)現(xiàn)com.google.gwt.user.client.rpc.IsSerializable這個(gè)標(biāo)志接口，這個(gè)會(huì)在編譯的時(shí)候生成相應(yīng)的 javascript的對(duì)象，用戶在客戶端運(yùn)行。
- 創(chuàng)建服務(wù),在client包中寫ImageServiceAsync，ImageService,這兩個(gè)接口，在server中實(shí)現(xiàn) ImageServiceImpl implements ImageService。ImageServiceImpl，所需提供的方法就是獲取圖片列表，返回一個(gè)ImageData數(shù)組或是集合類，都可以，我這里選擇了數(shù)組。
添加客戶端事件
有了界面，有了服務(wù)，就可以把這兩個(gè)東西組裝在一起了。我們需要兩個(gè)事件處理，第一個(gè)是在客戶端剛剛打開(kāi)的時(shí)候，在"創(chuàng)建界面"小節(jié)中我們已經(jīng)在 onModuleLoad添加了界面大致框架的初始化，現(xiàn)在我們要調(diào)用服務(wù)，并且把獲取到的數(shù)據(jù)，構(gòu)造成 com.google.gwt.user.client.ui.Image對(duì)象，添加到imagesPart中，代碼大致如下：
async.getImageData(new AsyncCallback() {
public void onFailure(Throwable caught) {
}
public void onSuccess(Object result) {
ImageData[] images = (ImageData[]) result;
for (int i = 0; i < images.length; i++) {
Image image = new Image(images[i].getUrl());//根據(jù)url構(gòu)造image對(duì)象
image.setPixelSize(120, 120);//限制預(yù)覽圖片的大小
imagesPart.add(image);//添加到imagesPart中
}
}
});
到這里你編譯部署的時(shí)候就已經(jīng)可以看到大致的運(yùn)行效果了。左邊是一個(gè)小圖片的列表，右邊是一塊空白的區(qū)域。
到現(xiàn)在剩下的事情就是需要在小圖上添加一個(gè)鼠標(biāo)事件，在鼠標(biāo)移上去的時(shí)候，右邊顯示大圖。
這個(gè)過(guò)程也很簡(jiǎn)單，就像寫swing程序一樣，只要在上邊的Image對(duì)象構(gòu)造好的時(shí)候添加一個(gè)mouseListener就可以了:
image.addMouseListener(new MouseListenerAdapter() {
public void onMouseEnter(Widget sender) {
sender.addStyleName("selected");
previewPart.clear();
Image img = new Image(((Image)sender).getUrl());
//注意這里的Image需要?jiǎng)?chuàng)建一個(gè)，而不是sender強(qiáng)換型，
//最初的時(shí)候我就是為了節(jié)省一個(gè)對(duì)象，強(qiáng)換型了一次，
//至于效果你可以自己動(dòng)手改改試試看
img.addStyleName("big");
previewPart.add(img);
}
public void onMouseLeave(Widget sender) {
sender.removeStyleName("selected");
}
});
運(yùn)行部署 到這里我們的圖片瀏覽器就基本完成了，至于樣式表之類的東西就不在這里說(shuō)了。不說(shuō)不是表示不重要，GWT推薦所有東西都用樣式表來(lái)控制，而是很重要。這里我截了一個(gè)簡(jiǎn)單的圖，僅作運(yùn)行效果:
運(yùn)行圖例
 |
源碼下載:imageviewer_src.rar
運(yùn)用下載:imageviewer.rar