PDA

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



ByReaL
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

index.html


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


<html>
<head>
<title>App 0.0.0.0</title>
-->
<script type="text/javascript" language="javascript"
src="app/app.nocache.js"></script>
</head>
-->
<body>


<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 -->
<noscript>
<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.
</div>
</noscript>


</body>
</html>




app.gwt.xml


<?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";
]]></property-provider>


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


<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>
<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>
<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>
<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" />
</replace-with>


<!-- 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" />


</module>






App.java


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();
case NEPTUNE:
return theme.isNeptune();
case TRITON:
return theme.isTriton();
}
return false;
}


@Override
public String toString() {
return value();
}
}


@PropertyName("gxt.theme")
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() {
RootPanel.get().add(desktop);
RootPanel.get().addStyleName("x-desktop");

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


}


}