From: Jouni Koivuviita Date: Fri, 2 Nov 2007 12:08:15 +0000 (+0000) Subject: IOrderedLayout vertical now also with TABLE implementation! :) X-Git-Tag: 6.7.0.beta1~5695 X-Git-Url: https://source.dussan.org/?a=commitdiff_plain;h=7186ae9647b6ff59beb93bbc54c7d382642ceeb4;p=vaadin-framework.git IOrderedLayout vertical now also with TABLE implementation! :) Paddings removed from IPanel and ITabsheet CSS. StyleConstants class added to client-side. svn changeset:2683/svn branch:trunk --- diff --git a/src/com/itmill/toolkit/demo/HelloWorld.java b/src/com/itmill/toolkit/demo/HelloWorld.java index 0118a68d6d..b6b40fcc11 100644 --- a/src/com/itmill/toolkit/demo/HelloWorld.java +++ b/src/com/itmill/toolkit/demo/HelloWorld.java @@ -1,6 +1,12 @@ package com.itmill.toolkit.demo; -import com.itmill.toolkit.ui.*; +import com.itmill.toolkit.data.Property.ValueChangeEvent; +import com.itmill.toolkit.data.Property.ValueChangeListener; +import com.itmill.toolkit.ui.Label; +import com.itmill.toolkit.ui.OrderedLayout; +import com.itmill.toolkit.ui.Panel; +import com.itmill.toolkit.ui.Slider; +import com.itmill.toolkit.ui.Window; /** * The classic "hello, world!" example for IT Mill Toolkit. The class simply @@ -14,6 +20,7 @@ import com.itmill.toolkit.ui.*; */ public class HelloWorld extends com.itmill.toolkit.Application { + private Label value = new Label(); /** * The initialization method that is the only requirement for inheriting the * com.itmill.toolkit.service.Application class. It will be automatically @@ -27,17 +34,43 @@ public class HelloWorld extends com.itmill.toolkit.Application { */ Window main = new Window("Hello window"); setMainWindow(main); + + OrderedLayout ol = new OrderedLayout(OrderedLayout.ORIENTATION_HORIZONTAL); setTheme("example"); - /* - * - Create a label with the classic text - Add the label to the main - * window - */ - main.addComponent(new Label("Hello World!")); + + Slider s = new Slider(); + s.setCaption("Volume"); + s.setMax(20); + s.setMin(12); + //s.setResolution(2); + s.setImmediate(true); + s.setOrientation(Slider.ORIENTATION_VERTICAL); + //s.setArrows(true); + s.setSize(200); + //s.addStyleName(Slider.STYLE_SCROLLBAR); + + s.addListener(new ValueChangeListener() { - /* - * And that's it! The framework will display the main window and its - * contents when the application is accessed with the terminal. - */ + public void valueChange(ValueChangeEvent event) { + value.setValue(event.getProperty().getValue()); + } + + }); + + ol.addComponent(s); + + Panel p = new Panel("Volume level"); + p.setHeight(400); + p.setHeightUnits(Panel.UNITS_PIXELS); + ((OrderedLayout)p.getLayout()).setMargin(false,true,true,false); + + p.addComponent(value); + ol.addComponent(p); + value.setValue(s.getValue()); + + ol.setComponentAlignment(s, OrderedLayout.ALIGNMENT_LEFT, OrderedLayout.ALIGNMENT_BOTTOM); + + main.setLayout(ol); } } diff --git a/src/com/itmill/toolkit/terminal/gwt/client/StyleConstants.java b/src/com/itmill/toolkit/terminal/gwt/client/StyleConstants.java new file mode 100644 index 0000000000..c562082e4e --- /dev/null +++ b/src/com/itmill/toolkit/terminal/gwt/client/StyleConstants.java @@ -0,0 +1,10 @@ +package com.itmill.toolkit.terminal.gwt.client; + +public class StyleConstants { + + public static final String LAYOUT_MARGIN_TOP = "i-layoutmargin-top"; + public static final String LAYOUT_MARGIN_RIGHT = "i-layoutmargin-right"; + public static final String LAYOUT_MARGIN_BOTTOM = "i-layoutmargin-bottom"; + public static final String LAYOUT_MARGIN_LEFT = "i-layoutmargin-left"; + +} diff --git a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java index bbc5655d01..59cf73d7de 100644 --- a/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java +++ b/src/com/itmill/toolkit/terminal/gwt/client/ui/IOrderedLayout.java @@ -13,6 +13,7 @@ import com.itmill.toolkit.terminal.gwt.client.ApplicationConnection; import com.itmill.toolkit.terminal.gwt.client.Caption; import com.itmill.toolkit.terminal.gwt.client.Container; import com.itmill.toolkit.terminal.gwt.client.Paintable; +import com.itmill.toolkit.terminal.gwt.client.StyleConstants; import com.itmill.toolkit.terminal.gwt.client.UIDL; /** @@ -28,6 +29,13 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { public static final int ORIENTATION_VERTICAL = 0; public static final int ORIENTATION_HORIZONTAL = 1; + public static final int ALIGNMENT_LEFT = 1; + public static final int ALIGNMENT_RIGHT = 2; + public static final int ALIGNMENT_TOP = 4; + public static final int ALIGNMENT_BOTTOM = 8; + public static final int HORIZONTAL_ALIGNMENT_CENTER = 16; + public static final int VERTICAL_ALIGNMENT_CENTER = 32; + int orientationMode = ORIENTATION_VERTICAL; protected HashMap componentToCaption = new HashMap(); @@ -39,6 +47,11 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { * horizontal layout this is TR and for vertical DIV. */ protected Element childContainer; + + /* + * Margin element that provides marginals. + */ + private Element margin; public IOrderedLayout(int orientation) { orientationMode = orientation; @@ -47,20 +60,18 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { } protected void constructDOM() { - switch (orientationMode) { - case ORIENTATION_HORIZONTAL: - Element table = DOM.createTable(); - Element tBody = DOM.createTBody(); - childContainer = DOM.createTR(); - DOM.appendChild(table, tBody); + margin = DOM.createDiv(); + Element table = DOM.createTable(); + Element tBody = DOM.createTBody(); + childContainer = orientationMode == ORIENTATION_HORIZONTAL ? DOM + .createTR() : tBody; + DOM.appendChild(table, tBody); + if (orientationMode == ORIENTATION_HORIZONTAL) DOM.appendChild(tBody, childContainer); - setElement(table); - break; - default: - childContainer = DOM.createDiv(); - setElement(childContainer); - break; - } + setElement(table); + // prevent unwanted spacing + DOM.setElementAttribute(table, "cellSpacing", "0"); + DOM.setElementAttribute(table, "cellPadding", "0"); } public void updateFromUIDL(UIDL uidl, ApplicationConnection client) { @@ -88,6 +99,7 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { while (newIt.hasNext()) { Widget child = (Widget) newIt.next(); UIDL childUidl = (UIDL) newUidl.next(); + if (oldChild == null && oldIt.hasNext()) { // search for next old Paintable which still exists in layout // and delete others @@ -133,6 +145,60 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { if (!uidlWidgets.contains(p)) removePaintable(p); } + + // Component alignments as a comma separated list. + // See com.itmill.toolkit.ui.OrderedLayout.java for possible values. + String[] alignments = uidl.getStringAttribute("alignments").split(","); + int alignmentIndex = 0; + + // Insert alignment attributes + Iterator it = getPaintables().iterator(); + while (it.hasNext()) { + + // Calculate alignment info + int alignment = Integer.parseInt((alignments[alignmentIndex++])); + // Vertical alignment + String vAlign = ""; + if ((alignment & ALIGNMENT_TOP) == ALIGNMENT_TOP) + vAlign = "top"; + else if ((alignment & ALIGNMENT_BOTTOM) == ALIGNMENT_BOTTOM) + vAlign = "bottom"; + else if ((alignment & VERTICAL_ALIGNMENT_CENTER) == VERTICAL_ALIGNMENT_CENTER) + vAlign = "middle"; + // Horizontal alignment + String hAlign = ""; + if ((alignment & ALIGNMENT_LEFT) == ALIGNMENT_LEFT) + hAlign = "left"; + else if ((alignment & ALIGNMENT_RIGHT) == ALIGNMENT_RIGHT) + hAlign = "right"; + else if ((alignment & HORIZONTAL_ALIGNMENT_CENTER) == HORIZONTAL_ALIGNMENT_CENTER) + hAlign = "center"; + + Element td = DOM.getParent(((Widget) it.next()).getElement()); + DOM.setStyleAttribute(td, "vertical-align", vAlign); + DOM.setStyleAttribute(td, "text-align", hAlign); + } + + // Modify layout marginals + String marginClasses = ""; + if (uidl.hasAttribute("marginTop")) + marginClasses = StyleConstants.LAYOUT_MARGIN_TOP; + if (uidl.hasAttribute("marginRight")) + marginClasses = StyleConstants.LAYOUT_MARGIN_RIGHT; + if (uidl.hasAttribute("marginBottom")) + marginClasses = StyleConstants.LAYOUT_MARGIN_BOTTOM; + if (uidl.hasAttribute("marginLeft")) + marginClasses = StyleConstants.LAYOUT_MARGIN_LEFT; + + DOM.setElementProperty(margin, "className", marginClasses); + + // Adjust size + if(uidl.hasAttribute("width")) + setWidth(uidl.getStringAttribute("width")); + else setWidth("100%"); + if(uidl.hasAttribute("height")) + setHeight(uidl.getStringAttribute("height")); + else setHeight(""); } /** @@ -202,7 +268,8 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { } else { Element container = createWidgetWrappper(); DOM.insertChild(childContainer, container, beforeIndex); - insert(w, container, beforeIndex, false); + insert(w, orientationMode == ORIENTATION_HORIZONTAL ? container + : DOM.getFirstChild(container), beforeIndex, false); } } @@ -214,7 +281,9 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { case ORIENTATION_HORIZONTAL: return DOM.createTD(); default: - return DOM.createDiv(); + Element tr = DOM.createTR(); + DOM.appendChild(tr, DOM.createTD()); + return tr; } } @@ -253,7 +322,8 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { public void add(Widget w) { Element wrapper = createWidgetWrappper(); DOM.appendChild(childContainer, wrapper); - super.add(w, wrapper); + super.add(w, orientationMode == ORIENTATION_HORIZONTAL ? wrapper : DOM + .getFirstChild(wrapper)); } public boolean remove(int index) { @@ -265,7 +335,9 @@ public abstract class IOrderedLayout extends ComplexPanel implements Container { boolean removed = super.remove(w); if (removed) { if (!(w instanceof Caption)) { - DOM.removeChild(childContainer, wrapper); + DOM.removeChild(childContainer, + orientationMode == ORIENTATION_HORIZONTAL ? wrapper + : DOM.getParent(wrapper)); } return true; } diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css b/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css index 57fad722a8..5790e632c0 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/common/common.css @@ -89,3 +89,18 @@ margin: 0.3em 0 0 0; } + +/* Layout margin values */ + +.i-layoutmargin-top { + margin-top: 15px; +} +.i-layoutmargin-bottom { + margin-bottom: 15px; +} +.i-layoutmargin-left { + margin-left: 18px; +} +.i-layoutmargin-right { + margin-right: 18px; +} \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css index 75fee0c567..cd26ace64c 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/panel/panel.css @@ -57,7 +57,6 @@ border-bottom: none; background-color: #fff; overflow: auto; - padding: 15px 18px 6px 18px; } .i-panel-deco { @@ -101,7 +100,6 @@ .i-panel-content-light { border: none; background: transparent; - padding: 15px 18px; } .i-panel-deco-light { @@ -111,18 +109,9 @@ -/* Panel without padding (NO_PADDING style) */ - -.i-panel-content-nopad { - padding: 0; -} - - - /* Light panel contained within another panel or a tabsheet */ -/* Use more precise selector to override IE specific rules automatically */ .i-panel .i-panel-caption-light, .i-tabsheet .i-panel-caption-light { @@ -159,11 +148,9 @@ * html .i-panel-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; } *+html .i-panel-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; } * html .i-panel-deco { @@ -187,12 +174,4 @@ overflow: hidden; background: #c1c6cc; border: none; -} - -/* Without padding */ -* html .i-panel-content-nopad { - padding: 0; -} -*+html .i-panel-content-nopad { - padding: 0; } \ No newline at end of file diff --git a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css index b2a22c51a4..f034dad5ea 100644 --- a/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css +++ b/src/com/itmill/toolkit/terminal/gwt/public/default/tabsheet/tabsheet.css @@ -67,7 +67,6 @@ border-bottom: none; background-color: #fff; overflow: auto; - padding: 15px 18px 6px 18px; } .i-tabsheet-deco { @@ -112,32 +111,22 @@ .i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{ background: transparent url(../common/img/ajax-loader.gif) no-repeat; display: block; - margin-left:-10px; - padding-left:10px; - margin-top:-12px; - padding-top:12px; + margin-left: -10px; + padding-left: 10px; + margin-top: -12px; + padding-top: 12px; } -/* Tabsheet without padding (NO_PADDING style) */ - -.i-tabsheet-content-nopad { - padding: 0; -} - - - /* IE specific styles */ * html .i-tabsheet-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; } *+html .i-tabsheet-content { border-bottom: 1px solid #babfc0; - padding: 15px 18px; } * html .i-tabsheet-tabs { @@ -175,13 +164,4 @@ *+html .i-tabsheet-deco { height: 0; overflow: hidden; -} - -/* Without padding */ - -* html .i-tabsheet-content-nopad { - padding: 0; -} -*+html .i-tabsheet-content-nopad { - padding: 0; } \ No newline at end of file diff --git a/src/com/itmill/toolkit/ui/AbstractComponentContainer.java b/src/com/itmill/toolkit/ui/AbstractComponentContainer.java index 5d50f1eaf1..659a810987 100644 --- a/src/com/itmill/toolkit/ui/AbstractComponentContainer.java +++ b/src/com/itmill/toolkit/ui/AbstractComponentContainer.java @@ -29,8 +29,10 @@ package com.itmill.toolkit.ui; import java.lang.reflect.Method; -import java.util.LinkedList; import java.util.Iterator; +import java.util.LinkedList; + +import com.itmill.toolkit.terminal.Sizeable; /** * Extension to {@link AbstractComponent} that defines the default @@ -44,8 +46,8 @@ import java.util.Iterator; * @since 3.0 */ public abstract class AbstractComponentContainer extends AbstractComponent - implements ComponentContainer { - + implements ComponentContainer, Sizeable { + /** * Constructs a new component container. */ @@ -205,4 +207,5 @@ public abstract class AbstractComponentContainer extends AbstractComponent fireComponentDetachEvent(c); } } + } diff --git a/src/com/itmill/toolkit/ui/AbstractLayout.java b/src/com/itmill/toolkit/ui/AbstractLayout.java index a35ace0f87..06d0d1899d 100644 --- a/src/com/itmill/toolkit/ui/AbstractLayout.java +++ b/src/com/itmill/toolkit/ui/AbstractLayout.java @@ -21,7 +21,7 @@ public abstract class AbstractLayout extends AbstractComponentContainer * space at that edge. */ protected boolean[] margins; - + /** * Height of the layout. Set to -1 for undefined height. */ @@ -73,7 +73,7 @@ public abstract class AbstractLayout extends AbstractComponentContainer margins = new boolean[] { topEnabled, rightEnabled, bottomEnabled, leftEnabled }; } - + /* * (non-Javadoc) * @@ -182,15 +182,18 @@ public abstract class AbstractLayout extends AbstractComponentContainer * @see com.itmill.toolkit.ui.AbstractComponent#paintContent(com.itmill.toolkit.terminal.PaintTarget) */ public void paintContent(PaintTarget target) throws PaintException { - super.paintContent(target); // Add margin info. Defaults to false. if (margins == null) setMargin(false); - target.addAttribute("marginTop", margins[0]); - target.addAttribute("marginRight", margins[1]); - target.addAttribute("marginBottom", margins[2]); - target.addAttribute("marginLeft", margins[3]); + if (margins[0]) + target.addAttribute("marginTop", margins[0]); + if (margins[1]) + target.addAttribute("marginRight", margins[1]); + if (margins[2]) + target.addAttribute("marginBottom", margins[2]); + if (margins[3]) + target.addAttribute("marginLeft", margins[3]); // Add size info if (getHeight() > -1) diff --git a/src/com/itmill/toolkit/ui/ExpandLayout.java b/src/com/itmill/toolkit/ui/ExpandLayout.java index 253edb8155..497035f8f8 100644 --- a/src/com/itmill/toolkit/ui/ExpandLayout.java +++ b/src/com/itmill/toolkit/ui/ExpandLayout.java @@ -23,18 +23,10 @@ import com.itmill.toolkit.terminal.Sizeable; */ public class ExpandLayout extends OrderedLayout implements Sizeable { - private int height = 100; - - private int width = 100; - - private int widthUnit = UNITS_PERCENTAGE; - - private int heightUnit = UNITS_PERCENTAGE; - private Component expanded; public ExpandLayout() { - + setSizeFull(); } public ExpandLayout(int orientation) { @@ -117,36 +109,4 @@ public class ExpandLayout extends OrderedLayout implements Sizeable { expanded = newComponent; } - public int getHeight() { - return height; - } - - public int getHeightUnits() { - return heightUnit; - } - - public int getWidth() { - return width; - } - - public int getWidthUnits() { - return widthUnit; - } - - public void setHeight(int height) { - this.height = height; - - } - - public void setHeightUnits(int units) { - this.heightUnit = units; - } - - public void setWidth(int width) { - this.width = width; - } - - public void setWidthUnits(int units) { - this.widthUnit = units; - } } diff --git a/src/com/itmill/toolkit/ui/OrderedLayout.java b/src/com/itmill/toolkit/ui/OrderedLayout.java index 70a1ef2468..0b7cc04a09 100644 --- a/src/com/itmill/toolkit/ui/OrderedLayout.java +++ b/src/com/itmill/toolkit/ui/OrderedLayout.java @@ -74,32 +74,32 @@ public class OrderedLayout extends AbstractLayout { /** * Contained component should be aligned horizontally to the left. */ - private int ALIGNMENT_LEFT = 1; + public static final int ALIGNMENT_LEFT = 1; /** * Contained component should be aligned horizontally to the right. */ - private int ALIGNMENT_RIGHT = 2; + public static final int ALIGNMENT_RIGHT = 2; /** * Contained component should be aligned vertically to the top. */ - private int ALIGNMENT_TOP = 4; + public static final int ALIGNMENT_TOP = 4; /** * Contained component should be aligned vertically to the bottom. */ - private int ALIGNMENT_BOTTOM = 8; + public static final int ALIGNMENT_BOTTOM = 8; /** * Contained component should be horizontally aligned to center. */ - private int HORIZONTAL_ALIGNMENT_CENTER = 16; - + public static final int HORIZONTAL_ALIGNMENT_CENTER = 16; + /** * Contained component should be vertically aligned to center. */ - private int VERTICAL_ALIGNMENT_CENTER = 32; + public static final int VERTICAL_ALIGNMENT_CENTER = 32; /** * Orientation of the layout. @@ -215,7 +215,7 @@ public class OrderedLayout extends AbstractLayout { super.paintContent(target); // Adds the attributes: orientation - // note that the default values (b/vertival) are omitted + // note that the default values (b/vertical) are omitted if (orientation == ORIENTATION_HORIZONTAL) target.addAttribute("orientation", "horizontal"); @@ -238,7 +238,7 @@ public class OrderedLayout extends AbstractLayout { .intValue(); else // Default alignment is top-left - alignments += ALIGNMENT_TOP + ALIGNMENT_LEFT; + alignments += (ALIGNMENT_TOP + ALIGNMENT_LEFT); if (i.hasNext()) alignments += ","; } @@ -317,7 +317,8 @@ public class OrderedLayout extends AbstractLayout { } /** - * Set alignment for one contained component in this layout. + * Set alignment for one contained component in this layout. Alignment is + * calculated as a bit mask of the two passed values. * * @param childComponent * the component to align within it's layout cell. diff --git a/src/com/itmill/toolkit/ui/Panel.java b/src/com/itmill/toolkit/ui/Panel.java index 6cea4db208..151c968b38 100644 --- a/src/com/itmill/toolkit/ui/Panel.java +++ b/src/com/itmill/toolkit/ui/Panel.java @@ -100,13 +100,13 @@ public class Panel extends AbstractLayout implements Scrollable, } /** - * Creates a new empty panel with caption. Ordered layout is used. + * Creates a new empty panel with caption. Default layout is used. * * @param caption * the caption used in the panel. */ public Panel(String caption) { - this(caption, new OrderedLayout()); + this(caption, null); } /** @@ -140,8 +140,11 @@ public class Panel extends AbstractLayout implements Scrollable, public void setLayout(Layout layout) { // Only allow non-null layouts - if (layout == null) + if (layout == null) { layout = new OrderedLayout(); + // Force margins by default + layout.setMargin(true); + } // Sets the panel to be parent for the layout layout.setParent(this); @@ -182,18 +185,22 @@ public class Panel extends AbstractLayout implements Scrollable, public void paintContent(PaintTarget target) throws PaintException { layout.paint(target); - // We need to add these variables here ourselves, because Panel needs - // width and height as variables, not attributes - - // Add margin info. Defaults to false. + // We need to add these attributes here (and not in super.paintContent), + // because Panel needs to have size information as variables. + + // Add margin info if (margins == null) setMargin(false); - target.addAttribute("marginTop", margins[0]); - target.addAttribute("marginRight", margins[1]); - target.addAttribute("marginBottom", margins[2]); - target.addAttribute("marginLeft", margins[3]); - - // Add size info + if (margins[0]) + target.addAttribute("marginTop", margins[0]); + if (margins[1]) + target.addAttribute("marginRight", margins[1]); + if (margins[2]) + target.addAttribute("marginBottom", margins[2]); + if (margins[3]) + target.addAttribute("marginLeft", margins[3]); + + // Add size info as variables if (getHeight() > -1) target.addVariable(this, "height", getHeight() + UNIT_SYMBOLS[getHeightUnits()]); @@ -261,7 +268,7 @@ public class Panel extends AbstractLayout implements Scrollable, */ public void addComponent(Component c) { layout.addComponent(c); - // No repaint request is made as we except the underlaying container to + // No repaint request is made as we except the underlying container to // request repaints } @@ -274,7 +281,7 @@ public class Panel extends AbstractLayout implements Scrollable, */ public void removeComponent(Component c) { layout.removeComponent(c); - // No repaint request is made as we except the underlaying container to + // No repaint request is made as we except the underlying container to // request repaints }