As Steve mentions on his blog, Touch SDK ships with the Pictos Font, and it already loads some basic icons for you to use directly on buttons with iconCls.

{
 xtype: 'button',
 iconCls: 'home'
}

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

@include icon('network');

{
 xtype: 'button',
 iconCls: 'network',
 iconAlign: 'top',
 text: 'Net'
}

Touch Theming 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”.

Adding Custom Icons

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’s 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!

Select your icons…

..and download the font!

After you have your font, it’s time to add to your project. Add the font into {touch_app}/resources/fonts/, and add this path to your config.rb:

# Compass configurations
sass_path = dir
css_path = File.join(dir, "..", "css")
fonts_path = File.join(dir, "..", "fonts")

Hint: Because we’re defining the fonts_path I had an error like “Pictos fonts not found”. It’s also good to copy the pictos folder from touch/resources/themes/fonts to this new fonts/ directory.

For the last step you just need to include the font and use the icons on your app.scss, like this:

@include icon-font('SenchaConIcons', inline-font-files(
  'senchacon-icons/senchacon-icons.woff', woff, 
  'senchacon-icons/senchacon-icons.ttf', truetype,
  'senchacon-icons/senchacon-icons.svg', svg
));

@include icon("menu"  , "\e009");
@include icon("search", "\e000");
@include icon("star"  , "\e001");

Updated June/5: In 2.2.1 you have to specify your font along with icon() mixin. Otherwise it will fallback to ‘Pictos’

@include icon("menu"  , "\e009", "SenchaConIcons");
@include icon("search", "\e000", "SenchaConIcons");
@include icon("star"  , "\e001", "SenchaConIcons");

Recap

• Use a tool to pick icons and generate the font (IcoMoon, Fontello)
• Add font into new directory {your_app}/resources/fonts
• Copy Pictos font from Touch directory to the same {your_app}/resources/fonts to avoid errors
• Add fonts_path into config.rb so Compass finds your font
• Import the font icon in your app.scss

What about PNG?

PNG is bitmap based, while Fonts are vectorial based. The above mentioned tools provide hundreds of icons, so it’s pretty easy to find an existent font icon pre-built. If that’s not the case, you can convert PNG to SVG and then import into IcoMoon. There are tools for that, like VectorMagic, Online Image Converter or Inkscape. I haven’t try any of these but If you have, please let us know via comment.

Ext JS brings MVC to the client-side, providing a solid architecture for your application, but the only missing part is the routing system. That’s why Ext.ux.Router was created.

Ext.ux.Router was released a year ago, and today a new version is coming! It has a brand new routing engine that is extremely flexible and also provides route validation. It also ships with improved docs and examples, and test cases to ensure code quality.

Check it out for free at market.sencha.com

Ext.application({
    name: 'App',
    ...
    routes: {
        '/': 'home#index',

        'users'                         : 'users#index',
        'users/:id'                     : 'users#show',
        'users/:id/:login'              : 'users#show',
        'users/*names'                  : 'users#showAll',
        'users/*ids/*names'             : 'users#showAll',
        'users/:id/*roles/:name/*groups': 'users#show',

        'search/:query/p:page'              : 'search#exec',
        '*first/complex-:part/*rest'        : 'home#complex',
        ':entity?*args'                     : 'home#base',


        'invoices/:id': {
            controller: 'invoices',
            action: 'show',
            id: /^\d+$/
        },

        'groups/:id': {
            controller: 'groups',
            action: 'show',
            id: function(value) {
                return value.match(/^\d+$/);
            }
        },

        'clients or client': {
            regex: /^(clients?)(?:\/(\d+)(?:\.\.(\d+))?)?/,
            controller: 'clients',
            action: 'index'
        }
    }
});

The current MVC

Currently:

• the view might contain several components;
• each one of these components fire events;
• the controller, using component query, will listen to these events;
• once the event is fired, the controller is notified.

This could be code translated by:

