New GWT Theme: Pinky?

Dietrich Kappe, Thursday, June 12, 2008 @ 3:47 pm

Now that GWT has real themes, we're busy putting some nifty ones together. As I am the least gifted person in terms of visual design at Pathfinder Development, I thought I'd just tweak one of the existing ones -- standard.

So, how did I build my theme? First I created my GWT app with projectCreator:

./projectCreator -out /u1/dkappe/src/RedBlack -ant RedBlack
cd /u1/dkappe/src/RedBlack/src
# create out package and subdirs
mkdir -p com/pathf/gwt/user/theme/redblack/public/gwt/redblack/images/ie6

Then I copied the images and css files from the gwt 1.5 trunk for standard into the directories below public, renaming anything from standard to redblack. There are xml files for normal, RTL (right to left) and "resources," and css files for normal (or left to right) and RTL (right to left).

In my simple style, I flipped blue and red in the images with GIMP and flipped blue and red in the css files by simply flipping the hex values in each of the colors defined in the css. Voila! Red instead of blue. Or actually kinda pink.

You build the jar by simply running

ant -f RedBlack.ant.xml package

I modified the ShowCase application by including

Normally, you would actually include the base theme instead of the empty "resources" xml.

I finished off the Showcase application by adding a Showcase.css file for redblack, a style for the redblack button, and modified the ShowCaseContants.java file to add my redblack style. I don't have the "view CSS" for redblack working yet. Something for another day.

  /**
   * The available style themes that the user can select.
   */
  String[] STYLE_THEMES = {"standard", "chrome", "dark", "redblack"};

As you can see from the screenshot and the demo, the theme isn't really the Rottweiler red I had expected but a kind of pink cousin to the baby blue of standard. So maybe I should have called the theme "Pinky." Anyhow, the RTL (right to left) style has not been completed. I'll update the app and the jar with that change tomorrow.

The jar file for "pinky", aka redblack, can be found here. Again, we'll have an update of the "pinky" theme tomorrow, and some more sophisticated themes next week.

Update: the RedBlack.jar has been fixed and updated. Now both regular and RTL should work. The showcase app, however has not been updated.

Related posts:

1. A Quick Look at the New GWT “Themes”
2. jQuery UI in action: Thumbs up on tabs, thumbs sideways on themes
3. GWT 1.5 RC1, Getting Closer
4. Chess Game Viewer in GWT
5. GWT Rolodex now at Google Code

Comments (1)

Software Development

Comments: 1 so far

• Leave a comment
• Comment feed for this post
• TrackBack URL

1. [...] New GWT Theme: Pinky? Dietrich Kappe shows the process of building his own GWT theme. [...]

   Pingback by Weekly GWT Links For 6/14/08 | GWT Site, Sunday, June 15, 2008 @ 1:05 am

Leave a comment