PDA

View Full Version : The new Apple and Android themes (0.97)



lasseok
18 Oct 2010, 10:19 AM
One of the things listed in the release notes for 0.97 is "Added Apple and Android themes". I read this as themes that look much more like the respective platforms (e.g. much more like for example iOS, than the default Sencha Touch theme).

But, how do I "active"/use these themes?

Any help would be greatly appreciated!


Lasse

blessan
18 Oct 2010, 5:10 PM
Use a link tag and specify the src . Or in the js code check which platform ur on and specify src for link tag.

lasseok
19 Oct 2010, 1:55 AM
I just completely overlooked the css folder (I only searched the SASS folder), and thus I feel a little stupid :D But hey, it happens to everybody from time to time.

In any case, thank you, blessan!

jmdesp
21 Oct 2010, 6:10 AM
One of the things listed in the release notes for 0.97 is "Added Apple and Android themes". I read this as themes that look much more like the respective platforms
Lasse

I was very happy to see this also, but specifically what changes do the new themes include ?
I did a little testing with the default samples and the kitchen sink, and couldn't see a lot of difference.

So could we get/make a list of what changes they bring ?

jmdesp
25 Oct 2010, 3:44 AM
So, has anyone some idea about that ?

lasseok
25 Oct 2010, 4:13 AM
Hi jmdesp

Sorry, I haven't had time to reply - Busy at work.

The Android and Apple themes look a bit more like the respective platform than the default Sencha Touch theme that is meant to be a bit more neutral and thus able to fit in better on several platforms without one having to redo a theme for every device.

They only bring changes in ways of appearance - Noting else. Obviously, because it's CSS. Just so we're clear. Therefore you shouldn't really see major changes other than fx. the color use and different gradients, when you include the stylesheets. If you can't see any difference, it might be because you've linked up the file wrong. The apple.css or android.css needs to replace the Sencha Touch theme CSS file in your source code or at least be linked to after the Sencha Touch theme in the HTML document.

Hope it makes sense.

caseyd
28 Dec 2010, 11:52 AM
Does anyone have an example of how to detect/switch the css file loaded whether it's apple.css or android.css?

lasseok
28 Dec 2010, 12:46 PM
Clientside with Sencha Touch:



<link id="myStylesheet" rel="stylesheet" href="default.css" type="text/css">
<script type="text/javascript">
Ext.setup({
onReady:function(){
if(Ext.is.Android){
Ext.get("myStylesheet").dom.href = "/path/to/android.css";
} else if(Ext.is.iOS){
Ext.get("myStylesheet").dom.href = "/path/to/apple.css";
}

}
});
</script>


See http://dev.sencha.com/deploy/touch/docs/?class=Ext.is

Serverside (PHP in this case):



$ua = strtolower($_SERVER['HTTP_USER_AGENT']);
if(strstr($ua,"android")){
echo '<link rel="stylesheet" href="/path/tos/android.css" type="text/css">';
} else if(strstr($ua,"iphone")){
echo '<link rel="stylesheet" href="/path/to/apple.css" type="text/css">';
}


Remember that the PHP version is only a simple example. If you want to do the validation serverside, you should use a more competent browser detection mechanism (E.g. get_browser (http://dk.php.net/manual/en/function.get-browser.php) or http://browsers.garykeith.com/downloads.asp