Ext.define('AM.controller.Users', {
    ...
    init: function() {
        this.control({
            'viewport > userlist': {
                itemdblclick: this.editUser
            },
            'useredit button[action=save]': {
                click: this.updateUser
            }
        });
    },
    ...
    updateUser: function(button) {
        console.log('clicked the Save button');
    }
    ...
});

The problem here is that the controller is fully aware of the structure of the view. It knows that inside the useredit view there’s a button with action=save.

This is a silly example, but I’ve seen worst cases where a controller class had 100 view references. Basically the whole controller was very associated with the view. Any changes on the view would result in refactoring the controller too.

DeftJS

Some months ago the guys from DeftJS wrote an awesome guest post at Sencha’s blog entitled Deft JS: Loosely Coupled MVC through Dependency Injection. They notice the same problematic exposed above, and figured it out that using Inversion-of-Control implemented by Dependency Injection would be the way to solve this.

The post intro was very interesting:

That application you just deployed? As experienced software developers, we all know it won’t be long before you’re going to need make to significant UI changes. Regardless of the amount of painstaking forethought, consensus gathering and planning backing it, no software design ever survives first contact with its users unscathed. To deliver truly effective software, we have to be prepared to adapt to an evolving understating of our users’ needs.

So… how do we architect our software, so we can rapidly implement UI changes without breaking the underlying business logic?

You can read more details on the blog post or their website, but basically there’s something called ViewController, which is a controller scoped to a particular view other than the full application. As a result, all your component queries can be simplified.

Ext.define( 'ContactsApp.controller.ContactGridViewController',
    extend: 'Deft.mvc.ViewController',
    mixins: [ 'Deft.mixin.Injectable' ],
    inject: [ 'contactStore' ],
 
    config: {
        contactStore: null
    },
 
    control: {
        contactsGrid: {
            click: 'onContactsGridClick'
        }
        editButton: {
            click: 'onEditButtonClick'
        }
    },
    ...
    destroy: function() {
       if (this.hasUnsavedChanges) {
           // cancel destruction
           return false;
       }
       // allow destruction
       return this.callParent( arguments );
    },
    ...
    onEditButtonClick: function () {
        this.getEditButton.setDisabled( false );
    },
 
    onContactsGridClick: function () {
        // add a ContactEditorView to the TabPanel for the selected item
        ...
    },
);

Control on Containers

Surprisingly, Sencha Touch not only can use control queries inside Ext.app.Controller but also use control for Ext.Container. So we can move all component queries from Controller to View.

Ext.create('Ext.Container', {
    control: {
       'button1': {
           tap: 'hideMe'
       }
    },

    hideMe: function() {
        this.hide()
    }
});

Why would you do that? Well, follow the code below:

/*
 * Create order form view
 */
Ext.create('App.view.OrderForm', {
    extend: 'Ext.form.Panel',
    xtype: 'orderform',

    control: {
        'button[action=submit]': {
            tap: 'onBtnSubmitTap'
        }
    },

    //...
    
    /**
     * Get the values from the form, add the id's selected
     * from the categories list, and fire the save event
     */
    onBtnSubmitTap: function(btn) {
        var values = this.getValues(),
            selectedCategories = this.down('#list-categories').getSelection(),
            categories = [];

        Ext.each(selectedCategories, function(category) {
            categories.push(category.getId());
        });

        values.categories = categories;
        this.fireEvent('save', this, values);
        }
    });


/**
 * Order Controller
 */
Ext.create('App.view.OrderController', {
    extend: 'Ext.app.Controller',
    control: {
        'orderform': {
            save: 'onOrderFormSave'
        }
    },

    /**
     * The controller does not need to know how the view is structred.
     * All it needs is the values, nothing else.
     */
    onOrderFormSave: function(formView, values) {
        Ext.Ajax.request({
            url: 'orders/save',
            params: values
            // ...
        });
    }
});

Basically we are inverting the control as well. Instead of having the Controller accessing the internals of the view and pulling out the values, we have the view dealing with its own logic to get the values, and then passing them for the controller to execute the business logic.

