8.2 Web Layouts

8.2 Web Layouts
Prev	8. Layouts	Next

Metawidget supports multiple Layouts for each Web framework, targeting different arrangements within each environment.

8.2.1 GWT Layouts

FlexTableLayout

Layout to arrange widgets in a table, with one column for the label and another for the widget. This Layout recognizes the following parameters, configured using FlexTableLayoutConfig:

Property	Description
`columnStyleNames`	Comma delimited string of CSS style classes to apply to table columns in order of: label, component, required
`footerStyleName`	CSS style class to apply to table footer
`numberOfColumns`	Number of columns. Each label/component pair is considered one column
`tableStyleName`	CSS style class to apply to outer table tag

FlowLayout

Layout to simply output components one after another, with no labels and no structure. This Layout is suited to rendering single components, or for rendering components whose layout relies entirely on CSS.

LabelLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a Label. This Layout recognizes the following parameters, configured using LabelLayoutDecoratorConfig:

Property	Description
`styleName`	CSS style class to apply to section heading

TabPanelLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a TabPanel.

8.2.2 JavaScript Layouts

All of the supported JavaScript-based technologies (i.e. pure JavaScript, JQuery UI and AngularJS) share the same Layouts.

BootstrapDivLayout

Layout to arrange widgets using div tags, suitable for form-vertical or form-horizontal Bootstrap layouts.

This layout extends metawidget.layout.DivLayout. It adds Bootstrap CSS classes such as form-group and control-label to the divs. This Layout recognizes the following configuration properties:

Property	Description
`version`	Specify '2' to use Bootstrap 2.x CSS class names (Bootstrap 3.x names are used by default)

DefinitionListLayout

Layout to arrange widgets using dl, dd and dt tags. This Layout recognizes the following configuration properties:

Property	Description
`labelStyleClass`	Style class to apply to the generated label.
`labelSuffix`	Suffix to append to the generated label.

DivLayout

Layout to arrange widgets using div tags. This Layout recognizes the following configuration properties:

Property	Description
`divStyleClasses`	Comma separated list of style classes to apply to the divs, in order of outer, label, component.
`labelStyleClass`	Style class to apply to the generated label.
`labelSuffix`	Suffix to append to the generated label.
`suppressLabelSuffixOnCheckboxes`	Some UI frameworks (like JQuery Mobile) reuse the checkbox/radio label alongside the checkbox/radio itself. This looks bad if we keep the suffix.
`wrapInsideLabels`	Array of widget types (e.g. checkbox, radio) to be placed inside their labels, rather than alongside.
`wrapWithExtraDiv`	Object of key/value pairs of widget types (e.g. checkbox, radio) to be wrapped inside an extra div. The key is the widget type, the value is the CSS class for the extra div.
`suppressDivAroundLabel`	Some UI frameworks (like JQuery Mobile) prefer not to wrap the label with a div.
`suppressDivAroundWidget`	Some UI frameworks (like JQuery Mobile) prefer not to wrap the widget with a div.
`appendRequiredClassOnLabelDiv`	Style class to apply to the label div if the widget is required. Can be useful for CSS :after selectors.
`appendRequiredClassOnWidgetDiv`	Style class to apply to the widget div if the widget is required. Can be useful for CSS :after selectors.

HeadingTagLayoutDecorator

LayoutDecorator to decorate widgets from different sections using an HTML heading tag (i.e. h1, h2 etc). This Layout recognizes the following configuration properties:

Property	Description
`level`	The first level of the heading tags (i.e. `3` for `h3`).

TabLayoutDecorator (Bootstrap)

LayoutDecorator to decorate widgets from different sections using Bootstrap tabs.

TabLayoutDecorator (JQuery UI)

LayoutDecorator to decorate widgets from different sections using JQuery UI tabs.

TableLayout

Layout to arrange widgets in a table, with one column for the label and another for the widget. This Layout recognizes the following configuration properties:

Property	Description
`columnStyleClasses`	Comma delimited string of CSS style classes to apply to table columns in order of: label, component, required
`footerStyleClass`	CSS style class to apply to table footer
`numberOfColumns`	Number of columns. Each label/component pair is considered one column
`tableStyleClass`	CSS style class to apply to outer table tag

SimpleLayout

8.2.3 JSF Layouts

Layouts in JSF behave a little differently to those for other Metawidgets. By and large, JSF already provides a pluggable mechanism (javax.faces.render.Renderers) that can be used for displaying a component in different ways. Metawidget leverages this mechanism via its xxxLayoutRenderer classes (see below).

However, JSF Renderers are not supposed to modify the component tree (say, to wrap a group of components into a tabbed panel). For those cases, Metawidget employs its usual Layout mechanism. Layouts are executed at component-building-time, which is before Renderer-time so can safely modify the component tree.

HtmlDivLayoutRenderer

Layout to arrange widgets in HTML DIV tags, with one DIV per label and per widget, and an outer DIV around both. This Layout recognizes the following parameters (passed either as <f:param> tags or set via <parameter> in metawidget.xml):

Parameter	Description
`componentStyle`	CSS styles to apply to the component DIV. This is the style applied to the DIV around the component, not to the component itself. The widget component can be styled using the `style` attribute on the Metawidget tag
`divStyleClasses`	Comma separated list of style classes to apply to the DIVs, in order of outer, label, required, component, errors
`inlineMessages`	Whether to wrap input components with inline `h:message` tags. True by default
`labelStyle`	CSS styles to apply to the label DIV
`outerStyle`	CSS styles to apply to the outer DIV
`requiredStyle`	CSS styles to apply to the required DIV

