ple of how you might choose to style a Button widget .gwt-Button { background-color: yellow; color: black; font-size: 24pt; } Note the dot prefix in the CSS style rule. This syntax is called a
CSS class selector.
Style Name Specifics
Every UIObject
has a primary style name that identifies the key CSS style rule that should always be applied to it. Use {@link #setStylePrimaryName(String)} to specify an object's primary stylename. In most cases, the primary style name is set in a widget's constructor and never changes again during execution. In the case that no primary style name is specified, it defaults to the first style name that is added.
More complex styling behavior can be achieved by manipulating an object's secondary style names. Secondary style names can be added and removed using {@link #addStyleName(String)} and {@link #removeStyleName(String)}. The purpose of secondary style names is to associate a variety of CSS style rules over time as an object progresses through different visual states.
There is an important special formulation of secondary style names called dependent style names. A dependent style name is a secondary style name prefixed with the primary style name of the widget itself. See {@link #addStyleName(String)} for details.
Use in UiBinder Templates
Setter methods that follow JavaBean property conventions are exposed as attributes in {@link com.google.gwt.uibinder.client.UiBinder UiBinder}templates. For example, because UiObject implements {@link #setWidth(String)}you can set the width of any widget like so:
<g:Label width='15em'>Hello there</g:Label>
Generally speaking, values are parsed as if they were Java literals, so methods like {@link #setVisible(boolean)} are also available:
<g:Label width='15em' visible='false'>Hello there</g:Label>
Enum properties work this way too. Imagine a Bagel widget with a handy Type enum and a setType(Type) method:
enum Type { poppy, sesame, raisin, jalapeno } <my:Bagel type='poppy' />
There is also special case handling for two common method signatures,
(int, int)
and
(double, {@link com.google.gwt.dom.clientStyle.Unit Unit})
<g:Label pixelSize='100, 100'>Hello there</g:Label>
Finally, a few UiObject methods get special handling. The debug id (see {@link #ensureDebugId}) of any UiObject can be set via the
debugId
attribute, and addtional style names and dependent style names can be set with the
addStyleNames
and
addStyleDependentNames
attributes.
<g:Label debugId='helloLabel' addStyleNames='pretty rounded big'>Hello there</g:Label>
Style names can be space or comma separated.