still working on the twin column selection widget

git-svn-id: http://svn.d4science-ii.research-infrastructures.eu/gcube/trunk/portlets/widgets/ckan-metadata-publisher-widget@133944 82a268e6-3cf1-43bd-a215-b396298e98cf
This commit is contained in:
Costantino Perciante 2016-11-07 17:47:06 +00:00
parent f5b1f324cb
commit ca9eec91a3
6 changed files with 626 additions and 28 deletions

View File

@ -0,0 +1,40 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.TwinColumnSelection;
import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
/**
* Cell that renders left side panel objects
* @author Costantino Perciante at ISTI-CNR (costantino.perciante@isti.cnr.it)
*/
public class ResourceCellLeft extends AbstractCell<ResourceElementBean>{
@Override
public void render(com.google.gwt.cell.client.Cell.Context context,
ResourceElementBean value, SafeHtmlBuilder sb) {
// Do not render an object if
// - is null;
// - has been moved to the other side;
// - the parent folder is not null;
if (value == null || value.isMovedToRight()) {
return;
}
sb.appendHtmlConstant("<table style='width:100%'");
sb.appendHtmlConstant("<tr><td><b>");
sb.appendEscaped("Parent");
sb.appendHtmlConstant("</b>");
sb.appendEscaped(": " + (value.getParent() == null ? "-" : value.getParent().getName()));
sb.appendHtmlConstant("</td></tr><td><b>");
sb.appendEscaped("Name");
sb.appendHtmlConstant("</b>");
sb.appendEscaped(": " + value.getName());
sb.appendHtmlConstant("</td></tr><td><b>");
sb.appendEscaped("Type");
sb.appendHtmlConstant("</b>");
sb.appendEscaped(": " + (value.isFolder() ? "Folder" : "File"));
sb.appendHtmlConstant("<td></tr></table>");
}
}

View File

@ -0,0 +1,32 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.TwinColumnSelection;
import com.google.gwt.cell.client.AbstractCell;
import com.google.gwt.safehtml.shared.SafeHtmlBuilder;
/**
* Cell that renders right side panel objects
* @author Costantino Perciante at ISTI-CNR (costantino.perciante@isti.cnr.it)
*/
public class ResourceCellRight extends AbstractCell<ResourceElementBean>{
@Override
public void render(com.google.gwt.cell.client.Cell.Context context,
ResourceElementBean value, SafeHtmlBuilder sb) {
// Do not render an object if
// - is null;
// - is still on the left side
if (value == null || !value.isMovedToRight() || value.isFolder()) {
return;
}
sb.appendHtmlConstant("<table style='width:100%'");
sb.appendHtmlConstant("<tr><td>");
sb.appendHtmlConstant("<b>");
sb.appendEscaped("Name");
sb.appendHtmlConstant("</b>");
sb.appendEscaped(": " + value.getFullPath());
sb.appendHtmlConstant("</td></tr>");
sb.appendHtmlConstant("</table>");
}
}

View File

