1701: Gis Viewer App: should be updated

Task-Url: https://support.d4science.org/issues/1701

Added gwt-bootstrap dependency
Changed WMS Dialog to add WMS Layer
Removed old WmsDialog
Added WMS url validator to integrate ncWMS

git-svn-id: http://svn.research-infrastructures.eu/public/d4science/gcube/trunk/portlets/user/gis-viewer-app@121759 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Francesco Mangiacrapa 2015-12-10 16:21:37 +00:00
parent 3ce40bcb6e
commit f2998bfaba
8 changed files with 377 additions and 183 deletions

View File

@ -63,6 +63,13 @@
<scope>compile</scope>
</dependency>
<dependency>
<groupId>com.github.gwtbootstrap</groupId>
<artifactId>gwt-bootstrap</artifactId>
<version>2.3.2.0</version>
<scope>compile</scope>
</dependency>
<!-- GCUBE GIS VIEWER -->
<!-- <dependency> -->
<!-- <groupId>org.gcube.portlets.user</groupId> -->

View File

@ -22,6 +22,7 @@ import com.google.gwt.core.shared.GWT;
import com.google.gwt.user.client.Command;
import com.google.gwt.user.client.Timer;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.RootPanel;
/**
@ -29,7 +30,7 @@ import com.google.gwt.user.client.ui.RootPanel;
* @Oct 8, 2014
*
*/
public class ApplicationController implements WmsDialogHandler{
public class ApplicationController {
/**
*
@ -42,7 +43,9 @@ public class ApplicationController implements WmsDialogHandler{
private BaloonPanel balloonWMS;
private LayoutContainer lcWMS = new LayoutContainer();
private WmsRequestConverter wmsRequestConverter;
@SuppressWarnings("unused")
private final ApplicationController INSTANCE = this;
@SuppressWarnings("unused")
private RootPanel gwtRootPanel;
/**
*
@ -96,17 +99,13 @@ public class ApplicationController implements WmsDialogHandler{
@Override
protected void onExpand() {
super.onExpand();
if (gisViewerPanel!=null)
gisViewerPanel.updateOpenLayersSize();
// resizeBar.show();
}
@Override
protected void onCollapse() {
super.onCollapse();
// resizeBar.hide();
}
};
@ -147,16 +146,33 @@ public class ApplicationController implements WmsDialogHandler{
}
rootPanel.add(lcWMS);
lcWMS.setId("WMS");
Command cmd = new Command() {
@Override
public void execute() {
WmsDialog win = new WmsDialog(INSTANCE);
win.show();
final DialogBox box = new DialogBox(true);
box.setText("Add External WMS Layer");
box.getElement().getStyle().setZIndex(10000);
WmsForm form = new WmsForm() {
@Override
public void closeHandler() {
box.hide();
}
@Override
public void subtmitHandler(String title, String name, String wmsRequest) {
gisViewerPanel.addLayerByWms(title, name, wmsRequest, false, false);
box.hide();
}
};
box.setWidget(form);
// box.setSize("auto", "auto");
box.center();
}
};
@ -172,6 +188,7 @@ public class ApplicationController implements WmsDialogHandler{
* @param wmsRequest
* @return
*/
@SuppressWarnings("unused")
private String decodeURLWithParamDelimiter(String wmsRequest, String delimiter){
return wmsRequest.replaceAll(delimiter, "&");
}
@ -203,22 +220,6 @@ public class ApplicationController implements WmsDialogHandler{
return balloonWMS;
}
/* (non-Javadoc)
* @see org.gcube.portlets.user.gisviewerapp.client.WmsDialogHandler#addWmsLayer(java.lang.String, java.lang.String, java.lang.String)
*/
@Override
public void addWmsLayer(String displayName, String url) {
try {
wmsRequestConverter.parseRequest(url, displayName);
wmsRequestConverter.addRequestToGisViewer();
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
/**
* Safe function call on a component, which was rendered or not.
*

View File

@ -1,130 +0,0 @@
package org.gcube.portlets.user.gisviewerapp.client;
import com.extjs.gxt.ui.client.Style.Scroll;
import com.extjs.gxt.ui.client.event.BaseEvent;
import com.extjs.gxt.ui.client.event.ButtonEvent;
import com.extjs.gxt.ui.client.event.ComponentEvent;
import com.extjs.gxt.ui.client.event.Events;
import com.extjs.gxt.ui.client.event.KeyListener;
import com.extjs.gxt.ui.client.event.Listener;
import com.extjs.gxt.ui.client.event.SelectionListener;
import com.extjs.gxt.ui.client.widget.Dialog;
import com.extjs.gxt.ui.client.widget.MessageBox;
import com.extjs.gxt.ui.client.widget.VerticalPanel;
import com.extjs.gxt.ui.client.widget.button.Button;
import com.extjs.gxt.ui.client.widget.form.FormPanel;
import com.extjs.gxt.ui.client.widget.form.TextField;
import com.extjs.gxt.ui.client.widget.layout.FormData;
import com.google.gwt.event.dom.client.KeyCodes;
/**
*
* @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
* @Dec 2, 2014
*
*/
public class WmsDialog extends Dialog {
private static final String WMS_DIALOG_HEADING = "Add WMS Layer";
private TextField<String> displayName = new TextField<String>();
private TextField<String> url = new TextField<String>();
private WmsDialogHandler handler;
private FormData formData;
private FormPanel form;
/**
*
*/
public WmsDialog(WmsDialogHandler handler) {
super();
this.handler = handler;
this.setHeading(WMS_DIALOG_HEADING);
this.setButtons(Dialog.OK);
//dialog.setBodyStyleName("pad-text");
// this.setAutoWidth(true);
this.setModal(true);
this.setWidth(400);
this.setScrollMode(Scroll.AUTO);
this.setClosable(true);
this.setHideOnButtonClick(true);
this.addListener(Events.Close, new Listener<BaseEvent>() {
public void handleEvent(BaseEvent be) {
hide();
}
});
Button okButton = (Button)(this.getButtonBar().getItemByItemId("ok"));
okButton.removeAllListeners();
okButton.addSelectionListener(new SelectionListener<ButtonEvent>() {
@Override
public void componentSelected(ButtonEvent ce) {
submit();
}
});
// this.addListener(Events.clos, new Listener<BaseEvent>() {
// public void handleEvent(BaseEvent be) {
// hide();
// }
// });
KeyListener keyListener = new KeyListener(){
@Override
public void componentKeyDown(ComponentEvent event) {
super.componentKeyDown(event);
if (event.getKeyCode() == KeyCodes.KEY_ENTER)
submit();
}
};
VerticalPanel vp = new VerticalPanel();
// init title field
displayName = new TextField<String>();
displayName.setWidth(300);
displayName.setAllowBlank(true);
displayName.setFieldLabel("TITLE");
displayName.setEmptyText("Enter layer display title (optional)...");
displayName.addKeyListener(keyListener);
// init title field
url = new TextField<String>();
url.setWidth(300);
url.setAllowBlank(false);
url.setFieldLabel("Layer WMS URL");
url.setEmptyText("Enter layer WMS URL...");
url.addKeyListener(keyListener);
createForm();
}
/**
*
*/
private void createForm() {
formData = new FormData("-20");
form = new FormPanel();
// form.setHeading(WMS_DIALOG_HEADING);
form.setFrame(true);
form.setHeaderVisible(false);
form.add(displayName, formData);
form.add(url, formData);
displayName.setAllowBlank(true);
url.setAllowBlank(false);
this.add(form);
}
private void submit() {
String name = this.displayName.getValue();
String url = this.url.getValue();
if (url==null)
MessageBox.alert("Error", "Insert a valid WMS URL", null);
else {
handler.addWmsLayer(name, url);
this.hide();
}
}
}

View File

@ -1,18 +0,0 @@
package org.gcube.portlets.user.gisviewerapp.client;
/**
*
* @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
* @Nov 27, 2014
*
*/
public interface WmsDialogHandler {
/**
* @param displayTitle
* @param url
*/
void addWmsLayer(String displayTitle, String url);
}

View File

@ -0,0 +1,277 @@
/**
*
*/
package org.gcube.portlets.user.gisviewerapp.client;
import com.github.gwtbootstrap.client.ui.Alert;
import com.github.gwtbootstrap.client.ui.Button;
import com.github.gwtbootstrap.client.ui.ControlGroup;
import com.github.gwtbootstrap.client.ui.FluidRow;
import com.github.gwtbootstrap.client.ui.Form;
import com.github.gwtbootstrap.client.ui.TextBox;
import com.github.gwtbootstrap.client.ui.constants.AlertType;
import com.github.gwtbootstrap.client.ui.constants.ControlGroupType;
import com.google.gwt.core.client.GWT;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.event.dom.client.KeyCodes;
import com.google.gwt.event.dom.client.KeyDownEvent;
import com.google.gwt.event.dom.client.KeyDownHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HasHorizontalAlignment;
import com.google.gwt.user.client.ui.HorizontalPanel;
import com.google.gwt.user.client.ui.Widget;
/**
* The Class AbstractFormRelease.
*
* @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
* Feb 19, 2015
*/
public abstract class WmsForm extends Composite {
@UiField
TextBox input_WMS_URI;
@UiField
TextBox input_layer_name;
@UiField
TextBox input_layer_title;
@UiField
Button submit_add_layer;
@UiField
Button close_dialog;
@UiField
Form form_wms_add_layer;
@UiField
ControlGroup input_WMS_URI_group;
@UiField
ControlGroup input_layer_title_group;
@UiField
ControlGroup input_layer_name_group;
@UiField
FluidRow validator_field;
@UiField
HorizontalPanel hp_form_actions;
private Alert alertError = new Alert("Required Field");
private Alert alertSubmitResult = new Alert("");
private static AbstractFormReleaseUiBinder uiBinder = GWT.create(AbstractFormReleaseUiBinder.class);
private int width = 300;
/**
* Subtmit handler.
*/
public abstract void subtmitHandler(String title, String name, String wmsRequest);
/**
* Close handler.
*/
public abstract void closeHandler();
/**
* The Interface AbstractFormReleaseUiBinder.
*
* @author Francesco Mangiacrapa francesco.mangiacrapa@isti.cnr.it
* Feb 19, 2015
*/
interface AbstractFormReleaseUiBinder extends UiBinder<Widget, WmsForm> {
}
/**
* Instantiates a new abstract form release.
*/
public WmsForm() {
initWidget(uiBinder.createAndBindUi(this));
// setSize(width+"px", "200px");
input_layer_name.setWidth((width-10)+"px");
input_layer_title.setWidth((width-10)+"px");
input_WMS_URI.setWidth((width-10)+"px");
close_dialog.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
closeHandler();
}
});
submit_add_layer.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
if(validateForm()){
subtmitHandler(getInputLayerTitle().getValue(), getInputLayerName().getValue(), getInputWMSURI().getValue());
}
}
});
input_WMS_URI.addKeyDownHandler(new KeyDownHandler() {
@Override
public void onKeyDown(KeyDownEvent event) {
// super.componentKeyDown(event);
if (event.getNativeKeyCode() == KeyCodes.KEY_ENTER){
if(validateForm())
subtmitHandler(getInputLayerTitle().getValue(), getInputLayerName().getValue(), getInputWMSURI().getValue());
}
}
});
input_layer_name_group.addStyleName("marginTop10");
input_layer_title_group.addStyleName("marginTop10");
input_WMS_URI_group.addStyleName("marginTop10");
alertError.addStyleName("marginTop10");
alertError.setType(AlertType.ERROR);
alertError.setVisible(false);
alertError.setClose(false);
validator_field.add(alertError);
// alertSubmitResult.addStyleName("marginTop10");
alertSubmitResult.setType(AlertType.INFO);
alertSubmitResult.setVisible(false);
alertSubmitResult.setClose(false);
hp_form_actions.setCellHorizontalAlignment(close_dialog, HasHorizontalAlignment.ALIGN_RIGHT);
showAlertSubmitResult(false, "");
form_wms_add_layer.add(alertSubmitResult);
}
/**
* Validate form.
*
* @return true, if successful
*/
public boolean validateForm(){
boolean valid = true;
// input_layer_name.setType(ControlGroupType.NONE);
input_layer_name_group.setType(ControlGroupType.NONE);
input_WMS_URI_group.setType(ControlGroupType.NONE);
if(input_layer_name.getValue()==null || input_layer_name.getValue().isEmpty()){
input_layer_name.setControlGroup(input_layer_name_group);
input_layer_name_group.setType(ControlGroupType.ERROR);
valid = false;
}
if(input_WMS_URI.getValue()==null || input_WMS_URI.getValue().isEmpty()){
input_WMS_URI.setControlGroup(input_WMS_URI_group);
input_WMS_URI_group.setType(ControlGroupType.ERROR);
valid = false;
}
// alertError.setVisible(!valid);
setAlertErrorVisible(!valid);
return valid;
}
/**
* Show alert submit result.
*
* @param visible the visible
* @param text the text
*/
public void showAlertSubmitResult(boolean visible, String text){
alertSubmitResult.setText(text);
alertSubmitResult.setVisible(visible);
}
/**
* Gets the submit_button.
*
* @return the submit_button
*/
public Button getSubmit_button() {
return submit_add_layer;
}
/**
* Gets the validator_field.
*
* @return the validator_field
*/
public FluidRow getValidator_field() {
return validator_field;
}
/**
* Gets the alert error.
*
* @return the alert error
*/
public Alert getAlertError() {
return alertError;
}
/**
* Gets the alert submit result.
*
* @return the alert submit result
*/
public Alert getAlertSubmitResult() {
return alertSubmitResult;
}
/**
* Sets the alert error visible.
*
* @param bool the new alert error visible
*/
public void setAlertErrorVisible(boolean bool){
alertError.setVisible(bool);
}
/**
* Gets the input wmsuri.
*
* @return the input wmsuri
*/
public TextBox getInputWMSURI() {
return input_WMS_URI;
}
/**
* Gets the input layer name.
*
* @return the input layer name
*/
public TextBox getInputLayerName() {
return input_layer_name;
}
/**
* Gets the input layer title.
*
* @return the input layer title
*/
public TextBox getInputLayerTitle() {
return input_layer_title;
}
}

