jQuery Mobile Panel

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.

Impostare le icone in Sencha TabPanel

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.

Sencha Touch evento activeitemchange

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.

Google Maps con Sencha Touch

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.

Sencha touch image Carousel

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.

Validazione form in Sencha touch

In un precedente articolo abbiamo visto come creare un form con Sencha touch.

Oggi vediamo come mettere in piedi un basilare sistema di validazione.

Il form ha tre campi:

• nome
• email
• messaggio

Tutti e tre sono obbligatori e l'email deve essere anche formalmente corretta.

Questo il nostro form:

var formContact = new Ext.form.FormPanel({
            title: 'My Form',
            items: [{
                xtype: 'fieldset',
                itemId: 'formcontact',
                items: [{
                    xtype: 'textfield',
                    name : 'nome',
                    label: 'Nome',
                    itemId: 'nome'
                },
                {
                    xtype: 'textfield',
                    name : 'email',
                    label: 'Your email',
                    itemId: 'email'
                },
                {
                    xtype: 'textareafield',
                    name : 'message',
                    label: 'Message',
                    itemId: 'message'
                },
                {
                    xtype: 'toolbar',
                    docked: 'bottom',
                    layout: {
                        pack: 'center'
                    },
                    items: [{
                        xtype: 'button',
                        text: 'Send',
                        handler: function() {

                        }
                    },
                    {
                        xtype: 'button',
                        text: 'Reset',
                        handler: function() {
                            formContact.reset();
                        }
                    }]
                }]
            }]
        });

Importante è il parametro itemId, che ci serverà per riconoscerlo dentro la pagina e prenderne il valore.