sencha

Mattepuffo's logo
Impostare le icone in Sencha TabPanel

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.

Mattepuffo's logo
Google Maps con Sencha Touch

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.

Mattepuffo's logo
Sencha touch image Carousel

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.

Mattepuffo's logo
Validazione form in Sencha touch

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.

Mattepuffo's logo
Sencha Touch List da MySQL

Sencha Touch List da MySQL

Seguendo la segnalazione di Ivan (leggi i commenti) ho cambiato i Model in modo da non usare metodi deprecati.

Un ringraziamento a Ivan per la segnalazione.

 

Facciamo un passo avanti con Sencha Touch.

Oggi vediamo il componente List.

Innanzitutto vi ricordo il link di riferimento: clicca qua.

Se cliccate su List vi verranno presentati già degli esempi di partenza.

Quello che faremo noi è caricare i dati prendendoli da MySQL.

La prima cosa da fare è preparare un file in un linguaggio lato server per interrogare il db.

Io lo faccio in PHP:

<?php

$host = "";
$user = "";
$pass = "";
$db = "";
$conn = mysqli_connect($host, $user, $pass, $db) or die(mysqli_connect_error());
if (mysqli_connect_errno()) {
    echo "Connessione fallita: " . die(mysqli_connect_error());
}
$result = mysqli_query($conn, "SELECT * FROM j25_content ORDER BY created DESC LIMIT 20");
$rows = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $rows[] = array(
        'id' => $row['id'],
        'title' => $row['title'],
    );
}
echo json_encode($rows);
mysqli_close($conn);

L'output è in formato JSON e dalla tabella tiro fuori due campi.

Poi preperiamone un altro per estrarre un recordo singolo; dopo capirete il perchè:

<?php

$host = "";
$user = "";
$pass = "";
$db = "";
$conn = mysqli_connect($host, $user, $pass, $db) or die(mysqli_connect_error());
$cmd = "SELECT * FROM j25_content WHERE id = " . $_GET['id'];
if (mysqli_connect_errno()) {
    echo "Connessione fallita: " . die(mysqli_connect_error());
}
$result = mysqli_query($conn, $cmd);
$rows = array();
while ($row = mysqli_fetch_array($result, MYSQLI_ASSOC)) {
    $rows[] = array(
        'title' => $row['title'],
        'fulltext' => utf8_encode($row['fulltext'])
    );
}
echo json_encode($rows);
mysqli_close($conn);

La List la metteremo in una View in modo che quando cliccheremo su una riga andiamo a vederne il dettaglio.

Mattepuffo's logo
Introduzione a Sencha touch

Introduzione a Sencha touch

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!