This leads to two major improvements:

• Changes in the view don’t affect controllers. If I change the way users select categories from a list to a radio button group, nothing changes in the controller.
• Controllers are easily testable. In test specs we just need to mock the values and test if the controller method is responding correctly.

And all of this without using any extensions, just changing the way we approach our architecture. Well, this is not completely true for Ext JS. Unfortunately the event system in Ext JS does not allow delegation in an easy way like Touch. You’d have to inform an array of events on the bubbleEvents config option for each component, something not very feasible. Perhaps in the future releases.

There’s still room for improvements…

This post just exposes some different approaches to the default Sencha MVC. Whether you’re going to use the default MVC or choose an alternative approach like DeftJS, Container Control or something customized, is up to you.

I have some more ideas that I’ll try to exemplify in future posts. Meanwhile let me know your thoughts about the whole subject with your comments.

Further resources

• Ext JS Guide to MVC Architecture
• Intro to Applications with Sencha Touch 2
• Guide to Controllers

Original iOS Interface

Here it is, another post where I take some cool native UI and reproduce using only HTML5 technologies. The first one was the Facebook Login page. The result was a pixel perfect UI, just as nice as the native one. Now I’m taking the Path animated menu!

For those who don’t know Path, it’s a social network for connecting with family and close friends, available for iOS and Android. It has very interesting features, but the thing that really caught my attention was their “fan-out animated menu”. When you tap the menu, the options fan out, with a nice circular animation. It’s so cool that I had to take this UI and port it. I translated <divs> to Ext.Buttons, created the CSS3 animation and calculations, so everything works properly with Touch components.

This is the result below! You need to use a WebKit Browser in order to see it (Smartphone browsers, Google Chrome or Safari).

• Live Example: http://brunotavares.github.com/SenchaExamples/touch/native-to-web-path-menu/
• Source code: http://github.com/brunotavares/SenchaExamples/

Animation

Inside the path menu container I have one main button, and other small ones. They all are absolute positioned, and stacked together. So the main button actually covers the small ones, having a z-index: 2. When this button is tapped, either fanOut or fanIn methods are triggered. Those methods iterate over each item, animating them with methods fanOutItem or fanInItem.

The fanInItem is easy. We just have to take the items and translate to the origin, which is 0,0. The tricky method is fanOutItem. There is a couple of math involved for calculating the X,Y position of the item on top of the arch line. You can check all those methods below:

onPathBtnTap: function(btn) {
    var pressedCls = Ext.baseCSSPrefix + 'button-pressed';
    
    btn.pressed = !btn.pressed;
    
    if (btn.pressed) {
        btn.addCls(pressedCls);
        this.fanOut();
    }
    else {
        btn.removeCls(pressedCls);
        this.fanIn();
    }
},

fanOut:  function() {
    this.getComponent(0).items.each(this.fanOutItem, this);
},

fanIn:  function() {
    this.getComponent(0).items.each(this.fanInItem, this);
},

//@private
fanOutItem: function(item, index, len) {
    var angle, rad, sin, cos, x, y, style, difCenter,
        arc     = 90,
        distance= 150;
    
    //ignore main button
    if (index === 0) {
        return;
    }
    index--;
    len--;
    
    //calculate angle using items count
    if (len === 1) {
        angle = 0;
    }
    else {
        angle = (arc/(len-1)) * index;
    }
    
    //transform angle to rad
    rad = angle * Math.PI/180;
    
    //calculate cos and sin
    cos = Math.cos(rad);
    sin = Math.sin(rad);
    
    //find x,y using distance
    x = Math.ceil(distance * cos);
    y = Math.ceil(distance * sin * -1);
    
    style = {
        '-webkit-transition-delay': (30 * index) + 'ms',
        '-webkit-transform': 'translate3d('+x+'px, '+y+'px, 0)'
    };
    
    if (!item.rendered) {
        item.style = style;
    }
    else {
        item.element.applyStyles(style);
    }
},

