gCubeSystem
/
join-vre
15
1
Fork 0
Code Issues Pull Requests Releases Wiki Activity

revised the way we show vre descriptions through GQuery and animations 

git-svn-id: https://svn.research-infrastructures.eu/d4science/gcube/trunk/portlets/user/join-vre@113744 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Massimiliano Assante 2015-03-25 22:36:08 +00:00
parent 7ff85e23ef
commit 847839f486
7 changed files with 144 additions and 42 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
.classpath
View File

@ -1,6 +1,6 @@
<?xml version="1.0" encoding="UTF-8"?>
<classpath>
<classpathentry kind="src" output="target/join-vre-1.0.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
<classpathentry kind="src" output="target/join-vre-1.1.0-SNAPSHOT/WEB-INF/classes" path="src/main/java">
<attributes>
<attribute name="optional" value="true"/>
<attribute name="maven.pomderived" value="true"/>
@ -31,5 +31,5 @@
<attribute name="maven.pomderived" value="true"/>
</attributes>
</classpathentry>
<classpathentry kind="output" path="target/join-vre-1.0.0-SNAPSHOT/WEB-INF/classes"/>
<classpathentry kind="output" path="target/join-vre-1.1.0-SNAPSHOT/WEB-INF/classes"/>
</classpath>

2
pom.xml
View File

@ -13,7 +13,7 @@
<groupId>org.gcube.portlets.user</groupId>
<artifactId>join-vre</artifactId>
<packaging>war</packaging>
<version>1.0.0-SNAPSHOT</version>
<version>1.1.0-SNAPSHOT</version>
<name>gCube Join VRE Portlet</name>
<description>Display the available VRE to Join</description>

89
src/main/java/org/gcube/portlets/user/joinvre/client/ui/DisplayVRE.java
View File

