Changing Sencha Touch App Theme in Single Click

Changing Sencha Touch App Theme

After spending a couple of days I’ve decided it’s time to start using a CSS preprocessor. I chose SASS and I tried to install it. And as it seems – I went through most of the problems that may show up during the installation. I was pretty frustrated for a while but then I realized there is an easy way for everything.

So in this description I will show you two things:

1.       How to install Ruby, SASS and Compass
2.          Create New theme and compile .scss file

Installing Ruby:

1.  Go to the Ruby Installer for Windows website and download the latest Ruby version – usually the fist file at the top of the list.
2.  Open the file, choose your language, and accept the license agreement, nothing special.
3. On the next screen check the second box – Add Ruby executables to your PATH (this is important). Click next and finalize your installation.
4.  Open your cmd command prompt with Administrator rights.

  

      

 Here you can check if everything is okay with your Ruby installation. Type in

      ruby –v

     You should now see a line saying “ruby x.x.x….” where xxx are your version’s numbers. This means that your Ruby installation is working.

     

      If you get an error message saying ruby is not recognized as an internal or external command, operable or batch file. You’ve probably forgotten to check that box from Step3. Just uninstall Ruby, run the installation again and this time – make sure you’ve checked the Add Ruby executables to your PATH (Reinstalling is the simplest way to fix that problem. However, if for some reason you don’t want to do that, check out how to add ruby executables to your PATH manually.

    

  Installing SASS:

1.           It is time to install your preprocessor now. Go back to the Command Prompt window and type in

               gem install sass

               Your cursor will start blinking on a new line for a couple of moments and then a few messages will                appear. In not more than 30 seconds you will be good to go.

          2.   Check if the SASS installation is working. Type in

               sass  -v

              You should see a line stating your SASS version.

                   3.    Installing Compass is a lot like installing SASS. In your Command Prompt window type in

               gem install compass      

               And wait a bit again. 

                 4.    Check if the Compass installation is working. Type in

                 compass  -v

      If you had no problems until now – you have completed SASS with Compass installation.  Now it’s time to create your custom theme.  There are two ways through which you can create your custom theme:

   Way 1: If you’re using Sencha Architect then you have to create two file config.rb and app.scss at the path of project_name/resources/sass/, file config.rb (ruby file) and app.scss containing following structure:.

           Step 1:  Config.rb

# Get the directory that this configuration file exists in dir = File.dirname(__FILE__) # Load the sencha-touch framework automatically. load File.join(dir, '..', 'themes') # Compass configurations fonts_path = File.join(dir, '..', 'themes/fonts/') sass_path = dir css_path = File.join(dir, "..", "css") environment  = :development output_style = :compressed

         

         Step 2:  App.scss

// 1. Variable overrides, example: // $base-color: #af2584; // 2. Include Sencha Touch styles @import 'sencha-touch/default/all'; @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-picker; @include sencha-toolbar-forms; @include sencha-tabs; @include sencha-toolbar; @include sencha-carousel; @include sencha-indexbar; @include sencha-list;  @include sencha-layout;  @include sencha-form;  @include sencha-loading-spinner;

    Step 3: Now open your command prompt and set the sass directory path of your project. And write down the following line of code in command prompt:

     compass  compile app.scss

     But in that case you could be face some problem during running this command because of Sencha Architect does not provide all required files to changing theme. So to solve this problem you have to copy all the files with same directory structure from downloaded sencha touch 2.2.

    After waiting a little bit second your custom theme (i.e css file) file has been created at the path of project_name/resources/css with name app.scss.

    Basically in first way; mostly things you have to perform by yourself like creating config.rb file, app.scss file etc. so it is little bit typical. 

    But if you don’t want to perform such thing, then you have a simple and sweet way and that is Way 2:

    Step 1: Open your command prompt and set sass path directory in your downloaded sencha touch file.  And just follow the 3^rd step of Way 1.

    After successfully compilation a CSS file with same name has been created at path touch-2.2.0/resources/css/yourFileName.

  

    You can simply add this file in your project at the same path from where you’ve picked that.

Adding Custom font and custom Icons in Sencha Touch application

In Sencha Touch 2.2 instead of using icons with the -webkit-mask trick, Touch is moving to a more cross-browser solution with icon fonts.  As you know Touch SDK ships with the Pictos Font, and it already loads some basic icons for you to use directly on buttons with iconCls.

If you want to define more icons from the same Pictos fonts, you just have to use the mixin icon(): like

@include icon('network');

Code:

{

 xtype: 'button',

 iconCls: 'network',

 iconAlign: 'top',

 text: 'Net'

}

Touch Theme Layer already has a big object on SASS mapping keys into characters. So when you inform the key “network”, the theme knows that it has to use the key “J”.

You can find all icon description in file _Class.scss at path:

touch-2.2.0/resources/themes/stylesheets/sencha-touch/base/mixins

@function icon-character-for-name($name) {     // http://pictos.cc/font/     // Row 1     @if ($name == "anchor") { @return "a"; }     @else if ($name == "box") { @return "b"; }     @else if ($name == "upload") { @return "c"; }     @else if ($name == "forbidden") { @return "d"; }     @else if ($name == "lightning") { @return "e"; }     @else if ($name == "rss") { @return "f"; }     @else if ($name == "team") { @return "g"; }     @else if ($name == "help") { @return "h"; }     @else if ($name == "info") { @return "i"; }     @else if ($name == "attachment") { @return "j"; }     @else if ($name == "heart") { @return "k"; }     @else if ($name == "list") { @return "l"; }     @else if ($name == "music") { @return "m"; }     @else if ($name == "table") { @return "n"; }     @else if ($name == "folder") { @return "o"; }     @else if ($name == "pencil") { @return "p"; }     @else if ($name == "chat2") { @return "q"; }     @else if ($name == "retweet") { @return "r"; }     @else if ($name == "search") { @return "s"; }     @else if ($name == "time") { @return "t"; }     @else if ($name == "switch") { @return "u"; }     @else if ($name == "camera") { @return "v"; }     @else if ($name == "chat") { @return "w"; }     @else if ($name == "settings2") { @return "x"; }     @else if ($name == "settings") { @return "y"; }     @else if ($name == "tags") { @return "z"; }     // Row 2     @else if ($name == "attachment2") { @return "A"; }     @else if ($name == "bird") { @return "B"; }     @else if ($name == "cloud") { @return "C"; }     @else if ($name == "delete_black1") { @return "D"; }     @else if ($name == "eye") { @return "E"; }     @else if ($name == "file") { @return "F"; }     @else if ($name == "browser") { @return "G"; }     @else if ($name == "home") { @return "H"; }     @else if ($name == "inbox") { @return "I"; }     @else if ($name == "network") { @return "J"; }     @else if ($name == "key") { @return "K"; }     @else if ($name == "radio") { @return "L"; }     @else if ($name == "mail") { @return "M"; }     @else if ($name == "news") { @return "N"; }     @else if ($name == "case") { @return "O"; }     @else if ($name == "photos") { @return "P"; }     @else if ($name == "power") { @return "Q"; }     @else if ($name == "action") { @return "R"; }     @else if ($name == "favorites") { @return "S"; }     @else if ($name == "plane") { @return "T"; }     @else if ($name == "user") { @return "U"; }     @else if ($name == "video") { @return "V"; }     @else if ($name == "compose") { @return "W"; }     @else if ($name == "truck") { @return "X"; }     @else if ($name == "chart2") { @return "Y"; }     @else if ($name == "chart") { @return "Z"; }     // Row 3     @else if ($name == "expand") { @return "`"; }     @else if ($name == "refresh") { @return "1"; }     @else if ($name == "check") { @return "2"; }     @else if ($name == "check2") { @return "3"; }     @else if ($name == "play") { @return "4"; }     @else if ($name == "pause") { @return "5"; }     @else if ($name == "stop") { @return "6"; }     @else if ($name == "forward") { @return "7"; }     @else if ($name == "rewind") { @return "8"; }     @else if ($name == "play2") { @return "9"; }     @else if ($name == "refresh2") { @return "0"; }     @else if ($name == "minus") { @return "-"; }     @else if ($name == "battery") { @return "="; }     @else if ($name == "left") { @return "["; }     @else if ($name == "right") { @return "]"; }     @else if ($name == "calendar") { @return "\005C"; }     @else if ($name == "shuffle") { @return ";"; }     @else if ($name == "wireless") { @return "'"; }     @else if ($name == "speedometer") { @return ","; }     @else if ($name == "more") { @return "."; }     @else if ($name == "print") { @return "/"; }     // Row 4     @else if ($name == "download") { @return "~"; }     @else if ($name == "warning_black") { @return "!"; }     @else if ($name == "locate") { @return "@"; }     @else if ($name == "trash") { @return "#"; }     @else if ($name == "cart") { @return "$"; }     @else if ($name == "bank") { @return "%"; }     @else if ($name == "flag") { @return "^"; }     @else if ($name == "add") { @return "&"; }     @else if ($name == "delete") { @return "*"; }     @else if ($name == "lock") { @return "("; }     @else if ($name == "unlock") { @return ")"; }     @else if ($name == "minus2") { @return "_"; }     @else if ($name == "add2") { @return "+"; }     @else if ($name == "up") { @return "{"; }     @else if ($name == "down") { @return "}"; }     @else if ($name == "screens") { @return "|"; }     @else if ($name == "bell") { @return ":"; }     @else if ($name == "quote") { @return "\""; }     @else if ($name == "volume_mute") { @return "<"; }     @else if ($name == "volume") { @return ">"; }     @else if ($name == "help") { @return "?"; }     // Backwards compat; icons that are not in the font     @else if ($name == "arrow_left") { @return "["; }     @else if ($name == "arrow_right") { @return "]"; }     @else if ($name == "arrow_up") { @return "{"; }     @else if ($name == "arrow_down") { @return "}"; }     @else if ($name == "organize") { @return "I"; }     @else if ($name == "bookmarks") { @return "I"; }     @else if ($name == "loop2") { @return "r"; }     @else if ($name == "star") { @return "S"; }     @else if ($name == "maps") { @return "@"; }     @else if ($name == "reply") { @return "R"; }                    @else {         @return null;        }      }

Here, $name refers the iconCls name. So you can use all icons in project which are defined above. You can use these icons via mixin like:

// 1. Variable overrides, example: // $base-color: #af2584; // 2. Include Sencha Touch styles @import 'sencha-touch/default/all'; @include sencha-panel; @include sencha-buttons; @include sencha-sheet; @include sencha-picker; @include sencha-toolbar-forms; @include sencha-tabs; @include sencha-toolbar; @include sencha-carousel; @include sencha-indexbar; @include sencha-list; @include sencha-layout; @include sencha-form;     @include sencha-loading-spinner;     // Add your pictos icon    @include icon('network');

Now compile your sencha theme file ( .scss) and css has been generated in css folder.  But to add more icons you’ll need to generate your own font! You might be question yourself – How do I create a new font? Sounds complicated but it’s fairly easy.

There are a few tools, but my favorite is IcoMoon. With this tool you can select from dozens of fonts and create your own font package, or even import your own SVG vectors. All you need to do is select your icons, click generate font, and download!

Open http://icomoon.io/ and click on App which beside of Home tab.

You have to wait for little bit second.

Now select your icon and convert into font.

Select your Basic Latin through which your icon will call.

You can change this text by simple clicking on that place and edit the text. Now download the font and put at the path touch-2.2.0/resources/themes/fonts/pictos/.   Now open sencha-touch.scss (App themes file) and include downloaded font file.

sencha-touch.scss:

@import 'sencha-touch/default';      @import 'sencha-touch/default/all';          @include icon-font('IcoMoon',inline-font-files('pictos/icomoon.woff', woff,         'pictos/icomoon.eot', eot,         'pictos/icomoon.ttf', truetype,          'pictos/icomoon.svg', svg        ));       @include icon("barcode", "!","IcoMoon");       @include icon("standard", '"',"IcoMoon");      @include icon("search", "#","IcoMoon");      @include icon("edit", "$","IcoMoon");      @include icon("power", "%","IcoMoon");      @include icon("done", "&","IcoMoon");      @include icon("settings", "'","IcoMoon");      @include icon("favorites", "F","IcoMoon");      @include icon("save", "S","IcoMoon");      @include icon("close", "*","IcoMoon");      @include icon("add", "+","IcoMoon");      @include icon("delete", ",","IcoMoon");      @include icon("download", "-","IcoMoon");      @include icon("home", ".","IcoMoon");      @include icon("info", "/","IcoMoon");      @include icon("locate", "0","IcoMoon");      @include icon("map", "1","IcoMoon");      @include icon("more", "2","IcoMoon");      @include icon("refresh", "3","IcoMoon");      @include icon("reply", "4","IcoMoon");      @include icon("star", "5","IcoMoon");      @include icon("team", "6","IcoMoon");      @include icon("time", "7","IcoMoon");      @include icon("trash", "8","IcoMoon");      @include icon("user", "9","IcoMoon");      @include icon("arrow_up", ":","IcoMoon");      @include icon("arrow_right", ";","IcoMoon");      @include icon("arrow_down", "B","IcoMoon");      @include icon("arrow_left","A","IcoMoon");

Now compile your file as you have done above and replace your css file with recently created css file.