CODEWITHSUNDEEP
cssgwtwidget
Igor Soloydenko
Igor Soloydenko

Reputation: 11785

GWT Widget development: combining & overriding CSS

I've just started learning GWT so my question might be noobish. Tried to find a 'standard' solution but couldn't find it.

I'm developing an AddressWidget. It is implemented as a Composite widget which consist of atomic widgets (Labels, TextBoxes, ListBoxes...) defined in AddressWidget.ui.xml. These tiny building blocks should get their CSS from the common-widgets.css. The AddressWidget itself should get the default styles from address-widget.css.

As this widget will be used on different pages, they should be able to override the styles applied in order to customize the appearance. I.e. the OrderPage should apply its own from the order-page-address-widget.css, the ContactDetailsPage – from the contact-details-address-widget.css

How do I implement that?

Upvotes: 0

Views: 331

Answers (1)

Andrei Volgin
Andrei Volgin

Reputation: 41089

My advice - drop this idea. It will be hell to develop and maintain, and I mean it. You will constantly try to figure out which CSS file has to be updated, and then you will have to test every update in multiple places, because an update in one file can mess up with CSS from another file.

Many GWT developers prefer to use CssResource approach to CSS. I've never heard any designer favoring this solution, though.

After years of working with GWT on both the code and design sides, I strongly prefer to use a single CSS file for the entire application. CSS was built for inheritance, and this is what a single file achieves. You can define basic style, like:

input {
    height: 24px;
}

If you need to change these styles in specific widgets or parts of the application, you can set, for example, "contacts" class on the contacts page/widget, and then add this to your CSS file:

.contacts input {
    background: grey;
}

The advatantages of this approach:

  • easier to enforce consistent look throughout the application
  • easier to maintain your CSS, because there is one file to update, and there are no conflicts with CSS defined anywhere else
  • it is an approach that most designers understand and know how to use
  • it is the easiest solution if you want to create multiple skins or themes for your application
  • it is easy to make your CSS adjust to different screen sizes, or define special styles for printing.

Upvotes: 1

Related Questions