Gwt 2.0 Themes

GWT 2.0 Visual Layout Tools?

Free on-line editors for GWT:

http://bootdiskrevolution.com/gwtlab-1.0.2/Gwtlab.html - gwt-lab simplifies the development of GWT Composites. The tool uses a WYSIWYG approach to build the Composite's user interface, including its CSS rules. gwt-lab generates the Composite's Java code to include in the user’s favourite IDE, where business logic and event handling is added.

gwt-lab was developed using: Eclipse 3.4, Google Web Toolkit 1.6.4, and gwt-dnd (2.5.6) for Drag and Drop

http://works.sen-sei.in/gtg/ (GWT Theme Generator) - a simple theme generator for GWT. This application generates a GWT theme based on the color you choose. This application is free for use. No guarantees (implied or otherwise).

Are there nice looking CSS themes for use with GWT?

Have you tried the built-in themes in the *.gwt.xml to see if they mesh?

<!-- Inherit the default GWT style sheet. You can change       -->
<!-- the theme of your GWT application by uncommenting         -->
<!-- any one of the following lines.                           -->
<!-- <inherits name='com.google.gwt.user.theme.standard.Standard'/> -->
<!-- <inherits name="com.google.gwt.user.theme.chrome.Chrome"/> -->
<inherits name="com.google.gwt.user.theme.dark.Dark"/>

They are pretty basic. The difficulty with create any skin for GWT is that you pretty much have go through the package and customize some widgets on a case by base basis. With the advent of UiBinder and ClientBundle, some widgets (such as DisclosurePanel and CellTable) contain embedded or inline styling that uses styles and images that are embedded. A different arrow or highlighting scheme need to overridden at an implementation level.

If you take a look at CellTable and if you browse the package you'll see that many of the styling elements packaged inside the JAR. So, in order to have a new CellTable style you'll need to do something like this

class MyCellTable<T> extends CellTable<T> {
    interface MyResources extends CellTable.Resources {
        @Override
        @ImageOptions(flipRtl = true)
        @Source("hamsterDance.gif") // because I can :P
        ImageResource cellTableLoading();

        @Source("MyCellTableStyle.css")
        Style cellTableStyle();
    }
}

Best way to style GWT widgets in a library

I think the best way would be to provide styles in a module. This way you will be able to easily restyle, or add "themes" for your controls.

I'm doing a similar project which is hosted on github (http://github.com/markovuksanovic/gwt-styles), so you might want to check that out. You can download the jar file, include it in your project and specify in your module xml that you wanna use that style.. sth like

<inherits name='gwt.theme.flick.Flick'/>

I would suggest you to use new module for your styles so that you can easily switch among styles... (just change the inherits tag). So, for example, if one of your widgets used css class "my-widget", you would have a "style" module (or multiple modules) which would define that css class (in the css file) - this way you could have multiple modules that implement that css class and switching amongst them would be as easy as changing the module name in the inherits tag. This way you would a nicely decoupled code - styles will be independent of the technical implementation of the widgets. If you have some more questions, feel free to ask.

P.S. I forgot to mention above - pay close attention on how the style module is built (build.xml), it's a little tricky. You can find some more information about creating modules at the following lication http://developerlife.com/tutorials/?p=229

Allow different GWT visual themes for different users

Thank you for your suggestion Thomas, but the problem with this solution is that you're assuming the CSS stylesheet is available for me to add to a ClientBundle (I tried that but unless you copy the css file and accompanying pics to your project, you can't do that). The themes come from external GWT modules. And I would like to keep it this way for modularity (it would be painful to import a whole bunch of resources into my project every time we needed a new theme).

The work-around I came up with was to write the injection code myself (just inject a link tag in the HTML head) at run-time.
For completeness, here's the code to do it:

protected void doInjection(String cssFilePath) {
    // <link type="text/css" rel="stylesheet" href="sol.css">
    Element headEl = Document.get().getElementsByTagName("head").getItem(0);
    HeadElement head = HeadElement.as(headEl);
    LinkElement link = Document.get().createLinkElement();
    link.setType("text/css");
    link.setRel("stylesheet");
    link.setHref(GWT.getModuleBaseURL() + cssFilePath);
    head.appendChild(link);
}

And you call this method with something like this:

doInjection("gwt/standard/standard.css");

Then, inherit all Resources modules from your project's GWT module file. For example:

  <inherits name='com.google.gwt.user.theme.standard.StandardResources'/>
  <inherits name='com.google.gwt.user.theme.dark.DarkResources'/>

Inheriting the *Resources version of the Module avoids automatically injecting the style-sheet.

To decide which theme to use, I created a custom GWT property in the module file, based on the value of this property, I replace a default Java class (which would just insert the default theme) with a different Java class (which subclasses the default class) if a different theme should be used. This has the added bonus that I can include my own ResourceBundle resources within each theme, because the replacement Java class used with a theme, besides injecting the right css file, can also provide alternative Resources to my GWT code.

EDIT

I would like to add one important note:
The solution described above works quite well. But if your app uses different Locales or other GWT properties, this approach may cause the number of compilation permutations to explode! With only 6 different themes and 3 different Locales, on top of the standard 6 different browser versions you normally have, the GWT compiler will create 6 x 3 x 6 = 108 different compilations!! This is pretty crazy!!

A better solution, which I decided to follow after all, is to set an attribute into the HttpSession once the user logs in, and then based on the value of this attribute, load the appropriate css file (first thing in the onModuleLoad() of my entry-point class). The only difference from the solution described above is on how you select the theme.

GWT Themes and Component Libraries

The first thing to be careful of is that there are two frameworks which use EXT and GWT:

GWT-Ext
Ext GWT

Both are based on the Ext JS component library.

Gwt-Ext is based on an old version of Ext JS when it was still LGPL but is no longer developed.

Ext GWT is from the same company who are still developing Ext JS. It's still being developed and is available under free and commercial licenses, and of the two is the one I would use.

SmartGWT is an alternative (and is what the GWT-Ext people are moving to). A colleague of mine looked at it and did not like it as much as Ext GWT as it's a fairly thin wrapper around the SmartClient JavaScript whereas Ext GWT has quite a lot of Java code. The difference being that if you run an Ext GWT application in Hosted Mode and attach your debugger you can see what Ext GWT is doing, but with SmartGWT you'll just see lots of IDispatch calls where it disappears into native JavaScript where your debugger won't be able to follow.

GWT theme style overrides my css style

Like Sarfaz said - !important should be your last resort as it kind of defeats the whole concept of Cascading Style Sheets.

Anyway, in GWT, in order to easily override the core GWT styles contained in the theme you selected, you should locate your module file (the one that has a file name ending on *.gwt.xml), then locate the line where you declare your theme and put your custom/whatever stylesheet after it, like this:

<inherits name='com.google.gwt.user.theme.standard.Standard' />
<stylesheet src="CustomStylesheet.css" />

Note, however, that for GWT 2.0 CssResource and UiBinder is recommended.

Be sure to read the appropriate section of the docs for more pointers.