Handling styles application wide?

[Mike Dee]

What is a good ways to consistently handle styles application side?
I'm working on an app that has CellTables and widgets and HTML. For
CellTables we use CellTable.Resources to store CSS. For widgets, we
use uibinder with <ui:style> for HTML we use external stylesheets. Is
there a good strategy for putting all style info in one place?

[Ashwin Desikan]

The best approach would be to use ClientBundle

http://code.google.com/webtoolkit/doc/latest/DevGuideClientBundle.html

This would allow you to combine all your resources including
TableResources, Application Images, Custom Styles etc.

Make it a practise to use the styles defined in your external
stylesheets across the application and your maintenance would become
relatively easier.

~Ashwin

[Mike Dee]

Ashwin,

Thanks for the reply. We were doing this, to an extent. I just didn't
think about putting the celltable style class in the ClientBundle. It
works, BUT, is it possible to put the CSS for the entire app in one
CSS (not sure if this is entirely desirable right now).

For example, here is what the ClientBundle now looks like.

public interface MyAppResources extends ClientBundle
{
public static final MyAppResources INSTANCE =
GWT.create( MyAppResources.class );

@Source( "com/myapp/home.png" )
public ImageResource home();

@Source( "com/myapp/myapp.css" )
@CssResource.NotStrict
public MyAppStyles css();

public interface MyViewTableCss extends CellTable.Resources
{
@Source({CellTable.Style.DEFAULT_CSS, "com/myapp/resources/
MyViewTable.css"})
TableStyle cellTableStyle();

interface TableStyle extends CellTable.Style {}
}
}

As we create more CellTable with different styles, we will end up with
a CSS file for each. It would be nice if they could be combined into
one.

Also, can WindowBuilder be integrated with ClientBundle so that styles
from the ClientBundle would appear as selectable in WindowBuilder?

[Ashwin Desikan]

Mike,

you can combine all the CSS into a single CSS file. For example in your
CellTable case, try changing the source to myapp.css and move the
contents of MyViewTable.css into it.

if you want to have different styles for your tables, then append the
table styles in your CSS with specific names and use the
DependentStyleName method of a Widget, to notify gwt which style has to
be applied at runtime.

I am not very sure about WindowBuilder, as I have not used it. Maybe,
will give it a try and revert.

~Ashwin