View Full Version : minimum code to implement Theme switching from app

20 Mar 2018, 4:08 PM
what is the minimum code needed to be able to implement Theme switching in GXT4.0 live from app.

i looked at http://examples.sencha.com/gxt/4.0.2
in the top right corner you can switch the theme but what it does it actually loads a different index.html that has google analytics in it,
i'm sure this can be done in much fewer lines and without the need to use google analytics


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<script type="text/javascript" language="javascript"

<iframe src="javascript:''" id="__gwt_historyFrame" tabIndex='-1'
style="position: absolute; width: 0; height: 0; border: 0"></iframe>
<!-- RECOMMENDED if your web app will not function without JavaScript enabled -->
<div style="width: 22em; position: absolute; left: 50%; margin-left: -11em; color: red; background-color: white; border: 1px solid red; padding: 4px; font-family: sans-serif">
Your web browser must have JavaScript enabled
in order for this application to display correctly.



<?xml version="1.0" encoding="UTF-8"?>

<!-- When updating your version of GWT, you should also update this DTD reference, so that your app can take advantage of the latest GWT module capabilities. -->
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.8.1//EN" "http://gwtproject.org/doctype/2.8.1/gwt-module.dtd">

<module rename-to='app'>
<!-- Inherit the core Web Toolkit stuff. -->
<inherits name='com.google.gwt.user.User' />

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

<!-- GXT Theme -->
<inherits name="com.sencha.gxt.theme.gray.Gray" />
<inherits name="com.sencha.gxt.theme.neptune.Theme" />
<inherits name="com.sencha.gxt.theme.triton.Theme" />
<inherits name="com.sencha.gxt.theme.blue.Blue" />

<set-property name="gxt.theme" value="blue,gray,neptune,triton" />

<property-provider name="gxt.theme"><![CDATA[
if (window.location.pathname.indexOf('triton') != -1 || window.location.search.indexOf('triton') != -1) {
return "blue";
if (window.location.pathname.indexOf('gray') != -1 || window.location.search.indexOf('gray') != -1) {
return "gray";
if (window.location.pathname.indexOf('neptune') != -1 || window.location.search.indexOf('neptune') != -1) {
return "neptune";

return "blue";

<set-property name="gxt.css3.enabled" value="false">
<when-property-is name="gxt.theme" value="blue" />
<when-property-is name="gxt.theme" value="gray" />

<set-configuration-property name="CssResource.enableGss" value="true" />
<set-configuration-property name="CssResource.style" value="pretty" />

<replace-with class='com.sencha.gxt.explorer.client.chart.BlueThemedChartAppearance'>
<when-type-is class='com.sencha.gxt.explorer.client.chart.ThemedChartExample.ThemedChartAppearance' />
<when-property-is name="gxt.theme" value="blue" />
<replace-with class='com.sencha.gxt.explorer.client.chart.GrayThemedChartAppearance'>
<when-type-is class='com.sencha.gxt.explorer.client.chart.ThemedChartExample.ThemedChartAppearance' />
<when-property-is name="gxt.theme" value="gray" />
<replace-with class='com.sencha.gxt.explorer.client.chart.NeptuneThemedChartAppearance'>
<when-type-is class='com.sencha.gxt.explorer.client.chart.ThemedChartExample.ThemedChartAppearance' />
<when-property-is name="gxt.theme" value="neptune" />
<replace-with class='com.sencha.gxt.explorer.client.chart.TritonThemedChartAppearance'>
<when-type-is class='com.sencha.gxt.explorer.client.chart.ThemedChartExample.ThemedChartAppearance' />
<when-property-is name="gxt.theme" value="triton" />

<!-- Specify the app entry point class. -->
<entry-point class='com.app' />

<!-- Specify the paths for translatable code -->
<source path='client' />
<source path='shared' />

<stylesheet src="reset.css" />



public class App implements EntryPoint {

public enum Theme {
BLUE("Blue Theme"), GRAY("Gray Theme"), NEPTUNE("Neptune Theme"), TRITON("Triton Theme");

private final String value;

private Theme(String value) {
this.value = value;

public String value() {
return value;

public boolean isActive() {
ActiveTheme theme = GWT.create(ActiveTheme.class);
switch (this) {
case BLUE:
return theme.isBlue();
case GRAY:
return theme.isGray();
return theme.isNeptune();
case TRITON:
return theme.isTriton();
return false;

public String toString() {
return value();

public interface ActiveTheme extends BindingPropertySet {
@PropertyValue(value = "gray", warn = false)
boolean isGray();

@PropertyValue(value = "blue", warn = false)
boolean isBlue();

@PropertyValue(value = "neptune", warn = false)
boolean isNeptune();

@PropertyValue(value = "triton", warn = false)
boolean isTriton();

public void onModuleLoad() {

<----------------- what is needed here to set the neptune theme for example ? (without triggering loading a new html)