001: /*
002: * GWT-Ext Widget Library
003: * Copyright(c) 2007-2008, GWT-Ext.
004: * licensing@gwt-ext.com
005: *
006: * http://www.gwt-ext.com/license
007: */
008: package com.gwtext.sample.showcase2.client.chooser;
009:
010: import com.google.gwt.user.client.DOM;
011: import com.google.gwt.user.client.Element;
012: import com.gwtext.client.core.*;
013: import com.gwtext.client.data.Store;
014: import com.gwtext.client.util.Format;
015: import com.gwtext.client.widgets.*;
016: import com.gwtext.client.widgets.event.ButtonListenerAdapter;
017: import com.gwtext.client.widgets.event.DataViewListenerAdapter;
018: import com.gwtext.client.widgets.form.Field;
019: import com.gwtext.client.widgets.form.TextField;
020: import com.gwtext.client.widgets.form.event.FieldListenerAdapter;
021: import com.gwtext.client.widgets.layout.BorderLayout;
022: import com.gwtext.client.widgets.layout.BorderLayoutData;
023:
024: import java.util.HashMap;
025:
026: public class ImageChooser extends Window {
027:
028: private Panel eastPanel;
029: private Panel centerPanel;
030:
031: private TextField searchField;
032: private Button okButton;
033:
034: // the view of the area displaying the different images
035: private DataView view;
036:
037: // the callback once the ok is pressed. This indicates the caller what image was selected
038: private ImageChooserCallback callback;
039:
040: // the data about the selected image passed to the callback method
041: private ImageData imageData;
042:
043: private HashMap imageMap;
044: private Store store;
045:
046: public ImageChooser(String title, int minWidth, int minHeight,
047: Store store) {
048: imageMap = new HashMap();
049: this .store = store;
050: initMainPanel(title, minWidth, minHeight);
051: createView();
052: centerPanel.add(view);
053: }
054:
055: public void show(ImageChooserCallback callback) {
056: this .callback = callback;
057: super .show();
058: }
059:
060: private void initMainPanel(String title, int minWidth, int minHeight) {
061: setLayout(new BorderLayout());
062: setHeight(minHeight);
063: setWidth(minWidth);
064: setTitle(title);
065: addClass("ychooser-dlg");
066:
067: eastPanel = new Panel();
068: eastPanel.setId("east-panel");
069: eastPanel.setCollapsible(false);
070: eastPanel.setWidth(150);
071: eastPanel.setPaddings(5);
072:
073: centerPanel = new Panel();
074: centerPanel.setId("ychooser-view");
075: centerPanel.setCollapsible(false);
076: centerPanel.setWidth(100);
077: centerPanel.setHeight(200);
078: centerPanel.setAutoScroll(true);
079:
080: add(getToolbar(), new BorderLayoutData(RegionPosition.NORTH));
081: add(centerPanel, new BorderLayoutData(RegionPosition.CENTER));
082: add(eastPanel, new BorderLayoutData(RegionPosition.EAST));
083:
084: addOkButton();
085: addCancelButton();
086: }
087:
088: private void addOkButton() {
089: okButton = new Button("Ok");
090: okButton.disable();
091: okButton.addListener(new ButtonListenerAdapter() {
092: public void onClick(Button button, EventObject e) {
093: hide();
094: if (callback != null) {
095: // pass the image data to the caller
096: callback.onImageSelection(imageData);
097: }
098: }
099: });
100: addButton(okButton);
101: }
102:
103: private void addCancelButton() {
104: Button cancelButton = new Button("Cancel");
105: cancelButton.enable();
106: cancelButton.addListener(new ButtonListenerAdapter() {
107: public void onClick(Button button, EventObject e) {
108: hide();
109: }
110: });
111: addButton(cancelButton);
112: cancelButton.focus();
113: }
114:
115: /**
116: * This method creates the toolbar for the dialog.
117: *
118: * @return the toolbar just created to be added into the dialog
119: */
120: private Toolbar getToolbar() {
121: Toolbar tb = new Toolbar();
122: searchField = new TextField();
123:
124: searchField.setId("ychooser-toolbar-searchfield");
125: searchField.setMaxLength(60);
126: searchField.setGrow(false);
127: searchField.setSelectOnFocus(true);
128:
129: searchField.addListener(new FieldListenerAdapter() {
130:
131: /**
132: * This method will be called when special characters are pressed.
133: * This method is only interested in the enter key so that it can
134: * load the images. It simulates pressing the "Find" button.
135: */
136: public void onSpecialKey(Field field, EventObject e) {
137: if (e.getKey() == EventObject.ENTER) {
138: displayThumbs(searchField.getValueAsString()); // load the images in the view
139: }
140: }
141: });
142:
143: tb.addField(searchField);
144:
145: ToolbarButton tbb = new ToolbarButton("Find");
146: tbb.setIconCls("search-icon");
147: tbb.addListener(new ButtonListenerAdapter() {
148: public void onClick(Button button, EventObject e) {
149: displayThumbs(searchField.getValueAsString());
150: }
151: });
152: tb.addButton(tbb);
153: return tb;
154: }
155:
156: /**
157: * This method creates the two view for displaying the images. The main
158: * view is the one that displays all the images to select. The second view
159: * displays the selected images with information about the image.
160: */
161: private void createView() {
162: // the thumb nail template for the main view
163: String thumbTemplate[] = new String[] {
164: "<tpl for='.'>",
165: "<div class='thumb-wrap' id='{name}'>",
166: "<div class='thumb'><img src='{url}' title='{name}'></div>",
167: "<span>{shortName}</span></div>", "</tpl>",
168: "<div class='x-clear'></div>" };
169:
170: // the detail template for the selected image
171: String detailTemplate[] = new String[] { "<tpl for='.'>",
172: "<div class='details'><img src='{url}'>",
173: "<div class='details-info'><b>Image Name:</b>",
174: "<span>{name}</span><b>Size:</b>",
175: "<span>{sizeString}</span><b>Last Modified:</b>",
176: "<span>{dateString}</span></div></div>", "</tpl>",
177: "<div class='x-clear'></div>" };
178:
179: // compile the templates
180: final XTemplate thumbsTemplate = new XTemplate(thumbTemplate);
181: final XTemplate detailsTemplate = new XTemplate(detailTemplate);
182: thumbsTemplate.compile();
183: detailsTemplate.compile();
184:
185: // initialize the View using the thumb nail template
186: view = new DataView("div.thumb-wrap") {
187: public void prepareData(Data data) {
188: ImageData newImageData = null;
189: String name = data.getProperty("name");
190: String sizeString = data.getProperty("size");
191: String dateString = Format.date(data
192: .getProperty("lastmod"), "m/d/Y g:i a");
193:
194: data.setProperty("shortName", Format.ellipsis(data
195: .getProperty("name"), 15));
196: data.setProperty("sizeString", sizeString);
197:
198: if (imageMap.containsKey(name)) {
199: newImageData = (ImageData) imageMap.get(name);
200: } else {
201: newImageData = new ImageData();
202: imageMap.put(name, newImageData);
203: }
204:
205: newImageData.setFileName(name);
206: newImageData.setName(name);
207: newImageData.setLastModified(dateString);
208: newImageData.setSize(Long.parseLong(data
209: .getProperty("size")));
210: newImageData.setUrl(data.getProperty("url"));
211: }
212: };
213: view.setSingleSelect(true);
214: view.setTpl(thumbsTemplate);
215: view.setStore(store);
216: view.setAutoHeight(true);
217: view.setOverCls("x-view-over");
218:
219: // if there is no images that can be found, just output an message
220: view
221: .setEmptyText("<div style=\"padding:10px;\">No images match the specified filter</div>");
222: view.addListener(new DataViewListenerAdapter() {
223:
224: /**
225: * This method is called when a selection is made changing the previous
226: * selection
227: * @params view the view that this selection is for
228: * @params selections a list of all selected items. There should only be
229: * one as we only allow 1 selection.
230: */
231: public void onSelectionChange(DataView component,
232: Element[] selections) {
233: // The details Ext.Element
234: ExtElement detailEl = eastPanel.getEl();
235:
236: // if there is a selection and show the details
237: if (selections != null && selections.length > 0
238: && selections[0] != null) {
239: // enable the ok button now there is a selection made
240: okButton.enable();
241: String id = DOM.getElementAttribute(selections[0],
242: "id");
243: imageData = (ImageData) imageMap.get(id);
244:
245: detailEl.hide();
246: NameValuePair vals[] = new NameValuePair[4];
247: vals[0] = new NameValuePair("name", imageData
248: .getName());
249: vals[1] = new NameValuePair("url", imageData
250: .getUrl());
251: vals[2] = new NameValuePair("sizeString", imageData
252: .getSize());
253: vals[3] = new NameValuePair("dateString", imageData
254: .getLastModified());
255: String html = detailsTemplate.applyTemplate(vals);
256: detailEl.update(html);
257: detailEl.slideIn();
258: } else {
259: // no selection means the ok button should be disabled and the detail
260: // area should be blanked out
261: okButton.disable();
262: detailEl.update("");
263: }
264: }
265: });
266: }
267:
268: private void displayThumbs(String findStr) {
269: if (findStr == null || findStr.equals("")) {
270: store.clearFilter(true);
271: } else {
272: store.filter("name", findStr, true);
273: }
274: view.refresh();
275: }
276: }
|