Custom Sencha Touch Themes - Part 3

Useful info:

This is what I've figured out about custom styling Sencha. Images are specified in SASS (and therefore, in CSS) by a function defined as:

theme_image(theme, path, mime_type = nil)


It's defined in resources\themes\lib\theme_images.rb. The "theme" parameter is one I haven't been able to figure out. It refers to Sencha theme name, that much is obvious, but it's not entirely clear how Sencha packages themes. The \resources\themes folder doesn't contain individual theme folders such as "default"; instead it is fillled with other folders. So it's difficult to say which folders belong to which theme.

The path parameter is obviously image URL. The mime_type is an optional parameter; if not specified it will encode the image as a base64. This is only recommended for things like button icons, which can be safely cached for a long time and do not change frequently.

Update: I got around the need for the theme_image function call by specifying the image URL directly. Less elegant, but this is the Sencha Touch Hack Blog.

RemoteJS Android Browser Debugger Compilation on Windows - Sencha

The enterprising folks at Sencha have built a JS debugger for Android phone browsers. It's called RemoteJS Javascript Debugger. You need to check it out from Git and build it which is, quite frankly, a pain on a Windows box. Here's their instructions and then my experiences below.

I installed Qt (framework only), like the instructions said. Then I cloned the Git repository, also as described. Next comes the moment of truth "qmake". I am a luckless fellow; for whatever reason (my laziness in understanding), programs that I install are never recognized on the command line no matter what environment variables I set. So I ran qmake giving the path to the qmake.exe file (Qt\4.x\qmake\qmake.exe). This threw a




"Could not find mkspecs for your QMAKESPEC(win32-msvc2008) after trying:

C:\iwmake\build_vs2008_opensource_________________PADDING_______________

__\mkspecs"

error.

The way to fix this (or at least, make it not give that error) is to run qmake.exe with the -spec argument, and give the path to the qmake.conf file appropriate to your platform. All the qmake.conf files can be found in Qt\4.x\mkspecs\YOUR_PLATFORM_NAME

So basically run:


PATH_TO_QMAKE\qmake.exe -spec PATH_TO_QMAKE.conf

Which brings me to the && make part of the instructions. This being a Windows box, there was no make on it. I downloaded and installed GnuMake and ran it on the makefile generated by the previous command. Apparently the generate makefile has errors in it, because what I get is:

Makefile.Release:59: *** missing separator. Stop.


And that's where I've stopped now. Oh and btw, the reason I'm doing this is so I can figure out why my styles don't come out on the Android browser the way that they do on the Chrome browser. Woe is me, and serves me right for using Windows I guess.

Custom Sencha Touch Themes - Part 2

Success: I followed this tutorial to get started with SASS and Compass. In a nutshell, you write some SASS stuff, compile it using Compass and it will give you a stylesheet to replace the sencha-touch.css stylesheet. Follow the instructions here. Note: make sure you check ALL the paths in config.rb. The instructions might have an incorrect path for images_dir depending on your directory structure. It happened to me so beware.

Because the tutorial is very bare bones about what Sencha custom theming is capable of, check this out too. Slide 17 has a complete list of Sencha Touch SASS variables. It unfortunately does not include an exhaustive list of Sencha mixins. I don't understand SASS very well at this point, but my sole attempt at extending an existing Sencha mixing resulted in a compile error so I gave it up.

Custom Sencha Touch Themes - Part 1

So I've been trying to get my Sencha Touch application to have buttons that look something like what you see on the left (Designed by my partner in crime, the awesome Daniel Winters; I am responsible for the ugly copyright notice).

The approach I began with:


new Ext.Button({

icon: ,
cls: 'homeButton x-btn-text-icon',
width: '40px',
height: '35px',
style: {
border: '0em rgb(0, 46, 50, 255)',
background: 'transparent',
webkitBoxSizing: 'content-box'
},

iconAlign: 'top',


That's not working so far. Not very well, at least. So I am going to try custom theme styling using SASS (Compass and SCSS sheets etc)