Paddings removed from IPanel and ITabsheet CSS.
StyleConstants class added to client-side.
svn changeset:2683/svn branch:trunk
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
*/
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
*/
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);
}
}
--- /dev/null
+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";
+
+}
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;
/**
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();
* 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;
}
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) {
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
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("");
}
/**
} 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);
}
}
case ORIENTATION_HORIZONTAL:
return DOM.createTD();
default:
- return DOM.createDiv();
+ Element tr = DOM.createTR();
+ DOM.appendChild(tr, DOM.createTD());
+ return tr;
}
}
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) {
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;
}
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
border-bottom: none;
background-color: #fff;
overflow: auto;
- padding: 15px 18px 6px 18px;
}
.i-panel-deco {
.i-panel-content-light {
border: none;
background: transparent;
- padding: 15px 18px;
}
.i-panel-deco-light {
-/* 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 {
* 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 {
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
border-bottom: none;\r
background-color: #fff;\r
overflow: auto;\r
- padding: 15px 18px 6px 18px;\r
}\r
\r
.i-tabsheet-deco {\r
.i-tabsheet-loading .i-tabsheet-tabs .gwt-TabBarItem-selected span{\r
background: transparent url(../common/img/ajax-loader.gif) no-repeat;\r
display: block;\r
- margin-left:-10px;\r
- padding-left:10px;\r
- margin-top:-12px;\r
- padding-top:12px;\r
+ margin-left: -10px;\r
+ padding-left: 10px;\r
+ margin-top: -12px;\r
+ padding-top: 12px;\r
}\r
\r
\r
\r
\r
-/* Tabsheet without padding (NO_PADDING style) */\r
-\r
-.i-tabsheet-content-nopad {\r
- padding: 0;\r
-}\r
-\r
-\r
-\r
\r
/* IE specific styles */\r
* html .i-tabsheet-content {\r
border-bottom: 1px solid #babfc0;\r
- padding: 15px 18px;\r
}\r
*+html .i-tabsheet-content {\r
border-bottom: 1px solid #babfc0;\r
- padding: 15px 18px;\r
}\r
\r
* html .i-tabsheet-tabs {\r
*+html .i-tabsheet-deco {\r
height: 0;\r
overflow: hidden;\r
-}\r
-\r
-/* Without padding */\r
-\r
-* html .i-tabsheet-content-nopad {\r
- padding: 0;\r
-}\r
-*+html .i-tabsheet-content-nopad {\r
- padding: 0;\r
}
\ No newline at end of file
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
* @since 3.0
*/
public abstract class AbstractComponentContainer extends AbstractComponent
- implements ComponentContainer {
-
+ implements ComponentContainer, Sizeable {
+
/**
* Constructs a new component container.
*/
fireComponentDetachEvent(c);
}
}
+
}
* space at that edge.
*/
protected boolean[] margins;
-
+
/**
* Height of the layout. Set to -1 for undefined height.
*/
margins = new boolean[] { topEnabled, rightEnabled, bottomEnabled,
leftEnabled };
}
-
+
/*
* (non-Javadoc)
*
* @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)
*/
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) {
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;
- }
}
/**
* 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.
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");
.intValue();
else
// Default alignment is top-left
- alignments += ALIGNMENT_TOP + ALIGNMENT_LEFT;
+ alignments += (ALIGNMENT_TOP + ALIGNMENT_LEFT);
if (i.hasNext())
alignments += ",";
}
}
/**
- * 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.
}
/**
- * 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);
}
/**
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);
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()]);
*/
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
}
*/
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
}
projects / vaadin-framework.git / commitdiff