#副標=AJAX開發工具（13） #大標=設計具備Cover Flow效果的網路相簿(上) #作者=文圖／沈炳宏 #引言= ==========程式========= 程式1 projectCreator.cmd -eclipse CoverFlowDemo applicationCreator.cmd -eclipse CoverFlowDemo com.runpc.demo.client.CoverFlowDemo ==========程式========= ==========程式========= 程式2

==========程式========= ==========程式========= 程式4 private ImageServiceAsync imageService = (ImageServiceAsync) GWT.create(ImageService.class); private ServiceDefTarget target = (ServiceDefTarget) imageService; private AlbumWidget albumWidget; private ImageFlowWidget imageFlowWidget = null; private ImageDTO[] dtos; … public void onModuleLoad() { String moduleRelativeURL = GWT.getModuleBaseURL() + "imageService"; target.setServiceEntryPoint (moduleRelativeURL); albumWidget = new AlbumWidget(imageService); History.addHistoryListener(this); onHistoryChanged(History.getToken()); RootPanel.get(DIV).add(albumWidget); } ==========程式========= ==========程式========= 程式5 public void onHistoryChanged (String historyToken) { if (historyToken == null || historyToken.length() == 0) { historyToken = createToken(STATE_USER, ImageService.SERVICE_FLICKR, null, null, -1); } String[] tokens = historyToken.split(STATE_DELIM); String state = getToken(tokens, POS_STATE, STATE_USER); int imageServiceType = getToken(tokens, POS_SERVICE_TYPE, -1); if (imageServiceType != -1) { albumWidget. setImageServiceType(imageServiceType); } String username = getToken(tokens, POS_USERNAME, null); if (username != null) { albumWidget.setUsername(username); } if (state.equals(STATE_USER)) { … } else if (state.equals(STATE_ALBUMS)) { … } else if (state.startsWith(STATE_IMAGES)) { … } } } ==========程式========= ==========程式========= 程式6 public static String createToken (String state, int serviceType, String username, String albumId, int imageIdx) { StringBuffer sb = new StringBuffer(); sb.append(state); sb.append(STATE_DELIM). append(serviceType); … return sb.toString(); } private static String getToken( String[] tokens, int pos, String defaultToken) { return (tokens.length <= pos) ? defaultToken : tokens[pos]; } private static int getToken( String[] tokens, int pos, int defaultToken) { String strToken = getToken(tokens, pos, null); if (strToken == null) { return defaultToken; } try { return Integer.valueOf(tokens[pos]).intValue(); } catch (NumberFormatException e) { return defaultToken; } } ==========程式========= ==========程式========= 程式7 public class AlbumDTO implements Serializable{ public String id; public String name; public String description; public int imageCount; public String smallSquareUrl; } public class ImageDTO implements Serializable{ private String name; private int width; private int height; private String thumbnailUrl; private String smallSquareUrl; private String smallUrl; private String mediumUrl; private String largeUrl; private String originalUrl; } ==========程式========= ==========程式========= 程式8 public void loadUserPanel() { VerticalPanel servicePanel = new VerticalPanel(); … servicePanel.add(new Label ("1. 選擇相簿服務")); mainPanel.add(servicePanel); … service0.add(rb0); Image img0 = new Image("img/flickrlogo.gif"); img0.addClickListener(new ClickListener() { public void onClick(Widget sender) { rb0.setChecked(true); imageServiceType = ImageService.SERVICE_FLICKR; } }); service0.add(img0); … servicePanel.add(service0); VerticalPanel userPanel = new VerticalPanel(); … userPanel.add(new Label("2. 輸入帳號")); final TextBox userTb = new TextBox(); … final Button button = new Button("繼續"); … userPanel.add(userTb); userPanel.add(button); userPanel.add(errorLabel); mainPanel.add(userPanel); } ==========程式========= ==========程式========= 程式9 private void validateUser() { AsyncCallback callback = new AsyncCallback() { public void onSuccess(Object result) { boolean valid = ((Boolean) result).booleanValue(); if (valid) { History.newItem(GWTFlow.createToken( GWTFlow.STATE_ALBUMS, imageServiceType, username, null, -1)); } else { displayInvalidUser(); } } public void onFailure(Throwable e) { displayInvalidUser(); } }; imageService.isUserValid( getImageServiceType(), getUsername(), callback); } public void displayInvalidUser() { Effect.shake(mainPanel); errorLabel.setText("沒有該使用者!"); } ==========程式========= ==========程式========= 程式10 public void showAlbums (final AlbumDTO[] albums) { VerticalPanel albumPanel = new VerticalPanel(); … albumPanel.add(new Label("3. 選擇瀏覽相簿")); Grid table = new Grid(albums.length, 2); for (int i = 0; i < albums.length; i++) { Image image = new Image(albums[i].smallSquareUrl); … table.addTableListener(new TableListener() { public void onCellClicked( SourcesTableEvents sender, int row, int cell) { History.newItem(GWTFlow.createToken( GWTFlow.STATE_IMAGES, getImageServiceType(), getUsername(), albums[row].id, 0)); } }); … mainPanel.add(albumPanel); } ==========程式========= ==========程式========= 程式11 private void loadImages(final int serviceType, final String username, final String albumId, final int imageIdx) { albumWidget.clearMainPanel(); albumWidget.showBusy("載入相片..."); AsyncCallback callback = new AsyncCallback() { public void onSuccess(Object result) { final ImageDTO[] images = (ImageDTO[]) result; dtos = images; imageFlowWidget = new ImageFlowWidget(); RootPanel.get(DIV).add(imageFlowWidget); imageFlowWidget.setImageDTOs(serviceType, username, albumId, dtos, imageIdx); Effect.fade(albumWidget, new EffectOption[] { new EffectOption("duration", 3) }); } public void onFailure(Throwable e) { albumWidget.showError("無法載入影像: " + e.getMessage()); } }; imageService.getImages( serviceType, username, albumId, 20, 0, callback); } ==========程式========= ==========程式========= 程式12 public void setImageDTOs( final int imageServiceType, final String username, final String albumId, ImageDTO[] dtos, int selIdx) { … for (int i=0; i