@ -0,0 +1,133 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.TwinColumnSelection;
import java.util.List;
import com.google.gwt.core.shared.GWT;
import com.google.gwt.view.client.ProvidesKey;
/**
* A left-side element for the list in TwinColumnSelection
* @author Costantino Perciante at ISTI-CNR (costantino.perciante@isti.cnr.it)
*/
public class ResourceElementBean implements Comparable<ResourceElementBean>{
private int identifier;
private String name;
private boolean movedToRight;
private boolean isFolder;
private ResourceElementBean parent;
private List<ResourceElementBean> children;
private String fullPath;
// to generate the identifiers
private static int nextId = 0;
/**
* The key provider that provides the unique ID of a bean.
*/
public static final ProvidesKey<ResourceElementBean> KEY_PROVIDER = new ProvidesKey<ResourceElementBean>() {
@Override
public Object getKey(ResourceElementBean item) {
return item == null ? null : item.getIdentifier();
}
};
/**
* @param identifier
* @param parentFolder
* @param name
* @param movedToRight
* @param isFolder
*/
public ResourceElementBean(
ResourceElementBean parent,
String name,
boolean isFolder,
List<ResourceElementBean> children,
String fullPath) {
this.identifier = nextId;
nextId++;
this.parent = parent;
this.name = name;
this.isFolder = isFolder;
this.children = children;
this.fullPath = fullPath;
}
public ResourceElementBean getParent() {
return parent;
}
public void setParent(ResourceElementBean parent) {
this.parent = parent;
}
public String getName() {
return name;
}
public void setName(String name) {
this.name = name;
}
public boolean isMovedToRight() {
return movedToRight;
}
public void setMovedToRight(boolean movedToRight) {
this.movedToRight = movedToRight;
}
public int getIdentifier() {
return identifier;
}
public void setIdentifier(int identifier) {
this.identifier = identifier;
}
public boolean isFolder() {
return isFolder;
}
public void setFolder(boolean isFolder) {
this.isFolder = isFolder;
}
public List<ResourceElementBean> getChildren() {
return children;
}
public void setChildren(List<ResourceElementBean> children) {
this.children = children;
}
public String getFullPath() {
return fullPath;
}
public void setFullPath(String fullPath) {
this.fullPath = fullPath;
}
@Override
public String toString() {
return "ResourceElementBean [identifier=" + identifier + ", name="
+ name + ", movedToRight=" + movedToRight + ", isFolder="
+ isFolder + ", fullPath=" + fullPath + "]";
}
@Override
public boolean equals(Object o) {
if (o instanceof ResourceElementBean) {
return identifier == ((ResourceElementBean) o).identifier;
}
return false;
}
@Override
public int compareTo(ResourceElementBean o) {
return (o == null || o.name == null) ? -1 : -o.fullPath.compareTo(fullPath);
}
}

View File

@ -0,0 +1,102 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.TwinColumnSelection;
import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.cellview.client.AbstractPager;
import com.google.gwt.user.client.ui.ScrollPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.view.client.HasRows;
/**
* Basically a scroll panel
* Partially changed from the code at http://samples.gwtproject.org/samples/Showcase/Showcase.html#!CwCellList
* @author Costantino Perciante at ISTI-CNR (costantino.perciante@isti.cnr.it)
*/
public class ShowMorePagerPanel extends AbstractPager{
/**
* The default increment size.
*/
public static final int DEFAULT_INCREMENT = 5;
/**
* The increment size.
*/
private int incrementSize = DEFAULT_INCREMENT;
/**
* The last scroll position.
*/
private int lastScrollPos = 0;
/**
* The scrollable panel.
*/
private final ScrollPanel scrollable = new ScrollPanel();
/**
* Construct a new {@link ShowMorePagerPanel}.
*/
public ShowMorePagerPanel() {
initWidget(scrollable);
// Do not let the scrollable take tab focus.
scrollable.getElement().setTabIndex(-1);
// Handle scroll events.
scrollable.addScrollHandler(new ScrollHandler() {
public void onScroll(ScrollEvent event) {
// If scrolling up, ignore the event.
int oldScrollPos = lastScrollPos;
lastScrollPos = scrollable.getVerticalScrollPosition();
if (oldScrollPos >= lastScrollPos) {
return;
}
HasRows display = getDisplay();
if (display == null) {
return;
}
int maxScrollTop = scrollable.getWidget().getOffsetHeight()
- scrollable.getOffsetHeight();
if (lastScrollPos >= maxScrollTop) {
// We are near the end, so increase the page size.
int newPageSize = Math.min(
display.getVisibleRange().getLength() + incrementSize,
display.getRowCount());
display.setVisibleRange(0, newPageSize);
}
}
});
}
/**
* Get the number of rows by which the range is increased when the scrollbar
* reaches the bottom.
* @return the increment size
*/
public int getIncrementSize() {
return incrementSize;
}
@Override
public void setDisplay(HasRows display) {
assert display instanceof Widget : "display must extend Widget";
scrollable.setWidget((Widget) display);
super.setDisplay(display);
}
/**
* Set the number of rows by which the range is increased when the scrollbar
* reaches the bottom.
*
* @param incrementSize the incremental number of rows
*/
public void setIncrementSize(int incrementSize) {
this.incrementSize = incrementSize;
}
@Override
protected void onRangeOrRowCountChanged() {
}
}

View File