View File

@ -0,0 +1,41 @@
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:g="urn:import:com.google.gwt.user.client.ui" xmlns:b="urn:import:com.github.gwtbootstrap.client.ui">
<b:WellForm type="HORIZONTAL" ui:field="form_wms_add_layer"
styleName="margin10">
<b:Fieldset styleName="noBorder">
<b:ControlGroup ui:field="input_layer_title_group">
<b:ControlLabel for="input_layer_title">Layer Title</b:ControlLabel>
<b:Controls>
<b:TextBox placeholder="Type Layer display title (optional)..."
b:id="input_layer_title" ui:field="input_layer_title"></b:TextBox>
</b:Controls>
</b:ControlGroup>
<b:ControlGroup ui:field="input_layer_name_group">
<b:ControlLabel for="input_layer_name">Layer Name</b:ControlLabel>
<b:Controls>
<b:TextBox placeholder="Type Layer Name" b:id="input_layer_name"
ui:field="input_layer_name"></b:TextBox>
</b:Controls>
</b:ControlGroup>
<b:ControlGroup ui:field="input_WMS_URI_group">
<b:ControlLabel for="input_WMS_URI">WMS request</b:ControlLabel>
<b:Controls>
<b:TextBox placeholder="Type WMS request" b:id="input_WMS_URI"
ui:field="input_WMS_URI"></b:TextBox>
</b:Controls>
</b:ControlGroup>
<b:FluidRow ui:field="validator_field"></b:FluidRow>
<g:HorizontalPanel ui:field="hp_form_actions"
styleName="inputWmsDialog">
<b:Button ui:field="submit_add_layer">Add Layer</b:Button>
<b:Button ui:field="close_dialog">Close</b:Button>
</g:HorizontalPanel>
</b:Fieldset>
</b:WellForm>
</ui:UiBinder>

