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.