[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