Sencha Touch Bits

Installing & Compiling CoffeeScript

2011-12-05T04:00:00Z

In my previous post I already showed some simple examples of using Sencha Touch 2 and CoffeeScript. I thought I take that a bit further and show you more about how to build a Sencha Touch app using the latest Sencha Touch 2 and CoffeeScript.

In order to do so I decided to use the screencast format. It's my first screencast ever, but I thought it's worth a try.

This first screencast is about installing and compiling CoffeeScript. The next one will be about my favorite features of CoffeeScript.

I hope you'll enjoy it and get something out of it.

Links and tools used in the screencast:

CoffeeScript
Jitter

Hello CoffeeScript! Meet Sencha Touch.

2011-10-23T04:00:00Z

In yesterdays post I presented a few examples of how to write a "Hello World!" application in Sencha Touch 2.
These same examples actually serve well for giving you a glimpse into using Sencha Touch together with CoffeeScript.

We at 360releases have started using CoffeeScript for a Sencha Touch project. Going forward we'll most likely use it for every new project, be it Sencha Touch or Ext JS.

I know that a lot of people's initial reaction is rejection. So was mine. But after looking into and checking out the Pragmatic's CoffeeScript book, I didn't really see a reason not to use it.

Sencha and Sass already showed us (the Sencha community) that compiling hasn't have to be a pain, as we native script language developers usually think.

My take on CoffeeScript is basically this:
If CoffeeScript let's me save key strokes (and conserve my fingers joints for the years to come) without actually having to learn a complete different syntax or language, then heck yes.

Take a look at the CoffeeScript examples below yourself.

Wouldn't it be nice if you could stop worrying about commas after property definitions within config objects? With CoffeeScript you can.

As in the previous post, all examples have the exact same DOM and view output, which is the following (except the numbering obviously):

Hello World #1

Using Ext.setup, onReady and Ext.create.

Ext.setup
    onReady: ->
        Ext.create 'Ext.Panel',
            fullscreen: true
            html: 'Hello World! #1'

Hello World #2

Using Ext.setup, onReady and Ext.Viewport.add.

Ext.setup
    onReady: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #2'

Hello World #3

Using Ext.application, onReady and Ext.Viewport.add.

Ext.application
    onReady: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #3'

Hello World #4

Using Ext.application, launch and Ext.Viewport.add.

Ext.application
    launch: ->
        Ext.Viewport.add
            fullscreen: true
            html: 'Hello World! #4'

Hello World #5

Using Ext.application, launch and Ext.create.

Ext.application
    launch: ->
        Ext.create 'Ext.Panel',
            fullscreen: true
            html: 'Hello World! #5'

Hello World #6

Using Ext.application and autoCreateViewport.

Ext.define 'App.view.Viewport',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #6'


Ext.application
    name: "App"
    autoCreateViewport: true

Hello World #7

Using Ext.application, controller, getView and create.

Ext.define 'App.view.HelloWorld',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #7'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'HelloWorld'
    ]
    init: ->
        @getView('HelloWorld').create()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

Hello World #8

Using Ext.application, controller, automatic generated view getter and create.

Ext.define 'App.view.WorldStage',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #8'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'WorldStage'
    ]
    init: ->
        @getWorldStageView().create()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

Hello World #9

Using Ext.application, controller, refs and ref's autoCreate.

Ext.define 'App.view.WorldStage',
    extend: 'Ext.Container'
    config:
        fullscreen: true
        html: 'Hello World! #9'


Ext.define 'App.controller.HelloWorld',
    extend: 'Ext.app.Controller'
    views: [
        'WorldStage'
    ]
    refs: [
        ref: 'worldstage'
        selector: 'worldstageview'
        xtype: 'worldstageview'
        autoCreate: true
    ]
    init: ->
        @getWorldstage()


Ext.application
    name: 'App'
    controllers: [
        'HelloWorld'
    ]

I'm currently in Austin, TX, for SenchaCon. So maybe see you at the conference. Follow me on Twitter @steffenhiller for Sencha Touch and Ext JS talk, and this week possibly some bar talk as well. :)

That's all for now.

Hello World! Remember the Ext.onReady days?

2011-10-22T04:00:00Z

Do you remember the Ext.onReady days?
There used to be just one way to initiate and render your application's viewport.

