Updated Column Expression Panel

git-svn-id: https://svn.d4science.research-infrastructures.eu/gcube/trunk/portlets/user/tabular-data-expression-widget@90280 82a268e6-3cf1-43bd-a215-b396298e98cf

.settings/org.eclipse.wst.common.component

@@ -4,6 +4,9 @@
         <wb-resource deploy-path="/" source-path="/src/main/webapp" tag="defaultRootSource"/>
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/java"/>
         <wb-resource deploy-path="/WEB-INF/classes" source-path="/src/main/resources"/>
+        <dependent-module archiveName="tabular-data-gwt-service-2.0.0-SNAPSHOT.jar" deploy-path="/WEB-INF/lib" handle="module:/resource/tabular-data-gwt-service/tabular-data-gwt-service">
+            <dependency-type>uses</dependency-type>
+        </dependent-module>
         <dependent-module archiveName="tabular-data-widget-common-event-1.0.0-SNAPSHOT.jar" deploy-path="/WEB-INF/lib" handle="module:/resource/tabular-data-widget-common-event/tabular-data-widget-common-event">
             <dependency-type>uses</dependency-type>
         </dependent-module>

pom.xml

@@ -152,7 +152,17 @@
 	<build>
 		<!-- Generate compiled stuff in the folder used for developing mode -->
 		<outputDirectory>${webappDirectory}/WEB-INF/classes</outputDirectory>