@ -1,12 +1,25 @@
package org.gcube.portlets.widgets.ckandatapublisherwidget.client.ui.TwinColumnSelection;
import java.util.Iterator;
import java.util.List;
import java.util.Set;
import com.github.gwtbootstrap.client.ui.Button;
import com.google.gwt.core.client.GWT;
import com.google.gwt.dom.client.Style.BorderStyle;
import com.google.gwt.dom.client.Style.Unit;
import com.google.gwt.event.dom.client.ClickEvent;
import com.google.gwt.event.dom.client.ClickHandler;
import com.google.gwt.uibinder.client.UiBinder;
import com.google.gwt.uibinder.client.UiField;
import com.google.gwt.user.cellview.client.CellList;
import com.google.gwt.user.cellview.client.HasKeyboardPagingPolicy.KeyboardPagingPolicy;
import com.google.gwt.user.client.ui.Composite;
import com.google.gwt.user.client.ui.VerticalPanel;
import com.google.gwt.user.client.ui.Widget;
import com.google.gwt.view.client.ListDataProvider;
import com.google.gwt.view.client.MultiSelectionModel;
import com.google.gwt.view.client.SelectionChangeEvent;
/**
* The twin column panels for selection of the files to attach to the catalague product.
@ -14,18 +27,35 @@ import com.google.gwt.user.client.ui.Widget;
*
*/
public class TwinColumnSelectionMainPanel extends Composite{
@UiField
VerticalPanel leftColumn;
@UiField
VerticalPanel rightColumn;
@UiField
Button addToSelected;
@UiField
Button addToSelectedWithChild;
@UiField
Button addToUnselected;
@UiField
VerticalPanel leftContainer;
@UiField
VerticalPanel rightContainer;
@UiField
VerticalPanel buttonsPanel;
@UiField
Button allToRightButton;
@UiField
Button toRightButton;
@UiField
Button toLeftButton;
@UiField
Button allToLeftButton;
@UiField
Button goRootButton;
private final String PANEL_BORDER_COLOR = "#08c";
private final String PANEL_HEIGHT = "400px";
private ShowMorePagerPanel showMorePanelLeft = new ShowMorePagerPanel();
private ShowMorePagerPanel showMorePanelRight = new ShowMorePagerPanel();
private CellList<ResourceElementBean> cellListLeft;
private CellList<ResourceElementBean> cellListRight;
private ListDataProvider<ResourceElementBean> dataProviderLeft = new ListDataProvider<ResourceElementBean>();
private ListDataProvider<ResourceElementBean> dataProviderRight = new ListDataProvider<ResourceElementBean>();
private MultiSelectionModel<ResourceElementBean> selectionModelRight;
private MultiSelectionModel<ResourceElementBean> selectionModelLeft;
private final List<ResourceElementBean> initialElements;
private static TwinColumnSelectionMainPanelUiBinder uiBinder = GWT
.create(TwinColumnSelectionMainPanelUiBinder.class);
@ -34,11 +64,264 @@ public class TwinColumnSelectionMainPanel extends Composite{
UiBinder<Widget, TwinColumnSelectionMainPanel> {
}
/**
* Constructor
*/
public TwinColumnSelectionMainPanel() {
public TwinColumnSelectionMainPanel(List<ResourceElementBean> elements) {
initWidget(uiBinder.createAndBindUi(this));
this.initialElements = elements;
this.buttonsPanel.getElement().getStyle().setMarginTop(50, Unit.PCT);
allToRightButton.getElement().getStyle().setMarginBottom(4, Unit.PX);
toRightButton.getElement().getStyle().setMarginBottom(4, Unit.PX);
toLeftButton.getElement().getStyle().setMarginBottom(4, Unit.PX);
allToLeftButton.getElement().getStyle().setMarginBottom(4, Unit.PX);
buttonsPanel.getElement().setAttribute("align", "center");
prepareHandlers();
initLeftSidePanel(elements);
initRightSidePanel(elements);
}
/**
* Initialize the left side panel
*/
private void initLeftSidePanel(List<ResourceElementBean> elements) {
// initialize the left side list
ResourceCellLeft cell = new ResourceCellLeft();
// Set a key provider that provides a unique key for each object.
cellListLeft = new CellList<ResourceElementBean>(cell, ResourceElementBean.KEY_PROVIDER);
cellListLeft.setPageSize(elements.size());
cellListLeft.setKeyboardPagingPolicy(KeyboardPagingPolicy.INCREASE_RANGE);
// Add a selection model so we can select cells.
selectionModelLeft = new MultiSelectionModel<ResourceElementBean>(ResourceElementBean.KEY_PROVIDER);
cellListLeft.setSelectionModel(selectionModelLeft);
// perform an action on selection
selectionModelLeft.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
Iterator<ResourceElementBean> selectedObjectsIterator = selectionModelLeft.getSelectedSet().iterator();
while (selectedObjectsIterator.hasNext()) {
ResourceElementBean selectedBean = (ResourceElementBean) selectedObjectsIterator.next();
if(selectedBean.isFolder()){
if(selectionModelLeft.getSelectedSet().size() == 1){
GWT.log("Selected folder");
dataProviderLeft.setList(selectedBean.getChildren());
dataProviderLeft.flush();
dataProviderLeft.refresh();
}
selectionModelLeft.setSelected(selectedBean, false); // unselect the folder
}
}
// enable the buttons that allows to move the objects to the right
enableMoveToRightButtons(selectionModelLeft.getSelectedSet());
}
});
// set the list into the provider
dataProviderLeft.setList(elements);
// set the cell list into the provider
dataProviderLeft.addDataDisplay(cellListLeft);
// manage showMorePanelLeft
showMorePanelLeft.setDisplay(cellListLeft);
showMorePanelLeft.setHeight(PANEL_HEIGHT);
showMorePanelLeft.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
showMorePanelLeft.getElement().getStyle().setBorderColor(PANEL_BORDER_COLOR);
// add the list to the leftContainerPanel
leftContainer.add(showMorePanelLeft);
}
/**
* Initialize the left side panel
*/
private void initRightSidePanel(List<ResourceElementBean> elements) {
GWT.log("Size is " + elements.size());
// initialize the left side list
ResourceCellRight cell = new ResourceCellRight();
// Set a key provider that provides a unique key for each object.
cellListRight = new CellList<ResourceElementBean>(cell, ResourceElementBean.KEY_PROVIDER);
cellListRight.setKeyboardPagingPolicy(KeyboardPagingPolicy.INCREASE_RANGE);
cellListRight.setPageSize(elements.size());
// Add a selection model so we can select cells.
selectionModelRight = new MultiSelectionModel<ResourceElementBean>(ResourceElementBean.KEY_PROVIDER);
cellListRight.setSelectionModel(selectionModelRight);
// perform an action on selection
selectionModelRight.addSelectionChangeHandler(new SelectionChangeEvent.Handler() {
public void onSelectionChange(SelectionChangeEvent event) {
// enable the buttons that allows to move the objects to the left
enableMoveToLeftButtons(selectionModelRight.getSelectedSet());
}
});
// set the list into the provider
dataProviderRight.setList(elements);
// set the cell list into the provider
dataProviderRight.addDataDisplay(cellListRight);
// manage showMorePanelRight
showMorePanelRight.setDisplay(cellListRight);
showMorePanelRight.setHeight(PANEL_HEIGHT);
showMorePanelRight.getElement().getStyle().setBorderStyle(BorderStyle.SOLID);
showMorePanelRight.getElement().getStyle().setBorderColor(PANEL_BORDER_COLOR);
// add the list to the leftContainerPanel
rightContainer.add(showMorePanelRight);
}
/**
* Enable/disable the buttons to move objects from left to right properly.
* @param setselectedItemsLeft
*/
private void enableMoveToRightButtons(Set<ResourceElementBean> setselectedItemsLeft){
if(setselectedItemsLeft.size() > 1){
allToRightButton.setEnabled(true);
toRightButton.setEnabled(false);
}
else{
allToRightButton.setEnabled(false);
toRightButton.setEnabled(true);
}
}
/**
* Enable/disable the buttons to move objects from right to left properly.
* @param setselectedItemsRight
*/
private void enableMoveToLeftButtons(Set<ResourceElementBean> setselectedItemsRight){
if(setselectedItemsRight.size() > 1){
allToLeftButton.setEnabled(true);
toLeftButton.setEnabled(false);
}
else{
allToLeftButton.setEnabled(false);
toLeftButton.setEnabled(true);
}
}
/**
* Prepare the buttons' handlers
*/
private void prepareHandlers() {
goRootButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
dataProviderLeft.setList(initialElements);
dataProviderLeft.flush();
}
});
allToRightButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
moveToRight(selectionModelLeft.getSelectedSet());
}
});
toRightButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
moveToRight(selectionModelLeft.getSelectedSet());
}
});
allToLeftButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
moveToLeft(selectionModelRight.getSelectedSet());
}
});
toLeftButton.addClickHandler(new ClickHandler() {
@Override
public void onClick(ClickEvent event) {
moveToLeft(selectionModelRight.getSelectedSet());
}
});
}
/**
* Move to right
* @param toMoveRight
*/
private void moveToRight(Set<ResourceElementBean> set){
if(set == null)
return;
Iterator<ResourceElementBean> iterator = set.iterator();
while (iterator.hasNext()) {
ResourceElementBean resourceElementBean = (ResourceElementBean) iterator
.next();
resourceElementBean.setMovedToRight(true);
GWT.log("To move right " + resourceElementBean);
}
// refresh providers
dataProviderLeft.flush();
dataProviderLeft.refresh();
dataProviderRight.flush();
dataProviderRight.refresh();
}
/**
* Move to right
* @param toMoveLeft
*/
private void moveToLeft(Set<ResourceElementBean> set){
if(set == null)
return;
Iterator<ResourceElementBean> iterator = set.iterator();
while (iterator.hasNext()) {
ResourceElementBean resourceElementBean = (ResourceElementBean) iterator
.next();
resourceElementBean.setMovedToRight(false);
GWT.log("To move left " + resourceElementBean);
}
// refresh providers
dataProviderLeft.flush();
dataProviderLeft.refresh();
dataProviderRight.flush();
dataProviderRight.refresh();
}
}

