What is the preferred way to associate css styles with GWT widgets (using UiBinder)?

Question

From the GWT page (http://code.google.com/webtoolkit/doc/latest/DevGuideUiCss.html#cssfiles), it mentions 2 ways (for modern application):

• Using a CssResource contained within a ClientBundle.
• Using an inline element in a UiBinder template.

Modern GWT applications typically use a combination of CssResource and UiBinder.

So my question is, when should I use a css file and create a CssResource for it, and when should I define styles directly in the ui.xml file using <ui:style>? Are there any performance implication (i.e. resource size to download on the client) with either of these ways?

Answer 1

There isn't a performance implication -- if you specify the CSS in the UiBinder file, the GWT compiler will create a CssResource dynamically based on the rules inlined in your .ui.xml file and use that.

So it really just comes down to whether you want to share that style in other places in your app. If you want a button in Something.ui.xml to have the same style as another button in SomethingElse.ui.xml then you should specify that style in a CssResource. Otherwise, specify the style in the UiBinder file and no other classes will have access to it.

Answer 2

Using UiBinder, CssResource principal use is to change style dynamically. If you don't intend to change styles dynamically, don't waste your time with CssResource.

I recommend using CSS files. This separates Style from markup in your UiBinder which help collaboration in project with more then 1 person - this is particularly true with huge project. At some point, your .ui.xml file can get really huge, and also having the CSS in it will only make things worst.

You can easily append a CSS file to any UiBinder and then use it as you normally would. Here's an example :

<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

    <ui:style src="../css/StyleSheet.css" />
    ...
    ...
            <g:LayoutPanel ui:field="layoutName" styleName="{style.aCssRule}" >
    ...

Using style this way, if you ever want to change the style of a widget dynamically, you simply have to create a CssResource (in a ClientBundle) out of this CSS file and you'll be ready to rock.