changeset 5815:2aabd9752d5e interaktive-karte

Initial interaction model for riverselection on image map.
author Raimund Renkert <rrenkert@intevation.de>
date Wed, 24 Apr 2013 15:14:56 +0200
parents f145a0ce38f2
children 4126ff35beb8
files flys-client/src/main/java/de/intevation/flys/client/client/ui/LinkSelection.java flys-client/src/main/java/de/intevation/flys/client/client/ui/MapSelection.java flys-client/src/main/java/de/intevation/flys/client/client/ui/ModuleSelection.java flys-client/src/main/webapp/FLYS.css flys-client/src/main/webapp/images/FLYS_Karte.png
diffstat 5 files changed, 180 insertions(+), 16 deletions(-) [+]
line wrap: on
line diff
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/LinkSelection.java	Wed Apr 24 15:13:09 2013 +0200
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/LinkSelection.java	Wed Apr 24 15:14:56 2013 +0200
@@ -1,15 +1,20 @@
 package de.intevation.flys.client.client.ui;
 
+import java.util.HashMap;
+import java.util.LinkedHashMap;
+import java.util.Map;
+
 import com.google.gwt.core.client.GWT;
-
 import com.smartgwt.client.types.VerticalAlignment;
 import com.smartgwt.client.widgets.Canvas;
-import com.smartgwt.client.widgets.Img;
+import com.smartgwt.client.widgets.HTMLPane;
 import com.smartgwt.client.widgets.Label;
 import com.smartgwt.client.widgets.form.DynamicForm;
 import com.smartgwt.client.widgets.form.fields.LinkItem;
 import com.smartgwt.client.widgets.form.fields.events.ClickEvent;
 import com.smartgwt.client.widgets.form.fields.events.ClickHandler;
+import com.smartgwt.client.widgets.form.fields.events.ItemHoverEvent;
+import com.smartgwt.client.widgets.form.fields.events.ItemHoverHandler;
 import com.smartgwt.client.widgets.layout.HLayout;
 import com.smartgwt.client.widgets.layout.VLayout;
 
@@ -39,6 +44,35 @@
     /** The selected river*/
     protected Data river;
 