//@private
fanInItem: function(item, index, len) {
    //ignore main button
    if (index === 0) {
        return;
    }
    
    var style = {
        '-webkit-transition-delay': (30 * index) + 'ms',
        '-webkit-transform': 'translate3d(0px, 0px, 0)'
    };
    
    if (!item.rendered) {
        item.style = style;
    }
    else {
        item.element.applyStyles(style);
    }
}

Theming

I’m just using a couple gradients and box-shadows. Since I don’t want to change the HTML structure of the component itself, I had to use CSS pseudo elements :before and :after.

The :before was used for the outer gray and white box-shadows. They are not borders, but 2 box-shadows. The :after was used for the pressed state, putting a black mask on top of the button.

Wrapping Up

Currently everything is very hard coded, and my next task is make this more extensible, allowing other developers to take this animation and plug to any other containers. Also allow customizations, like change the arch degree and items distance to origin.

Hey, if you found this interesting don’t forget to tweet and share it with others :) I’m always looking for new cool UIs to reproduce with HTML5.

I’ve covered how to use animations in Using CSS3 animations on Sencha Touch and Animate components in a view, but I didn’t cover the internals of the framework, nor how can you create a custom animation. So let’s take a look at it, step by step.

Let’s first clarify some of the concepts. Ext.Animator and Ext.Anim classes are different. While Ext.Animator provides full animations for components, Ext.Anim provides a much simpler approach for DOM elements. So don’t expect to slide a container out of the screen with Ext.Anim and have the hide event fire only when the animation is over. This is responsability of Ext.Animator. Animator for components, Anim for simple DOM animations.

Ext.Animator

As I said, Ext.Animator is responsible for components animations. It will pause events like hide, and resume when the components is totally hidden, and so on. It has 3 key packages: Runner, Animations and Layout.

Runner

If you have an animation class, you need a runner class to execute it. That’s why we have the base class Ext.fx.runner.Css, that is extended between Ext.fx.runner.CssAnimation and Ext.fx.runner.CssTransition. Currently only CssTransition is in use, while CssAnimation class is still under development. The class responsible for exposing these runners is Ext.fx.Runner:

Ext.define('Ext.fx.Runner', {
    requires: [
        'Ext.fx.runner.CssTransition'
//        'Ext.fx.runner.CssAnimation'
    ],

    constructor: function() {
        return new Ext.fx.runner.CssTransition();
    }
});

You can see that Ext.fx.Runner is pretty simple, and currently only returns an instance of Ext.fx.Runner.CssAnimation.

Going even deeper, if you look the source code of Ext-more.js you’ll notice something like this:

animator: {
	xclass: 'Ext.fx.Runner'
},

//and

if (data.animator) {
	Ext.Animator = data.animator;
}

It means that when the framework starts, it will create an instance of Ext.fx.Runner and hold it with the reference Ext.Animator. This is what the frameworks uses for running its animations, Ext.Animator.run().

This is the first piece of Touch Fx package, the runner. Let’s move to Animation classes.

Animation

Ok, we have a class that runs animations, now we need classes that define those animations. It all starts with the abstract class Ext.fx.animation.Abstract, and its extensions Ext.fx.animation.* : Cube, Fade, Flip, Pop, Slide, Wipe.

These classes have the simple task of define the 2 states of a animator: from and to. Take a look on this snippet for Ext.fx.animation.Pop

getData: function() {
    var to = this.getTo(),
        from = this.getFrom(),
        out = this.getOut();

    if (out) {
        from.set('opacity', 1);
        from.setTransform({
            scale: 1
        });

        to.set('opacity', 0);
        to.setTransform({
            scale: 0
        });
    }
    else {
        from.set('opacity', 0);
        from.setTransform({
            scale: 0
        });

        to.set('opacity', 1);
        to.setTransform({
            scale: 1
        });
    }

    return this.callParent(arguments);
}