-	
+		<resources>
+			<resource>
+				<directory>src/main/resources</directory>
+				<includes>
+					<include>**/*.*</include>
+				</includes>
+			</resource>
+
+		</resources>
+		
+		
 		<plugins>
 			<plugin>
 				<groupId>org.apache.maven.plugins</groupId>

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/ColumnExpressionPanel.java

@@ -11,6 +11,7 @@ import com.sencha.gxt.widget.core.client.FramedPanel;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
 import com.sencha.gxt.widget.core.client.form.FieldLabel;
+import com.sencha.gxt.widget.core.client.form.FieldSet;
 import com.sencha.gxt.widget.core.client.form.TextArea;
 import com.sencha.gxt.widget.core.client.form.TextField;
 
@@ -24,7 +25,9 @@ public class ColumnExpressionPanel extends FramedPanel {
 	protected TRId trId;
 	protected String columnName=null;
 	protected ColumnData column;
-	//protected ComboBox<ColumnData> combo=null;
+	
+	protected String WIDTH = "550px";
+	protected String HEIGHT = "520px";
 	
 	/**
 	 * 
@@ -53,119 +56,57 @@ public class ColumnExpressionPanel extends FramedPanel {
 	protected void create() {
 		setBodyBorder(false);
 		// getHeader().setIcon(Resources.IMAGES.side_list());
-		setWidth(400);
-		setHeight(400);
+		setWidth(WIDTH);
+		setHeight(HEIGHT);
 		setResize(true);
+		setHeadingText("New Rule");
+		
 		
 		VerticalLayoutContainer basicLayout = new VerticalLayoutContainer();
 	    basicLayout.setScrollMode(ScrollMode.AUTO);
 	    basicLayout.setAdjustForScroll(true);
 	   
+	    FieldSet properties = new FieldSet();
+	    properties.setHeadingText("Properties");
+	    properties.setCollapsible(false);
 	    
-	    TextField nome= new TextField();
-	    basicLayout.add(new FieldLabel(nome, "Nome"), new VerticalLayoutData(1, -1));
+	    VerticalLayoutContainer propertiesLayout = new VerticalLayoutContainer();
+	    //propertiesLayout.setScrollMode(ScrollMode.AUTO);
+	    //propertiesLayout.setAdjustForScroll(true);
+	    properties.add(propertiesLayout);
 	    
-	    TextArea descrizione= new TextArea();
-	    basicLayout.add(new FieldLabel(descrizione, "Descrizione"), new VerticalLayoutData(1, -1));
+	    TextField name= new TextField();
+	    name.setToolTip("The name of rule");
+	    propertiesLayout.add(new FieldLabel(name, "Name"), new VerticalLayoutData(1, -1));
 	    
+	    TextArea description= new TextArea();
+	    description.setHeight("100px");
+	    description.setToolTip("The description of rule");
+	    propertiesLayout.add(new FieldLabel(description, "Description"), new VerticalLayoutData(1, -1));
+	    
+	    TextField type= new TextField();
+	    type.setToolTip("The type of column");
+	    type.setValue(column.getDataTypeName());
+	    propertiesLayout.add(new FieldLabel(type, "Type"), new VerticalLayoutData(1, -1));
+	    
+	    FieldSet conditions = new FieldSet();
+	    conditions.setHeadingText("Conditions");
+	    conditions.setCollapsible(false);
 	    
 	    ConditionWidget conditionWidget =new ConditionWidget(column.getColumnId(), column.getTypeCode(), column.getDataTypeName());
-	    basicLayout.add(conditionWidget);
+	    conditions.add(conditionWidget);
+	    
+	    basicLayout.add(properties);
+	    basicLayout.add(conditions);
+	    
 	    
 	    add(basicLayout);
 	    show();
 
-	    /*
-		ContentPanel panel = new ContentPanel();
-		panel.setHeaderVisible(false);
-		
-		//panel.setBodyStyle("margin: 0px;");
-		
-		ColumnDataProperties props = GWT.create(ColumnDataProperties.class);
-		ListStore<ColumnData> store = new ListStore<ColumnData>(props.id());
-		
-		Log.trace("Store created");
-		RpcProxy<ListLoadConfig, ListLoadResult<ColumnData>> proxy = new RpcProxy<ListLoadConfig,  ListLoadResult<ColumnData>>() {
-			
-			public void load(ListLoadConfig loadConfig, final AsyncCallback<ListLoadResult<ColumnData>> callback) {
-				loadData(loadConfig, callback);
-			}	
-		};
-		final ListLoader<ListLoadConfig, ListLoadResult<ColumnData>> loader = new ListLoader<ListLoadConfig, ListLoadResult<ColumnData>>(proxy);
-		loader.setRemoteSort(false);
-		loader.addLoadHandler(new LoadResultListStoreBinding<ListLoadConfig, ColumnData, ListLoadResult<ColumnData>>(store));
-		Log.trace("Loader created");
-		
-		
-		combo = new ComboBox<ColumnData>(store,
-				props.label()){
-			@Override
-			protected void onAfterFirstAttach() {
-				super.onAfterFirstAttach();
-				Scheduler.get().scheduleDeferred(new ScheduledCommand() {
-					public void execute() {
-						loader.load();
-					}
-				});
-			}
-		};
-		Log.trace("Combo created");
-		
-		addHandlersForEventObservation(combo, props.label());
-
-		combo.setEmptyText("Select a column...");
-		combo.setWidth(150);
-		combo.setTypeAhead(true);
-		combo.setTriggerAction(TriggerAction.ALL);
-		combo.setLoader(loader);
-		
-		FramedPanel form = new FramedPanel();
-	    form.setHeaderVisible(false);
-	    //form.setWidth(350);
-	    form.setBodyStyle("background: none;");
-	 
-	    VerticalLayoutContainer v = new VerticalLayoutContainer();
-	    v.add(new FieldLabel(combo, "Column"), new VerticalLayoutData(1, -1));
-	    form.add(v);
-	    form.addButton(new TextButton("Remove"));
 	   
-	    
-	    panel.add(form);
-	    
-	    basicLayout.add(panel, new VerticalLayoutData(-1, -1, new Margins()));
-		*/
-		
 	}
     
