Skip to content

WColumn

Jump to bottom
Mark Reeves edited this page Jan 3, 2018 · 17 revisions

WColumn is a required component of a WRow. Each WColumn holds content, the WRow holds the columns.

Why use WColumn

WColumn is used to add columns to a WRow. WRow and WColumn are used to create basic layout structures when the columns in a row are mutable in number, size or visibility. If creating a fixed layout a better option may be a WPanel with ColumnLayout or a WTemplate.

Note that for historical reasons a WColumn will not be rendered unless it is the immediate child of a WRow.

When not to use

This is more of a "when not to use WRow": WColumn is useful when adding a single row of columns when the number, size and/or arrangement of columns is mutable and when the "row" will contain a specific, but not fixed, number of columns the width of which will always add up to 100% whichever arrangement is required.

What does this mean? It means WColumn is almost useless.

One may consider any of the following before settling on WRow and WColumn:

Diagram information

In the diagrams illustrating the various settings for WColumn the content of each WColumn is comprised of a WPanel each of which has a border; this is done to provide easy recognition of the column boundaries.

Creating a WColumn

WColumn has two constructors. The default constructor creates a column of unspecified width and default (left) alignment. The alternate constructor takes an int argument from 1 - 100 and uses this as the required width of the column (as a percentage of the width of the row).

// a column of unspecified width:
WColumn column = new WColumn();

// a column with a specified width:
WColumn col25 = new WColumn(25);

Setting width

The width of a WColumn, if specified in Java, is always deemed to be a percentage of the width of the parent row. If the width is not specified it may be set using custom CSS which is often a more appropriate mechanism.

The width may be set during instantiation or using a setter.

// a column of width 15%:
WColumn col15 = new WColumn(15);
// with WColumn `col`
// set width to 15%:
col.setWidth(15);

To 'unset' the width of a WColumn set its width to 0.

// with WColumn `col`
// unset width
col.setWidth(0);

If a gap is applied to a WRow to separate WColumns then the actual width of the WColumn will be slightly smaller than the specified width. This is usually negligible. An example showing this is in the WRow documentation.

The illustration below shows a WRow with several WColumns with different widths.

Screen shot of WColumns with different widths

Setting alignment

The alignment property determines how the components added to the WColumn will be presented in the UI. This is set using the WColumn.Alignment enum. Available settings for this property are:

  • LEFT (default) in which components in a WColumn are left aligned relative to the column;
  • RIGHT in which components in a WColumn are right aligned relative to the column;
  • CENTER in which components in a WColumn are center aligned relative to the column.
// with WColumn col
// to align content to the right of the column
Col.setAlignment(Alignment.RIGHT);

Screen shot of WColumns with different alignment

Alignment may be set using custom CSS just as with width.

HTML output

WColumn outputs a HTML div element. Any component may be added to a WColumn.

Modifying with HTML class

WColumn may be modified using custom CSS and accepts additional values in the HTML class attribute. See WComponents HTML class property.

Responsive design

Information about responsive design and WColumn can be found at WRow responsive design.

Naming contexts

WColumn may be used to create a naming context rather than using a separate WNamingContext.

Related components

Further information

Some start pages

Clone this wiki locally