HtmlTableLayoutRenderer

Layout to arrange components in a table, with one column for the label and another for the component. This Layout recognizes the following parameters (passed either as <f:param> tags or set via <parameter> in metawidget.xml):

Parameter	Description
`columns`	Number of columns. Each label/component pair is considered one column
`columnClasses`	Comma delimited string of CSS style classes to apply to table columns in order of: label, component, required
`componentStyle`	CSS styles to apply to required column
`footerStyle`	CSS styles to apply to table footer
`footerStyleClass`	CSS style class to apply to table footer
`headerStyle`	CSS styles to apply to table header
`headerStyleClass`	CSS style class to apply to table header
`inlineMessages`	Whether to wrap input components with inline `h:message` tags. True by default
`labelStyle`	CSS styles to apply to label column
`labelSuffix`	Suffix to put after the label name. Defaults to a colon (i.e. 'Name:')
`requiredStyle`	CSS styles to apply to required column (i.e. the asterisk)
`rowClasses`	Comma delimited string of CSS style classes to apply to alternating table rows
`tableStyle`	CSS styles to apply to outer table tag
`tableStyleClass`	CSS style class to apply to outer table tag

OutputTextLayoutDecorator

LayoutDecorator to decorate widgets from different sections using an HtmlOutputText. As dictated by the JSF spec, CSS styles and style classes applied to an HtmlOutputText are wrapped in an HTML span tag. Therefore you must use CSS...

display: block

...if you want to use margins or padding around the HtmlOutputText.

This LayoutDecorator recognizes the following parameters, configured using OutputTextLayoutDecoratorConfig:

Property	Description
`style`	CSS styles to apply to `HtmlOutputText`
`styleClass`	CSS style class to apply to `HtmlOutputText`

PanelGroupLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a JSF PanelGroup. This LayoutDecorator recognizes the following parameters, configured using PanelGroupLayoutDecoratorConfig:

Property	Description
`panelLayout`	The type of layout markup to use when rendering this group. As per `javax.faces.component.html.HtmlPanelGroup.setLayout`
`style`	CSS styles to apply to the panel
`styleClass`	CSS style class to apply to the panel

PanelLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a RichFaces Panel. This LayoutDecorator recognizes the following parameters, configured using PanelLayoutDecoratorConfig:

Property	Description
`layout`	`Layout` to apply to the panel, as defined by `javax.faces.component.html.HtmlPanelGroup.setLayout`
`style`	CSS styles to apply to the panel
`styleClass`	CSS style class to apply to the panel

PanelTabSetLayoutDecorator

LayoutDecorator to decorate widgets from different sections using an ICEfaces PanelTabSet.

SimpleTogglePanelLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a RichFaces SimpleTogglePanel. This LayoutDecorator recognizes the following parameters, configured using SimpleTogglePanelLayoutDecoratorConfig:

Property	Description
`style`	CSS styles to apply to the panel
`styleClass`	CSS style class to apply to the panel
`switchType`	Mechanism to use to open/close panels. Either 'client' or 'ajax'. Default is 'client'
`opened`	Whether the panel is initially opened. Defaults to true

HtmlSimpleLayout

HtmlSimpleLayout is the default JSF Layout. It simply adds the widget as a child of the Metawidget, leaving everything up to the Renderer.

TabPanelLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a RichFaces TabPanel. This LayoutDecorator recognizes the following parameters, configured using TabPanelLayoutDecoratorConfig:

Property	Description
`headerAlignment`	Defaults to 'left'

TabViewLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a PrimeFaces TabView.

8.2.4 JSP Layouts

All of the supported JSP-based technologies (i.e. 'pure' JSP, Spring and Struts) share the same Layouts.

HeadingTagLayoutDecorator

LayoutDecorator to decorate widgets from different sections using an HTML heading tag (i.e. H1, H2 etc). This LayoutDecorator recognizes the following parameters, configured using HeadingTagLayoutDecoratorConfig:

Property	Description
`style`	CSS styles to apply to heading tag
`styleClass`	CSS style class to apply to heading tag

HtmlTableLayout

Layout to arrange widgets in a table, with one column for the label and another for the widget. This Layout recognizes the following parameters, configured using HtmlTableLayoutConfig:

Property	Description
`columnStyleClasses`	Comma delimited string of CSS style classes to apply to table columns in order of: label, component, required
`footerStyle`	CSS styles to apply to table footer
`footerStyleClass`	CSS style class to apply to table footer
`numberOfColumns`	Number of columns. Each label/component pair is considered one column
`tableStyle`	CSS styles to apply to outer table tag
`tableStyleClass`	CSS style class to apply to outer table tag

SpringTableLayout

Extends HtmlTableLayout to add inline error validation.arrange widgets

Property	Description
`errorStyle`	CSS styles to apply to inline error
`errorStyleClass`	CSS style class to apply to inline error

SimpleLayout

8.2.5 Vaadin Layouts

FormLayout

Layout to arrange widgets in a table, with one column for the label and another for the widget. This Layout recognizes the following parameters, configured using FormLayoutConfig:

Property	Description
`labelSuffix`	Text to display after label text. Defaults to a colon (:)

HeadingTagLayoutDecorator

LayoutDecorator to decorate widgets from different sections using a Label with setStyleName of h1, h2 etc.

HorizontalLayout

Layout to simply output components one after another, with no labels and no structure, using com.vaadin.ui.HorizontalLayout.

TabSheetLayoutDecorator

LayoutDecorator to wrap widgets in different sections inside a TabSheet. Each tab is given the name of a section.