CSS styles can be quickly added to GWT widgets as explained here.
Adding Cascading styles (CSS) to Google Web Toolkit (GWT) widgets is much simpler and involves only two steps.
Let us provide you with an example which would create buttons shown below.
Coding in your java class:
CSS rules:
- Style name
- set style name
for a widget using the $widgetInstance$.setStyleName() method or - stick with the default
style name of the widget (use for setting global values)
default style name examples:- for buttons: .gwt-Button
- for Check Boxs: .gwt-CheckBox
- set style name
- CSS style rule
- Add CSS style rules to a .css file and import that into the html page
or - write those inside the html page itself. (not recommended)
- Add CSS style rules to a .css file and import that into the html page
Let us provide you with an example which would create buttons shown below.
Coding in your java class:
Button cancelButton = new Button("Cancel");
Button loginButton = new Button("Login");
loginButton.setStyleName("buttons");
CSS rules:
.gwt-button {
background: #EEEEFF;
color: #0000CC;
font-size: 12px;
}
.buttons {
background: #CCCCCC;
color: #333333;
font-size: 12px;
}
COMMENTS