Announcement

Collapse
No announcement yet.
X
  • Filter
  • Time
Clear All
new posts

    Change Theme dynamically

    Hi,

    I would like to change the themes in my SmartGWT application dynamically.
    I know that statically we can change it in module.xml. But how to change it in runtime ?

    Thanks and Regards,
    Vivek

    #2
    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.

    Comment


      #3
      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 ?

      Comment


        #4
        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.

        Comment


          #5
          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 ?

          Comment


            #6
            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.

            Comment


              #7
              If you have
              Code:
              <inherits name='com.smartgwt.SmartGwtNoTheme'/>
              you have to comment out/remove
              Code:
              <inherits name='com.smartgwt.SmartGwt'/>

              Comment


                #8
                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"/>

                Comment


                  #9
                  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).

                  Comment


                    #10
                    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.

                    Comment


                      #11
                      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.

                      Comment


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

                        Comment


                          #13
                          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?

                          Comment


                            #14
                            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).

                            Comment

                            Working...
                            X