Skip to content

Commit

Permalink
Update bottom and/or right coordinates in AbsoluteLayout (#5)
Browse files Browse the repository at this point in the history
  • Loading branch information
@pleku
pleku committed May 15, 2015
1 parent 439d4a5 commit 5999efc
Show file tree
Hide file tree
Showing 5 changed files with 250 additions and 58 deletions.
3 changes: 3 additions & 0 deletions resizablecsslayout-demo/pom.xml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -163,6 +163,9 @@
<strict>true</strict>
<runTarget>http://localhost:8080/</runTarget>
<bindAddress>0.0.0.0</bindAddress>
<!--
<style>DETAILED</style>
-->
</configuration>
<executions>
<!-- You are free to mark this as permanently ignored in Eclipse -->
Expand Down
174 changes: 140 additions & 34 deletions resizablecsslayout-demo/src/main/java/com/vaadin/pekka/resizablecsslayout/demo/DemoUI.java
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
package com.vaadin.pekka.resizablecsslayout.demo;

import java.util.Set;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.data.Property.ValueChangeEvent;
import com.vaadin.data.Property.ValueChangeListener;
import com.vaadin.data.fieldgroup.FieldGroup;
import com.vaadin.data.util.BeanItem;
import com.vaadin.data.util.BeanItemContainer;
import com.vaadin.event.SelectionEvent;
import com.vaadin.event.SelectionEvent.SelectionListener;
import com.vaadin.pekka.resizablecsslayout.ResizableCssLayout;
import com.vaadin.pekka.resizablecsslayout.ResizableCssLayout.ResizeEndEvent;
import com.vaadin.pekka.resizablecsslayout.ResizableCssLayout.ResizeListener;
Expand All @@ -15,9 +21,12 @@
import com.vaadin.ui.Alignment;
import com.vaadin.ui.CheckBox;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.Grid;
import com.vaadin.ui.Grid.SelectionMode;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Layout;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.themes.ValoTheme;
Expand All @@ -27,8 +36,11 @@
@SuppressWarnings("serial")
public class DemoUI extends UI {

private CheckBox cancelResize;
private ResizableCssLayout gridWrapper;
private ResizableCssLayout formWrapper;

private CheckBox cancelResizeToggle;
private CheckBox listenerToggle;

public enum AvailableResizeLocations {
All, Corners, Sides, Top_Left, Top, Top_Right, Right, Bottom_Right, Bottom, Bottom_Left, Left;
Expand All @@ -38,74 +50,159 @@ public enum AvailableResizeLocations {
protected void init(VaadinRequest request) {
final Grid grid = createGrid();
gridWrapper = new ResizableCssLayout();
gridWrapper.setResizable(true);
gridWrapper.setHeight("400px");
gridWrapper.setWidth("400px");
gridWrapper.addResizeListener(new ResizeListener() {
gridWrapper.addComponent(grid);
gridWrapper.setCaption("Resize from grid's edges");

@Override
public void resizeStart(ResizeStartEvent event) {
}
Layout form = createForm(grid);
formWrapper = new ResizableCssLayout(form);
formWrapper.setResizable(true);
formWrapper.setHeight("250px");
formWrapper.setWidth("250px");

final AbsoluteLayout absoluteLayout = new AbsoluteLayout();
absoluteLayout.setSizeFull();
absoluteLayout.addComponent(gridWrapper, "top:100px;left:100px;");
absoluteLayout.addComponent(formWrapper, "right:100px; bottom:100px;");

HorizontalLayout options = createOptions();

final VerticalLayout layout = new VerticalLayout();
layout.addComponent(options);
layout.addComponent(absoluteLayout);
layout.setComponentAlignment(absoluteLayout, Alignment.MIDDLE_LEFT);
layout.setExpandRatio(absoluteLayout, 1.0F);
layout.setStyleName("demoContentLayout");
layout.setSizeFull();
layout.setSpacing(true);
setContent(layout);

}

private Layout createForm(final Grid grid) {
final VerticalLayout formLayout = new VerticalLayout();
formLayout.setSizeFull();
grid.addSelectionListener(new SelectionListener() {

@SuppressWarnings("unchecked")
@Override
public void resizeEnd(ResizeEndEvent event) {
if (!gridWrapper.isAutoAcceptResize()
&& cancelResize.getValue()) {
gridWrapper.cancelResize();
} else {
// used to make the grid columns resize
grid.getColumn("name").setExpandRatio(
grid.getColumn("name").getExpandRatio() == 2 ? 3
: 2);
public void select(SelectionEvent event) {
formLayout.removeAllComponents();
Set<Object> selected = event.getSelected();
if (!selected.isEmpty()) {
Object next = selected.iterator().next();
BeanItem<GridExampleBean> beanItem = (BeanItem<GridExampleBean>) grid
.getContainerDataSource().getItem(next);
FieldGroup fieldGroup = new FieldGroup(beanItem);
fieldGroup.setBuffered(false);
for (Object propertyId : beanItem.getItemPropertyIds()) {
formLayout.addComponent(fieldGroup
.buildAndBind(propertyId));
}
for (Component component : formLayout) {
formLayout.setComponentAlignment(component,
Alignment.MIDDLE_CENTER);
}
}
}
});
gridWrapper.addComponent(grid);

final AbsoluteLayout absoluteLayout = new AbsoluteLayout();
absoluteLayout.setSizeFull();
absoluteLayout.addComponent(gridWrapper, "top:100px;left:100px;");
grid.select(grid.getContainerDataSource().getIdByIndex(0));
return formLayout;
}

private HorizontalLayout createOptions() {
final CheckBox autoAcceptResize = new CheckBox("Auto accept resize",
gridWrapper.isAutoAcceptResize());
autoAcceptResize.addValueChangeListener(new ValueChangeListener() {

@Override
public void valueChange(ValueChangeEvent event) {
gridWrapper.setAutoAcceptResize(autoAcceptResize.getValue());
cancelResize.setEnabled(!autoAcceptResize.getValue());
formWrapper.setAutoAcceptResize(autoAcceptResize.getValue());
cancelResizeToggle.setEnabled(!autoAcceptResize.getValue());
}
});

cancelResize = new CheckBox("Cancel resize on server");
cancelResize.setEnabled(!gridWrapper.isAutoAcceptResize());
cancelResizeToggle = new CheckBox("Cancel resize on server");
cancelResizeToggle.setEnabled(!gridWrapper.isAutoAcceptResize());
cancelResizeToggle.addValueChangeListener(new ValueChangeListener() {

@Override
public void valueChange(ValueChangeEvent event) {
if (cancelResizeToggle.getValue()) {
listenerToggle.setValue(true);
}

}
});

final CheckBox toggleResizable = new CheckBox("Toggle resizable");
toggleResizable.addValueChangeListener(new ValueChangeListener() {

@Override
public void valueChange(ValueChangeEvent event) {
gridWrapper.setResizable(toggleResizable.getValue());
formWrapper.setResizable(toggleResizable.getValue());
}
});
toggleResizable.setValue(true);

listenerToggle = new CheckBox("Server side listener");
listenerToggle.addValueChangeListener(new ValueChangeListener() {
ResizeListener listener = new ResizeListener() {

@Override
public void resizeStart(ResizeStartEvent event) {
Notification.show("Resize Started",
"Location: " + event.getResizeLocation(),
Notification.Type.TRAY_NOTIFICATION);
}

@Override
public void resizeEnd(ResizeEndEvent event) {
if (!gridWrapper.isAutoAcceptResize()
&& cancelResizeToggle.getValue()) {
Notification.show("Resize Ended - Canceled",
"Width / Height: " + event.getWidth() + "/"
+ event.getHeight(),
Notification.Type.TRAY_NOTIFICATION);
gridWrapper.cancelResize();
formWrapper.cancelResize();
} else {
Notification.show("Resize Ended", "Width / Height: "
+ event.getWidth() + "/" + event.getHeight(),
Notification.Type.TRAY_NOTIFICATION);
}
}
};

@Override
public void valueChange(ValueChangeEvent event) {
if (listenerToggle.getValue()) {
gridWrapper.addResizeListener(listener);
formWrapper.addResizeListener(listener);
} else {
gridWrapper.removeResizeListener(listener);
formWrapper.removeResizeListener(listener);
}
}
});
listenerToggle.setValue(true);

final HorizontalLayout options = new HorizontalLayout();
options.addComponent(toggleResizable);
options.addComponent(listenerToggle);
options.addComponent(autoAcceptResize);
options.addComponent(cancelResize);
options.addComponent(cancelResizeToggle);
options.addComponent(createResizeLocations());
for (Component component : options) {
options.setComponentAlignment(component, Alignment.MIDDLE_CENTER);
}
options.setWidth(null);
options.setSpacing(true);

final VerticalLayout layout = new VerticalLayout();
layout.addComponent(options);
layout.addComponent(absoluteLayout);
layout.setComponentAlignment(absoluteLayout, Alignment.MIDDLE_LEFT);
layout.setExpandRatio(absoluteLayout, 1.0F);
layout.setStyleName("demoContentLayout");
layout.setSizeFull();
layout.setSpacing(true);
setContent(layout);
return options;
}

private ComboBox createResizeLocations() {
Expand All @@ -123,16 +220,21 @@ public void valueChange(ValueChangeEvent event) {
switch (value) {
case All:
gridWrapper.setAllLocationsResizable();
formWrapper.setAllLocationsResizable();
break;
case Corners:
gridWrapper.setCornersResizable();
formWrapper.setCornersResizable();
break;
case Sides:
gridWrapper.setSidesResizable();
formWrapper.setSidesResizable();
break;
default:
gridWrapper.setResizeLocations(ResizeLocation.valueOf(value
.toString().toUpperCase()));
formWrapper.setResizeLocations(ResizeLocation.valueOf(value
.toString().toUpperCase()));
break;
}
}
Expand All @@ -150,7 +252,7 @@ private Grid createGrid() {
grid.setContainerDataSource(container);
grid.getColumn("name").setExpandRatio(2);
grid.setSizeFull();
grid.setSelectionMode(SelectionMode.NONE);
grid.setSelectionMode(SelectionMode.SINGLE);
return grid;
}

Expand Down Expand Up @@ -191,5 +293,9 @@ public void setCount(int count) {
public void setAmount(double amount) {
this.amount = amount;
}

public double getSum() {
return getAmount() * getCount();
}
}
}
15 changes: 11 additions & 4 deletions resizablecsslayout-demo/src/main/webapp/VAADIN/themes/demo/demo.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,18 @@
@mixin demo {
@include valo;

.v-absolutelayout{
.v-absolutelayout {
border: 1px solid green;
.v-csslayout.resizable {
&.resizing,
&.resizing > div {

.v-csslayout > .v-verticallayout {
border: 1px solid CornflowerBlue;
}

&.resizing-child {
a,
div,
input,
span {
-webkit-user-select: none; /* Chrome all / Safari all */
-moz-user-select: none; /* Firefox all */
-ms-user-select: none; /* IE 10+ */
Expand Down
Loading

0 comments on commit 5999efc

Please sign in to comment.