Add css styles for gwt widgets | About Publisher

Add css styles for gwt widgets

Adding Cascading styles (CSS) to Google Web Toolkit (GWT) widgets is much simpler and involves only two steps.
  1. 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

  2. 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)

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;
}
Share this article please, on :
Share on fb Tweet Share on G+

0 Response to "Add css styles for gwt widgets"

Post a Comment