@ -2,12 +2,15 @@ package org.gcube.portlets.user.joinvre.client.ui;
import java.util.List;
import org.gcube.portlets.user.gcubewidgets.client.elements.Div;
import org.gcube.portlets.user.gcubewidgets.client.elements.Span;
import org.gcube.portlets.user.joinvre.client.JoinService;
import org.gcube.portlets.user.joinvre.client.JoinServiceAsync;
import org.gcube.portlets.user.joinvre.shared.VRE;
import org.gcube.portlets.user.joinvre.shared.VRECategory;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Element;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
@ -16,67 +19,86 @@ import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.rpc.AsyncCallback;
import com.google.gwt.user.client.ui.Button;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.HTML;
import com.google.gwt.user.client.ui.HTMLPanel;
import com.google.gwt.user.client.ui.Image;
import com.google.gwt.user.client.ui.Label;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.query.client.GQuery;
import com.google.gwt.query.client.Function;
import com.google.gwt.query.client.Selector;
import com.google.gwt.query.client.Selectors;
import static com.google.gwt.query.client.GQuery.*;
import static com.google.gwt.query.client.css.CSS.*;
/**
* @author Massimiliano Assante, ISTI-CNR - massimiliano.assante@isti.cnr.it
* @author Luca Frosini (ISTI - CNR) http://www.lucafrosini.com/
*/
public class DisplayVRE extends Composite {
interface DisplayVREUiBinder extends UiBinder<Widget, DisplayVRE> {}
private static DisplayVREUiBinder uiBinder = GWT.create(DisplayVREUiBinder.class);
private final JoinServiceAsync joinService = GWT.create(JoinService.class);
public static final String vreDefaultImage = GWT.getModuleBaseURL() + "../images/vre-default.png";
public static final String loadingImage = GWT.getModuleBaseURL() + "../images/vre-image-loader.gif";
public static LoadingPopUp loadingPopUp = new LoadingPopUp(false, true, loadingImage);
public static final String REQUEST_ACCESS = "Request Access";
public static final String FREE_ACCESS = "Free Access";
@UiField HTMLPanel mainPanel;
@UiField Image vreImage;
@UiField Label vreName;
@UiField HTMLPanel vreCategories;
@UiField Div vreDesc;
@UiField Button joinButton;
@UiField Button closeButton;
public DisplayVRE(final VRE vre) {
Widget widget = uiBinder.createAndBindUi(this);
vreImage.setUrl(loadingImage);
closeButton.setText("Collapse");
vreDesc.setHTML(vre.getDescription());
if(vre.getImageURL().compareTo("")!=0){
vreImage.setUrl(vre.getImageURL());
}else{
vreImage.setUrl(vreDefaultImage);
}
final String name = vre.getName();
String vreDescription = vre.getDescription();
final InfoDialog infoDialog = new InfoDialog(name, vreDescription);
ClickHandler descriptionHandler = new ClickHandler(){
@Override
public void onClick(ClickEvent event) {
infoDialog.show();
if ($(mainPanel).css(WIDTH).compareTo("160px") == 0)
show();
else
collapse();
}
};
vreImage.setTitle(vre.getName());
closeButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
collapse();
}
});
vreImage.setTitle("Click to see details");
vreImage.addClickHandler(descriptionHandler);
vreName.setTitle(name);
vreName.setText(name);
vreName.addClickHandler(descriptionHandler);
List<VRECategory> categories = vre.getCategories();
for(int i=0; i<categories.size(); i++){
vreCategories.add(new Label(categories.get(i).getName()));
@ -84,7 +106,7 @@ public class DisplayVRE extends Composite {
vreCategories.add(new Label(","));
}
}
if(vre.isUponRequest()){
joinButton.setText(REQUEST_ACCESS);
}else{
@ -93,7 +115,7 @@ public class DisplayVRE extends Composite {
}
joinButton.setStyleName("joinButton", true);
joinButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
loadingPopUp.show();
@ -115,21 +137,40 @@ public class DisplayVRE extends Composite {
loadingPopUp.hide();
Window.open("/group/data-e-infrastructure-gateway/join-new?orgid="+vre.getId(), "_self", "");
}
});
}
});
initWidget(widget);
}
private void show() {
$(mainPanel).animate("width:'927px'", 150, new Function(){
public void f(Element e){
$(vreDesc).fadeIn();
$(closeButton).fadeIn();
}
});
vreImage.setTitle("Click to collapse");
}
private void collapse() {
$(closeButton).fadeOut();
$(vreDesc).fadeOut(new Function(){
public void f(Element e){
$(mainPanel).animate("width:'160px'", 150);
}
});
vreImage.setTitle("Click to see details");
}
public void showError(String message) {
Window.alert("Failure: " + message);
vreImage.setSize("100px", "100px");
vreImage.setUrl(vreDefaultImage);
}
}

43
src/main/java/org/gcube/portlets/user/joinvre/client/ui/DisplayVRE.ui.xml
View File

@ -1,19 +1,34 @@
<!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:m="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements">
<g:HTMLPanel ui:field="mainPanel" styleName="framed">
<div class="vreImageDetails">
<g:Image title="VRE Image" styleName="vreImage" url=""
ui:field="vreImage" />
</div>
<div class="vreDetails">
<g:Label ui:field="vreName" styleName="vreName" />
<g:HTMLPanel ui:field="vreCategories" styleName="vreCategories" />
<g:Button ui:field="joinButton" />
</div>
</g:HTMLPanel>
xmlns:e="urn:import:org.gcube.portlets.user.gcubewidgets.client.elements">
<g:HTMLPanel ui:field="mainPanel" styleName="framed">
<table>
<tr>
<td valign="top">
<div class="vreImageDetails">
<g:Image title="VRE Image" styleName="vreImage" url=""
ui:field="vreImage" />
</div>
<div class="vreDetails">
<g:Label ui:field="vreName" styleName="vreName" />
<g:HTMLPanel ui:field="vreCategories" styleName="vreCategories" />
<g:Button ui:field="joinButton"></g:Button>
</div>
</td>
<td valign="top">
<e:Div ui:field="vreDesc" visible="false" styleName="vreDesc"></e:Div>
<div style="width: 100%; text-align: right;">
<g:Button ui:field="closeButton" visible="false" />
</div>
</td>
</tr>
</table>
</g:HTMLPanel>
</ui:UiBinder>

29
src/main/java/org/gcube/portlets/user/joinvre/server/JoinServiceImpl.java
View File

