Build a skin

[cuthbe]

All

I have looked at the document on creating your own skin. I have done the following. Created a new project and copied the SilverWave directory structure from smartgwt-skins.jar into my own project.

I have done the following

1. Altered the SilverWave.gwt.xml and renamed it to MyTheme.gwt.xml and edited the location within it to MyTheme/load_skin.js

2. Renamed the public/cs/skins/SilverWave to public/cs/Skins/MyTheme

3. Altered the load_skin.js in that directory above, changing
isc.Page.setSkinDir("[ISOMORPHIC]/skins/MyTheme/")

4. Change my HTML file

// Determine what skin file to load
		var currentSkin = readCookie('skin_name_2_2');
		if (currentSkin == null) currentSkin = "Enterprise";

to

// Determine what skin file to load
		var currentSkin = readCookie('skin_name_2_2');
		if (currentSkin == null) currentSkin = "MyTheme";

5. Altered my project.gwt.xml file so that I import the new theme

<inherits name="com.myproject.theme.myproject.MyTheme" />


The issue is that when I load it. I looks like it is still trying to load Enterprise theme as all the windows are still blue, and the buttons are blue.

[cuthbe]

I have made it a bit further by copying everything again. The last issue that I see in safari developer console is

load_skin.js:6 ReferenceError: Can't find variable: isc

In that file the line is

isc.loadSkin = function (theWindow) {
if (theWindow == null) theWindow = window;
with (theWindow) {

Where do I set isc?

[sjivan]

load_skin.js must be loaded after the SmartClient JS files. It appears you are trying to load them before the SmartClient JS file.

Sanjiv

[cuthbe]

I have the following in my body taken from the SmartGWT showcase example.

<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Core API...';</script>

	<!--include the SC Core API-->
	<script src=myproject/sc/modules/ISC_Core.js></script>

	<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading UI Components...';</script>
	<script src='myproject/sc/modules/ISC_Foundation.js'></script>
	<script src='myproject/sc/modules/ISC_Containers.js'></script>
	<script src='myproject/sc/modules/ISC_Grids.js'></script>
	<script src='myproject/sc/modules/ISC_Forms.js'></script>
	<script src='myproject/sc/modules/ISC_RichTextEditor.js'></script>
	<script src='myproject/sc/modules/ISC_Calendar.js'></script>
	<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading Data API...';</script>
	<script src='myproject/sc/modules/ISC_DataBinding.js'></script>

	<script>
		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_name_2_2');
		if (currentSkin == null) currentSkin = "MyTheme";
	</script>

	<!--load skin-->
	<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading screens...';</script>

	<script type="text/javascript">
	document.write("<"+"script src=myproject/sc/skins/" + currentSkin + "/load_skin.js?isc_version=7.1.js><"+"/script>");
	</script>

	<!--include the application JS-->
	<script type="text/javascript">document.getElementById('loadingMsg').innerHTML = 'Loading MyDesktop<br>Please wait...';</script>

[sjivan]

Then isc should be loaded prior to your skin as your skin is doing the same thing as the other functional skins. Use FireBug to examine the net traffic and make sure all the files are being loaded correctly.

I think the problem actually is that you are inheriting your MyTheme.gwt.xml module instead of the NoScript module. Since you're manually adding script includes in the host html file, you do not need to inherit MyTheme.gwt.xml (which tries to inject the skin js).

Sanjiv