You simply did a

Ext.onReady(function () {
    new Ext.Viewport({
        html: 'Hello World!'
    })
});

and done!

Those days are over. (No reason to be sad, though.)

Now we have Ext.onReady, Ext.setup, Ext.application, Ext.app.Application, Ext.viewport.Viewport, Ext.create, Ext.Loader, autoCreateViewport, fullscreen, autoMaximize, profiles, init and launch to name a few.

We at 360releases started to work with Sencha Touch 2 the same day the Developer Preview got released.

The start with Sencha Touch 2 was a bit rocky for us. The weirdest issue of all was a non-Sencha Touch related bug on our side. Anyway, while playing around with the way of initiating our Sencha Touch 2 app, I realized that there are a bunch of ways of doing so.

Back in the Ext JS 1.x and 2.x days, there was just one. So I thought it'd be interesting to list a few different ways of initializing a Sencha Touch app today.

Don't hold your breath. ;) There are certainly more, but I thought listing 9 different examples should be enough.

All Hello World examples result in the exact same DOM structure and view (except for the numbering obviously).

Each example has the following output in Mobile Safari on the iPhone:

Hello World #1

Using Ext.setup, onReady and Ext.create.

Ext.setup({
    onReady: function () {
        Ext.create('Ext.Panel', {
            fullscreen: true,
            html: 'Hello World! #1'
        });
    }
});

Hello World #2

Using Ext.setup, onReady and Ext.Viewport.add.

Ext.setup({
    onReady: function () {
        Ext.Viewport.add({
            fullscreen: true,
            html: 'Hello World! #2'
        });
    }
});

Hello World #3

Using Ext.application, onReady and Ext.Viewport.add.

Ext.application({
   onReady: function () {
       Ext.Viewport.add({
           fullscreen: true,
           html: 'Hello World! #3'
       });
   } 
});

Hello World #4

Using Ext.application, launch and Ext.Viewport.add.

Ext.application({
   launch: function () {
       Ext.Viewport.add({
           fullscreen: true,
           html: 'Hello World! #4'
       });
   } 
});

Hello World #5

Using Ext.application, launch and Ext.create.

Ext.application({
   launch: function () {
       Ext.create('Ext.Panel', {
           fullscreen: true,
           html: 'Hello World! #5'
       });
   } 
});

Hello World #6

Using Ext.application and autoCreateViewport.

Ext.define('App.view.Viewport', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #6'
    }
});

Ext.application({
    name: 'App',
    autoCreateViewport: true
});

Hello World #7

Using Ext.application, controller, getView and create.

Ext.define('App.view.HelloWorld', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #7'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'HelloWorld'
    ],
    
    init: function () {
        this.getView('HelloWorld').create();
    }
});


Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

Hello World #8

Using Ext.application, controller, automatic generated view getter and create.

Ext.define('App.view.WorldStage', {
    extend: 'Ext.Container',
    
    config: {
        fullscreen: true,
        html: 'Hello World! #8'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'WorldStage'
    ],
    
    init: function () {
        this.getWorldStageView().create();
    }
});

Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

Hello World #9

Using Ext.application, controller, refs and ref's autoCreate.

Ext.define('App.view.WorldStage', {
    extend: 'Ext.Container',

    config: {
        fullscreen: true,
        html: 'Hello World! #9'
    }
});

Ext.define('App.controller.HelloWorld', {
    extend: 'Ext.app.Controller',

    views : [
        'WorldStage'
    ],

    refs: [
        {
            ref: 'worldstage',
            selector: 'worldstageview',
            xtype: 'worldstageview',
            autoCreate: true
        }
    ],

    init: function () {
        // Note that autoCreate is not creating the world stage view
        // automatically while the controller is initiated!
        // It only means that if you reference it the first time
        // through ref's getter method, it'll be created.
        this.getWorldstage();
    }
});

Ext.application({
    name: 'App',
    controllers: ['HelloWorld']
});

I'll be in Austin, TX, for SenchaCon, in fact I'm already there. So maybe see there. :) Follow me on Twitter @steffenhiller if you can't get enough of Sencha Touch talk.

That's all for now.

Performance Optimization

2011-05-09T04:00:00Z

While developing Sencha Touch on the Desktop, everything is awesome and smooth, especially since you only have to care about WebKit.

