Mercurial > dive4elements > river
changeset 5928:34392dc16546
Implemented interaction design in project startup page.
| author | Raimund Renkert <rrenkert@intevation.de> |
|---|---|
| date | Wed, 08 May 2013 16:34:45 +0200 |
| parents | d53e39372a25 |
| children | 4d526e313fa0 |
| files | gwt-client/src/main/java/org/dive4elements/river/client/client/ui/LinkSelection.java gwt-client/src/main/java/org/dive4elements/river/client/client/ui/MapSelection.java gwt-client/src/main/java/org/dive4elements/river/client/client/ui/ModuleSelection.java |
| diffstat | 3 files changed, 193 insertions(+), 10 deletions(-) [+] |
line wrap: on
line diff
--- 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); - } - layout.setAlign(VerticalAlignment.TOP); + colums.addMember(formLayout1); + colums.addMember(formLayout2); + layout.addMember(colums); - 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; } @@ -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 :
--- 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 :
--- 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 :