If the animation is “out”, which means the popOut animation, the opacity and scale will go from 1 to 0, and the inverse if the animation is a popIn, going visible on the screen.

You can look other classes like Fade, Scale and so on, and verify that they are pretty simple. This is the key for creating our custom “Slide-Fade” animation.

Ext.define('Ext.fx.animation.ScaleFade', {
    extend: 'Ext.fx.animation.Abstract',
    alternateClassName: 'Ext.fx.animation.ScaleFadeIn',
    alias: ['animation.scalefade', 'animation.scaleFadeIn'],

    config: {
        out: false,
        before: {
            display: null,
            opacity: 0
        },
        after: {
            opacity: null
        },
        reverse: null
    },

    updateOut: function(newOut) {
        var to   = this.getTo(),
            from = this.getFrom();

        if (newOut) {
            from.set('opacity', 1);
            from.setTransform({
                scale: 1,
                translateY: 0
            });
            
            to.set('opacity', 0);
            to.setTransform({
                scale: 1.2,
                translateY: 100
            });
        } 
        else {
            from.set('opacity', 0);
            from.setTransform({
                scale: 1.2,
                translateY: 100
            });
            
            to.set('opacity', 1);
            to.setTransform({
                scale: 1,
                translateY: 0
            });
        }
    }
});

Ok, we have a runner and an animation. We are already able to show a component with animation doing something like this:

panel.show('scaleFadeIn');

Let’s go even further with the next step, animated layouts.

Layout

What if we need our custom animation embedded in a card layout, so cards go out with scaleFadeOut and in with scaleFadeIn? We need to create a layout animation class.

Currently the card layout is the only who actually makes use of animations. The basic idea is to have a class Ext.fx.layout.card.Abstract that listens for the activeitemchange listeners, and once a card changes, the old card is hidden with an out-animation and the new card is shown with an in-animation.

Each layout animation class (Cover, Cube, Fade, Flip, Pop, Reveal…) basically defines the inAnimation and outAnimation, like the class Ext.fx.layout.card.Slide below:

Ext.define('Ext.fx.layout.card.Slide', {
    extend: 'Ext.fx.layout.card.Style',

    alias: 'fx.layout.card.slide',

    config: {
        inAnimation: {
            type: 'slide',
            easing: 'ease-out'
        },
        outAnimation: {
            type: 'slide',
            easing: 'ease-out',
            out: true
        }
    },

    updateReverse: function(reverse) {
        this.getInAnimation().setReverse(reverse);
        this.getOutAnimation().setReverse(reverse);
    }
});

So in order to have our custom scale-fade animation being used as a card layout animation, we need to define a new class:

Ext.define('Ext.fx.layout.card.ScaleFade', {
    extend: 'Ext.fx.layout.card.Style',
    alias: 'fx.layout.card.scalefade',

    config: {
        reverse: null,
        
        inAnimation: {
            type: 'scalefade'
        },
        outAnimation: {
            type: 'scalefadeout'
        }
    }
});

Pretty simple isn’t it? With that we cover the last piece, and we are able to create something like the code below. A container with a card layout using our custom animation for transitions.

{
    xtype: 'container',
    layout: {
        type: 'card',
        animation: 'scalefade'
    },
    items: [{
        html: 'Card 1'
    },{
        html: 'Card 2'
    },{
        html: 'Card 3'
    }]
}

Grab the code!

This wraps up everything about how CSS3 animations works in Sencha Touch. You’re now able to create the coolest animations and tie everything up with Touch components, taking full advantage of the framework.

The topic is a little bit complex, so let me know if you have comments and doubts about it!

Source code available in Sencha Examples Github: animations-advanced-custom

Live example:
*Touch compatibility webkit only

What is overnesting?

I’ve picked some quotes from our Sencha Forum users trying to verbalize what it is:

Overnesting is using an additional container that doesn’t actually do anything besides containing another component.

It adds no extra functionality, it’s a useless container…

Overnesting refers to nesting without reason.

Again, useless container…

Overnesting means have redundant panels in the hierarchy.