+    private static Map<String, LinkItem> rivers;
+
+    private static Trigger trigger;
+
+    private Canvas module;
+
+    private class Trigger {
+
+        private LinkSelection ls;
+
+        public Trigger(LinkSelection ls) {
+            this.ls = ls;
+            // TODO Auto-generated constructor stub
+        }
+
+        public void trigger(String name) {
+            DataItem item = new DefaultDataItem(
+                name,
+                null,
+                name);
+
+            river = new DefaultData(
+                "river",
+                null,
+                null,
+                new DataItem [] {item});
+            this.ls.fireStepForwardEvent (new StepForwardEvent (getData()));
+        }
+    }
     /**
      * This method currently returns a
      * {@link com.smartgwt.client.widgets.form.DynamicForm} that contains all
@@ -50,13 +84,19 @@
      */
     @Override
     public Canvas create(DataList data) {
+        trigger = new Trigger(this);
+        createCallback();
+        rivers = new HashMap<String, LinkItem>();
         VLayout v = new VLayout();
         v.setMembersMargin(10);
         v.setAlign(VerticalAlignment.TOP);
         if (data.getState() == null) {
-            Canvas module = super.createWidget(data);
+            module = super.createWidget(data);
             v.addMember(module);
         }
+        else {
+            module = null;
+        }
         Canvas content = createWidget(data);
         v.addMember(content);
 
@@ -113,27 +153,49 @@
         VLayout layout   = new VLayout();
         layout.setAlign(VerticalAlignment.TOP);
         layout.setHeight(25);
-
-        VLayout formLayout = new VLayout();
+        HLayout colums = new HLayout();
+        VLayout formLayout1 = new VLayout();
+        VLayout formLayout2 = new VLayout();
 
-        formLayout.setLayoutLeftMargin(60);
+        formLayout1.setLayoutLeftMargin(60);
+
         int size = data.size();
-
         for (int i = 0; i < size; i++) {
             Data d = data.get(i);
 
             Label label = new Label(d.getDescription());
             label.setValign(VerticalAlignment.TOP);
             label.setHeight(20);
+            label.setWidth(400);
 
+            LinkedHashMap<String, String> it = new LinkedHashMap<String, String>();
+
+            boolean  defaultSet = false;
+            boolean  first      = true;
+
+            DataItem def      = d.getDefault();
+            String   defValue = def != null ? def.getStringValue() : null;
+
+            if (defValue != null && defValue.length() > 0) {
+                defaultSet = true;
+            }
+
+            int counter = 0;
             for (DataItem item: d.getItems()) {
                 LinkItem link = new LinkItem("river");
                 link.setLinkTitle(item.getLabel());
                 link.setTarget(item.getStringValue());
                 link.setShowTitle(false);
                 DynamicForm f = new DynamicForm();
+                rivers.put(item.getStringValue(), link);
                 f.setItems(link);
-                formLayout.addMember(f);
+                if (counter < d.getItems().length/2) {
+                    formLayout1.addMember(f);
+                }
+                else {
+                    formLayout2.addMember(f);
+                }
+                counter++;
                 link.addClickHandler(new ClickHandler() {
                     @Override
                     public void onClick(ClickEvent event) {
@@ -141,7 +203,6 @@
                             ((LinkItem)event.getItem()).getLinkTitle(),
                             null,
                             ((LinkItem)event.getItem()).getLinkTitle());
-
                             river = new DefaultData(
                                 "river",
                                 null,
@@ -150,19 +211,38 @@
                         fireStepForwardEvent (new StepForwardEvent (getData()));
                     }
                 });
+                link.addItemHoverHandler(new ItemHoverHandler() {
+                    @Override
+                    public void onItemHover(ItemHoverEvent event) {
+                        GWT.log(((LinkItem)event.getItem()).getLinkTitle());
+                        String river = ((LinkItem)event.getItem()).getLinkTitle();
+                        for (String s : rivers.keySet()) {
+                            LinkItem item = rivers.get(s);
+                            if (item.getLinkTitle().equals(s)) {
+                                item.setCellStyle("riverLinkHighlight");
+                            }
+                            else {
+                                item.setCellStyle("formCell");
+                            }
+                        }
+                        callHighlightRiver(river);
+                    }
+                });
+            }
 
+            if (module != null) {
+                getModuleSelection().setRivers(rivers);
             }
             label.setWidth(50);
-
             layout.addMember(label);
-            layout.addMember(formLayout);
+            colums.addMember(formLayout1);
+            colums.addMember(formLayout2);
+            layout.addMember(colums);
         }
-        layout.setAlign(VerticalAlignment.TOP);
-
-        String baseUrl = GWT.getHostPageBaseURL();
-        Img map = new Img(baseUrl + messages.riverMap(), 494, 582);
+        layout.addMember(getNextButton());
+        HTMLPane map = new HTMLPane();
+        map.setContentsURL("images/FLYS_Karte_interactive.html");
         helperContainer.addMember(map);
-
         return layout;
     }
 
@@ -170,6 +250,7 @@
     @Override
     protected Data[] getData() {
         Data[] module = super.getData();
+
         if (module != null) {
             return new Data[] {module[0], river};
         }
@@ -177,5 +258,33 @@
             return new Data[] {river};
         }
     }
+
+    private native void createCallback() /*-{
+        $wnd.highlightRiver = @de.intevation.flys.client.client.ui.LinkSelection::highlightCallback(Ljava/lang/String;);
+        $wnd.selectRiver = @de.intevation.flys.client.client.ui.LinkSelection::selectCallback(Ljava/lang/String;);
+    }-*/;
+
+    private static void highlightCallback(String name) {
+        for (String s : rivers.keySet()) {
+            if (s.equals(name)) {
+                LinkItem item = rivers.get(name);
+                item.setCellStyle("riverLinkHighlight");
+                item.redraw();
+            }
+            else {
+                LinkItem item = rivers.get(s);
+                item.setCellStyle("formCell");
+                item.redraw();
+            }
+        }
+    }
+
+    private static void selectCallback(String name) {
+        trigger.trigger(name);
+    }
+
+    private native void callHighlightRiver(String name) /*-{
+        $wnd.highlight(name);
+    }-*/;
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/MapSelection.java	Wed Apr 24 15:13:09 2013 +0200
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/MapSelection.java	Wed Apr 24 15:14:56 2013 +0200
@@ -68,5 +68,9 @@
             return null;
         }
     }