@ -102,7 +102,34 @@ public class JoinServiceImpl extends RemoteServiceServlet implements JoinService
} else {
List<VRECategory> devsecCategories = new ArrayList<VRECategory>();
devsecCategories.add(new VRECategory(1, "Development"));
vres.add(new VRE(0, "devsec", "devsec VRE description", "", "", "/group/devsec", devsecCategories, 0,UserBelonging.NOT_BELONGING, false));
vres.add(new VRE(0, "BiodiversityLab", ""
+ "<h2>BiodiversityLab</h2>"
+ "The BiodiversityLab is a VRE designed to provide a collection of applications that allow scholars to perform complete experiments about "
+ "single individuals or groups of marine species. The VRE allows to: <ul> <li> inspect species maps;<li> produce a species distribution map by means of either an expert system (AquaMaps) or a machine learning model (e.g. Neural Networks);"
+ "<li> analyse species observation trends;"
+ "<li> inspect species occurrence data;"
+ "<li> inspect species descriptions and characteristics;"
+ "<li> perform analysis of climatic changes and of their effects on species distribution;"
+ "<li> produce GIS maps for geo-spatial datasets;"
+ "<li> discover Taxa names;"
+ "<li> cluster occurrence data;"
+ "<li> estimate similarities among habitats."
+ "</ul>"
+ "", "", "", "/group/devsec", devsecCategories, 0,UserBelonging.NOT_BELONGING, false));
vres.add(new VRE(0, "Scalable Data Mining", ""
+ "<h2>Scalable Data Mining</h2>"
+ "The Scalable Data Mining is a VRE designed to apply Data Mining techniques to biological data. The algorithms are executed in a distributed fashion on the e-Infrastructure nodes or on local multi-core machines. Scalability is thus meant as distributed data processing but even as services dynamically provided to the users. The system is scalable in the number of users and in the size of the data to process. Statistical data processing can be applied to perform Niche Modelling or Ecological Modelling experiments. Other applications can use general purpose techniques like Bayesian models. Time series of observations can be managed as well, in order to classify trends, catch anomaly patterns and perform simulations. The idea under the distributed computation for data mining techniques is to overcome common limitations that can happen when using statistical algorithms: "
+ "single individuals or groups of marine species. The VRE allows to: <ul> <li> inspect species maps;<li> produce a species distribution map by means of either an expert system (AquaMaps) or a machine learning model (e.g. Neural Networks);"
+ "<li> analyse species observation trends;"
+ "<li> inspect species occurrence data;"
+ "<li> inspect species descriptions and characteristics;"
+ "<li> perform analysis of climatic changes and of their effects on species distribution;"
+ "<li> produce GIS maps for geo-spatial datasets;"
+ "<li> discover Taxa names;"
+ "<li> cluster occurrence data;"
+ "<li> estimate similarities among habitats."
+ "</ul>"
+ "", "", "", "/group/devsec", devsecCategories, 0,UserBelonging.NOT_BELONGING, false));
List<VRECategory> devVRECategories = new ArrayList<VRECategory>(devsecCategories);
devVRECategories.add(new VRECategory(2, "Sailing"));
vres.add(new VRE(1, "devVRE", "devVRE VRE description", "", "", "/group/devVRE", devVRECategories, 1, UserBelonging.NOT_BELONGING, false));

1
src/main/resources/org/gcube/portlets/user/joinvre/JoinVRE.gwt.xml
View File

@ -6,6 +6,7 @@
<!-- <set-property name="user.agent" value="gecko1_8,safari" /> -->
<inherits name='org.gcube.portlets.user.gcubewidgets.WidgetFactory' />
<inherits name='com.google.gwt.query.Query'/>
<!-- Other module inherits -->
<!-- Specify the app entry point class. -->

18
src/main/webapp/JoinVRE.css
View File

@ -9,6 +9,24 @@
margin-top: 0;
}
.vreDesc {
padding: 0 3px;
font-size: 12px;
}
.frame-container {
display: inline-block;
}
.frame-container-border {
background: #FFF;
border-radius: 6px !important;
-moz-border-radius: 6px !important;
-webkit-border-radius: 6px !important;
border: 1px solid #9b9b9b;
margin: 3px;
}
.framed {
width: 160px;
padding: 10px;