Good, has to do with the hierarchy…

Maybe it’s still not very clear…let’s see some code:

//example 1: TabPanel and GridPanel case
{
	xtype: 'tabpanel',
	items: [{
		title: 'Users Grid',
		layout: 'fit',
		border: false,
		items: {
			xtype: 'grid',
			store: 'Users',
			columns: [{
				header: 'Name',
				dataIndex: 'name'
			}]
		}
	}]
}

//example 2: TreePanel on Border Layout case
{
    xtype: 'panel',
    layout: 'border',
    items: [{
        xtype: 'panel',
        title: 'Navigation',
        layout: 'fit',
        region: 'west',
        width: 200,
        border: false,
        items: {
            xtype: 'treepanel'
            store: 'NavigationStore'
        }
    }, {
        xtype: 'panel',
        layout: 'fit',
        region: 'center',
        items: {
            xtype: 'tabpanel',
            border: false,
            items: [{
                title: 'Home Tab',
                html: 'Welcome!'
            }]
        }
    }]
}

//example 3: FormPanel case
Ext.define('App.view.UserForm',{
    extend: 'Ext.Panel',
    layout: 'fit',
    items: {
        xtype: 'form',
        items: [{
            fieldLabel: 'Name',
            name: 'name'
        },{
            fieldLabel: 'Email',
            name: 'email'
        }]
    }
});

All of the snippets above have overnesting issue. They all have one panel that shouldn’t be there. Since GridPanel, TreePanel and FormPanel are all Panels, there’s no need to wrap them in another Panel. The wrapper panel is useless.

First case we have a TabPanel with only one card. This card has the title “Users Grid”, and a grid inside of it fitting 100% of its space, thanks to fit layout. Since GridPanel is a Panel, it also understands the title config option. So we have a useless Panel here! This would be the right version:

//example 1 fixed
{
	xtype: 'tabpanel',
	items: [{
		xtype: 'grid',
		store: 'Users',
		title: 'Users Grid',
		columns: [{
			header: 'Name',
			dataIndex: 'name'
		}]
	}]
}

Second case we have a border layout Panel with 2 regions. The west region has a Panel entitled ‘Navigation’, with a TreePanel inside. This is our first occurrence of overnesting. The second is having a Panel on the center region, with a TabPanel inside of it. Since TabPanel is a Panel, we can directly put it as the center region.

//example 2 fixed
{
    xtype: 'panel',
    layout: 'border',
    items: [{
        xtype: 'treepanel',
        title: 'Navigation',
        store: 'NavigationStore',
        region: 'west',
        width: 200,
        border: false,
    }, {
        xtype: 'tabpanel',
        region: 'center',
        items: [{
            title: 'Home Tab',
            html: 'Welcome!'
        }]
    }]
}

The last case we defined a class that extends Panel, and inside of it we create a single FormPanel as child item. Simply subclassing FormPanel would solve the problem.

//example 3 fixed
Ext.define('App.view.UserForm',{
    extend: 'Ext.form.Panel',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        fieldLabel: 'Email',
        name: 'email'
    }]
});

And overnesting is not all about Panels! You can also overnest Containers inside Containers, or even Containers and Panels, like the examples below were we have useless Containers wrapping Fieldset and GridPanel.

//example 1 Container+Container
{
    xtype: 'form',
    items: [{
        fieldLabel: 'Name',
        name: 'name'
    },{
        xtype: 'container',
        items: {
            xtype: 'fieldset',
            items: [
                //...
            ]
        }
    }]
}

//example 2 Container+GridPanel
{
    xtype: 'container',
    region: 'center',
    layout: 'fit'
    items: {
        xtype: 'grid',
        //...
    }
}

What’s the problem with overnesting?

• Extra panels means extra objects in memory and extra HTML markup
• Code has more levels, and it’s more complex and less maintainable
• With a bunch of nested panels you’re dangerously close to have layout problems. Forget to add layout to one of them, and then try to hunt your issue in this mess…not good!