View File

@ -3,7 +3,7 @@
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />
<inherits name="com.google.gwt.logging.Logging" />
<inherits name="com.github.gwtbootstrap.Bootstrap" />
<!-- We need the JUnit module in the main module, -->
<!-- otherwise eclipse complains (Google plugin bug?) -->
<!-- <inherits name='com.google.gwt.junit.JUnit' /> -->

View File

@ -33,8 +33,7 @@ h1 {
.baloonPanel {
padding: 5px;
/* border: solid; */
/* border-width: 1px; */
/* border: solid; */ /* border-width: 1px; */
border-color: rgb(200, 210, 240);
/* border-radius: 15px; */
-webkit-border-top-right-radius: 5px;
@ -45,15 +44,32 @@ h1 {
border-bottom-right-radius: 5px;
background-color: #4B79B4;
color: #D2D2D2;
/* font-family: verdana, arial; */
font-size: 12px;
margin-left: 2px;
opacity: 0.8;
font-family: sans-serif, arial;
font-weight: bold;
/* font-family: verdana, arial; */
font-size: 12px;
margin-left: 2px;
opacity: 0.8;
font-family: sans-serif, arial;
font-weight: bold;
}
.baloonPanel :HOVER {
cursor: pointer;
color: #FFF;
cursor: pointer;
color: #FFF;
}
.margin10 {
margin: 10px;
}
.marginTop10 {
margin-top: 10px;
}
.inputWmsDialog {
margin-top: 10px;
width: 100%;
}
.noBorder {
border: none !important;
}