Era da un bel pò che non usavo jQuery Mobile (che avevo sostituito con Sencha Touch) e sono rimasto sorpeso delle novità che trovato l'altra settimana.

Sia in termini di grafica, che di componenti migliorati / nuovi.

Uno di questi è il Panel, un componente che è nascosto di default e che si attiva al click su un bottone / link.

Oggi vediamo un semplice esempio; prima di tutto includiamo ciò che ci serve:

        <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" />
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Io ho preso tutto direttamente dal web.

Sencha TabPanel permette di impostare le icone alle varie voci che si impostano.

Di default ce ne stanno parecchie da usare, e le trovate in /resources/themes/images/default/pictos/.

Solo alcune però sono già inserite nel CSS (fatto con SASS se non sbaglio) e quindi può che ne impostiate alcune senza poi visualizzarla.

Ad esempio ho messo questa in un FormPanel ma non compariva:

iconCls: 'chat'

Per usare anche le altre icone bisogna fare una modifica al CSS; io vi consiglio di creare un CSS a parte e poi richiamarlo nell'index.

Il componente TabPanel di Sencha Touch è fornito di vari eventi.

Uno di questi è activeitemchange, attivato quando si cambia tab.

Usando questo evento possiamo identificare un tab preciso e attivare qualcosa.

Anche nelle applicazioni mobile (per non dire sopprattutto) è diventato obbligatorio integrare una servizio di geolocalizzazione / mappa.

Ad oggi quello più usato rimane Google Maps, e noi oggi vedremo come integrarlo in una app creata con Sencha Touch 2.

La prima cosa da fare è richiamare il servizio; quindi aprite il file index.html (quello dove richiamate anche i CSS e Sencha) e mettete questo:

<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

In sostanza richiamiamo le librerie di Google Maps, e questo richiede una connessione a internet.

Proseguiamo con lo studio di Sencha touch con il componente Carousel.

Questo componente permette di mettere in un componente padre un tot di elementi da scrorrere con il dito.

Una spece di slider insomma.

Noi useremo questo componente per creare una galleria di immagini.

Il primo pezzo consiste nello scandagliare la nostra directory e salvare tutto in un array:

       // IMAGES
        var imgsAdv = [];
        for (var j = 1; j < 19; j++) {
            imgsAdv.push({
                xtype: 'image',
                src: 'directory/' + j + '.png'
            });
        }

Come vedete nell'array salviamo diversi componenti di tipo image.