How to detect and fix?

If you find yourself creating too many objects with layout: ‘fit’ and border: false, this could be one signal for overnesting. The basic rule is, watch out for Containers inside Containers. And this might be hard to see, specially because xtype: ‘panel’ is default on many objects definitions so we omit it. In the example below there’s an extra panel with title: ‘Category Form’, a form as child, and no xtype: ‘panel’ declaration. We could have promoted the form one level up and move the title config to it, saving one extra useless panel.

var tabPanel = Ext.create('Ext.TabPanel',{
    items: [{
        title: 'Category Form'
        items: {
            xtype: 'form',
            items: [
                //...
            ]
        }
    },{
        title: 'Categories'
        xtype: 'treepanel',
        store: 'CategoriesStores'
    }]
});

Also watch out for classes that extend Panel, like Ext.menu.Menu! Did you know you can create a Menu, set floating to false, and put it inside a border layout as the west region for navigation? No need to create a wrapping panel for it.

Ext.create('Ext.Window',{
    layout: 'border',
    width: 500,
    height: 300,
    autoShow: true,
    items: [{
        xtype: 'menu',
        floating: false,
        region: 'west',
        width: 300,
        items: [{
            text: 'Test'
        }]
    },{
        region: 'center'
    }]
});

So, we’ve seen today what is overnesting, how to detect, how to fix, and why it’s bad. Now we just need to do some detailed code reviews! :)

Obviously there are simple page animations, such as with a card layout, but I’m looking for the right approach to animate an object like a button – for example to get it to fly in from the side after a delay, after the view is loaded.

Here’s hoping someone will take pity on me, and spell it out!

Allister

Source code available at github SenchaExamples/touch/animate-button, and live example at this link.

There’s basically 3 ways you can embed animations in your views:

1. show(animationCfg) method: pass an individual config with show/hide methods
2. showAnimation & hideAnimation configs
3. animations with card layout

And there’s another way to use animations, but it’s intended for individual DOM elements, and not components. It’s the Ext.Anim class.

Check below the code and a working example on how to use each one of these 3 animations + Ext.Anim:

Original iOS Interface

Wouldn’t be cool if we selected some native mobile UI and try to recreate them using only HTML5, CSS3 and JavaScript? So, today is Facebook’s extraordinary IPO and I took their clean & classy login screen and recreated it for the web! Here it is the final result, some code and also comments.

Disclaimer: I created this app with the iPhone Facebook App in mind. I only tested the app on iPhone. I already noticed that the radial gradient background looks pixelated on Chrome, and I also suspect that due to other gradients, alpha colors and etc this app will make some Android and BlackBerry devices scream. Please don’t blame me :)

This view above is an iframe, if you open this blog post with Chrome or Safari you’ll be able to see it running! You can also point your mobile device to the following URL:

• Live Example: http://brunotavares.github.com/SenchaExamples/touch/native-to-web-facebook-login/
• Source code: http://github.com/brunotavares/SenchaExamples/

View

The view it’s pretty simple. We have the logo, 2 fields and 3 buttons. The only thing that might look different is the component with CSS class ‘shadow’. Since I wasn’t able to create a box-shadow for the fields without creating conflicts with their borders, I use this component as a layer on top of the fields with the inner shadow.

Theming

About the theming, there’s a lot of CSS3 stuff inside. I’m using Sass with Compass framework, so it alleviates some of the hurdles of plain CSS. Logo is just a component with fixed size and a background image. I’m also providing the retina version of it using the medias queries.

As I wrote previously, the shadow component is a hack solution for making the inner box-shadow, without creating conflicts with the fields’ borders. The email field has a gray border on the bottom, and the password a white border on the top. It creates kind of an edge between fields. Something different about the fields is that you can style the text placeholder using ::-webkit-input-placeholder.

The buttons received new gradients, and also additional box-shadows. They also provide the same pressing state as the original interface.

Wrapping up

