DDevelopment & Design

How to change theme in Ext-Gwt (GXT) application

  • byRafal P
  • August 13, 2010
  • 2 minute read

Some time ago Sencha company included new theme in their GXT library. It’s called SLATE and can be viewed in GXT Explorer demo on this site: http://www.sencha.com/examples/explorer.html. I’ve been searching, but I coudn’t find any clear information in web, how to made my gwt app to change theme to new skin instead of standard BLUE or GREY themes. After short investigating I realized, that everything is easy, but only if You keep standard paths in Your app to css/images.

First of all You have to copy to Your’s project directory some directories from GXT example zip file (can be downloaded here: http://www.sencha.com/products/gwt/download.php). Those directories are: css (with BLUE/GREY theme’s csses), images (all gxt standard images) and themes (new SLATE theme). They can be found in resource directory in gxt-x.x.x zip file.

Now, after copying directories to own app in gwt html entry point file it has to be placed following line:   < link rel=”stylesheet” type=”text/css” href=”css/gxt-all.css” /&rt;   That’s all. Nothing more gxt’s csses have to be included (instead of what I’ve found on internet). Why ? Becouse we will switch theme in java code later. In apps entry point java file in onModuleLoad() method we need to insert some code. We want to tell GXT, that we will be using SLATE theme as default, but we would like to change it later. This is made by passing ‘false’ parameter in .setDefaultTheme(..) method. Code for this:   ThemeManager.register(Slate.SLATE); //register non standard theme // Theme.GRAY.set(“file”,”css/gxt-gray.css”); //set custom css’es path for grey theme // Theme.BLUE.set(“file”,”css/gxt-all.css”); //set custom css’es path for standard blue theme // Slate.SLATE.set(“file”,”gxt/themes/slate/css/xtheme-slate.css”); //set custom path for SLATE theme GXT.setDefaultTheme(Slate.SLATE, false); //set default theme to new SLATE skin

That’s not all. If we would like to rearange our paths (i.e. by moving themes/images/css directories in other places) we have to uncoment commented code and set proper paths.

Because we would like to allow user to switch theme by own. We have to add somewhere in our app’s panels ThemeSelector which will do all work. It’s very easy. Just add somewhere this code:

  [ourContainer].add(new ThemeSelector());

— Previous article

SpringWeb + Hibernate + Database encoding problems - solved!

Next article —

Meetbsd 2010

You May Also Like
DDevelopment & Design

Enums for scala

Scala has very limited implementation of Enumeration. Enumerated objects can't extends other classes. Partial replacement for it is to use sealed classes. You can do pattern matching on them. When you ommit some possible value you will get compiler wa...
DDevelopment & Design

Spock, Java and Maven

Few months ago I've came across Groovy - powerful language for JVM platform which combines the power of Java with abilities typical for scripting languages (dynamic typing, metaprogramming).

Together with Groovy I've discovered spock framework (https://code.google.com/p/spock/) - specification framework for Groovy (of course you can test Java classes too!). But spock is not only test/specification framework - it also contains powerful mocking tools.

Even though spock is dedicated for Groovy there is no problem with using it for Java classes tests. In this post I'm going to describe how to configure Maven project to build and run spock specifications together with traditional JUnit tests.


Firstly, we need to prepare pom.xml and add necessary dependencies and plugins.

Two obligatory libraries are:
<dependency>
    <groupid>org.spockframework</groupId>
    <artifactid>spock-core</artifactId>
    <version>0.7-groovy-2.0</version>
    <scope>test</scope>
</dependency>
<dependency>
    <groupid>org.codehaus.groovy</groupId>
    <artifactid>groovy-all</artifactId>
    <version>${groovy.version}</version>
    <scope>test</scope>
</dependency>
Where groovy.version is property defined in pom.xml for more convenient use and easy version change, just like this: 
<properties>
    <gmaven-plugin.version>1.4</gmaven-plugin.version>
    <groovy.version>2.1.5</groovy.version>
</properties>

I've added property for gmaven-plugin version for the same reason ;)

Besides these two dependencies, we can use few additional ones providing extra functionality:
  • cglib - for class mocking
  • objenesis - enables mocking classes without default constructor
To add them to the project put these lines in <dependencies> section of pom.xml:
<dependency>
    <groupid>cglib</groupId>
    <artifactid>cglib-nodep</artifactId>
    <version>3.0</version>
    <scope>test</scope>
</dependency>
<dependency>
    <groupid>org.objenesis</groupId>
    <artifactid>objenesis</artifactId>
    <version>1.3</version>
    <scope>test</scope>
</dependency>

And that's all for dependencies section. Now we will focus on plugins necessary to compile Groovy classes. We need to add gmaven-plugin with gmaven-runtime-2.0 dependency in plugins section:
<plugin>
    <groupid>org.codehaus.gmaven</groupId>
    <artifactid>gmaven-plugin</artifactId>
    <version>${gmaven-plugin.version}</version>
    <configuration>
        <providerselection>2.0</providerSelection>
    </configuration>
    <executions>
        <execution>
            <goals>
                <goal>compile</goal>
                <goal>testCompile</goal>
            </goals>
        </execution>
    </executions>
    <dependencies>
        <dependency>
            <groupid>org.codehaus.gmaven.runtime</groupId>
            <artifactid>gmaven-runtime-2.0</artifactId>
            <version>${gmaven-plugin.version}</version>
            <exclusions>
                <exclusion>
                    <groupid>org.codehaus.groovy</groupId>
                    <artifactid>groovy-all</artifactId>
                </exclusion>
            </exclusions>
        </dependency>
        <dependency>
            <groupid>org.codehaus.groovy</groupId>
            <artifactid>groovy-all</artifactId>
            <version>${groovy.version}</version>
        </dependency>
    </dependencies>
</plugin>

With these configuration we can use spock and write our first specifications. But there is one issue: default settings for maven-surefire plugin demand that test classes must end with "..Test" postfix, which is ok when we want to use such naming scheme for our spock tests. But if we want to name them like CommentSpec.groovy or whatever with "..Spec" ending (what in my opinion is much more readable) we need to make little change in surefire plugin configuration:
<plugin>
    <groupid>org.apache.maven.plugins</groupId>
    <artifactid>maven-surefire-plugin</artifactId>
    <version>2.15</version>
    <configuration>
        <includes>
            <include>**/*Test.java</include>
            <include>**/*Spec.java</include>
        </includes>
    </configuration>
</plugin>

As you can see there is a little trick ;) We add include directive for standard Java JUnit test ending with "..Test" postfix, but there is also an entry for spock test ending with "..Spec". And there is a trick: we must write "**/*Spec.java", not "**/*Spec.groovy", otherwise Maven will not run spock tests (which is strange and I've spent some time to figure out why Maven can't run my specs).

Little update: instead of "*.java" postfix for both types of tests we can write "*.class" what is in my opinion more readable and clean:
<include>**/*Test.class</include>
<include>**/*Spec.class</include>
(thanks to Tomek Pęksa for pointing this out!)

With such configuration, we can write either traditional JUnit test and put them in src/test/java directory or groovy spock specifications and place them in src/test/groovy. And both will work together just fine :) In one of my next posts I'll write something about using spock and its mocking abilities in practice, so stay in tune.