Gxt 3 Theme Guide - Setup a customised theme in Ext GWT 3

1. setup a Gxt project

follow the setup instructions, click here for GXT 3 Getting Started guide;


2. Copy and rename the 'blue' theme folder

From the unzipped gxt download navigate to;
src\gxt\com\sencha\gxt\theme 
duplicate the folder "blue" and rename it to "modified"

4. import the "modified" folder into your project


4a. (optional)

Find and replace in files all occurrances of "com.sencha.gxt.theme.blue" in the source code

com.sencha.gxt.theme.blue
with
com.theme.mod.client.modified

(assuming your project package name is com.theme.mod and that you have a directory called"modified" that you are importing into the client package)

choose file system import option and under file type select all and add to it, gif,png

You'll probably see errors in each imported packages, because the pacakge declaration won't match the name of your project. So, search and replace in files the package declaration in the whole project.

e.g. find;

com.sencha.gxt.theme.blue

replace:

com.red.theme.client.modified


When BluePlainTabPanelBottomAppearance.java gives you errors you will need to change some import lines;

import com.sencha.gxt.theme.blue.client.tabs.BluePlainTabPanelAppearance.BluePlainTabPanelResources;
import com.sencha.gxt.theme.blue.client.tabs.BluePlainTabPanelAppearance.BluePlainTabPanelStyle;

and replace them with your new local files

e.g.

import com.red.theme.client.modified.client.tabs.BluePlainTabPanelAppearance.BluePlainTabPanelResources;
import com.red.theme.client.modified.client.tabs.BluePlainTabPanelAppearance.BluePlainTabPanelStyle;


I found as I built examples to use the new theme that I'd get an error saying that it couldn't find the source code in innerclasses, the solution was instead of linking to the inner classes inside the gxt 3 jar, that the codes need to import from you local theme inner classes;

for example;

import com.theme.mod.client.modified.client.menu.BlueMenuItemAppearance.BlueMenuItemResources;
//import com.sencha.gxt.theme.blue.client.menu.BlueMenuItemAppearance.BlueMenuItemResources;

(you might want to do a search and replace in files for this)


5.  Change the module inherits

Look in the package com.sencha.gxt.ui.GXT; and copy the contents, replace the line in /RedTheme/src/com/red/theme/RedTheme.gwt.xml

  <!-- Other module inherits    -->
  <inherits name='com.sencha.gxt.ui.GXT'/>

with the contents of com.sencha.gxt.ui.GXT


6. Point to you custom theme

  <!-- Default theme is Blue -->
  <inherits name="com.sencha.gxt.theme.blue.Blue" />

Replace with

 <inherits name="com.red.theme.client.modified.Blue" />

6a. Find and replace in  com.red.theme.client.modified.Blue.gwt.xml

We now want the xml here to point to our new theme packages;

e.g. find;

com.sencha.gxt.theme.blue

replace:

com.red.theme.client.modified


7. Batch image processing

I used fireworks for this, GIMP can do it and also photoshop. In fireworks its very easy to do,

have the history window open.
open up one image from the theme folder
process the image using hue/saturation/colorize, change it however you want
select the events in the history and click the disk icon on the history window
put in a name for the command and save it

select File > Batch and follow the wizard (you do need to select backups) and select your files and then select your command.

In CS4 once you finish the wizard it will do the processing, it will prompt you to save it as a png or a gif for the gifs, save them as gifs. There's about 120 images.

8. Find and replace the colors you need in the css file

Open up your altered files or take a screen grab and use an eye dropper tool to find hexcidecimal values for the css.

Use a file search and replace tool again to swap your new values in to the css Some components are not formatted in the orginal blue theme, for these you may need to add your own appearance. For example ToggleButton, (which extends CellButtonBase)


DISCLAIMER; This worked for me, there may be differences on your platform, if you find any, leave me a comment. Likewise if anything here lacks clarity drop me a comment and I'll try to refine it.