Styling Widgets with CSS
by
·
Join the DZone community and get the full member experience.
Join For FreeStyling Widgets with CSS
Styling widgets is done using Cascading Style Sheets (CSS). CSS can be applied to the widgets in the application three different ways.
Adding a style element inside the <head> of the HTML page that is hosting the application.
<style type='text/css'> /* CSS style rules*/ </style>
Adding a <link> element to the <head> of the HTML page, referencing an external CSS stylesheet.
<link type="text/css' rel='stylesheet' href="url-to-file.css" />
Adding a <stylesheet> element to the GWT project's module configuration, causing the stylesheet to be injected into the host HTML page.
<stylesheet src="url-to-file.css"/>
Most of the widgets that come with GWT have been pre-assigned CSS class names. For example, the Button widget uses the CSS class name gwt-Button. So you could set the width of all Button widgets in your application by using the following CSS rule. In order to reference a CSS class in a CSS rule you prefix the class name with a period ".".
.gwt-Button {
width: 100px;
}
Altering Style Names
You can programmatically alter the CSS class name used on a widget by calling any of these methods.
widget.setStylePrimaryName("styleName")
In HTML you may provide any number of CSS class names on an element by separating them with spaces, like in the HTML snippet below.
<div class="style1 style2 style3"></div>
The primary style name in GWT is defined as the first style name in the class attribute. In the example provided, this would be the style "style1". Calling setStylePrimaryName() allows you to alter this first style.
widget.addStyleDependentName("styleName")
When you add a dependent style name, its name in the HTML is the primary name plus the depende nt name, separated with a dash ("-").
Example:
Button button = new Button();
button.setStylePrimaryName("foo");
button.addStyleDependentName("bar");
Result:
<BUTTON class="foo foo-bar"></BUTTON>
widget.setStyleName("styleName")
Using setStylename() will clear all current style names, including the primary style name, and adds the one provided.
widget.addStyleName("styleName")
Adds an additional style name to any existing style names.
Example
Button button = new Button();
button.setStyleName("foo");
button.addStyleName("bar");
Result:
<BUTTON class="foo bar"></BUTTON>
widget.removeStyleName("styleName")
Allows you to remove an existing style name on a widget.
Default GWT Widget Style Names
Most of the widgets provided by the GWT library have pre-defined primary style names. The following is a list of the default names for each widget.
| Widget | Default Name |
|---|---|
| Button | .gwt-Button { } |
| Checkbox | .gwt-CheckBox { } |
| DialogBox |
.gwt-DialogBox { the box container } .gwt-DialogBox .Caption { the box caption } |
| DisclosurePanel |
.gwt-DisclosurePanel { primary style } .gwt-DisclosurePanel-open { when open } .gwt-DisclosurePanel-closed { when closed } .header { the panel header area } .content { the panel content area } |
| HorizontalSplitPanel |
.gwt-HorizontalSplitPanel { the panel } .gwt-HorizontalSplitPanel hsplitter { splitter } |
| HTML | .gwt-HTML { } |
| Hyperlink | .gwt-Hyperlink { } |
| Image |
.gwt-Image { } Note: Transformations between clipped and upclipped will result in the loss of any CSS style names that were set or added. |
| Label | .gwt-Label { } |
| ListBox | .gwt-ListBox { } |
| MenuBar |
.gwt-MenuBar { the menu bar itself } .gwt-MenuBar .gwt-MenuItem { menu items } .gwt-MenuBar .gwt-MenuItem-selected { selected menu items } |
| PasswordTextBox |
.gwt-PasswordTextBox { primary style } .gwt-PasswordTextBox-readonly { dependent style set when the password text box is read-only } |
| PushButton |
.gwt-PushButton-up {} .gwt-PushButton-down {} .gwt-PushButton-up-hovering {} .gwt-PushButton-down-hovering {} .gwt-PushButton-up-disabled {} .gwt-PushButton-down-disabled {} <any of the above> .html-face {} |
| RadioButton | .gwt-RadioButton { } |
| RichTextArea | .gwt-RichTextArea { } |
| StackPanel |
.gwt-StackPanel { the panel itself } .gwt-StackPanel .gwt-StackPanelItem { unselected items } .gwt-StackPanel .gwt-StackPanelItem-selected { selected items } |
| SuggestBox |
.gwt-SuggestBox { the suggest box itself } .gwt-SuggestBoxPopup { the suggestion popup } .gwt-SuggestBoxPopup .item { an unselected suggestion } .gwt-SuggestBoxPopup .item-selected { a selected suggestion } |
| TabBar |
.gwt-TabBar { the tab bar itself } .gwt-TabBar .gwt-TabBarFirst { the left edge of the bar } .gwt-TabBar .gwt-TabBarRest { the right edge of the bar } .gwt-TabBar .gwt-TabBarItem { unselected tabs } .gwt-TabBar .gwt-TabBarItem-selected { additional style for selected tabs } |
| TabPanel |
.gwt-TabPanel { the tab panel itself } .gwt-TabPanelBottom { the bottom section of the tab panel (the deck containing the widget) } |
| TextArea |
.gwt-TextArea { primary style } .gwt-TextArea-readonly { dependent style set when the text area is read-only } |
| TextBox |
.gwt-TextBox { primary style } .gwt-TextBox-readonly { dependent style set when the text box is read-only } |
| ToggleButton |
.gwt- ToggleButton-up {} .gwt- ToggleButton-down {} .gwt- ToggleButton-up-hovering {} .gwt- ToggleButton-down-hovering {} .gwt- ToggleButton-up-disabled {} gwt- ToggleButton-down-disabled {} <any of the above> .html-face {} |
| Tree |
.gwt-Tree { the tree itself } .gwt-Tree .gwt-TreeItem { a tree item } .gwt-Tree .gwt-TreeItem-selected { a selected tree item } |
| VerticalSplitPanel |
.gwt-VerticalSplitPanel { the panel itself } .gwt-VerticalSplitPanel vsplitter { the splitter } |
Opinions expressed by DZone contributors are their own.
Trending
-
Integration Architecture Guiding Principles, A Reference
-
Fun Is the Glue That Makes Everything Stick, Also the OCP
-
Does the OCP Exam Still Make Sense?
-
A Data-Driven Approach to Application Modernization
Comments