comparison gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java @ 6119:0b9f0d37fe6e

We have a much faster interactive image map! * Image for highlighting rivers in link list instead of CSS manipulation. * Better event handling. * No more hover delay. Some problems still exist: * Sometime when switching the module to 'MINFO' the highlighted river on the image map is not unhighlighted. * The loop to unhighlight rivers when switching modules is called for every river.
author Raimund Renkert <rrenkert@intevation.de>
date Tue, 28 May 2013 15:57:10 +0200
parents 0eab06d5144f
children 2033f86a1863
comparison
equal deleted inserted replaced
6118:97d055c24ad4 6119:0b9f0d37fe6e
14 import com.google.gwt.core.client.GWT; 14 import com.google.gwt.core.client.GWT;
15 15
16 import com.smartgwt.client.types.VerticalAlignment; 16 import com.smartgwt.client.types.VerticalAlignment;
17 import com.smartgwt.client.widgets.Canvas; 17 import com.smartgwt.client.widgets.Canvas;
18 import com.smartgwt.client.widgets.HTMLPane; 18 import com.smartgwt.client.widgets.HTMLPane;
19 import com.smartgwt.client.widgets.Img;
19 import com.smartgwt.client.widgets.Label; 20 import com.smartgwt.client.widgets.Label;
21 import com.smartgwt.client.widgets.events.VisibilityChangedEvent;
22 import com.smartgwt.client.widgets.events.VisibilityChangedHandler;
20 import com.smartgwt.client.widgets.form.DynamicForm; 23 import com.smartgwt.client.widgets.form.DynamicForm;
21 import com.smartgwt.client.widgets.form.fields.LinkItem; 24 import com.smartgwt.client.widgets.form.fields.LinkItem;
22 import com.smartgwt.client.widgets.form.fields.events.ClickEvent; 25 import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
23 import com.smartgwt.client.widgets.form.fields.events.ClickHandler; 26 import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
24 import com.smartgwt.client.widgets.form.fields.events.ItemHoverEvent; 27 import com.smartgwt.client.widgets.form.fields.events.ItemHoverEvent;
40 * 43 *
41 * @author <a href="mailto:raimund.renkert@intevation.de">Raimund Renkert</a> 44 * @author <a href="mailto:raimund.renkert@intevation.de">Raimund Renkert</a>
42 */ 45 */
43 public class LinkSelection 46 public class LinkSelection
44 extends MapSelection 47 extends MapSelection
48 implements VisibilityChangedHandler
45 { 49 {
46 50
47 private static final long serialVersionUID = -7138270638349711024L; 51 private static final long serialVersionUID = -7138270638349711024L;
48 52
49 /** The message class that provides i18n strings.*/ 53 /** The message class that provides i18n strings.*/
50 protected FLYSConstants messages = GWT.create(FLYSConstants.class); 54 protected FLYSConstants messages = GWT.create(FLYSConstants.class);
51 55
52 /** The selected river*/ 56 /** The selected river*/
53 protected Data river; 57 protected Data river;
54 private static Map<String, LinkItem> rivers; 58 private static Map<String, Img> riverHighlight;
59 private static Map<String, HLayout> riverList;
60 private static String selected;
55 private static HLayout columns; 61 private static HLayout columns;
56 62
57 private static Trigger trigger; 63 private static Trigger trigger;
58 64
59 private Canvas module; 65 private Canvas module;
93 */ 99 */
94 @Override 100 @Override
95 public Canvas create(DataList data) { 101 public Canvas create(DataList data) {
96 trigger = new Trigger(this); 102 trigger = new Trigger(this);
97 createCallback(); 103 createCallback();
98 rivers = new HashMap<String, LinkItem>(); 104 riverHighlight = new HashMap<String, Img>();
105 riverList = new HashMap<String, HLayout>();
99 106
100 VLayout v = new VLayout(); 107 VLayout v = new VLayout();
101 v.setMembersMargin(10); 108 v.setMembersMargin(10);
102 v.setAlign(VerticalAlignment.TOP); 109 v.setAlign(VerticalAlignment.TOP);
103 if (data.getState() == null) { 110 if (data.getState() == null) {
180 label.setHeight(20); 187 label.setHeight(20);
181 label.setWidth(400); 188 label.setWidth(400);
182 189
183 int counter = 0; 190 int counter = 0;
184 for (DataItem item: d.getItems()) { 191 for (DataItem item: d.getItems()) {
192 HLayout row = new HLayout();
185 LinkItem link = new LinkItem("river"); 193 LinkItem link = new LinkItem("river");
194 link.setHoverDelay(0);
186 link.setLinkTitle(item.getLabel()); 195 link.setLinkTitle(item.getLabel());
187 link.setTarget(item.getStringValue()); 196 link.setTarget(item.getStringValue());
188 link.setShowTitle(false); 197 link.setShowTitle(false);
198 Img img = new Img();
199 img.setShowTitle(false);
200 img.setSrc("marker_green.png");
201 img.setWidth(20);
202 img.setHeight(20);
203 img.setVisible(false);
204 Canvas container = new Canvas();
205 container.addChild(img);
206 container.setHeight(20);
207 container.setWidth(20);
189 DynamicForm f = new DynamicForm(); 208 DynamicForm f = new DynamicForm();
190 rivers.put(item.getStringValue(), link); 209 riverList.put(item.getStringValue(), row);
191 210 riverHighlight.put(item.getStringValue(), img);
192 f.setItems(link); 211 f.setItems(link);
212 row.addMember(container);
213 row.addMember(f);
214 row.addVisibilityChangedHandler(this);
215 link.setColSpan(20);
193 if (counter < d.getItems().length/2) { 216 if (counter < d.getItems().length/2) {
194 formLayout1.addMember(f); 217 formLayout1.addMember(row);
195 } 218 }
196 else { 219 else {
197 formLayout2.addMember(f); 220 formLayout2.addMember(row);
198 } 221 }
199 counter++; 222 counter++;
200
201 link.addClickHandler(new ClickHandler() { 223 link.addClickHandler(new ClickHandler() {
202 @Override 224 @Override
203 public void onClick(ClickEvent event) { 225 public void onClick(ClickEvent event) {
204 DataItem item = new DefaultDataItem( 226 DataItem item = new DefaultDataItem(
205 ((LinkItem)event.getItem()).getLinkTitle(), 227 ((LinkItem)event.getItem()).getLinkTitle(),
216 }); 238 });
217 link.addItemHoverHandler(new ItemHoverHandler() { 239 link.addItemHoverHandler(new ItemHoverHandler() {
218 @Override 240 @Override
219 public void onItemHover(ItemHoverEvent event) { 241 public void onItemHover(ItemHoverEvent event) {
220 String river = ((LinkItem)event.getItem()).getLinkTitle(); 242 String river = ((LinkItem)event.getItem()).getLinkTitle();
221 for (Map.Entry<String, LinkItem> entry: rivers.entrySet()) { 243 if (riverHighlight.containsKey(river)) {
222 String s = entry.getKey(); 244 Img item = riverHighlight.get(river);
223 LinkItem item = entry.getValue(); 245 item.setVisible(true);
224 if (item.getLinkTitle().equals(river)) { 246 if (selected != null && !selected.equals(river)) {
225 item.setCellStyle("riverLinkHighlight"); 247 riverHighlight.get(selected).setVisible(false);
226 callHighlightRiver(river); 248 callUnHighlightRiver(selected);
227 } 249 }
228 else { 250 callHighlightRiver(river);
229 item.setCellStyle("formCell"); 251 selected = river;
230 callUnHighlightRiver(s);
231 }
232 }
233 if (columns != null) {
234 columns.redraw();
235 } 252 }
236 } 253 }
237 }); 254 });
238 } 255 }
239 256
240 if (module != null) { 257 if (module != null) {
241 getModuleSelection().setRivers(rivers); 258 getModuleSelection().setRivers(riverList);
242 } 259 }
243 label.setWidth(50); 260 label.setWidth(50);
244 261
245 layout.addMember(label); 262 layout.addMember(label);
246 columns.addMember(formLayout1); 263 columns.addMember(formLayout1);
268 } 285 }
269 } 286 }
270 287
271 private native void createCallback() /*-{ 288 private native void createCallback() /*-{
272 $wnd.highlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::highlightCallback(Ljava/lang/String;); 289 $wnd.highlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::highlightCallback(Ljava/lang/String;);
290 $wnd.unHighlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::unHighlightCallback(Ljava/lang/String;);
273 $wnd.selectRiver = @org.dive4elements.river.client.client.ui.LinkSelection::selectCallback(Ljava/lang/String;); 291 $wnd.selectRiver = @org.dive4elements.river.client.client.ui.LinkSelection::selectCallback(Ljava/lang/String;);
274 $wnd.availableRiver = @org.dive4elements.river.client.client.ui.LinkSelection::availableRiver(Ljava/lang/String;); 292 $wnd.availableRiver = @org.dive4elements.river.client.client.ui.LinkSelection::availableRiver(Ljava/lang/String;);
275 }-*/; 293 }-*/;
276 294
277 private static void highlightCallback(String name) { 295 private static void highlightCallback(String name) {
278 for (Map.Entry<String, LinkItem> entry: rivers.entrySet()) { 296 if (riverHighlight.containsKey(name)) {
279 String s = entry.getKey(); 297 riverHighlight.get(name).setVisible(true);
280 LinkItem item = entry.getValue(); 298 if(selected != null && !selected.equals(name)) {
281 item.setCellStyle(s.equals(name) ? "riverLinkHighlight" : "formCell"); 299 riverHighlight.get(selected).setVisible(false);
282 } 300 }
283 if (columns != null) { 301 selected = name;
284 columns.redraw(); 302 }
303 }
304
305 private static void unHighlightCallback(String name) {
306 if (riverHighlight.containsKey(name)) {
307 riverHighlight.get(name).setVisible(false);
308 selected = null;
285 } 309 }
286 } 310 }
287 311
288 private static boolean availableRiver(String river) { 312 private static boolean availableRiver(String river) {
289 LinkItem ri = rivers.get(river); 313 HLayout row = riverList.get(river);
290 return ri != null && ri.isVisible(); 314 return row != null && row.isVisible();
291 } 315 }
292 316
293 private static void selectCallback(String name) { 317 private static void selectCallback(String name) {
294 if (availableRiver(name)) { 318 if (availableRiver(name)) {
295 trigger.trigger(name); 319 trigger.trigger(name);
301 }-*/; 325 }-*/;
302 326
303 private native void callUnHighlightRiver(String name) /*-{ 327 private native void callUnHighlightRiver(String name) /*-{
304 $wnd.unHighlight(name); 328 $wnd.unHighlight(name);
305 }-*/; 329 }-*/;
330
331
332 @Override
333 public void onVisibilityChanged(VisibilityChangedEvent event) {
334 for (Map.Entry<String, Img> entry: riverHighlight.entrySet()) {
335 entry.getValue().setVisible(false);
336 callUnHighlightRiver(entry.getKey());
337 }
338 selected = null;
339 }
306 } 340 }
307 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 : 341 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :

http://dive4elements.wald.intevation.org