-	/*
-	private <T> void addHandlersForEventObservation(ComboBox<T> combo,
-			final LabelProvider<T> labelProvider) {
-		combo.addValueChangeHandler(new ValueChangeHandler<T>() {
-
-			public void onValueChange(ValueChangeEvent<T> event) {
-				Info.display(
-						"Value Changed",
-						"New value: "
-								+ (event.getValue() == null ? "nothing"
-										: labelProvider.getLabel(event
-												.getValue()) + "!"));
-				
-			}
-		});
-		combo.addSelectionHandler(new SelectionHandler<T>() {
-			public void onSelection(SelectionEvent<T> event) {
-				Info.display(
-						"State Selected",
-						"You selected "
-								+ (event.getSelectedItem() == null ? "nothing"
-										: labelProvider.getLabel(event
-												.getSelectedItem()) + "!"));
-			}
-		});
-	}
 	
-	 */
-		
 		
 
 	protected void load(TRId trId, String columnName) {

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/ConditionWidget.java

@@ -1,12 +1,15 @@
 package org.gcube.portlets.user.td.expressionwidget.client;
 
-import org.gcube.data.analysis.tabulardata.expression.Operator;
+import org.gcube.portlets.user.td.expressionwidget.client.custom.IconButton;
 import org.gcube.portlets.user.td.expressionwidget.client.operation.Operation;
 import org.gcube.portlets.user.td.expressionwidget.client.operation.OperationProperties;
 import org.gcube.portlets.user.td.expressionwidget.client.operation.OperationsStore;
+import org.gcube.portlets.user.td.expressionwidget.client.resource.ExpressionResources;
 
 import com.allen_sauer.gwt.log.client.Log;
 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.logical.shared.SelectionEvent;
 import com.google.gwt.event.logical.shared.SelectionHandler;
 import com.google.gwt.event.logical.shared.ValueChangeEvent;
@@ -16,12 +19,11 @@ import com.sencha.gxt.core.client.dom.ScrollSupport.ScrollMode;
 import com.sencha.gxt.core.client.util.Margins;
 import com.sencha.gxt.data.shared.LabelProvider;
 import com.sencha.gxt.data.shared.ListStore;
-import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer;
+import com.sencha.gxt.widget.core.client.container.BoxLayoutContainer.BoxLayoutData;
+import com.sencha.gxt.widget.core.client.container.HBoxLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.SimpleContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer;
 import com.sencha.gxt.widget.core.client.container.VerticalLayoutContainer.VerticalLayoutData;
-import com.sencha.gxt.widget.core.client.container.HorizontalLayoutContainer.HorizontalLayoutData;
-
 import com.sencha.gxt.widget.core.client.form.ComboBox;
 import com.sencha.gxt.widget.core.client.info.Info;
 
@@ -32,15 +34,31 @@ import com.sencha.gxt.widget.core.client.info.Info;
  *
  */
 public class ConditionWidget extends SimpleContainer {
-	protected Operator op;
-	protected ComboBox<Operation> comboOp=null;
+	
+	//protected String WIDTH = "497px";
+	protected String HEIGHT = "210px";
+	
+	protected VerticalLayoutContainer vert;
+	protected String columnPlaceHolderId;
+	protected String columnTypeCode; 
+	protected String dataTypeName;
+	
 	
 	ConditionWidget(String columnPlaceHolderId,String columnTypeCode, String dataTypeName){
-		VerticalLayoutContainer vert=new VerticalLayoutContainer();
+		this.columnPlaceHolderId=columnPlaceHolderId;
+		this.columnTypeCode=columnTypeCode;
+		this.dataTypeName=dataTypeName;
+		setBorders(true);
+		//setWidth(WIDTH);
+		setHeight(HEIGHT);
+		
+		vert=new VerticalLayoutContainer();
 		vert.setScrollMode(ScrollMode.AUTO);
 		vert.setAdjustForScroll(true);
 		
-		HorizontalLayoutContainer horiz=new HorizontalLayoutContainer();
+		
+		
+		HBoxLayoutContainer horiz = new HBoxLayoutContainer();
 		
 		OperationProperties props = GWT.create(OperationProperties.class);
 		ListStore<Operation> storeOp = new ListStore<Operation>(props.id());
@@ -48,23 +66,39 @@ public class ConditionWidget extends SimpleContainer {
 		
 		Log.trace("Store created");
 		
-		
-		comboOp = new ComboBox<Operation>(storeOp,
+		ComboBox<Operation> comboOp= new ComboBox<Operation>(storeOp,
 				props.label());
 		
 		Log.trace("ComboOperation created");
 		
 		addHandlersForEventObservation(comboOp, props.label());
 
-		comboOp.setEmptyText("Select a operation...");
-		comboOp.setWidth(150);
+		comboOp.setEmptyText("Select a condition...");
+		comboOp.setWidth("210px");
 		comboOp.setTypeAhead(true);
+		comboOp.setEditable(false);
 		comboOp.setTriggerAction(TriggerAction.ALL);
 		
-		horiz.add(comboOp,new HorizontalLayoutData(-1, -1, new Margins(0)));
 		
-		vert.add(horiz,new VerticalLayoutData(-1, -1, new Margins(0)));
+		IconButton btnAdd;
+		btnAdd = new IconButton();
+		btnAdd.setIcon(ExpressionResources.INSTANCE.add());
+		btnAdd.addClickHandler(new ClickHandler() {
+			
+			public void onClick(ClickEvent event) {
+				Log.debug("Clicked btnCust");
+				addCondition();
+				
+			}
+		});
+		
+	
+		horiz.add(comboOp,new BoxLayoutData(new Margins(0)));
+		horiz.add(btnAdd,new BoxLayoutData(new Margins(0)));
+			
+		vert.add(horiz,new VerticalLayoutData(-1, -1, new Margins(1)));
 		add(vert);
+		show();
 	}
 	
 	private <T> void addHandlersForEventObservation(ComboBox<T> combo,
@@ -93,7 +127,61 @@ public class ConditionWidget extends SimpleContainer {
 		});
 	}
 	
+	protected void addCondition(){
+		final HBoxLayoutContainer horiz = new HBoxLayoutContainer();
+		
+		OperationProperties props = GWT.create(OperationProperties.class);
+		ListStore<Operation> storeOp = new ListStore<Operation>(props.id());
+		storeOp.addAll(OperationsStore.getAll(dataTypeName));
+		
+		Log.trace("Store created");
+		
+		ComboBox<Operation> comboOp= new ComboBox<Operation>(storeOp,
+				props.label());
+		
+		Log.trace("ComboOperation created");
+		
+		addHandlersForEventObservation(comboOp, props.label());
 
+		comboOp.setEmptyText("Select a condition...");
+		comboOp.setWidth("210px");
+		comboOp.setEditable(false);
+		comboOp.setTypeAhead(true);
+		comboOp.setTriggerAction(TriggerAction.ALL);
+		
+		
+		IconButton btnAdd;
+		btnAdd = new IconButton();
+		btnAdd.setIcon(ExpressionResources.INSTANCE.add());
+		btnAdd.addClickHandler(new ClickHandler() {
+			
+			public void onClick(ClickEvent event) {
+				Log.debug("Clicked btnAdd");
+				addCondition();
+				
+			}
+		});
+		
+		IconButton btnDel;
+		btnDel = new IconButton();
+		btnDel.setIcon(ExpressionResources.INSTANCE.delete());
+		btnDel.addClickHandler(new ClickHandler() {
+			
+			public void onClick(ClickEvent event) {
+				Log.debug("Clicked btnDel");
+				vert.remove(horiz);
+				
+			}
+		});
+		
+		
+		horiz.add(comboOp,new BoxLayoutData(new Margins(0)));
+		horiz.add(btnAdd,new BoxLayoutData(new Margins(0)));
+		horiz.add(btnDel,new BoxLayoutData(new Margins(0)));
+			
+		vert.add(horiz,new VerticalLayoutData(-1, -1, new Margins(0)));
+
+	}
 		
 
 }

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/custom/DefaultAppearance.java

@@ -0,0 +1,76 @@
+package org.gcube.portlets.user.td.expressionwidget.client.custom;
+
+import com.google.gwt.core.client.GWT;
+import com.google.gwt.dom.client.Element;
+import com.google.gwt.resources.client.ClientBundle;
+import com.google.gwt.resources.client.CssResource;
+import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.safehtml.shared.SafeHtml;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.google.gwt.user.client.ui.Image;
+import com.sencha.gxt.core.client.XTemplates;
+import com.sencha.gxt.core.client.dom.XElement;
+
+public class DefaultAppearance implements IconButtonAppearance {
+	
+	public interface Template extends XTemplates {
+		@XTemplate(source = "IconButton.html")
+		SafeHtml template(IconButtonStyle style);
+	}
+
+	public interface IconButtonStyle extends CssResource {
+		@ClassName("iconButton")
+		public String getIconButton();
+
+		@ClassName("iconButtonImage")
+		public String getIconButtonImage();
+		
+		@ClassName("iconButtonRef")
+		public String getIconButtonRef();
+		
+	}
+
+	private final IconButtonStyle style;
+	private final Template template;
+
+	public interface IconButtonResources extends ClientBundle {
+		public static final IconButtonResources INSTANCE =  GWT.create(IconButtonResources.class);
+		
+		@Source("IconButtonStyle.css")
+		IconButtonStyle style();
+	}
+
+	public DefaultAppearance() {
+		this(IconButtonResources.INSTANCE);
+	}
+
+	public DefaultAppearance(IconButtonResources resources) {
+		this.style = resources.style();
+		this.style.ensureInjected();
+
+		this.template = GWT.create(Template.class);
+	}
+
+	
+	
+	public void onUpdateIcon(XElement parent, ImageResource icon) {
+		XElement element = parent.selectNode("." + style.getIconButtonImage());
+		Image image=new Image(icon);
+		Element img=image.getElement();
+		img.setClassName("iconButtonRef");
+	
+		/*
+		<img src="immagine1.jpg"
+				onmouseover="this.src='immagine 2.gif'"
+				onmouseout="this.src='immagine1.gif'">
+		//img.setClassName(style.get);*/
+		//XElement ref=XDOM.create("<a class='iconButtonRef'></a>");
+		//ref.appendChild(img);
+		element.appendChild(img);
+		
+	}
+
+	public void render(SafeHtmlBuilder sb) {
+		sb.append(template.template(style));
+	}
+}

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButton.html

@@ -0,0 +1,4 @@
+<!-- file: ./IconButton.html -->
+<div class="{style.iconButton}">
+	<div class="{style.iconButtonImage}"></div>
+</div>

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButton.java

@@ -0,0 +1,40 @@
+package org.gcube.portlets.user.td.expressionwidget.client.custom;
+
+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.HasClickHandlers;
+import com.google.gwt.event.shared.HandlerRegistration;
+import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.google.gwt.user.client.Event;
+import com.sencha.gxt.core.client.dom.XDOM;
+import com.sencha.gxt.widget.core.client.Component;
+
+public class IconButton extends Component implements HasClickHandlers {
+
+	private final IconButtonAppearance appearance;
+
+	public IconButton() {
+		this((IconButtonAppearance) GWT.create(DefaultAppearance.class));
+	}
+
+	public IconButton(IconButtonAppearance appearance) {
+		this.appearance = appearance;
+
+		SafeHtmlBuilder sb = new SafeHtmlBuilder();
+		this.appearance.render(sb);
+
+		setElement(XDOM.create(sb.toSafeHtml()));
+		sinkEvents(Event.ONCLICK);
+	}
+
+	public HandlerRegistration addClickHandler(ClickHandler handler) {
+		return addDomHandler(handler, ClickEvent.getType());
+	}
+	
+	
+	public void setIcon(ImageResource icon) {
+		appearance.onUpdateIcon(getElement(), icon);
+	}
+}

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButtonAppearance.java

@@ -0,0 +1,10 @@
+package org.gcube.portlets.user.td.expressionwidget.client.custom;
+
+import com.google.gwt.resources.client.ImageResource;
+import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
+import com.sencha.gxt.core.client.dom.XElement;
+
+public interface IconButtonAppearance {
+	  void render(SafeHtmlBuilder sb);
+	  void onUpdateIcon(XElement parent, ImageResource icon);
+}

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButtonStyle.css

@@ -0,0 +1,17 @@
+@CHARSET "UTF-8";
+
+.iconButton {
+	border: none;
+	font-size: 12px;
+	margin: 0px;
+	padding: 0px;
+}
+
+.iconButton .iconButtonImage {
+	vertical-align: center;
+}
+
+.iconButtonRef {
+	vertical-align: center;
+	cursor: pointer;
+}

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/operation/OperationsStore.java

@@ -18,18 +18,20 @@ public class OperationsStore {
 	static ArrayList<Operation> operationsNumeric = new ArrayList<Operation>() {
 		private static final long serialVersionUID = -6559885743626876431L;
 	{
-	    add(new Operation(1,"EQUALS","Equals",OperatorType.EQUALS));
-	    add(new Operation(2,"GREATER","Greater",OperatorType.GREATER));
-	    add(new Operation(3,"GREATER_OR_EQUALS","Greater or equals",OperatorType.GREATER_OR_EQUALS));
-	    add(new Operation(4,"LESSER","Lesser",OperatorType.LESSER));
-	    add(new Operation(5,"LESSER_OR_EQUALS","Lesser or equals",OperatorType.LESSER_OR_EQUALS));
-	    add(new Operation(6,"NOT_EQUALS","Not equals",OperatorType.NOT_EQUALS));
-	    add(new Operation(7,"NOT_GREATER","Not greater",OperatorType.NOT_GREATER));
-	    add(new Operation(8,"NOT_LESSER","Not lesser",OperatorType.NOT_LESSER));
-	    add(new Operation(9,"IS_NULL","Is null",OperatorType.IS_NULL));
-	    add(new Operation(10,"IS_NOT_NULL","Is not null",OperatorType.IS_NOT_NULL));
-	    add(new Operation(11,"BETWEEN","Between",OperatorType.BETWEEN));
-	    add(new Operation(12,"IN","In",OperatorType.IN));   
+	    add(new Operation(1,"EQUALS","The value is equal to",OperatorType.EQUALS));
+	    add(new Operation(2,"GREATER","The value is greater than",OperatorType.GREATER));
+	    add(new Operation(3,"GREATER_OR_EQUALS","The value is greater than or equal to",OperatorType.GREATER_OR_EQUALS));
+	    add(new Operation(4,"LESSER","The value is less than",OperatorType.LESSER));
+	    add(new Operation(5,"LESSER_OR_EQUALS","The value is less than or equal to",OperatorType.LESSER_OR_EQUALS));
+	    add(new Operation(6,"NOT_EQUALS","The value is not equal to",OperatorType.NOT_EQUALS));
+	    add(new Operation(7,"NOT_GREATER","The value is not greater than",OperatorType.NOT_GREATER));
+	    add(new Operation(8,"NOT_LESSER","The value is not less than",OperatorType.NOT_LESSER));
+	    add(new Operation(9,"IS_NULL","The value is null",OperatorType.IS_NULL));
+	    add(new Operation(10,"IS_NOT_NULL","The value is not null",OperatorType.IS_NOT_NULL));
+	    add(new Operation(11,"BETWEEN","The value is between",OperatorType.BETWEEN));
+	    add(new Operation(12,"NOT_BETWEEN","The value is not between",OperatorType.BETWEEN));
+	    add(new Operation(13,"IN","The value is in",OperatorType.IN));   
+	    add(new Operation(14,"NOT_IN","The value is not in",OperatorType.IN));   
 	}};
 	
 	static ArrayList<Operation> operationsText = new ArrayList<Operation>() {

src/main/java/org/gcube/portlets/user/td/expressionwidget/client/resource/ExpressionResources.java

@@ -5,7 +5,7 @@ package org.gcube.portlets.user.td.expressionwidget.client.resource;
 import com.google.gwt.core.client.GWT;
 import com.google.gwt.resources.client.ClientBundle;
 import com.google.gwt.resources.client.ImageResource;
-//import com.google.gwt.resources.client.ClientBundle.Source;
+
 
 /**
  * 
@@ -16,7 +16,7 @@ import com.google.gwt.resources.client.ImageResource;
 public interface  ExpressionResources extends ClientBundle {
 		
 		public static final ExpressionResources INSTANCE =  GWT.create(ExpressionResources.class);
-		 
+		
 		@Source("add.png")
 		ImageResource add();
 		

src/main/resources/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButton.html

@@ -0,0 +1,4 @@
+<!-- file: ./IconButton.html -->
+<div class="{style.iconButton}">
+	<div class="{style.iconButtonImage}"></div>
+</div>

src/main/resources/org/gcube/portlets/user/td/expressionwidget/client/custom/IconButtonStyle.css

@@ -0,0 +1,17 @@
+@CHARSET "UTF-8";
+
+.iconButton {
+	border: none;
+	font-size: 12px;
+	margin: 0px;
+	padding: 0px;
+}
+
+.iconButton .iconButtonImage {
+	vertical-align: center;
+}
+
+.iconButtonRef {
+	vertical-align: center;
+	cursor: pointer;
+}

src/main/webapp/ExpressionWidget.css

@@ -32,3 +32,23 @@ h1 {
 #closeButton {
   margin: 15px 6px 6px;
 }
+
+
+.iconButton {
+	border: none;
+	font-size: 12px;
+	margin: 0px;
+	padding: 0px;
+}
+
+.iconButton .iconButtonImage {
+	vertical-align: center;
+}
+
+.iconButtonRef {
+	vertical-align: center;
+	cursor: pointer;
+}
+
+
+