Announcement

**Isomorphic** · 25 Feb 2011, 09:09

It requires inheriting no NoTheme GWT module and writing out a script tag to load a different load_skin.js file dynamically. The Showcase itself does this if you need a sample.

**vnathank** · 24 Mar 2011, 02:22

I would like to achieve the dynamic skin change in SmartGWT. But the application always uses 'Enterprise' theme.

I am using SmartGWT 2.1 (I hope version doesn't matter for theme)

My <module>.gwt.xml file is

Code:

<?xml version="1.0" encoding="UTF-8"?>
<module rename-to='testtheme'>
  <!-- Inherit the core Web Toolkit stuff.                        -->
  <inherits name='com.google.gwt.user.User'/>
  <inherits name='com.smartgwt.SmartGwt'/>
  <!-- Inherit the default GWT style sheet.  You can change       -->
  <!-- the theme of your GWT application by uncommenting          -->
  <!-- any one of the following lines.                            -->

  <inherits name="com.smartclient.theme.treefrog.TreeFrog" />
  <inherits name="com.smartclient.theme.enterprise.Enterprise"/>
  <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlue"/>

  <!-- Other module inherits                                      -->
  
  <!-- Specify the app entry point class.                         -->
  <entry-point class='COM.client.TESTTHEME'/>

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

</module>

My <module>.html file is

Code:

<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<link type="text/css" rel="stylesheet" href="TESTTHEME.css">

<title>Test Theme</title>

<script>
	var isomorphicDir = "testtheme/sc/";
	function readCookie(name) {
		var nameEQ = name + "=";
		var ca = document.cookie.split(';');
		for ( var i = 0; i < ca.length; i++) {
			var c = ca[i];
			while (c.charAt(0) == ' ')
				c = c.substring(1, c.length);
			if (c.indexOf(nameEQ) == 0)
				return c.substring(nameEQ.length, c.length);
		}
		return null;
	}

	// Determine what skin file to load
	var currentSkin = readCookie('skin');
	if (currentSkin == null){
		currentSkin = "Enterprise";
	}
	alert(currentSkin);
</script>
<script type="text/javascript">
	document.write("<" + "script src=testtheme/sc/skins/"
			+ currentSkin + "/load_skin.js><"+"/script>");
</script>

<script type="text/javascript" language="javascript"
	src="testtheme/testtheme.nocache.js"></script>
</head>

<body>

</body>
</html>

and my <module>.java file is

Code:

package COM.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.Cookies;
import com.google.gwt.user.client.Window;
import com.google.gwt.user.client.ui.RootPanel;
import com.smartgwt.client.util.SC;
import com.smartgwt.client.widgets.Button;
import com.smartgwt.client.widgets.form.DynamicForm;
import com.smartgwt.client.widgets.form.fields.SelectItem;
import com.smartgwt.client.widgets.form.fields.events.ChangedEvent;
import com.smartgwt.client.widgets.form.fields.events.ChangedHandler;
import com.smartgwt.client.widgets.layout.VLayout;

/**
 * Entry point classes define <code>onModuleLoad()</code>.
 */
public class TESTTHEME implements EntryPoint {

	/**
	 * This is the entry point method.
	 */
	public void onModuleLoad() {
		VLayout vlt = new VLayout();
		vlt.setHeight(300);
		vlt.setWidth(300);
		vlt.setBorder("2px solid green");

		Button btn = new Button();
		btn.setTitle("Test");
		btn.setContents("This is button");

		btn.addClickHandler(new com.smartgwt.client.widgets.events.ClickHandler() {

			@Override
			public void onClick(
					com.smartgwt.client.widgets.events.ClickEvent event) {
				// TODO Auto-generated method stub
				SC.say("Button clicked!!");
			}
		});

		SelectItem selectItem = new SelectItem("skin", "Choose Skin");
		selectItem.setWidth(130);
		java.util.LinkedHashMap<String, String> valueMap = new java.util.LinkedHashMap<String, String>();
		valueMap.put("Enterprise", "Enterprise");
		valueMap.put("EnterpriseBlue", "EnterpriseBlue");
		valueMap.put("TreeFrog", "TreeFrog");

		selectItem.setValueMap(valueMap);

		String currentSkin = Cookies.getCookie("skin");

		if (currentSkin == null) {
			currentSkin = "Enterprise";
		}
		selectItem.setDefaultValue(currentSkin);
		selectItem.addChangedHandler(new ChangedHandler() {

			@Override
			public void onChanged(ChangedEvent event) {
				// TODO Auto-generated method stub
				Cookies.setCookie("skin", event.getValue().toString());
				Window.Location.reload();
			}
		});

		DynamicForm dyfrm = new DynamicForm();
		dyfrm.setWidth(200);
		dyfrm.setHeight(200);
		dyfrm.setItems(selectItem);
		vlt.addMember(btn);
		vlt.addMember(dyfrm);
		RootPanel.get().add(vlt);

	}
}

Where could be the fault ?

**Isomorphic** · 24 Mar 2011, 02:36

See the QuickStart Guide, Extending chapter, for an explanation of what's happening. See the Showcase sample project for how to correctly enable dynamic theme switching.

**vnathank** · 24 Mar 2011, 04:19

I had referred QuickStartGuide, based on it, I added SmartGwtNoTheme in inherits. Eventhough themes are not changing.

Based on referring Showcase sample, I made my HTML page. I can't find showcase sample with 'view source' for dynamic theme change.

Onething I observe in my above placed sample application is, all themes are mixing.

Any Clue ?

**Isomorphic** · 24 Mar 2011, 05:54

To just change theme, the QuickStart instructions work. Double-check your inherits very carefully.

For theme switching, the Showcase project itself is the example, not any example *within* the Showcase. You'll note, it has an interact to switch themes.

**fatzopilot** · 24 Mar 2011, 06:30

If you have

Code:

<inherits name='com.smartgwt.SmartGwtNoTheme'/>

you have to comment out/remove

Code:

<inherits name='com.smartgwt.SmartGwt'/>

**vnathank** · 24 Mar 2011, 19:17

I need to achieve dynamic theme changing only. The below are my inherits.
I have checked it, but couldn't find anything different. Do you mean to inherit any other modules ?

As 'fatzopilot' said, I had commented SmartGWT inherit and checked. But I am getting the same result. All themes are mixed. As given in Quick Start Guide, to avoid mixing themes, I added SmartGwtNoTheme inherit. Even then I am getting same.

Code:

  <inherits name='com.google.gwt.user.User'/>
  <!--<inherits name='com.smartgwt.SmartGwt'/>  -->
  <inherits name="com.smartgwt.SmartGwtNoTheme"/>
  <inherits name="com.smartclient.theme.graphite.Graphite" />
  <inherits name="com.smartclient.theme.enterprise.Enterprise"/>
  <inherits name="com.smartclient.theme.enterpriseblue.EnterpriseBlue"/>
  <inherits name="com.smartclient.theme.blackops.BlackOps"/>
  <inherits name="com.smartclient.theme.treefrog.TreeFrog"/>
  <inherits name="com.smartclient.theme.silverwave.SilverWave"/>
  <inherits name="com.smartclient.theme.fleet.Fleet"/>

**Isomorphic** · 24 Mar 2011, 22:53

Once again: see the Showcase project for an example of the correct inherits and code to enable theme switching. The QuickStart Guide just explains how to change theme (statically).

**vnathank** · 25 Mar 2011, 01:37

Could you please tell me one show case example, which shows inherits tag ? Because, I can see all the showcase examples that shows the code of .java content. I hope inherits will be available in Module.xml file.

**Isomorphic** · 25 Mar 2011, 02:50

OK, one more time: you need to look at the Showcase *project*, *not* any specific Showcase example. You'll note that the online Showcase has a SelectItem that allows you to switch skins. Look at the Showcase project at the .gwt.xml file in that project, and the code for that skin switcher. In the LGPL download (smartclient.com/builds) it's under samples/Showcase.

**vnathank** · 28 Mar 2011, 01:59

Thanks. I placed the gwt.xml content as it is and able to change the theme dynamically.

**jaikumar** · 26 Nov 2015, 06:59

The showcase example re load the application while you switch the theme. So this is problem for the user will lose the changes made. Is that possible without reloading the application we can change the theme?

**Isomorphic** · 26 Nov 2015, 13:26

Switching the theme without reloading the page is a non-goal. It would be extremely complicated both for the application and the framework (since many things about the current layout would need to be changed or updated), and there is little point, since users do not tend to suddenly switch theme in the middle of working (and can be encouraged to finish unsaved work in any case, as with any other kind of navigation away from the application).

Announcement

Change Theme dynamically

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment