PDA

View Full Version : Change theme on the fly ?



debianw
22 Aug 2012, 8:08 AM
Is there a way in Touch 2 to change the global theme on the fly ?.

I have an app that requires a different skin depending on which section you are.

jerome76
22 Aug 2012, 4:59 PM
I was doing some research into this a little over a year ago and I did have a working solution. Unfortunately, I don't have access to that old code (from ST1.0), but I did discover and modify something else:

(It isn't necessarily from the Sencha Touch framework, but it does use JavaScript)

You can try using this to remove css files:


//in your change function...

var scripts = document.getElementsByTagName('script'); //or document.scripts


Ext.Array.each(scripts, function(script, index) {
var extIdx = script.src.indexOf('.css') + 4,
src = script.src;
if(extIdx !== -1) {
var begIdx = 0;
for(var i = src.length; i > 0; i--){
if(src[i] == "/"){
begIdx = i;
i = 0; //end loop
}
}
var file = src.substring(begIdx, extIdx)
removejscssfile(file);
}
});



//---------------------------------------------------------------------------------------
//you can put this in the index.html or create a function to use in your app


/**
* This is remove all instances of 'filename.filetype' on the page
*/
function removejscssfile(filename, filetype){
//determine element type to create nodelist from
var targetelement=(filetype=="js") ? "script" : (filetype=="css") ? "link" : "none";

//determine corresponding attribute to test for
var targetattr=(filetype=="js") ? "src" : (filetype=="css") ? "href" : "none";

var allsuspects=document.getElementsByTagName(targetelement);

//search backwards within nodelist for matching elements to remove
for (var i = allsuspects.length; i >= 0; i--){
if(allsuspects[i]
&& allsuspects[i].getAttribute(targetattr) != null
&& allsuspects[i].getAttribute(targetattr).indexOf(filename) != -1
){
//remove element by calling parentNode.removeChild()
allsuspects[i].parentNode.removeChild(allsuspects[i]);
}
}
}


You can try this for adding the file:


/**
* Sample output would be added to the <head> of the document
* <link rel="stylesheet" href="resources/css/filename.css" type="text/css" media="screen">
*/
function addCSSfile(filename){
var headID = document.getElementsByTagName("head")[0];
var cssNode = document.createElement('link');
cssNode.type = 'text/css';
cssNode.rel = 'stylesheet';
cssNode.href = 'resources/css/' + filename + '.css';
cssNode.media = 'screen';
headID.appendChild(cssNode);
}

I haven't really tested it but I think it could work.

If it doesn't, I hope it gives you more insight on it :)

debianw
22 Aug 2012, 7:34 PM
Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

Example:



CSS.swapStyleSheet('android');
CSS.swapStyleSheet('bb6');
CSS.swapStyleSheet('apple');

Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

I built a little demo too.

jerome76
22 Aug 2012, 7:43 PM
Today I built a Singleton Util class for CSS. This class let me switch between custom themes on the fly.

Example:



CSS.swapStyleSheet('android');
CSS.swapStyleSheet('bb6');
CSS.swapStyleSheet('apple');

Here is the repo: https://github.com/debianw/CSSUtil-for-sencha-touch2

I built a little demo too.
SwapStyleSheet, that's what it was! ;) thanks debianw