Introduzione a Sencha touch

Mattepuffo's logo
Introduzione a Sencha touch

Introduzione a Sencha touch

Programmazione, Javascript - AJAX

Sencha touche è uno die vari framework disponibili per la creazione app mobile (compatibile solo con browser basati su Webkit come Safari e Chrome).

A mio avviso è anche una delle migliori, ma ha una curva di apprendimento abbastanza ripida in quanto non è basata su HTML, ma è Javascript-driven.

Questo vuol dire che tutta l'applicazione sarà scritta dentro un file js.

Iniziamo con lo scaricare il tutto da qua; io ho scaricato la versione Open Source.

Dopo di che creiamo una cartella js e mettiamo il tutto la dentro.

Dentro la cartella js creiamo anche un file app.js; questo sarà il file dove andremo a scrivere tutta l'applicazione.

Nella root creiamo un semplice file index.html con questa roba dentro:

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <link rel="stylesheet" href="js/touch/resources/css/sencha-touch.css" type="text/css" />
        <script type="text/javascript" src="js/touch/sencha-touch-all-debug.js"></script>
        <script type="text/javascript" src="js/app.js"></script>
    </head>
    <body>
    </body>
</html>

Come vedete questo file si limita a caricare il foglio di stile predefinito, la libreria sencha e il nostro file app.js.

Dentro al body non c'è nulla!

 

A questo punto non dobbiamo far altro che modificare il file app.js mettendoci dentro quello che ci serve.

Le opzioni sono infinite e possiamo vedere tutto ciò che è disponibile in questa pagina (da aprire solo con un browser basato su Webkit).

Un altro "problema" di Sencha è che per ogni cosa ci sono diversi modi di agire.

Anche per lanciare l'applicazione stessa.

Vediamo come creare una prima pagina con un TabPanel:

Ext.setup({
    name: 'Mia app',
    icon: 'icon.png',
    tabletStartupScreen: 'tablet_startup.png',
    phoneStartupScreen: 'phone_startup.png',
    glossOnIcon: false,
    onReady: function() {
        new Ext.TabPanel({
            fullscreen: true,
            tabBarPosition: 'bottom',
            items: [
            {
                title: 'Home',
                iconCls: 'home',
                html: 'Questa è la home page'
            },{
                title: 'Contatti',
                iconCls: 'user',
                html: 'Questa è la pagine dei contatti'
            }
            ]
        });
    }
});

Si parte con Ext.setup e subito dopo ci sono varie opziini, di cui la maggior parte sono sempre uguali (a parte il nome ovviamente).

Dopo ci sta la funzione onReady che si occupa di visualizzare il tutto.

Inizializiamo un nuovo TabPanel in modalità fullscreen e con la tabposition messa alla fine della pagina; provate a levare quella riga per vedere le differenze.

Poi mettiamo i nostri item; ogni graffa corrisponde ad un item, che nel caso corrisponde a un tab.

Sencha ha già a disposizione parecchie icone; potete cercarle dentro alla cartella che avete scaricato (non mi ricordo bene dove però....).

Il primo elemento è la home ed abbiamo impostato tre opzioni:

  • il titolo
  • l'icona
  • una parte html da visualizzare

Le icone dei tab verranno visualizzate solo nel caso in cui la tab sia su bottom.

Come vi ho già detto Sencha mette a disposizione tantissimi strumenti.

Però spesso si parte dai TabPanel, o comunque vengono molto usati.

Quindi anche io ho iniziato da qua.

Ma siamo solo all'inizio del tutto.

Prendete un pò di confidenza e la prossima volta vedremo come complicarci la vita!

Condividi

Commentami!