+
+    public ModuleSelection getModuleSelection() {
+        return this.moduleSelection;
+    }
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/java/de/intevation/flys/client/client/ui/ModuleSelection.java	Wed Apr 24 15:13:09 2013 +0200
+++ b/flys-client/src/main/java/de/intevation/flys/client/client/ui/ModuleSelection.java	Wed Apr 24 15:14:56 2013 +0200
@@ -8,7 +8,10 @@
 import com.smartgwt.client.widgets.Canvas;
 import com.smartgwt.client.widgets.Label;
 import com.smartgwt.client.widgets.form.DynamicForm;
+import com.smartgwt.client.widgets.form.fields.LinkItem;
 import com.smartgwt.client.widgets.form.fields.RadioGroupItem;
+import com.smartgwt.client.widgets.form.fields.events.ChangeEvent;
+import com.smartgwt.client.widgets.form.fields.events.ChangeHandler;
 import com.smartgwt.client.widgets.layout.HLayout;
 import com.smartgwt.client.widgets.layout.VLayout;
 
@@ -23,7 +26,10 @@
 import de.intevation.flys.client.shared.model.DefaultDataItem;
 import de.intevation.flys.client.shared.model.Module;
 
+import java.util.ArrayList;
 import java.util.LinkedHashMap;
+import java.util.List;
+import java.util.Map;
 
 /**
  * The ModuleSelection combines the river selection and the module selection in
@@ -37,6 +43,9 @@
 
     private static final long serialVersionUID = -5634831815175543328L;
 
+    private List<String> fixRivers;
+    private List<String> minfoRivers;
+
     /** The message class that provides i18n strings.*/
     protected FLYSConstants MESSAGES = GWT.create(FLYSConstants.class);
 
@@ -46,6 +55,9 @@
     /** */
     protected Module[] modules;
 
+    /** */
+    protected Map<String, LinkItem> rivers;
+
     /** The ModuleService used to retrieve the available modules of a user.*/
     protected ModuleServiceAsync moduleService = GWT.create(ModuleService.class);
 
@@ -54,6 +66,18 @@
      * The default constructor.
      */
     public ModuleSelection() {
+        rivers = null;
+        //TODO: put all the rivers into a config file, or something.
+        fixRivers = new ArrayList();
+        fixRivers.add("Rhein");
+        fixRivers.add("Elbe");
+        fixRivers.add("Donau");
+
+        minfoRivers = new ArrayList<String>();
+        minfoRivers.add("Elbe");
+        minfoRivers.add("Rhein");
+        minfoRivers.add("Oder");
+
         readModules();
     }
 
@@ -134,6 +158,25 @@
 
         radio = new RadioGroupItem("plugin");
 
+        radio.addChangeHandler(new ChangeHandler() {
+            @Override
+            public void onChange(ChangeEvent event) {
+                String selected = (String)event.getValue();
+                if (!rivers.isEmpty()) {
+                    for (Map.Entry<String, LinkItem> s: rivers.entrySet()) {
+                        if (selected.equals("minfo") && !minfoRivers.contains(s.getKey())) {
+                            s.getValue().hide();
+                        }
+                        else if (selected.equals("fixanalysis") && !fixRivers.contains(s.getKey())) {
+                            s.getValue().hide();
+                        }
+                        else {
+                            s.getValue().show();
+                        }
+                    }
+                }
+            }
+        });
         label.setWidth(50);
         label.setHeight(25);
 
@@ -172,5 +215,9 @@
 
         return new Data[] {data};
     }
+    
+    public void setRivers(Map<String, LinkItem> rivers) {
+        this.rivers = rivers;
+    }
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
--- a/flys-client/src/main/webapp/FLYS.css	Wed Apr 24 15:13:09 2013 +0200
+++ b/flys-client/src/main/webapp/FLYS.css	Wed Apr 24 15:14:56 2013 +0200
@@ -240,3 +240,7 @@
     bottom: 1em !important;
     font-size: 12px !important;
 }
+
+.riverLinkHighlight {
+    background: #B7D431;
+}
Binary file flys-client/src/main/webapp/images/FLYS_Karte.png has changed

http://dive4elements.wald.intevation.org