CHANGELOG.md

@@ -15,6 +15,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - [#22042] Implemented the public access
 - [#22040] Revisited the "Abstract and Relazione di Scavo"
 - [#22041] Files have been ported to FileSet model
+- [#21991] Implement the Layer Switcher
 
 ## [v1.2.0-SNAPSHOT] - 2021-07-19
 

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/GeoportalDataViewer.java

@@ -26,6 +26,7 @@ import org.gcube.portlets.user.geoportaldataviewer.client.events.ZoomOutOverMini
 import org.gcube.portlets.user.geoportaldataviewer.client.events.ZoomOutOverMinimumEventHandler;
 import org.gcube.portlets.user.geoportaldataviewer.client.gis.ExtentWrapped;
 import org.gcube.portlets.user.geoportaldataviewer.client.gis.MapUtils;
+import org.gcube.portlets.user.geoportaldataviewer.client.gis.OpenLayerOSM;
 import org.gcube.portlets.user.geoportaldataviewer.client.ui.GeonaDataViewMainPanel;
 import org.gcube.portlets.user.geoportaldataviewer.client.util.URLUtil;
 import org.gcube.portlets.user.geoportaldataviewer.shared.gis.GeoQuery;
@@ -367,24 +368,28 @@ public class GeoportalDataViewer implements EntryPoint {
 
 				DO_LAYER_ACTION doAction = doLayerActionEvent.getDoAction();
 				GWT.log("event: "+doAction);
-				GWT.log("layer source: "+doLayerActionEvent.getLayerSource().getName());
+				GWT.log("layer source: "+doLayerActionEvent.getLayerItem().getName());
-				GWT.log("layer target: "+doLayerActionEvent.getLayerTarget());
+				OpenLayerOSM olMap = olMapMng.getOLOSMMap();
 				
 				switch (doAction) {
 				case OPACITY:
 					GWT.log("opacity: "+doLayerActionEvent.getOpacity());
-					olMapMng.getOLOSMMap().setWMSDetailLayerOpacity(doLayerActionEvent.getLayerSource(),
+					olMap.setWMSDetailLayerOpacity(doLayerActionEvent.getLayerItem(),
 							doLayerActionEvent.getOpacity());
 					break;
 
 				case SWAP:
-
+					org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerItem sourceLayerSwap = doLayerActionEvent.getSourceLayerSwap();
+					org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerItem target = doLayerActionEvent.getTargetLayerSwap();
+					GWT.log("SWAPPING source "+sourceLayerSwap.getName() +", target: "+target.getName());
+					olMap.swapDetailsLayers(sourceLayerSwap.getName(), target.getName());
 					break;
 
 				case VISIBILITY:
 					GWT.log("visibility: "+doLayerActionEvent.getVisibility());
-					olMapMng.getOLOSMMap().setWMSDetailLayerVisible(doLayerActionEvent.getLayerSource(),
+					olMap.setWMSDetailLayerVisible(doLayerActionEvent.getLayerItem(),
 							doLayerActionEvent.getVisibility());
+					
 					break;
 
 				default:

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/LayerManager.java

@@ -808,16 +808,6 @@ public class LayerManager {
 
 	}
 
-	/**
-	 * Checks if is layer visible.
-	 *
-	 * @param layerItem the layer item
-	 * @return true, if is layer visible
-	 */
-	public boolean isLayerVisible(LayerItem layerItem) {
-		return olMap.isLayerVisible(layerItem.getName());
-	}
-
 	/**
 	 * Sets the ol map.
 	 *

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/OLMapManager.java

@@ -38,7 +38,7 @@ public class OLMapManager {
 	private ol.Extent dragEndExtent = null;
 	public static final int QUERY_MIN_ZOOM_LEVEL = 13;
 	public static final Double LAYER_DETAIL_MIN_RESOLUTION = 0.01;
-	public static final Double LAYER_DETAIL_MAX_RESOLUTION = 13.0;
+	public static final Double LAYER_DETAIL_MAX_RESOLUTION = 13.2;
 	
 
 	/**

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/events/DoActionOnDetailLayersEvent.java

@@ -9,7 +9,7 @@ import com.google.gwt.event.shared.GwtEvent;
  *
  * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
  * 
- *         Oct 8, 2021
+ *         Oct 12, 2021
  */
 public class DoActionOnDetailLayersEvent extends GwtEvent<DoActionOnDetailLayersEventHandler> {
 	public static Type<DoActionOnDetailLayersEventHandler> TYPE = new Type<DoActionOnDetailLayersEventHandler>();
@@ -19,35 +19,56 @@ public class DoActionOnDetailLayersEvent extends GwtEvent<DoActionOnDetailLayers
 	 *
 	 * @author Francesco Mangiacrapa at ISTI-CNR francesco.mangiacrapa@isti.cnr.it
 	 * 
-	 *         Oct 8, 2021
+	 *         Oct 12, 2021
 	 */
 	public static enum DO_LAYER_ACTION {
 		VISIBILITY, SWAP, OPACITY
 	}
 
 	private DO_LAYER_ACTION doAction;
-	private LayerItem layerSource;
+	private LayerItem layerItem;
-	private LayerItem layerTarget;
+	private double opacity;
-	private int opacity;
 	private boolean visibility;
+	private LayerItem sourceLayerSwap;
+	private LayerItem targetLayerSwap;
 
 	/**
-	 * Instantiates a new added layer to map event.
+	 * Instantiates a new do action on detail layers event.
 	 *
 	 * @param action    the action
-	 * @param layerSource the layer source
+	 * @param layerItem the layer item
-	 * @param layerTarget the layer target
 	 */
-	public DoActionOnDetailLayersEvent(DO_LAYER_ACTION action, LayerItem layerSource, LayerItem layerTarget) {
+	public DoActionOnDetailLayersEvent(DO_LAYER_ACTION action, LayerItem layerItem) {
-		this.layerSource = layerSource;
+		this.layerItem = layerItem;
-		this.layerTarget = layerTarget;
 		this.doAction = action;
 	}
 
-	public void setOpacity(int opacity) {
+	/**
+	 * Sets the swap layers.
+	 *
+	 * @param sourceLayerItem the source layer item
+	 * @param targetLayerItem the target layer item
+	 */
+	public void setSwapLayers(LayerItem sourceLayerItem, LayerItem targetLayerItem) {
+		this.sourceLayerSwap = sourceLayerItem;
+		this.targetLayerSwap = targetLayerItem;
+
+	}
+
+	/**
+	 * Sets the opacity.
+	 *
+	 * @param opacity the new opacity
+	 */
+	public void setOpacity(double opacity) {
 		this.opacity = opacity;
 	}
 
+	/**
+	 * Sets the visibility.
+	 *
+	 * @param visibility the new visibility
+	 */
 	public void setVisibility(boolean visibility) {
 		this.visibility = visibility;
 	}
@@ -73,43 +94,82 @@ public class DoActionOnDetailLayersEvent extends GwtEvent<DoActionOnDetailLayers
 
 	}
 
+	/**
+	 * Gets the do action.
+	 *
+	 * @return the do action
+	 */
 	public DO_LAYER_ACTION getDoAction() {
 		return doAction;
 	}
 
-	public LayerItem getLayerSource() {
+	/**
-		return layerSource;
+	 * Gets the layer item.
+	 *
+	 * @return the layer item
+	 */
+	public LayerItem getLayerItem() {
+		return layerItem;
 	}
 
-	public LayerItem getLayerTarget() {
+	/**
-		return layerTarget;
+	 * Gets the source layer swap.
+	 *
+	 * @return the source layer swap
+	 */
+	public LayerItem getSourceLayerSwap() {
+		return sourceLayerSwap;
 	}
 
-	public int getOpacity() {
+	/**
+	 * Gets the target layer swap.
+	 *
+	 * @return the target layer swap
+	 */
+	public LayerItem getTargetLayerSwap() {
+		return targetLayerSwap;
+	}
+
+	/**
+	 * Gets the opacity.
+	 *
+	 * @return the opacity
+	 */
+	public double getOpacity() {
 		return opacity;
 	}
 
+	/**
+	 * Gets the visibility.
+	 *
+	 * @return the visibility
+	 */
 	public boolean getVisibility() {
 		return visibility;
 	}
 
+	/**
+	 * To string.
+	 *
+	 * @return the string
+	 */
 	@Override
 	public String toString() {
 		StringBuilder builder = new StringBuilder();
 		builder.append("DoActionOnDetailLayersEvent [doAction=");
 		builder.append(doAction);
-		builder.append(", layerSource=");
+		builder.append(", layerItem=");
-		builder.append(layerSource);
+		builder.append(layerItem);
-		builder.append(", layerTarget=");
-		builder.append(layerTarget);
 		builder.append(", opacity=");
 		builder.append(opacity);
 		builder.append(", visibility=");
 		builder.append(visibility);
+		builder.append(", sourceLayerSwap=");
+		builder.append(sourceLayerSwap);
+		builder.append(", targetLayerSwap=");
+		builder.append(targetLayerSwap);
 		builder.append("]");
 		return builder.toString();
 	}
 
-	
-
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/gis/OpenLayerOSM.java

@@ -1,8 +1,7 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.gis;
 
 import java.util.ArrayList;
-import java.util.HashMap;
+import java.util.LinkedHashMap;
-import java.util.List;
 
 import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants;
 import org.gcube.portlets.user.geoportaldataviewer.client.GeoportalDataViewerConstants.MAP_PROJECTION;
@@ -131,11 +130,11 @@ public abstract class OpenLayerOSM {
 
 	private boolean isQueryPointActive;
 
-	private HashMap<String, Image> wmsDetailsLayerMap;
+	private LinkedHashMap<String, Image> wmsDetailsLayerMap;
 
 	private Integer[] wmsDetailsLayerZIndex = new Integer[100];
 
-	private HashMap<String, Image> wmsLayerMap;
+	private LinkedHashMap<String, Image> wmsLayerMap;
 
 	/**
 	 * Instantiates a new open layer OSM.
@@ -341,7 +340,7 @@ public abstract class OpenLayerOSM {
 	public void addWMSLayer(LayerItem layerItem) {
 
 		if (wmsLayerMap == null)
-			wmsLayerMap = new HashMap<String, Image>();
+			wmsLayerMap = new LinkedHashMap<String, Image>();
 
 		String key = layerItem.getName();
 
@@ -391,7 +390,7 @@ public abstract class OpenLayerOSM {
 	public void addWMSDetailLayer(LayerItem layerItem) {
 
 		if (wmsDetailsLayerMap == null)
-			wmsDetailsLayerMap = new HashMap<String, Image>();
+			wmsDetailsLayerMap = new LinkedHashMap<String, Image>();
 
 		String key = layerItem.getName();
 
@@ -577,55 +576,6 @@ public abstract class OpenLayerOSM {
 		return overlay;
 	}
 
-	/**
-	 * Checks if is layer visible.
-	 *
-	 * @param layerName the layer name
-	 * @return true, if is layer visible
-	 */
-	public boolean isLayerVisible(String layerName) {
-
-		Collection<Base> layers = map.getLayers();
-
-		if (layers != null) {
-			Base[] layersArr = layers.getArray();
-			for (int i = 0; i < layersArr.length; i++) {
-				Base layer = layersArr[i];
-				String theLayerName = (String) layer.get("name");
-				GWT.log("The Layer name is: " + theLayerName);
-				if (theLayerName != null && theLayerName.equals(layerName))
-					return true;
-			}
-		}
-
-		return false;
-	}
-
-	/**
-	 * Gets the layer property.
-	 *
-	 * @param layerName the layer name
-	 * @param property  the property
-	 * @return the layer property
-	 */
-	public String getLayerProperty(String layerName, String property) {
-
-		Collection<Base> layers = map.getLayers();
-
-		if (layers != null) {
-			Base[] layersArr = layers.getArray();
-			for (int i = 0; i < layersArr.length; i++) {
-				Base layer = layersArr[i];
-				String theLayerName = (String) layer.get("name");
-				GWT.log("The Layer name is: " + layerName);
-				if (theLayerName != null && theLayerName.equals(layerName))
-					return layer.get(property);
-			}
-		}
-
-		return null;
-	}
-
 	/**
 	 * Gets the projection code.
 	 *
@@ -724,9 +674,9 @@ public abstract class OpenLayerOSM {
 	 *
 	 * @return the layers from map
 	 */
-	public List<String> getLayersFromMap() {
+	public ArrayList<String> getLayersFromMap() {
 		Collection<Base> layers = map.getLayers();
-		List<String> layerNames = null;
+		ArrayList<String> layerNames = null;
 		if (layers != null) {
 			Base[] layersArr = layers.getArray();
 			layerNames = new ArrayList<String>(layersArr.length);
@@ -759,7 +709,7 @@ public abstract class OpenLayerOSM {
 	 *
 	 * @return the wms details layer map
 	 */
-	public java.util.Map<String, Image> getWmsDetailsLayerMap() {
+	public LinkedHashMap<String, Image> getWmsDetailsLayerMap() {
 		return wmsDetailsLayerMap;
 	}
 
@@ -768,34 +718,60 @@ public abstract class OpenLayerOSM {
 	 *
 	 * @return the wms layer map
 	 */
-	public HashMap<String, Image> getWmsLayerMap() {
+	public LinkedHashMap<String, Image> getWmsLayerMap() {
 		return wmsLayerMap;
 	}
 
+	/**
+	 * Sets the WMS detail layer visible.
+	 *
+	 * @param layerItem the layer item
+	 * @param visible   the visible
+	 */
 	public void setWMSDetailLayerVisible(LayerItem layerItem, boolean visible) {
 		String key = layerItem.getName();
-		GWT.log("current layers: "+wmsDetailsLayerMap.keySet());
 		Image layer = wmsDetailsLayerMap.get(key);
 		layer.setVisible(visible);
 	}
 
-	public void setWMSDetailLayerOpacity(LayerItem layerItem, int opacity) {
+	/**
+	 * Sets the WMS detail layer opacity.
+	 *
+	 * @param layerItem the layer item
+	 * @param opacity   the opacity
+	 */
+	public void setWMSDetailLayerOpacity(LayerItem layerItem, double opacity) {
 		String key = layerItem.getName();
 		Image layer = wmsDetailsLayerMap.get(key);
 		layer.setOpacity(opacity);
 	}
 
-	public void swapLayers(LayerItem layerItem, LayerItem layerItem2) {
+	/**
-		String key1 = layerItem.getName();
+	 * Swap details layers.
-		Image layer1 = wmsDetailsLayerMap.get(key1);
+	 *
-
+	 * @param layerSource the source index
-		String key2 = layerItem.getName();
+	 * @param layerTarget the target index
-		Image layer2 = wmsDetailsLayerMap.get(key2);
+	 */
+	public void swapDetailsLayers(String layerSource, String layerTarget) {
+		Image layer1 = wmsDetailsLayerMap.get(layerSource);
+		Image layer2 = wmsDetailsLayerMap.get(layerTarget);
 
 		int zIndex1 = layer1.getZIndex();
 		int zIndex2 = layer2.getZIndex();
 		layer1.setZIndex(zIndex2);
 		layer2.setZIndex(zIndex1);
+		
+	}
+
+	/**
+	 * Gets the layer by index.
+	 *
+	 * @param map   the map
+	 * @param index the index
+	 * @return the layer by index
+	 */
+	private Image getLayerByIndex(LinkedHashMap<String, Image> map, int index) {
+		return map.get((map.keySet().toArray())[index]);
 	}
 
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/DragDropLayer.java

@@ -34,11 +34,13 @@ public class DragDropLayer extends FlowPanel {
 	final boolean droppable;
 	private Label label;
 	private CheckBox checkBoxVisibility = new CheckBox();
-	private Button button = new Button();
+	private Button draggableButton = new Button();
 	private HandlerManager applicationBus;
+	private LayerItem layerItem;
 
 	public DragDropLayer(HandlerManager applicationBus, LayerItem layer, boolean draggable, boolean droppable) {
 		this.applicationBus = applicationBus;
+		this.layerItem = layer;
 
 		int layerSep = layer.getName().lastIndexOf(":");
 		String layerName = layerSep > 0 && (layerSep + 1) < layer.getName().length()
@@ -61,15 +63,16 @@ public class DragDropLayer extends FlowPanel {
 		this.droppable = droppable;
 
 		if (droppable) {
-			button.addStyleName("droppable");
+			draggableButton.addStyleName("droppable");
 		} else if (draggable) {
-			button.addStyleName("draggable");
+			draggableButton.addStyleName("draggable");
 		}
 
-		RangeSlider rs = new RangeSlider();
+		RangeSlider rs = new RangeSlider(applicationBus, layer);
 		rs.setWidth("250px");
 		FlexTable ft = new FlexTable();
-		ft.setWidget(0, 0, button);
+		ft.setWidget(0, 0, draggableButton);
+		draggableButton.setTitle("Drag me to change my position");
 		checkBoxVisibility.getElement().getStyle().setMarginLeft(10, Unit.PX);
 		checkBoxVisibility.setValue(true);
 
@@ -78,14 +81,13 @@ public class DragDropLayer extends FlowPanel {
 		ft.setWidget(0, 2, label);
 		ft.setWidget(1, 2, new SimplePanel(rs));
 		add(ft);
-		button.setIcon(IconType.MOVE);
+		draggableButton.setIcon(IconType.MOVE);
 
 		checkBoxVisibility.addValueChangeHandler(new ValueChangeHandler<Boolean>() {
 
 			@Override
 			public void onValueChange(ValueChangeEvent<Boolean> event) {
-				DoActionOnDetailLayersEvent dae = new DoActionOnDetailLayersEvent(DO_LAYER_ACTION.VISIBILITY, layer,
+				DoActionOnDetailLayersEvent dae = new DoActionOnDetailLayersEvent(DO_LAYER_ACTION.VISIBILITY, layer);
-						null);
 				dae.setVisibility(checkBoxVisibility.getValue());
 				applicationBus.fireEvent(dae);
 
@@ -94,7 +96,7 @@ public class DragDropLayer extends FlowPanel {
 	}
 
 	private void initDrag() {
-		button.getElement().setDraggable(Element.DRAGGABLE_TRUE);
+		draggableButton.getElement().setDraggable(Element.DRAGGABLE_TRUE);
 
 		addDomHandler(new DragStartHandler() {
 
@@ -113,7 +115,7 @@ public class DragDropLayer extends FlowPanel {
 		addDomHandler(new DragOverHandler() {
 			@Override
 			public void onDragOver(DragOverEvent event) {
-				button.addStyleName("dropping-over");
+				draggableButton.addStyleName("dropping-over");
 				GWT.log("drag over");
 				draggingTarget = (DragDropLayer) event.getSource();
 			}
@@ -122,7 +124,7 @@ public class DragDropLayer extends FlowPanel {
 		addDomHandler(new DragLeaveHandler() {
 			@Override
 			public void onDragLeave(DragLeaveEvent event) {
-				button.removeStyleName("dropping-over");
+				draggableButton.removeStyleName("dropping-over");
 				GWT.log("drag leave");
 				// draggingTarget = (DragDropLayer) event.getSource();
 			}
@@ -134,17 +136,18 @@ public class DragDropLayer extends FlowPanel {
 				event.preventDefault();
 				Object dropTarget = event.getSource();
 				GWT.log("on drop");
-				button.removeStyleName("dropping-over");
+				draggableButton.removeStyleName("dropping-over");
 				if (dragging != null) {
-					Widget target = null;
 					Widget source = null;
+					Widget target = null;
 					FlowPanel tree = (FlowPanel) DragDropLayer.this.getParent();
 
 					source = dragging;
 					int sourceIndex = tree.getWidgetIndex(source);
 					int targetIndex = tree.getWidgetIndex(draggingTarget);
-					GWT.log("sourceIndex: " + sourceIndex);
+					
-					GWT.log("targetIndex: " + targetIndex);
+					GWT.log("sourceIndex: " + sourceIndex+", sourceItem: "+dragging.getLayerItem().getName());
+					GWT.log("targetIndex: " + targetIndex+", targetItem: "+draggingTarget.getLayerItem().getName());
 					if (sourceIndex != targetIndex && targetIndex > 0) {
 						tree.remove(source);
 						target = tree;
@@ -152,6 +155,10 @@ public class DragDropLayer extends FlowPanel {
 						if (source != null && target != null) {
 							tree.insert(source, targetIndex);
 							// target.setState(true);
+							DoActionOnDetailLayersEvent actionSwapLayers = new DoActionOnDetailLayersEvent(
+									DO_LAYER_ACTION.SWAP, layerItem);
+							actionSwapLayers.setSwapLayers(dragging.getLayerItem(), draggingTarget.getLayerItem());
+							applicationBus.fireEvent(actionSwapLayers);
 						}
 						dragging = null;
 					}
@@ -160,4 +167,8 @@ public class DragDropLayer extends FlowPanel {
 		}, DropEvent.getType());
 	}
 	
+	public LayerItem getLayerItem() {
+		return layerItem;
+	}
+
 }

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.java

@@ -1,9 +1,12 @@
 package org.gcube.portlets.user.geoportaldataviewer.client.ui.dandd;
 
+import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent;
+import org.gcube.portlets.user.geoportaldataviewer.client.events.DoActionOnDetailLayersEvent.DO_LAYER_ACTION;
+import org.gcube.portlets.user.geoportaldataviewer.shared.gis.LayerItem;
+
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.dom.client.Element;
-import com.google.gwt.event.dom.client.DragStartEvent;
+import com.google.gwt.event.shared.HandlerManager;
-import com.google.gwt.event.dom.client.DragStartHandler;
 import com.google.gwt.uibinder.client.UiBinder;
 import com.google.gwt.uibinder.client.UiField;
 import com.google.gwt.user.client.Event;
@@ -24,12 +27,25 @@ public class RangeSlider extends Composite {
 
 	private String sliderId;
 
-	public RangeSlider() {
+	private HandlerManager applicationBus;
+
+	private LayerItem layer;
+
+	public RangeSlider(HandlerManager applicationBus, LayerItem layer) {
+		this.applicationBus = applicationBus;
+		this.layer = layer;
 		initWidget(uiBinder.createAndBindUi(this));
-		String sliderId = "slider-" +Random.nextInt();
+		sliderId = "slider-" + Random.nextInt();
 		theSlider.addClassName("slider");
 		theSlider.setId(sliderId);
 		
+		theSlider.setTitle("Set opacity of "+layer.getName());
+
+		bindEvents();
+	}
+
+	private void bindEvents() {
+
 		Event.sinkEvents(theSlider, Event.ONMOUSEUP);
 		Event.setEventListener(theSlider, new EventListener() {
 
@@ -38,8 +54,14 @@ public class RangeSlider extends Composite {
 				System.out.println("ok");
 				if (Event.ONMOUSEUP == event.getTypeInt()) {
 					GWT.log("Event.ONMOUSEUP");
-	                GWT.log("obj"+theSlider.getPropertyObject("value"));
+					DoActionOnDetailLayersEvent actionChangeOpacity = new DoActionOnDetailLayersEvent(
-	                GWT.log("attr"+theSlider.getAttribute("value"));
+							DO_LAYER_ACTION.OPACITY, layer);
+					int value = Integer.parseInt((String) theSlider.getPropertyObject("value"));
+					GWT.log("opacity int value: "+value);
+					double opacity = (double) ((double) value/100);
+					GWT.log("opacity double value: "+opacity);
+					actionChangeOpacity.setOpacity(opacity);
+					applicationBus.fireEvent(actionChangeOpacity);
 				}
 
 			}

src/main/java/org/gcube/portlets/user/geoportaldataviewer/client/ui/dandd/RangeSlider.ui.xml

@@ -11,6 +11,6 @@
 	}
 	</ui:style>
 	<g:HTMLPanel addStyleNames="{style.slidecontainer}">
-		<input type="range" min="1" max="100" value="50" class="slider" ui:field="theSlider"></input>
+		<input type="range" min="1" max="100" value="100" class="slider" ui:field="theSlider"></input>
 	</g:HTMLPanel>
 </ui:UiBinder>