As soon as you do actual testing on the devices, be it iOS, Android or Blackberry, the fun might literally get stuck for a second.

Luckily, there are multiple things you can do about optimizing the performance of your Sencha Touch applications.
Thanks to Xero's @storminwalker and Sencha's @jamespearce for pointing out a few very helpful resources. Since these resources are very important, I thought I make a short post mentioning them.

If you have any other helpful links or tips from your own experience, please let me and others know in the comments, thanks!

SenchaCon 2010 Video

First off, a very very insightful and helpful video from Sencha's @tmaintz that you probably should watch first:

SenchaCon 2010: Performance Optimization for Sencha Touch from Sencha on Vimeo.

Besides the video, here are an older blog post, that Tommy mentioned in the video, and a more recent one about memory usage:

Event Delegation

http://www.sencha.com/blog/event-delegation-in-sencha-touch/

Optimizing Memory Usage

http://www.sencha.com/blog/sencha-touch-optimizing-memory-usage/

General Performance tips from the PhoneGap wiki

http://wiki.phonegap.com/w/page/16494809/Performance-tips-for-device/

The point "Do not use animated gifs." makes me wonder what to use for loading spinners: Animated gifs or CSS3 animations?
The most common spinner that is also included in Sencha Touch runs actually fine on the iPhone, but a custom spinner I did the other day didn't run in sync on the iPhone and not at all on Android.

Custom CSS3 animation optimizations ideas

Regarding the "sync"-problem of my custom loading spinner, I received some interesting suggestions from Sencha's CEO Michael Mullany the other day. Maybe those may be of help for others, as well, therefore I add the link to the forum thread here:

http://www.sencha.com/forum/showthread.php?129697-CSS-animations-are-out-of-sync-on-iPhone

Again, please post in the comments any other helpful links or tips you might have, thanks!

Adding custom embedded (inline) icons

2011-03-15T04:00:00Z

Sencha Touch comes bundled with a bunch of icons (329 as of 1.0.1a). They are a bit hidden. You can find them in the distribution package at:
resources/themes/images/default/pictos

Using default icons

To use one of those icons e.g. in a tab or button (by specifying iconCls: 'some_icon'), just include the following line in your Sass file:

@include pictos-iconmask('some_icon');

some_icon has to be the file name of the icon image you find in the pictos folder.

This method isn't just adding the icons via an url such as url(/resources/themes/images/default/pictos/some_icon.png). It's embedding them right into your CSS via a data url. This guarantees your icons to be shown right when your app is rendered, instead of loading the icon after a delay.

So your CSS will look something like:

.x-tab img.some_icon, .x-button img.x-icon-mask.some_icon {
  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAA8CAYAAAA6/NlyAAAIgUlEQVRoBc2aWaxdUxjHezpqaVQprQ5JuakOqal');
}

Adding custom icons

Sometimes you want to add custom icons the same way though. You could add the image file into the pictos folder and use Sencha Touch's pictos-iconmask method as well. Though, it's probably better to separate your custom files from the Sencha Touch files for better organization and especially for avoiding deleting them after the next upgrade of your Sencha Touch resource files.

Here's the approach I'm taking:

I use the build-in Compass method inline-image which converts your image to a base64 inline image in my custom icon mask mixin:

@mixin custom-iconmask($name) {
  .x-tab img.#{$name}, .x-button img.x-icon-mask.#{$name} {
    -webkit-mask-image: inline-image('icons/' + $name + '.png');
  }
}

Then I just include a custom icon by

@include custom-iconmask('custom_icon');

Note that you can adjust the exact path and extension yourself. In my case, the icon has to be a png in images/icons/custom_icon.png. inline-image is assuming your images are in the images folder by default.

Not using Compass

Of course, you can also just paste the base64 string of your custom icon into your CSS or SASS code.

There are a few websites and offline tools out there that convert your images to base64 strings as used by the data url. None of the websites or tools I used have been working great for me though, therefore don't really deserve a mention. ;)

Coincidentally, Mitchell Simoens (Sencha's newest hire) released today a very handy Base64 encoder built with Ext Core and the HTML5 File API:
http://www.sencha.com/forum/showthread.php?126882-Base64-Encoder
Check it out, extremely easy and fast to use. :)

That's all.