xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="210mm"
- height="297mm"
+ width="70.273331mm"
+ height="66.604446mm"
id="svg1901"
sodipodi:version="0.32"
inkscape:version="0.91 r"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
- inkscape:pageopacity="0.0"
+ inkscape:pageopacity="1"
inkscape:pageshadow="2"
inkscape:zoom="1.4"
- inkscape:cx="212.24603"
- inkscape:cy="847.82098"
+ inkscape:cx="140.18358"
+ inkscape:cy="87.607372"
inkscape:document-units="px"
inkscape:current-layer="layer1"
gridtolerance="10000"
inkscape:window-x="800"
inkscape:window-y="153"
showgrid="false"
- inkscape:window-maximized="0" />
+ inkscape:window-maximized="0"
+ fit-margin-top="0"
+ fit-margin-left="0"
+ fit-margin-right="0"
+ fit-margin-bottom="0" />
<metadata
id="metadata1906">
<rdf:RDF>
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+ <dc:title></dc:title>
</cc:Work>
</rdf:RDF>
</metadata>
inkscape:label="Taso 1"
inkscape:groupmode="layer"
id="layer1"
- style="opacity:1">
+ style="opacity:1"
+ transform="translate(-67.505424,-64.081154)">
<rect
style="color:#000000;display:inline;overflow:visible;visibility:visible;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:3;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;marker:none;enable-background:accumulate"
id="rect3344"
<image
sodipodi:absref="/home/magi/itmill/vaadin/documentation/components/original-drawings/../img/slider-orig.png"
xlink:href="../img/slider-orig.png"
- y="64.081154"
- x="67.505424"
- id="image2463"
+ width="249"
height="236"
- width="249" />
+ id="image2463"
+ x="67.505424"
+ y="64.081154" />
<g
transform="matrix(0.04895833,0,0,0.04895833,85.307423,133.89853)"
id="g1317">
id="path6080"
style="fill:url(#linearGradient7607)"
inkscape:connector-curvature="0"
- d="m 70.29,24.826 v 602.34 h 35.44 v -35.44 h 35.44 v -35.4 h 35.4 v -35.44 h 70.88 v 70.84 h 35.43 v 70.88 h 35.44 v 70.87 h 35.44 v 35.44 h 70.84 v -35.44 h 35.44 v -70.87 H 424.6 v -70.88 h -35.4 v -70.84 h -35.44 v -70.88 h 141.72 v -35.43 h -35.44 v -35.44 H 424.6 v -35.44 h -35.4 v -35.41 h -35.44 v -35.43 h -35.44 v -35.44 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.4 V 60.256 H 105.73 V 24.818 H 70.29 z" />
+ d="m 70.29,24.826 0,602.34 35.44,0 0,-35.44 35.44,0 0,-35.4 35.4,0 0,-35.44 70.88,0 0,70.84 35.43,0 0,70.88 35.44,0 0,70.87 35.44,0 0,35.44 70.84,0 0,-35.44 35.44,0 0,-70.87 -35.44,0 0,-70.88 -35.4,0 0,-70.84 -35.44,0 0,-70.88 141.72,0 0,-35.43 -35.44,0 0,-35.44 -35.44,0 0,-35.44 -35.4,0 0,-35.41 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.44,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.4,0 0,-35.41 -35.44,0 0,-35.438 -35.44,0 z" />
<path
id="rect1430"
style="fill:#000000;fill-rule:evenodd"
inkscape:connector-curvature="0"
- d="m 35.438,24.812 v 602.35 h 35.437 v -35.44 h 35.435 v -35.41 H 70.875 V 95.662 L 106.31,95.66 V 60.254 H 70.875 V 24.816 H 35.438 z m 70.872,70.844 v 35.434 h 35.41 V 95.656 h -35.41 z m 35.41,35.434 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.44 h 35.43 v -35.44 h -35.43 z m 35.43,35.44 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.43 h 35.44 v -35.43 h -35.44 z m 35.44,35.43 v 35.44 h 35.44 v -35.44 h -35.44 z m 35.44,35.44 v 35.41 h 35.43 v -35.41 h -35.43 z m 35.43,35.41 v 35.43 h 35.41 v -35.43 h -35.41 z m 35.41,35.43 v 35.44 H 283.47 v 106.32 h 35.44 V 450 h 141.71 v -35.44 h -35.43 v -35.44 h -35.44 z m -70.84,141.76 v 70.84 h 35.43 v -70.84 h -35.43 z m 35.43,70.84 v 70.87 h 35.41 v -70.87 h -35.41 z m 35.41,70.87 v 70.88 h 35.44 v -70.88 h -35.44 z m 0,70.88 h -70.84 v 35.44 h 70.84 v -35.44 z m -70.84,0 v -70.88 h -35.44 v 70.88 h 35.44 z m -35.44,-70.88 v -70.87 h -35.44 v 70.87 h 35.44 z m -35.44,-70.87 v -70.84 h -35.44 v 70.84 h 35.44 z M 212.59,520.88 V 450 h -35.43 v 35.44 h -35.44 v 35.44 h 70.87 z m -70.87,0 h -35.41 v 35.43 h 35.41 v -35.43 z" />
+ d="m 35.438,24.812 0,602.35 35.437,0 0,-35.44 35.435,0 0,-35.41 -35.435,0 0,-460.65 35.435,-0.002 0,-35.406 -35.435,0 0,-35.438 -35.437,0 z m 70.872,70.844 0,35.434 35.41,0 0,-35.434 -35.41,0 z m 35.41,35.434 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.44 35.43,0 0,-35.44 -35.43,0 z m 35.43,35.44 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.43 35.44,0 0,-35.43 -35.44,0 z m 35.44,35.43 0,35.44 35.44,0 0,-35.44 -35.44,0 z m 35.44,35.44 0,35.41 35.43,0 0,-35.41 -35.43,0 z m 35.43,35.41 0,35.43 35.41,0 0,-35.43 -35.41,0 z m 35.41,35.43 0,35.44 -106.28,0 0,106.32 35.44,0 0,-70.88 141.71,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 z m -70.84,141.76 0,70.84 35.43,0 0,-70.84 -35.43,0 z m 35.43,70.84 0,70.87 35.41,0 0,-70.87 -35.41,0 z m 35.41,70.87 0,70.88 35.44,0 0,-70.88 -35.44,0 z m 0,70.88 -70.84,0 0,35.44 70.84,0 0,-35.44 z m -70.84,0 0,-70.88 -35.44,0 0,70.88 35.44,0 z m -35.44,-70.88 0,-70.87 -35.44,0 0,70.87 35.44,0 z m -35.44,-70.87 0,-70.84 -35.44,0 0,70.84 35.44,0 z m -35.44,-70.84 0,-70.88 -35.43,0 0,35.44 -35.44,0 0,35.44 70.87,0 z m -70.87,0 -35.41,0 0,35.43 35.41,0 0,-35.43 z" />
<path
id="rect3779"
style="fill:#ffffff"
inkscape:connector-curvature="0"
- d="m 70.875,95.656 v 460.65 h 35.435 v -35.43 h 35.41 v -35.44 h 35.44 v -35.44 h 35.43 v 70.88 h 35.44 v 70.84 h 35.44 v 70.87 h 35.44 v 70.88 h 70.84 v -70.88 h -35.41 v -70.87 h -35.43 v -70.84 h -35.44 v -106.32 h 106.28 v -35.44 h -35.41 v -35.43 h -35.43 v -35.41 h -35.44 v -35.44 h -35.44 v -35.43 h -35.44 v -35.44 h -35.43 v -35.44 h -35.44 v -35.44 H 106.31 V 95.648 H 70.875 z" />
+ d="m 70.875,95.656 0,460.65 35.435,0 0,-35.43 35.41,0 0,-35.44 35.44,0 0,-35.44 35.43,0 0,70.88 35.44,0 0,70.84 35.44,0 0,70.87 35.44,0 0,70.88 70.84,0 0,-70.88 -35.41,0 0,-70.87 -35.43,0 0,-70.84 -35.44,0 0,-106.32 106.28,0 0,-35.44 -35.41,0 0,-35.43 -35.43,0 0,-35.41 -35.44,0 0,-35.44 -35.44,0 0,-35.43 -35.44,0 0,-35.44 -35.43,0 0,-35.44 -35.44,0 0,-35.44 -35.41,0 0,-35.438 -35.435,0 z" />
</g>
</g>
</svg>
text. [classname]#FormLayout# is an ordered layout and much like
[classname]#VerticalLayout#. For description of margins, spacing, and other
features in ordered layouts, see
-<<dummy/../../../framework/layout/layout-orderedlayout#layout.orderedlayout,"VerticalLayout
-and HorizontalLayout">>.
+<<dummy/../../../framework/layout/layout-orderedlayout#layout.orderedlayout, "VerticalLayout and HorizontalLayout">>.
The following example shows typical use of [classname]#FormLayout# in a form:
tf1.setRequired(true);
tf1.addValidator(new NullValidator("Must be given", false));
form.addComponent(tf1);
-
+
TextField tf2 = new TextField("Street address");
tf2.setIcon(FontAwesome.ROAD);
form.addComponent(tf2);
-
+
TextField tf3 = new TextField("Postal code");
tf3.setIcon(FontAwesome.ENVELOPE);
tf3.addValidator(new IntegerRangeValidator("Doh!", 1, 99999));
For information on setting margins and spacing, see also
<<dummy/../../../framework/layout/layout-orderedlayout#layout.orderedlayout.spacing,"Spacing
in Ordered Layouts">> and
-<<dummy/../../../framework/layout/layout-settings#layout.settings.margins,"Layout
-Margins">>.
-
-
-
-
+<<dummy/../../../framework/layout/layout-settings#layout.settings.margins, "Layout Margins">>.
image:{live-demo-image}[alt="Live Demo", link="http://demo.vaadin.com/sampler/#ui/layout/grid-layout"]
endif::web[]
-[classname]#GridLayout# container lays components out on a grid, defined by the
-number of columns and rows. The columns and rows of the grid serve as
-coordinates that are used for laying out components on the grid. Each component
-can use multiple cells from the grid, defined as an area (x1,y1,x2,y2), although
-they typically take up only a single grid cell.
+[classname]#GridLayout# container lays components out on a grid consisting of rows and columns.
+The columns and rows of the grid serve as coordinates that are used for laying out components on the grid.
+Each component can use multiple cells from the grid, defined as an area (x1,y1,x2,y2), although they typically take up only a single grid cell.
-The grid layout maintains a cursor for adding components in left-to-right,
-top-to-bottom order. If the cursor goes past the bottom-right corner, it will
-automatically extend the grid downwards by adding a new row.
-
-The following example demonstrates the use of [classname]#GridLayout#. The
-[methodname]#addComponent# takes a component and optional coordinates. The
-coordinates can be given for a single cell or for an area in x,y (column,row)
-order. The coordinate values have a base value of 0. If coordinates are not
-given, the cursor will be used.
+The grid layout maintains a cursor for adding components in left-to-right, top-to-bottom order.
+If the cursor goes past the bottom-right corner, it will automatically extend the grid downwards by adding a new row.
+The following example demonstrates the use of [classname]#GridLayout#.
+The [methodname]#addComponent()# method takes the component to be added and optional coordinates.
+The coordinates can be given for a single cell or for an area in x,y (column,row) order.
+The coordinate values have a base value of 0.
+If the coordinates are not given, the cursor will be used.
[source, java]
----
A component to be placed on the grid must not overlap with existing components.
A conflict causes throwing a [classname]#GridLayout.OverlapsException#.
+[[layout.gridlayout.sizing]]
== Sizing Grid Cells
-You can define the size of both a grid layout and its components in either fixed
-or percentual units, or leave the size undefined altogether, as described in
-<<dummy/../../../framework/components/components-features#components.features.sizeable,"Sizing
-Components">>.
-<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout
-Size">> gives an introduction to sizing of layouts.
-
-The size of the [classname]#GridLayout# component is undefined by default, so it
-will shrink to fit the size of the components placed inside it. In most cases,
-especially if you set a defined size for the layout but do not set the contained
-components to full size, there will be some unused space. The position of the
-non-full components within the grid cells will be determined by their
-__alignment__. See
-<<dummy/../../../framework/layout/layout-settings#layout.settings.alignment,"Layout
-Cell Alignment">> for details on how to align the components inside the cells.
+You can define the size of both a grid layout and its components in either fixed or percentual units, or leave the size undefined altogether, as described in <<dummy/../../../framework/components/components-features#components.features.sizeable,"Sizing Components">>.
+<<dummy/../../../framework/layout/layout-settings#layout.settings.size,"Layout Size">> gives an introduction to sizing of layouts.
+
+The size of the [classname]#GridLayout# component is undefined by default, so it will shrink to fit the size of the components placed inside it.
+In most cases, especially if you set a defined size for the layout but do not set the contained components to full size, there will be some unused space.
+The position of the non-full components within the grid cells will be determined by their __alignment__.
+See <<dummy/../../../framework/layout/layout-settings#layout.settings.alignment,"Layout Cell Alignment">> for details on how to align the components inside the cells.
The components contained within a [classname]#GridLayout# layout can be laid out
in a number of different ways depending on how you specify their height or
-width. The layout options are similar to [classname]#HorizontalLayout# and
-[classname]#VerticalLayout#, as described in
-<<dummy/../../../framework/layout/layout-orderedlayout#layout.orderedlayout,"VerticalLayout
-and HorizontalLayout">>.
-
+width.
+The layout options are similar to [classname]#HorizontalLayout# and [classname]#VerticalLayout#, as described in <<dummy/../../../framework/layout/layout-orderedlayout#layout.orderedlayout, "VerticalLayout and HorizontalLayout">>.
[WARNING]
.A layout that contains components with percentual size must have a defined size!
detecting such invalid cases; see
<<dummy/../../../framework/advanced/advanced-debug#advanced.debug.mode,"Enabling
the Debug Mode">>.
-
====
+[[layout.gridlayout.sizing.expanding]]
+=== Expanding Rows and Columns
+
Often, you want to have one or more rows or columns that take all the available
space left over from non-expanding rows or columns. You need to set the rows or
columns as __expanding__ with [methodname]#setRowExpandRatio()# and
[source, java]
----
GridLayout grid = new GridLayout(3,2);
-
+ifdef::web[]
// Layout containing relatively sized components must have
// a defined size, here is fixed size.
grid.setWidth("600px");
label.setWidth(null); // Set width as undefined
grid.addComponent(label);
}
-
+endif::web[]
// Set different expansion ratios for the two columns
grid.setColumnExpandRatio(1, 1);
grid.setColumnExpandRatio(2, 5);
// Set the bottom row to expand
grid.setRowExpandRatio(1, 1);
+ifdef::web[]
// Align and size the labels.
for (int col=0; col<grid.getColumns(); col++) {
for (int row=0; row<grid.getRows(); row++) {
c.setHeight("100%");
}
}
+endif::web[]
----
[[figure.ui.gridlayout.sizing.expanding]]
.Expanding rows and columns in [classname]#GridLayout#
-image::img/gridlayout_sizing_expanding.png[width=75%, scaledwidth=100%]
+image::img/gridlayout_sizing_expanding.png[width=100%, scaledwidth=100%]
If the size of the contained components is undefined or fixed, the expansion
ratio is of the __excess__ space, as in
[source, css]
----
.v-gridlayout {}
-.v-gridlayout-margin {}
+ .v-gridlayout-margin {}
----
-The `v-gridlayout` is the root element of the [classname]#GridLayout# component.
+The root element of the [classname]#GridLayout# component has `v-gridlayout` style.
The `v-gridlayout-margin` is a simple element inside it that allows setting a padding between the outer element and the cells.
For styling the individual grid cells, you should style the components inserted in the cells.
projects / vaadin-framework.git / commitdiff
