Page Navigasi di Sencha Touch

Pada kesempatan ini saya ingin membahas sesuatu yang sangat dasar dan ini biasanya sangat membingungkan bagi yang baru belajar sencha touch, terutama yang punya pengalaman belajar framework lain seperti jQuery Mobile.

Tulisan ini merupakan urutan kedua dari serial belajar sencha touch sebelumnya.

Bagaimanakah struktur page di sencha touch dan bagaimana cara navigasi antar page di sencha touch?

touch sumber

Sencha touch “sedikit” berbeda, Anda tidak perlu membuat banyak page dan kemudian membuat navigasi antar page. Di Sencha touch anda bisa membuat sebuah panel yang full screen dan mengupdate isinya secara dinamis dengan javascript.

Jadi navigasi dalam aplikasi yang dibuat oleh sencha touch dilakukan antar panel full screen. Dengan desain seperti ini saya melihat, aplikasi akan berjalan lebih smooth karena loading resource cukup sekali.

(catatan di jQuery mobile, anda bisa membuat multiple page dalam satu file juga sebenarnya, hanya memang teknik generation nya sedikit beda, di jQuery mobile anda membuatnya dalam format HTML, di sencha touch anda mengenerate HTML tersebut di javascript).

Berikut ini adalah contoh cuplikan sebuah kode javascript di kontroller sebuah sencha touch aplication.

app.controllers.contacts = new Ext.Controller({
    index: function(options) {
        app.views.viewport.setActiveItem(
            app.views.contactsList, options.animation
        );
    },
    show: function(options) {
        var id = parseInt(options.id),
            contact = app.stores.contacts.getById(id);
        if (contact) {
            app.views.contactDetail.updateWithRecord(contact);
            app.views.viewport.setActiveItem(
                app.views.contactDetail, options.animation
            );
        }
    },
    edit: function(options) {
        var id = parseInt(options.id),
            contact = app.stores.contacts.getById(id);
        if (contact) {
            app.views.contactForm.updateWithRecord(contact);
            app.views.viewport.setActiveItem(
                app.views.contactForm, options.animation
            );
        }
    }
});
file : contact.js dalam contoh pembelajaran sencha touch

Dari kode di atas anda bisa melihat, navigasi dilakukan dengan menggunakan kode :

app.views.viewport.setActiveItem(
                app.views.contactDetail, options.animation
            );

dimana app.views.contactDetail adalah sebuah file view yang juga ditulis dalam javascript.

Berikut ini adalah isi file ContactDetail.js

app.views.ContactDetail = Ext.extend(Ext.Panel, {
    dockedItems: [{
        xtype: 'toolbar',
        title: 'View contact',
        items: [
            {
                text: 'Back',
                ui: 'back',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: app.controllers.contacts,
                            action: 'index',
                            animation: {type:'slide', direction:'right'}
                        });
                    }
                }
            },
            {xtype:'spacer'},
            {
                id: 'edit',
                text: 'Edit',
                ui: 'action',
                listeners: {
                    'tap': function () {
                        Ext.dispatch({
                            controller: app.controllers.contacts,
                            action: 'edit',
                            id: this.record.getId()
                        });
                    }
                }
            }
        ]
    }],
    styleHtmlContent:true,
    scroll: 'vertical',
    items: [
        {tpl:[
            '<h4>Phone</h4>',
            '<tpl for="phoneNumbers">',
                '<div class="field"><span class="label">{type}: </span><a href="tel:{value}">{value}</a></div>',
            '</tpl>'
        ]},
        {tpl:[
            '<h4>Email</h4>',
            '<tpl for="emails">',
                '<div class="field"><span class="label">{type}: </span><a href="mailto:{value}">{value}</a></div>',
            '</tpl>'
        ]},
        {tpl:[
            '<h4>Search</h4>',
            '<div class="field"><span class="label">Google: </span><a href="http://www.google.com/m/search?q=%22{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',
            '<div class="field"><span class="label">Bing: </span><a href="http://m.bing.com/search?q=%22{givenName}+{familyName}%22">\'{givenName} {familyName}\'</a></div>',
        ]}
    ],
    updateWithRecord: function(record) {
        Ext.each(this.items.items, function(item) {
            item.update(record.data);
        });
        var toolbar = this.getDockedItems()[0];
        toolbar.setTitle(record.get('givenName') + ' ' + record.get('familyName'));
        toolbar.getComponent('edit').record = record;
    }
});

ContactDetail.js

Sencha Touch MVC

Hal menarik lainnya dari sencha touch adalah bahwa anda bisa memisahkan file javascript yang berfungsi sebagai controller, model dan view. (Konsep MVC)

Berikut ini screen shot struktur folder dari sebuah aplikasi MVC sencha touch :

Struktur Folder Aplikasi Sencha Touch (MVC)

Kesan pertama saya belajar sencha touch ini adalah bahwa kita benar benar sedang membuat sebuah software dibandingkan membuat sebuah web.

Dan ini tentu sangat menarik ….

Sencha Touch Contoh Aplikasi Sederhana

Saya akan meneruskan serial belajar sencha touch ini pada posting posting berikutnya, dan akan saya coba hadrikan contoh sangat sangat sederhana aplikasi MVC dari sencha touch ini …

Salam

YY

Post To Facebook

Related Video

Pengunjung Datang Ke Blog Ini Mencari Info Tentang :

• belajar sencha touch (26)
• membuat aplikasi android secara dinamis (26)
• buku jquery mobile (12)
• membuat aplikasi sencha touch 2 (10)
• jquery mobile vs sencha touch (1)
• pengertian sencha (1)
• tutorial membuat aplikasi sederhana android di sencha (1)