[Dive4elements-commits] [PATCH 3 of 3] Implemented interaction design in project startup page

Wald Commits scm-commit at wald.intevation.org
Wed May 8 16:35:55 CEST 2013


# HG changeset patch
# User Raimund Renkert <rrenkert at intevation.de>
# Date 1368023685 -7200
# Node ID 34392dc16546189ae5269e805f2f762126ca0c56
# Parent  d53e39372a251a877d65a81c22e79b4d2d39fd1e
Implemented interaction design in project startup page.

diff -r d53e39372a25 -r 34392dc16546 gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java
--- a/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java	Wed May 08 16:32:23 2013 +0200
+++ b/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java	Wed May 08 16:34:45 2013 +0200
@@ -8,16 +8,23 @@
 
 package org.dive4elements.river.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.HTMLPane;
 import com.smartgwt.client.widgets.Img;
 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;
 
@@ -46,6 +53,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
@@ -58,13 +94,20 @@
      */
     @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);
 
@@ -121,10 +164,12 @@
         VLayout layout   = new VLayout();
         layout.setAlign(VerticalAlignment.TOP);
         layout.setHeight(25);
+        HLayout colums = new HLayout();
+        VLayout formLayout1 = new VLayout();
+        VLayout formLayout2 = new VLayout();
 
-        VLayout formLayout = new VLayout();
+        formLayout1.setLayoutLeftMargin(60);
 
-        formLayout.setLayoutLeftMargin(60);
         int size = data.size();
 
         for (int i = 0; i < size; i++) {
@@ -133,15 +178,35 @@
             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) {
@@ -158,19 +223,41 @@
                         fireStepForwardEvent (new StepForwardEvent (getData()));
                     }
                 });
+                link.addItemHoverHandler(new ItemHoverHandler() {
+                    @Override
+                    public void onItemHover(ItemHoverEvent event) {
+                        String river = ((LinkItem)event.getItem()).getLinkTitle();
+                        for (String s : rivers.keySet()) {
+                            LinkItem item = rivers.get(s);
+                            if (item.getLinkTitle().equals(river)) {
+                                item.setCellStyle("riverLinkHighlight");
+                            }
+                            else {
+                                item.setCellStyle("formCell");
+                                callUnHighlightRiver(s);
+                            }
+                        }
+                        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);
+        layout.addMember(getNextButton());
+        HTMLPane map = new HTMLPane();
+        map.setContentsURL("images/FLYS_Karte_interactive.html");
 
-        String baseUrl = GWT.getHostPageBaseURL();
-        Img map = new Img(baseUrl + messages.riverMap(), 494, 582);
         helperContainer.addMember(map);
-
         return layout;
     }
 
@@ -185,5 +272,47 @@
             return new Data[] {river};
         }
     }
+
+    private native void createCallback() /*-{
+        $wnd.highlightRiver = @org.dive4elements.river.client.client.ui.LinkSelection::highlightCallback(Ljava/lang/String;);
+        $wnd.selectRiver = @org.dive4elements.river.client.client.ui.LinkSelection::selectCallback(Ljava/lang/String;);
+        $wnd.availableRiver = @org.dive4elements.river.client.client.ui.LinkSelection::availableRiver(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 boolean availableRiver(String river) {
+        if (rivers.containsKey(river)) {
+            if(rivers.get(river).isVisible()) {
+                return true;
+            }
+        }
+        return false;
+    }
+
+    private static void selectCallback(String name) {
+        trigger.trigger(name);
+    }
+
+    private native void callHighlightRiver(String name) /*-{
+        $wnd.highlight(name);
+    }-*/;
+
+    private native void callUnHighlightRiver(String name) /*-{
+        $wnd.unHighlight(name);
+    }-*/;
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
diff -r d53e39372a25 -r 34392dc16546 gwt-client/src/main/java/org/dive4elements/river/client/client/ui/MapSelection.java
--- a/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/MapSelection.java	Wed May 08 16:32:23 2013 +0200
+++ b/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/MapSelection.java	Wed May 08 16:34:45 2013 +0200
@@ -76,5 +76,9 @@
             return null;
         }
     }
+
+    public ModuleSelection getModuleSelection() {
+        return this.moduleSelection;
+    }
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :
diff -r d53e39372a25 -r 34392dc16546 gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java
--- a/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java	Wed May 08 16:32:23 2013 +0200
+++ b/gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java	Wed May 08 16:34:45 2013 +0200
@@ -16,7 +16,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;
 
@@ -31,7 +34,10 @@
 import org.dive4elements.river.client.shared.model.DefaultDataItem;
 import org.dive4elements.river.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
@@ -57,11 +63,26 @@
     /** The ModuleService used to retrieve the available modules of a user.*/
     protected ModuleServiceAsync moduleService = GWT.create(ModuleService.class);
 
+    private List<String> fixRivers;
+    private List<String> minfoRivers;
+    protected Map<String, LinkItem> rivers;
 
     /**
      * The default constructor.
      */
     public ModuleSelection() {
+        rivers = null;
+        //TODO: put all the rivers into a config file, or something.
+        fixRivers = new ArrayList<String>();
+        fixRivers.add("Rhein");
+        fixRivers.add("Elbe");
+        fixRivers.add("Donau");
+
+        minfoRivers = new ArrayList<String>();
+        minfoRivers.add("Elbe");
+        minfoRivers.add("Rhein");
+        minfoRivers.add("Oder");
+
         readModules();
     }
 
@@ -141,6 +162,27 @@
         DynamicForm form = new DynamicForm();
 
         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();
+                            s.getValue().setCellStyle("formCell");
+                        }
+                        callUnHighlightRiver(s.getKey());
+                    }
+                }
+            }
+        });
 
         label.setWidth(50);
         label.setHeight(25);
@@ -180,5 +222,13 @@
 
         return new Data[] {data};
     }
+
+    public void setRivers(Map<String, LinkItem> rivers) {
+        this.rivers = rivers;
+    }
+
+    private native void callUnHighlightRiver(String name) /*-{
+        $wnd.unHighlight(name);
+    }-*/;
 }
 // vim:set ts=4 sw=4 si et sta sts=4 fenc=utf8 :


More information about the Dive4elements-commits mailing list