There are different techniques and technologies available to determine the size (width and height) of a rendered widget.
Cascading Style Sheets (CSS) group rules that specify both markup and layout properties of widgets. These rules are linked to certain widgets (or more correctly, DOM nodes in the browser that render these widgets) using selectors. Selectors may match widgets based on the style class or widget id of the widget or one of its ancestors, or even more advanced combinations.
Primer + reference here.
Three ways to use CSS in JWt.
A subset of CSS properties are available in the JWt API, and thus allow to influence the layout or visual appearance of a widget directly, from Java. This is useful if you want programmatic control over these properties; for other situations we recommend to use an external CSS stylesheet.
CSS properties that impact layout aspects are made available directly
in the WWidget
API, whereas decorative aspects are available
from WWidget.cssDecorationStyle()
, which returns a reference
to a WCssDecorationStyle
class.
The following table gives an overview of properties that can be directly modified from Java.
Class | Property | Description |
---|---|---|
WWidget | setPositionScheme() |
CSS position property. |
WWidget | setOffsets() |
CSS top, right, bottom, left properties. |
WWidget | resize() |
CSS width, height properties. |
WWidget | setMinimumSize() |
CSS min-width, min-height properties. |
WWidget | setMaximumSize() |
CSS max-width, max-height properties. |
WWidget | setLineHeight() |
CSS line-height property. |
WWidget | setFloatSide() |
CSS float property. |
WWidget | setClearSides() |
CSS clear property. |
WWidget | setMargin() |
CSS margin property. |
WWidget | setVerticalAlignment() |
CSS vertical-align property. |
WWidget | setInline(), setHidden() |
CSS display property. |
WCssDecorationStyle | setCursor() |
CSS cursor property. |
WCssDecorationStyle | setBackgroundColor(), setBackgroundImage() |
CSS background property. |
WCssDecorationStyle | setForegroundColor() |
CSS color property. |
WCssDecorationStyle | setBorder() |
CSS border property. |
WCssDecorationStyle | setFont() |
CSS font property. |
WCssDecorationStyle | setTextDecoration() |
CSS text-decoration property. |
The method WApplication.styleSheet()
returns a
reference to the embedded stylesheet (an instance of
WCssStyleSheet
), which can be manipulated dynamically
to add, modify or removing rules. This is used primarily in some
advanced composite widgets within JWt (such as WTableView,
WTreeView)
since it allows to modify certain properties of a group of
widgets using a minimum of DOM manipulations.
Widgets may allow configuration of their look and feel through style classes. These may be defined in an embedded stylesheet or in external style sheets. Preferably use external stylesheets because of the strict separation between style and widget. It provides the broadest application of style as it allows you to manage the presentational aspects of all widgets from a handful of style sheets.
These are API classes and methods for working with CSS external stylesheets:
Class | Method | Description |
---|---|---|
WApplication | useStyleSheet() |
Adds an external style sheet |
WWidget | setStyleClass() |
Sets (one or more) CSS style classes |
WWidget | styleClass() |
Returns the CSS style class |
WWidget | addStyleClass() |
Adds a CSS style class |
WWidget | removeStyleClass |
Removes a CSS style class |
WWidget | toggleStyleClass |
Toggles a CSS style class |
The following example shows how to refer to add an external style sheet to the application and how to add/remove classes to a widget like WTable.