Mercurial > dive4elements > river
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 : |