View File

@ -2,25 +2,33 @@
<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">
<ui:style>
<!--
EMPTY
-->
.right-vertical-panel {
margin-top: 30px;
margin-left: 0px;
}
</ui:style>
<g:HTMLPanel>
<b:FluidContainer>
<b:FluidRow>
<b:Column size="5" ui:field="leftColumn">
<g:VerticalPanel ui:field="leftContainer"></g:VerticalPanel>
</b:Column>
<b:Column size="2" ui:field="centralPanel">
<g:VerticalPanel>
<b:Button icon="ANGLE_RIGHT" ui:fied="addToSelected"></b:Button>
<b:Button icon="DOUBLE_ANGLE_RIGHT" ui:field="addToSelectedWithChild"></b:Button>
<b:Button icon="ANGLE_LEFT" ui:fied="addToUnselected"></b:Button>
<b:Column size="3" ui:field="leftColumn">
<b:Button enabled="true" type="LINK" ui:field="goRootButton">Root level</b:Button>
<g:VerticalPanel ui:field="leftContainer" width="100%">
</g:VerticalPanel>
</b:Column>
<b:Column size="5" ui:field="rightColumn">
<g:VerticalPanel ui:field="rightContainer"></g:VerticalPanel>
<b:Column size="1" ui:field="centralPanel">
<g:VerticalPanel ui:field="buttonsPanel">
<b:Button ui:field="allToRightButton" name="toRight"
enabled="false" title="Move selected files to right" text=">>" />
<b:Button ui:field="toRightButton" name="toRight"
enabled="false" title="Move file to the right" text=">" />
<b:Button ui:field="toLeftButton" name="toLeft" enabled="false"
title="Move file to the left" text="&lt;" />
<b:Button ui:field="allToLeftButton" name="toRight"
enabled="false" title="Move selected files to left" text="&lt;&lt;" />
</g:VerticalPanel>
</b:Column>
<b:Column size="3" ui:field="rightColumn">
<g:VerticalPanel ui:field="rightContainer" styleName="{style.right-vertical-panel}" width="100%"></g:VerticalPanel>
</b:Column>
</b:FluidRow>
</b:FluidContainer>