And that’s pretty much it. This is a great exercise, to see what we can accomplish using only web. Specially with Sencha Touch, since we hear a lot of questions asking how easy/hard it is to customize Touch components.

I wanted to use only CSS3, but for production it would be better to use a solid image for the radial background for non-iOS devices, and other sutil improvements. From my experience it performs way better.

Touchr App

The best way for developers to learn new technology is definitely coding. For learning the new changes introduced with Touch 2, I created this little app that I called Touchr. It features some common components and basic filtering interaction, but also a customized proxy with YQL integration to consume Flickr. Check the list:

• MVC architecture
• Customized JSONP proxy that consumes YQL queries
• Use of sencha.io service to resize images, optimizing for mobile screens.
• Use of controller listeners to filter data stores
• Use of TabPanel, DataView, Buttons, Toolbar, TextField
• Use of custom theme to define new color, new icons and css optimizations

In this post I’ll share some details so you can also exercise some Touch skills as well!

Grab it!

The code is available on github.com/brunotavares/Touchr. I’m always trying to improve it and keep it up to date. The last major one was for Touch 2.1, using the new SDK with the microloader.
*Touch compatibility webkit only

Starting the project

$ sencha app create TR ~/Code/Touchr

Really simple task with the new Touch SDK. This will create all project scaffold, already activating the dynamic loading and the microloader. Check “Quick Touch 2 scaffolding example” if you have any questions.

Views

The root component for this app will be a TabPanel, and from there we’ll create 3 different lists: Feature Photos, Search Photos, and Photos from User. I decided to separate those in different views, and reference them on the tabpanel using xtype.

All the 3 lists will look similar. I picked the User list to expand the code. Please take a look on other 2 lists views from the repository.

Notice that it’s a list, but it extends Ext.dataview.DataView, and not Ext.dataview.List. Since I don’t need features like row selection, grouping, and index bar, the dataview is a lighter and better option. The same line of thought is valid when choosing simple Containers other than full Panels. Always analyse carefully when picking up components.

Also notice that for the itemTpl config I’m using the src.sencha.io service. It’s a great utility that delivers images according to the device screen size. It makes your app faster, since you don’t need to serve 1000×600 pictures for a 480×320 device.

Models and DataStores

The list above will only display data if it’s tied to a datastore. In this case is the UserPhotos store. And this store is tied to the Photo model, which defines its fields.

Taking a close look at this store, it’s clear that it’s linked to TR.model.Photo. It’s also using remoteFilter, which allows the custom Flickr proxy to pass parameters to Yahoo YQL API (more to come). The proxy is the one responsible for fetching data, and it has a JSON reader attached for parsing.

This store features a not so conventional rootProperty. It’s a nested one, since the YQL API response is formatted in this way.

The Photo model is pretty straightforward. The only different thing here is the photo_url field, which is not an information delivered by the server-side. It’s a custom local property that I defined, so I could have a better model design. Since mobile apps often deal with third part APIs, and those are not always properly designed for our app, we have the chance to normalize it.

Controllers

At this point we already have views displaying data, so now we’re adding some interaction. Let’s take a look on the search tab, which has a searchfield on the top that will filter our list. We need to create a controller that will look into the component tree for our searchfield, associate a listener to it, and then filter the list’s store.

The way controllers associate listeners to components is by the control config. This object receives key:values pairs, where the key is a string representing a ComponentQuery String, and the value is another object, containing the name of the event as key, and the value as a function string reference.

To filter the list I don’t actually go trough its methods trying to find a way to accomplish the task. All the data is defined on the datastores and models. They serve as a data layer, and every data operations as adding, removing, updating or filtering itens is done by the datastore.

Other parts…

I’m still missing the custom Flickr Proxy, designed to consume YQL Service via JSONP, and the theming structure. I’ll let those to a separate article.

On this post we saw how to start the project, and go trough the MVC pattern, defining views, then the data layer with models and stores, and last adding interaction via controllers.

I’m looking forward to do more tutorials like these. If you like it, don’t forget to share and support our growth!