Se siete interessati ai prodotti Sencha, questo è il momento di farsi sentire! Non mi resta altro che aspettare i vostri commenti prima di decidere se prendere tale impegno, dipende tutto da voi quindi, non siate timidi!

In attesa dei partecipanti…

A seguire, è stato mio compito quello di fornire maggiori informazioni su Sencha Touch e l’app builder Sencha Architect effettuando una dettagliata panoramica sulle sue funzionalità e User Interface mostrandone le semplice e intuitiva interfaccia Drag & Drop che permette, con un po di esperienza e familiarità dei frameworks, di poter creare in poco tempo, ricche applicazioni desktop e mobile oriented.
Infine, si è entrato nel vivo della presentazione, guidando i partecipanti nella creazione di una semplice applicazione mobile sfruttando tecnologie e tools appena menzionati e fornendo consigli di come poterla strutturare al meglio sfruttando il pattern MVC.

Presentazione Sencha Touch 2

Dopo aver inoltre mostrato come integrare le REST API sviluppate, sono state mostrare le rimanenti features previste dall’applicazione che, purtroppo, per via del tempo a disposizione, non mi è stato possibile spiegarne la realizzazione, ma che sono state comunque mostrate ai partecipanti aprendo l’applicazione completa, sviluppata qualche giorno prima della presentazione.
Infine, dopo aver fornito alcuni spunti e esempi pratici su come modificare e migliorare il tema dell’applicazione stessa utilizzando SASS e COMPASS, il workshop si è chiuso con una sessione di trenta minuti circa di domande e risposte dove, anche grazie a Daniel Gallo (Sales Engineer Sencha) sono state fornite tutte le risposte alle numerose domande e dubbi sollevati dai partecipati, i quali, proprio grazie a quest’ultimi, si sono mostrati molto interessati ai prodotti Sencha.

In conclusione, posso decisamente affermare che l’obbiettivo del workshop è stato centrato in pieno, essendo riusciti positivamente a “stuzzicare l’appetito” delle persone in sala fornendogli gli input fondamentali che gli consentiranno di muovere i loro primi passi in Sencha Architect e a sviluppare così la loro prima applicazione mobile e spingendoli di conseguenza a valutare Sencha Touch come una più che valida alternativa allo sviluppo di applicazioni native.

La speranza ora, è quella di poter avere maggiori eventi e training ufficiali Sencha anche in Italia, in modo tale da dare la possibilità anche a molti altri sviluppatori, di toccare con mano queste tecnologie, avvicinandosi così al mondo Sencha e, soprattutto, di non lasciare tagliata fuori, come purtroppo accade troppo spesso, la nostra bene amata patria, da tutte queste fantastiche novità che il web ci mette oggi a disposizione e che, mi purtroppo mi duole dirlo, il resto del mondo ha già scoperto e sta già utilizzando ormai da diversi anni.

Siamo finalmente giunti alla conclusione di questo Tutorial. Spero che la lettura sia stata piacevole, di facile comprensione, che abbiate apprezzato l’argomento trattato e, soprattutto, che le basi fornite siano state sufficienti per scatenare la vostra creatività ed invogliarvi allo sviluppo di un vostro componente personalizzato. Se così fosse, mi raccomando, non mancate di mandarmi il link ad un vostro articolo, ad un’applicazione o ad un’anteprima del vostro componente. Tenete sempre bene in mente che Sencha vanta di una numerosissima community, quindi non dimenticate di condividere il vostro lavoro, laddove fosse possibile, e iniziare quindi a far conoscere il vostro nome oltre che le vostre creazioni.
Infine, se avete apprezzato l’articolo, o se avete qualsiasi tipo di domanda, sentitevi liberi di commentare questo post e vi risponderò non appena possibile. Sono sempre graditi feedback positivi e negativi purchè costruttivi, quindi aspetterò con ansia i vostri commenti .
Bene, a questo punto non mi resta altro che salutarvi comunicando due link molto importanti, ciao ragazzi, al prossimo tutorial

Per concludere lo sviluppo del nostro componente, non ci resta che creare il file SASS che, una volta compilato insieme al resto del tema dell’applicazione, fornirà tutti gli stili necessari ai vari elementi HTML al fine di creare l’interfaccia utente che abbiamo creato.
Qualora non abbiate molte dimestichezza con SASS, vi consiglio di dare un’occhiata ai vari tutorials presenti sul sito ufficiale.
Per via del tempo a disposizione, in questo post non vi spiegherò per filo e per segno come creare un file .sass, dove posizionarlo e come compilarlo, ma mi limiterò a descrivere le varie regole CSS applicate a tutti gli elementi che compongono la UI. Non preoccupatevi comunque, probabilmente nei prossimi giorni scriverò un altro breve articolo che vi illustrerà nel dettaglio come creare una semplice applicazione che, utilizzando il componente Ext.tux.Audio appena creato all’interno di un DataView, vi permetterà di ricreare una lista di brani stile iTunes ed affronteremo anche questo discorso. Nel frattempo, potrete trovarne il codice sorgente di questa applicazione, all’interno del repository che verrà riportato al fondo di questo articolo.

8.1. Definizione del mixin

La prima cosa da fare quando sviluppate un componente è quella di definire immediatamente un “mixin” SASS ad esso associato. Un “mixin” infatti, vi permetterà di definire un blocco di regole CSS che potranno essere riutilizzate all’interno del tema della vostra applicazione, semplicemente andandolo ad includere all’interno di altri elementi oppure all’interno del file SASS del tema stesso.
Questa logica è la medesima adottata dal framework stesso, infatti, se provate a dare un’occhiata all’interno della cartella SASS contenuta all’interno dell’SDK, noterete che sono definiti “mixin” per ognuno dei componenti standard.
Esiste infatti un mixing per contenere tutti gli stili relativi al componente “Ext.Panel”, un altro per gli “Ext.Button”, e cosi via, quindi cerchiamo di adattarci e sforzarci a mantenere la stessa filosofia. In questo modo sarà molto più semplice non solo rivisitare il codice in caso vogliate apportare una modifica, ma l’applicazione risulterà essere anche molto più ordinata e leggibile anche da tutti gli altri membri della community, che, pur non avendo partecipato attivamente alla realizzazione del componente, sono sicuro vi saranno senz’altro grati per aver mantenuto lo standard .
Vediamo quindi come definire il “mixin”.

/**
 * Includes Ext.tux.AudioCover styles.
 *
 * @member Ext.tux.AudioCover
 */
@mixin sencha-tux-audiocover {

}

Dfficile? Non credo proprio .
Tutto quello che dovremo fare ora sarà quello di includere il nostro “mixin” all’interno del file .scss che definisce gli stili relativi al tema della nostra applicazione (ricordandosi di aver prima incluso tutti i file .scss necessari, altrimenti in fase di compilazione, COMPASS ci segnalerà giustamente un errore, riferendoci che il “mixin” richiesto non è stato trovato).
Quindi, una volta inclusi tutti i files necessari, andiamo ad importarlo tramite l’istruzione

@include sencha-tux-audiocover;

A questo punto compilando il tema dell’applicazione di fatto non sarà cambiato nulla all’interno del file CSS generato, ma capirete benissimo che questo è dovuto al fatto che non abbiamo ancora specificato nessuna regola al suo interno, quindi procediamo con la definizione di alcune variabili e, a seguire, gli stili relativi alla creazione del “cardEl”, al quale, non dimentichiamo, abbiamo impostato la classe “x-flip-card” durante la definizione del Template, e gli stili della faccia anteriore e posteriore.

8.2. Le Variabili

Essendo un componente piuttosto complesso dal punto di vista degli elementi che ne compongono la UI, abbiamo bisogno di un piccolo aiuto al fine di farli “quadrare” tutti impostandone correttamente dimensione e posizionamento. Proprio a questo proposito SASS ci viene incontro dandoci la possibilità di definire alcune variabili che ci semplificheranno notevolmente questo lavoro ed eviteranno inutili ridondanze all’interno del medesimo “mixin”. Come abbiamo visto in precedenza infatti, il posizionamento di tutti gli elementi circolari addetti alla costruzione della progress bar all’interno del componente, dovrà essere concentrico all’interno della faccia posteriore e dovranno essere tutti della medesima dimensione.
Capirete bene a questo punto che qualora, per esempio, decidessimo di modificare la dimensione del “cardEl”, dovremmo di conseguenza andare ad aggiornare manualmente la dimensione di tutti questi elementi, oltre che i rispettivi margini. Definendo delle variabili invece, qualora si presentasse questa necessità, modificando il valore di una sola variabile, tutti gli elementi verranno posizionati correttamente in fase di compilazione, poichè dimensione e posizionamento saranno valori calcolati dinamicamente sulla base della dimensione del container e non semplici valori statici. Procediamo quindi con la definizione di tutte le variabili di cui avremo bisogno per l’impostazione dei vari stili.

/**
 * Includes Ext.tux.AudioCover styles.
 *
 * @member Ext.tux.AudioCover
 */
@mixin sencha-tux-audiocover {

    $size: 50px;
    $margin: 5px;
    $button-size: ($size * 40) / 100;
    $button-icon-size: ($size * 15) / 100;

}

La spiegazione è molto semplice nonchè intuitiva: La variabile “$size” andrà a definire la dimensione del “coverEl” e, di conseguenza, la dimensione dei vari elementi circolari che compongono la “progressBar”, tenendo conto del “$margin” impostato. Se quindi la dimensione impostata è di 50px, tenendo in considerazione i 5px di margin, la dimensione di tali elementi sarà di 40px.
La variabile “$button-size” invece, ci fornisce la dimensione del pulsante di stop, che, come potete vedere, sarà esattamente pari al 40% della dimensione complessiva del “cardEl”, mentre la relativa icona calcolata all’interno della variabile “$button-icon-size” avrà una dimensione pari al 15%.
Vi sembra ragionevole? Bene, allora passiamo alla definizione degli stili del “cardEl” container e delle relative facce.

8.3. Il cardEl e le sue facce

Passiamo quindi alla definizione degli stili del “cardEl” e delle sue facce, quindi, sempre all’interno del “mixin”, subito al di sotto della dichiarazione delle variabili, andiamo ad aggiungere quanto segue:

.x-tux-audiocover {

    .x-flip-card {

        width: $size;
        height: $size;

        -webkit-transform-style: preserve-3d;
        -webkit-transition: -webkit-transform 1s;

        .x-face {

            position: absolute;
            width: 100%;
            height: 100%;
            -webkit-backface-visibility: hidden;

            &.x-front {
                background-size: 100% 100% !important;
                border: solid 1px #d4d4d4; 
            }

            &.x-back {

                @include display-box;
                @include box-pack(center);
                @include box-align(center);

                -webkit-transform: rotateY(180deg);
                -webkit-box-sizing: border-box;

            }

        }
    
    }

}

Come avrete sicuramente notato, il nodo root del nostro foglio di stile sarà la classe “x-tux-audiocover” che, come abbiamo visto in precedenza nel paragrafo relativo ai parametri di configurazione del componente, abbiamo impostato come “baseCls”.
In questo modo, tutti i vari stili che andremo a definire al suo interno, saranno relativi solamente al nostro componente.
Ora, partendo dalla classe “x-flip-card” possiamo notare come ne venga impostata la dimensione che abbiamo specificato tramite la variabile $size. Inoltre, come già accennato, viene impostata la proprietà addetta a preservare il posizionamento 3d di tutti i suoi elementi figli e la durata delle animazioni di trasformazione a 1 secondo. Qualora vogliate rallentare o accelerare la velocità dell’animazione, allora non dovrete fare altro che modificare tale valore a vostro piacimento.
Per quanto riguarda le facce, queste verranno posizionate in modalità “absolute” all’interno del container, avranno una dimensione pari al 100% sia in larghezza che in altezza rispetto il “cardEl” contenitore e ne verranno nascoste le facce posteriori di ognuna di queste. Se avete una leggera dimestichezza con il 3d, considerate questa regola come l’unico modo per mostrare le sole facce dalle quali partono perpendicolarmente le normali che compongono un poligono., mentre, quelle alle loro spalle, verranno oscurate.
In questo modo si eviteranno problemi di rendering durante l’animazione Flip di transizione.
Avrete sicuramente notato inoltre che per la sola faccia contenente la cover del brano, avente classe “x-front“, viene impostata la proprietà che impone all’immagine di background, di occupare il 100% dello spazio disponibile, andandola eventualmente a rimpicciolire o ingrandire al fine di occupare perfettamente lo spazio disponibile, mentre per la faccia contenente la progress bar di avanzamento, avente appunto classe “x-back” verrà impostata un layout di tipo “box” andando a centrare tutti i suoi elementi figli sia verticalmente che orizzontalmente.
Infine, non dimenticate che quest’ultima faccia, così come abbiamo già accennato, dovrà essere posizionata “spalle contro spalle” con quella frontale, semplicemente ruotandola di 180° sull’asse Y. Questo conferirà quel senso di tridimensionalità durante l’animazione di transizione.

8.4. Il pulsante di Stop

Così come tutti gli elementi che compongono la UI, anche il pulsante di stop ha bisogno di alcuni stili base addetti ad impostarne la sua dimensione, la dimensione della sua icona ecc. Essendo tali regole molti semplici da comprendere, non mi soffermerò a spiegare il significato di ognuna di queste, ma mi limiterà ad elencarle.
L’unica cosa che dovrete tenere a mente è che, poichè tale pulsante verrà renderizzato all’interno della faccia posteriore, occorrerà definire tutte queste regole all’interno del blocco “x-back” così come mostrato qui di seguito.

...
                &.x-back {

                    @include display-box;
                    @include box-pack(center);
                    @include box-align(center);

                    -webkit-transform: rotateY(180deg);
                    -webkit-box-sizing: border-box;

                    .x-button {

                        @include border-radius($size);
                        min-height: $button-size;
                        width: $button-size;
                        height: $button-size;

                        .x-button-icon {

                            width: $button-icon-size;
                            height: $button-icon-size;
                            -webkit-mask-size: $button-icon-size;
                            -webkit-mask-repeat: no-repeat;
                            margin: 1px -3px;
                            background: #4F4F4F;

                        }

                    }
...

Infine, poichè abbiamo impostato una UI ad un’icona di default all’interno delle configurazioni, sarà necessario definirle, in modo tale che il CSS contenga tutti gli elementi di cui il pulsante ha bisogno. Quindi:

@include pictos-iconmask('stop');

Con questa semplice istruzione, includeremo la mask icon che verrà utilizzata dal pulsante stesso per visualizzare la classica icona a forma di piccolo quadrato che caratterizza i classici pulsanti di stop.
Infine, avremo anche bisogno della seguente istruzione

@include sencha-button-ui('white', #FFF);

che servirà a definire una nuova UI avente il bianco come colore di sfondo e che verrà applicato al pulsante.

8.5. Proprietà comuni a più elementi

Come abbiamo già accennato più di una volta, tutti gli elementi addetti alla composizione della progress bar, dovranno avere la stessa posizione, dimensione e avere la medesima forma circolare.
Per questo motivo, onde evitare inutili ridondanze, andiamo ora a definire un set di regole che verranno applicate all’elemento “progressEl” (alla quale ricordiamo è stata impostata la classe base “x-progress“), agli elementi “x-slice” contenitori ed agli elementi slices veri e propri.

...
                   .x-progress, .x-progress .x-slice, .x-progress .x-slice div {

                        @include border-radius($size / 2);

                        position: absolute;
                        top: 0;
                        left: 0;
                        width: $size - ($margin * 2);
                        height: $size - ($margin * 2);
    
                    }
...

Ricordiamoci che, anche in questo caso, le proprietà sopra menzionate, essendo relative alla faccia posteriore del nostro “cardEl”, andranno definite all’interno del blocco “x-back“.

8.6. Chiudiamo con gli Slices

Abbiamo ormai quasi concluso l’impostazione degli stili di tutti gli elementi che compongono il nostro componente, ma, come i più attenti di voi avranno sicuramente notato, l’ultima cosa che ci manca sono le proprietà relative all’elemento container “x-progress” e degli slices figli.
Facciamo quindi un ultimo sforzo ed analizziamo l’ultima manciata di regole.

                 .x-progress {

                        @include display-box;
                        @include box-pack(center);
                        @include box-align(center);

                        margin: $margin;
                        background-color: #FFF;
                        border: solid 1px #BBB;

                        .x-slice {

                            &.x-half {

                                clip: rect(0px, $size, $size, $size / 2 - $margin);
                                div {
                                    clip: rect(0px, $size / 2 - $margin , $size, 0);
                                    @include rotate(0deg);
                                }                

                            }

                            &.x-end {

                                clip: rect(0px, $size / 2 - $margin, $size, 0);
                                div {
                                    clip: rect(0, $size / 2 - $margin , $size, 0);
                                    @include rotate(180deg);
                                }

                            }

                            div {
                                background-color: #3f89ee;
                            }

                        }

                    }

Partendo dall’elemento “x-progress” noterete senz’altro che è stato solamente impostato il medesimo layout della classe “x-back”, ovvero di tipo “box” preoccupandoci del fatto che tutti i figli vengano perfettamente centrati ed allineati al suo interno.
Potete inoltre notare come per i nodi “x-slice” vengano applicate le proprietà di “clip” così come mostrato delle figure visualizzate in uno dei post precedenti, ovvero andandone a nascondere solamente una parte e seguendo una disposizione a specchio.
Infine, entrambi i nodi div figli delle classi “x-half” (alias “slice1″) e “x-end” (alias “slice2″), vengono riempiti con un colore di background tendente all’azzurro, in modo tale che, durante la loro rotazione, tale colore vada pian piano a sostituire il colore bianco di sfondo del componente, simulando di conseguenza, una progress bar in fase di aggiornamento costante. Semplice non è vero?
Non dimenticate inoltre che, sempre per via della disposizione a specchio illustrata in uno dei paragrafi precedenti, lo slice avente classe “x-end” (alias slice2), ovvero quello avente il ruolo di ricoprire la seconda metà della progress bar, dovrà essere ruotato di 180° lungo l’asse Y.

Quinta ed Ultima Parte >>

Ogni componente che si rispetti deve fornire un set di parametri di configurazione pubblici che l’utente possa modificare a suo piacimento al fine di venire incontro ai requisiti richiesti dall’applicazione in cui questo viene utilizzato, quindi, anche nel nostro caso, tali parametri non dovranno venir meno. Al momento mi vengono in mente almeno una decina di diverse configurazioni che potremo esporre, ma per ora ci limiteremo a quelle essenziali, senza le quali, il nostro ux sarebbe inutile.
Probabilmente vi starete chiedendo di quali configurazioni sto parlando, e, se così fosse, lasciatevi consigliare una pausa accompagnata da un buon caffè nero fumante, perchè se non ci siete ancora arrivati, molto probabilmente avete solamente bisogno di un break . Lo so lo so, rientrare dalle vacanze estive e dura per tutti, ma un buon caffè vi aiuterà a digerire al meglio il resto di questo tutorial . Fatto? Benissimo! Possiamo ora riprendere andando a specificare le uniche configurazioni assolutamente necessarie per il nostro componente

/**
 * @class Ext.tux.AudioCover
 * @extend Ext.Audio
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.AudioCover',{
    extend: 'Ext.Audio',
    xtype: 'audiocover',
    config: {  
    
        /**
         * @cfg coverUrl
         * The url of the picture used as the cover of the audio file.
         * @accessor
         */
        coverUrl: null,

        /**
         * @cfg {Object} stopButton
         * The configuration for the stop button.
         */
        stopButton: {
            iconMask: true,
            iconCls: 'stop',
            ui: 'white'
        }

    },
    cachedConfig: {

        /**
         * @cfg baseCls
         * The base CSS class used to render the component.
         * @accessor
         */
        baseCls: 'x-tux-audiocover',

       /**
         * @cfg enableControls
         * Hide the default browser controls because we are going
         * to provide a custom UI to control the audio file.
         * @accessor
         */
        enableControls: false
    
    },
    ...

Come avrete sicuramente notato, ho definito due diverse tipologie di configurazioni: “config” e “cachedConfig”.
La prima, così come accennato poco fa, permette di esporre alcune proprietà che potranno essere personalizzate dall’utente di modo tale da poterlo personalizzare, la seconda invece, ci consentirà di configurare il componente tramite alcune impostazioni che verranno mantenute private e quindi non esposte all’utente.
Partendo dalle configurazioni pubbliche, noterete che abbiamo definito, in primis, la proprietà “coverUrl“. Come facilmente intuibile anche leggendo i commenti presenti all’interno del codice stesso, modificandone il valore, l’utente avrà la possibilità di specificare l’url dell’immagine che verrà utilizzata come copertina del brano al quale questa sarà associato. La seconda configurazione invece, denominata “stopButton“, verrà invece utilizzata per specificare alcuni parametri di configurazione utilizzati per la creazione del pulsante di Stop del brano. Come vedete, sono stati specificati alcuni valori di default, ma nulla vi vieterà di poterli modificare in fase di definizione del componente, nel caso, per esempio, vogliate modificarne l’icona, il colore, ecc. Semplice non è vero? Alcuni di voi si staranno sicuramente chiedendo: “Se queste sono le uniche configurazioni pubbliche esposte dal componente, dove andremo a specificare l’url del file audio da riprodurre?” Ahiaiaiii, se questo è il vostro caso avete sicuramente bisogno di un altro caffè . Tenete sempre bene a mente che stiamo estendendo il componente base “Ext.Audio”, perciò oltre a quella da noi definita, avremo a disposizione anche tutte quelle rese pubbliche dal componente esteso, per questo motivo la risposta alla vostra domanda è semplice: L’url del file audio da riprodurre andrà specificato tramite il parametro di configurazione “url” esposto, per l’appunto, dal componente “Ext.Audio”.
Per quanto riguarda la proprietà “baseCls” definita all’interno dell’oggetto “cachedConfig”, non c’è molto da dire, se non il fatto che questa configurazione ci permetterà di definire tutti gli stili CSS necessari a renderizzare correttamente il componente. Tutto qui!
Infine, sempre all’interno della “cachedConfig” potete notare un’altra configurazione denominata “enableControls” impostata a valore false. Questo perchè il browser visualizza una user interface di default che permette all’utente di controllare il file audio, ma, siccome è nostro intento quello di definirne una personalizzata, dobbiamo chiedere al browser di non mostrare quella di default in quanto non ne abbiamo bisogno. Molto bene, ora che la definizione delle configurazioni del componente è conclusa, passiamo ad analizzare le varie funzioni di cui avremo bisogno.

6. Solo 8 funzioni?!

Vi sembrerà assurdo ma tutto quello di cui abbiamo bisogno ora sono solamente otto funzioni che serviranno a dare vita al nostro componente.
Andiamole quindi ad analizzare singolarmente.

6.1. Inizializzazione

Ogni componente deve essere inizializzato prima di poter essere utilizzato

   /**
     * Component initialization function.
     * @private
     */
    initialize: function(){

        var me = this;

        /* Set the listeners to the Ext.Audio functions
         * that will allow us to syncronize the progress time
         * with the slices childs rotation. */
        me.on({
            timeupdate: 'onUpdateTime',
            ended: 'showFront',
            scope: me
        });

        /* Set the handler on the cover element to show the back
         * face when the user tap on it. */
        me.coverEl.on('tap', 'showBack', me);

        // Initialize the Ext.Audio component
        me.callParent(arguments);
    
    }

Penso sia abbastanza inutile spendere ulteriori parole su queste funzioni visto che i commenti presenti nel codice parlano da soli, ma, in breve:
La funzione “initialize” ci permette, come avrete capito, di inizializzare il nostro componente. Tutto ciò che ho fatto, è stato di impostare dei listeners a sue degli eventi esposti dal componente base “Ext.Audio” al fine di poter sincronizzare la rotazione di avanzamento riproduzione tramite la chiamata alla funzione “onUpdateTime” e di riportare il componente sulla faccia di copertina non appena la riproduzione dell’audio ad esso collegato sarà terminata, tramite chiamata alla funzione “showFront“. Da notare inoltre come è stato anche impostato un handler all’evento tap dell’elemento contenente la copertina del brano. In questo modo, non appena l’utente la toccherà, verrà visualizzata la faccia posteriore contenente la progressbar circolare, tramite la chiamata alla funzione “showBack“. A questo punto l’inizializzazione del componente è terminata!

6.2. L’effetto Flip di transizione

Ora che l’inizializzazione del componente è conclusa, diamo un’occhiata a tre semplici funzioni che permetteranno al componente di mostrare, tramite un’effetto di transizione cosiddetto “Flip”, la faccia frontale contenente la copertina del brano, oppure quella posteriore contenente la barra di avanzamento circolare addetta a visualizzare lo stato di riproduzione del brano.

   /**
     * Show the cover face and stop the audio.
     */
    showFront: function(){
        this.flip(true);
    },
    
    /**
     * Show the progressbar face and start the audio.
     */
    showBack: function(){
        this.flip(false);
    },

    /**
     * Flip the card to the front / back face after
     * playing / stopping the audio file.
     * @param {Boolean} toFront True to show the front cover face, otherwise
     * will be shown the back progressbar one.
     * @private
     */
    flip: function(toFront){
    
        // Play or stop tha audio file
        this[toFront ? 'stop' : 'play']();
    
        // Flip the card element
        this.cardEl.setStyle('-webkit-transform', Ext.String.format('rotateY({0}deg)', toFront ? 0 : 180));
    
    }

Come potete notare abbiamo definito due semplici funzioni chiamate “showFront” e “showBack“, il cui compito è semplicemente quella di richiamare una terza funzione denominata “flip” passando un parametro true, nel caso si voglia mostrare la faccia anteriore, oppure false nel caso la faccia da visualizzare fosse quella posteriore. La funzione “flip”, a questo punto, valutando il valore del parametro specificato, stopperà o manderà in play il file audio associato e ruoterà sull’asse Y l’elemento container “cardEl“, che, ricordiamo, è addetto a contenere tutti gli elementi HTML relativi ad entrambe le facce, di 0 gradi, nel caso debba essere mostrata la copertina, oppure di 180° nel caso debba essere mostrata la barra di avanzamento. A questo punto l’elemento “cardEl“, impiegherà un secondo per completare la transizione da una faccia all’altra. Questo perchè, come vedrete nella successivamente nella creazione del file SASS, andremo ad impostare la velocità di transizione tramite una semplice regola

-webkit-transition: -webkit-transform 1s;

Vi aspettavate qualcosa di più complicato? Beh vi sbagliavate . Come avrete sicuramente potuto capire leggendo questo tutorial, con una buona conoscenza di CSS e delle basi di Sencha Touch, potrete creare facilmente diversi componenti, dove, l’unico limite, sarà dato dalla vostra fantasia.

6.3. Aggiornamento Copertina

L’aggiornamento della copertina è qualcosa di veramente banale, infatti, se avete un minimo di familiarità con il framework, saprete sicuramente che il “ClassManager”, definisce automaticamente tre funzioni associate ad ogni proprietà specificata all’interno dell’oggetto “config”: get, apply e update, seguite dal nome del parametro avente la prima lettera in maiuscolo. Nel nostro caso infatti, verranno definite le funzioni:

• getCoverUrl: Reperisce l’url dell’immagine di copertina associata al brano.
• applyCoverUrl: Addetta ad impostare e ritornare il valore specificato.
• updateCoverUrl: Addetta ad aggiornare l’url dell’immagine di copertina.

Come appena accennato, queste funzioni vengono create automaticamente, ma nulla ci vieta di effettuare un override al fine di poterle utilizzare a nostro piacimento. Per quanto riguarda l’immagine di copertina infatti, non ci basta che l’url specificato venga solamente assegnato alla proprietà associata, ma tale url dovrà essere anche impostato come immagine di background del’elemento “coverEl“, quindi tutto ciò che dobbiamo fare è ridefinire la funzione “updateCoverUrl” come segue:

   /**
     * Update tha audio cover Url.
     * @param {String} value The new audio cover Url.
     * @private
     */
    updateCoverUrl: function(value){
        this.coverEl.setStyle('background', Ext.String.format('url({0})', value));
    }

In questo modo, non appena il componente verrà renderizzato sulla pagina, oppure decidiate di aggiornare dinamicamente l’immagine di copertina, questa verrà immediatamente impostata come background dell’elemento “coverUrl” andando quindi ad impostare come sfondo della faccia anteriore e, woilà, il gioco è fatto .

6.4. Il pulsante di Stop

Per poter terminare la riproduzione del brano in esecuzione, dovremo ora creare un pulsante di stop che verrà posizionato esattamente al centro della progressbar presente sulla faccia posteriore, quindi, tenendo presente quanto spiegato nel paragrafo precedente in merito alle tre funzioni automaticamente create e chiamate dal ClassManager per ogni parametro di configurazione diamo un’occhiata al codice che segue:

   /**
     * Create the stop button and update the getStopButton reference.
     * @param {Object} config The configuration used to create the button.
     * @private
     */
    applyStopButton: function(config) {
        return Ext.factory(config, Ext.Button, this.getStopButton());
    },
    
    /**
     * Update the Stop button creating the new one and destroying
     * the old one if any.
     * @param {Ext.Button} newButton The new button created.
     * @param {Ext.Button} oldButton The old button that eventually already exists.
     * @private
     */
    updateStopButton: function(newButton, oldButton){
    
        if (newButton) {
            newButton.renderTo(this.progressEl);
            newButton.on('tap', 'showFront', this);
        }
        else if (oldButton) {
            oldButton.destroy();
        }
        
    },

Anche in questo caso i commenti sono abbastanza esaurienti, ma cerchiamo comunque di fornire qualche informazione in più.
La funzione “applyStopButton” viene richiamata automaticamente al rendering del componente passando come parametro la configurazione che abbiamo definito all’interno dell’oggetto “config”, quindi, in questo caso, andremo a creare e ritornarne un componente base di tipo “Ext.Button” utilizzando tale configurazione e la funzione “Ext.factory“. Tale funzione, oltre a permetterci di creare un componente, ci consente anche di aggiornare una funzione di riferimento, che, nel nostro caso, sarà “getStopButton“. Così facendo, qualora vogliate reperire il pulsante di stop o aggiornarne dinamicamente l’aspetto, vi sarà facilmente possibile semplicemente richiamandone dall’esterno tale funzione. Ad esempio, nel caso per qualche motivo vogliate ad un certo punto aggiornarne la ui da “white” a “action”, potrete tranquillamente farlo mediante la seguente riga di codice:

<CMP>.getStopButton().setUi('action');

dove “CMP” sarà il componente “Ext.tux.AudioCover” del quale volete aggiornare il pulsante di Stop.

6.5. Diamo vita alla Progress Bar

L’ultima funzione di cui abbiamo bisogno per completare il codice del nostro componente è una funzione cha andrà ad aggiornare costantemente la rotazione degli slice in corrispondenza all’attuale tempo di esecuzione del brano collegato. Andiamo quindi, come già accennato nel paragrafo relativo all’inizializzazione del componente a definire la funzione “onUpdateTime“.

   /**
     * Core component function used to syncronize the slices
     * rotation to simulate the progress effect. 
     * This function is called everytime the Media element changes
     * is current time.
     * @param {Ext.Media} media The linked media element.
     * @param {Number} time The current media time in seconds.
     * @private.
     */
    onUpdateTime: function(media, time){

        var deg1 = 0,
            deg2 = 180;

        if(time === 0) {
            return;
        }
        
        // Let's calculate the new slice rotation
        var sliceDeg = (time * 360) / this.getDuration();

        if(sliceDeg === 0) {
            return;
        }
        
        /* If the current time passed the half, we need to rotate
         * the sencond slice instead of the first one. */
        if(sliceDeg > 180) {
            deg1 = 180;
            deg2 = sliceDeg;
        } else {
            deg1 = sliceDeg;
        }

       // Rotate the slices to simulate to syncronize the progress
        this.slice1.setStyle('-webkit-transform', Ext.String.format('rotateZ({0}deg)', deg1));
        this.slice2.setStyle('-webkit-transform', Ext.String.format('rotateZ({0}deg)', deg2));

    },

Anche in questo caso, la funzione è davvero molto semplice. Alla riga numero 20 infatti, potete notare come vengano calcolati i gradi di rotazione dello slice con una semplice proporzione, considerando la durata complessiva del file audio, il tempo corrente di riproduzione, è la massima rotazione possibile pari a 360°. Tramite questo semplice calcolo potremo infatti capire di quanti gradi ruotare uno dei due slice definiti, ma non sabbiamo ancora quale. Come già spiegato in precedenza, ognuno dei due slice può coprire solamente metà della progressbar per via della proprietà CSS “Clip” impostata. Il primo quindi (slice1), coprirà l’avanzamento relativo alla prima metà della durata massima del brano (quindi la parte destra), mentre il secondo (slice2) coprirà la metà finale rimanente. Per questo motivo entrambi potranno essere ruotati di un massimo di 180°. Come potete notare alla riga 28 infatti, viene verificato l’angolo di rotazione precedentemente calcolato, e, se questo è minore di 180° allora verrà ruotato il primo slice mentre il secondo manterrà la sua rotazione iniziale pari a 0° risultando completamente nascosto grazie alle regole CSS clip applicate. Nel caso in cui invece l’angolo di rotazione fosse superiore a 180° allora sarebbe il secondo ad essere ruotato, mentre il primo verrebbe mantenuto alla sua rotazione massima di 180°. In questo modo si otterà un’avanzamento lineare che andrà a coprire completamente i 360° della forma circolare conferita alla barra di avanzamento. Beh, cosa ne dite…non è un bel trucco .

7. Considerazioni finali sul Codice

A questo punto il codice sorgente del nostro componente è concluso. So che vi sembrerà assurdo e che avreste giurato fosse molto più complicato, ma come avete potuto vedere con i vostri occhi, sono bastate poche semplici funzioni e quale regola CSS per creare quello che, a detta del mio caro amico sviluppare Objective C, sarebbe stato impossibile ricreare tramite “semplice codice HTML”. Sencha Touch è un framework estremamente flessibile e molto semplice da estendere, quindi la prossima volta che creerete la vostra Web application, non limitatevi ad utilizzare i classici componenti base, ma spremete un po le meningi per creare qualcosa di originale e personalizzato che conferirà alla vostra applicazione una user interface da fare invidia anche alle applicazioni native iOS, Android, ecc.. Ho sviluppato diverse applicazioni e componenti utilizzando questo framework per diversi clienti sparsi qua e la nel mondo, e posso assicurarvi che, fino ad ora, non ho ancora trovato un componente nativo che mi facesse pensare: “Cavolo, questo è impossibile in HTML?”. Quindi se avete un’applicazione o un componente da realizzare, ma non avete molta dimestichezza con Sencha Touch, non preoccupatevi. Contattate me o direttamente il nostro team Sencha Services, dove io e molti altri sviluppatori professionisti ed esperti sul framework e le tecnologie web, sapranno sicuramente in grado di consigliarvi e dare vita al vostro progetto.
Terminate queste piccole considerazioni, non è ancora tempo di riposare, abbiamo ancora una piccola parte da analizzare, ovvero la creazione del CSS che andrà a disporre correttamente tutti gli elementi della UI all’interno del nostro componente, rendendolo finalmente utilizzabile.

Quarta Parte >>

Arrivati a questo punto siamo pronti a scrivere qualche riga di codice che permetterà al nostro componente di fornirci tutti gli elementi HTML che verranno utilizzati al fine di renderizzare la UI, quindi, il primo step, è sicuramente quello di definirne il template. Per tutti quelli che non hanno molta familiarità con Sencha Touch, basti sapere che il Template, permette di definire una sorta di scheletro del componente, andando a definire, all’interno di un semplice array, quale tipo di elemento HTML dovrà essere utilizzato, la classe da applicare, un array di eventuali elementi figli ed un nome univoco che verrà utilizzato all’interno del componente stesso al fine di poter reperire ogni singolo nodo DOM definito.
La definizione di un template è molto semplice, e vedrete che non avrete difficoltà a comprendere le righe di codice che seguiranno, ma nel caso aveste qualche dubbio o vogliate approfondire maggiormente il significato dei vari attributi, vi consiglio di dare un’occhiata a questo vecchio post dove è stato ampiamente spiegato il significato di ognuno di questi.

4.1. La Flip Card

Iniziamo subito a definire il template della flip-card, ovvero quell’elemento HTML che visualizzerà due diverse facce dove su quella frontale verrà visualizzata la copertina del brano, mentre su quella posteriore, per il momento, verrà semplicemente visualizzato il testo “Back”. Non preoccupatevi, torneremo tra poco sulla parte posteriore andando a sostituire il testo con tutti gli elementi che comporranno la progressbar circolare.

/**
 * @class Ext.tux.AudioCover
 * @extend Ext.Audio
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.AudioCover',{
    extend: 'Ext.Audio',
    xtype: 'audiocover',
    template: [
        {
            // The media element is required
            reference: 'media',
            preload: 'auto',
            tag: 'audio'
        },
        {
            cls: 'x-flip-card',
            reference: 'cardEl',
            children: [
                {
                    cls: 'x-face x-front',
                    reference: 'coverEl'
                },
                {
                    cls: 'x-face x-back',
                    text: 'Back'
                }
            ]
        }
    ]
});

La prima cosa che dovete assolutamente notare guardando queste righe di codice, è il nodo avente tag “audio“, infatti, poichè stiamo andando ad estendere un componente “Ext.Audio” e allo stesso tempo effettuando l’override del template di questo componente, è assolutamente necessario che l’elemento media venga mantenuto, così come anche il suo attributo “reference” non deve essere assolutamente modificato. Questo perchè, non intendiamo andare a riscrivere completamente il componente Ext.Audio, anzi, al contrario, intendiamo sfruttare funzioni e funzionalità già definite come base del nostro ux. Quindi, nel caso in cui decidessimo di rimuovere l’elemento “audio” il componente andrebbe in crash immediatamente al rendering della pagina, poichè le funzioni già presenti, non sarebbero più in grado di trovare tale riferimento tramite l’utilizzo dell’istruzione “this.media“. Per questo motivo quindi, questo elemento non va rimosso, ne tantomeno modificato, tutti ciò che dobbiamo fare è andare ad aggiungere tutti gli elementi mancanti necessari alla creazione della UI.
A tal proposito, come avrete sicuramente notato, abbiamo quindi definito l’elemento “cardEl“, il quale, a sua volta possiede due figli, ai quali, ovviamente, al primo corrisponde la faccia frontale, ovvero quella che visualizzerà la copertina, mentre il secondo conterrà la progressbar di avanzamento. Avrete sicuramente notato che alla faccia frontale è stato assegnato un reference, mentre a quella posteriore no. Questo perchè il componente dovrà andare a manipolare dinamicamente la faccia frontale andando a modificarne l’immagine di copertina, mentre non dovrà mai curarsi direttamente di quella posteriore, ma, come vedremo in seguito, solamente dei suoi figli.
Bene, ora che abbiamo definito il template della Flip Card, fermiamoci un momento per fare due considerazioni su come questi elementi dovranno essere disposti da un punto di vista del CSS:
Iniziamo con il dire che l’elemento “cardEl” ha il ruolo di container per le due facce. Questo ci sarà utile quando il componente dovrà ruotare simulando l’effetto “Flip”, poichè, applicando le trasformazioni CSS di rotazione a questo elemento, entrambe le facce ruoteranno simultaneamente, quindi non dovremo preoccuparci di ruotarle singolarmente. Altra considerazione di cui tener conto è che la faccia posteriore verrà sovrapposta, con posizionamento “absolute”, su quella anteriore, con la sola differenza che questa verrà prima ruotate di 180° sull’asse Y in modo tale da posizionarle “schiena contro schiena” all’interno del container.
La regola che ci consentirà tale disposizione è

-webkit-transform: rotateY(180deg);

applicata alla sola faccia addetta alla visualizzazione della progressbar di avanzamento.

Infine, non dobbiamo assolutamente dimenticarci che entrambe le facce dovranno nascondere la loro faccia posteriore tramite l’istruzione

-webkit-backface-visibility: hidden;

mentre l’elemento “cardEl” container dovrà preservare le trasformazioni CSS 3d applicate a tutti i suo figli, in modo tale che nel momento in cui verrà ruotato mostrando una delle due facce, le rotazioni di tali nodi non vengano trascurate.
Tutto questo è possibile semplicemente ricordandosi di applicare la regola

-webkit-transform-style: preserve-3d;

Se volete approfondire maggiormente queste regole CSS, vi consiglio di leggere uno dei tanti articoli presenti in rete. Non vi preoccupate comunque, verso la fine di questo articolo verrà visualizzato il documento SASS completo che, sono sicuro vi aiuterà a capire meglio.

4.2. La ProgressBar

Questa è forse la parte più complicata da comprendere dell’intero articolo, quindi richiede un po di concentrazione.
Prima di iniziare quindi, vi consiglio vivamente di dare un’occhiata a questo articolo che vi spiegherà nel dettaglio tutto ciò che dovete sapere in merito ad una proprietà CSS molto interessate, ovvero la proprietà Clip.
In sintesi, tale proprietà permette di mascherare una parte di un’immagine, di un div, ecc. rendendone visibile solamente una parte.
Considerate questa proprietà come un’evoluzione della regola “visibility: hidden;” che, invece, permette di nascondere completamente un elemento.
Se siete sicuri di aver compreso il funzionamento di tale proprietà, andiamo a vedere ora la parte di template che verrà utilizzata per la costruzione della progress bar di avanzamento riproduzione.

template: [
    {
        // The media element is required
        reference: 'media',
        preload: 'auto',
        tag: 'audio'
    },
    {
        cls: 'x-flip-card',
        reference: 'cardEl',
        children: [
            {
                cls: 'x-face x-front',
                reference: 'coverEl'
            },
            {
                cls: 'x-face x-back',
                children: [
                    {
                        cls: 'x-progress',
                        reference: 'progressEl',
                        children: [
                            {
                                cls: 'x-slice x-half',
                                children: [
                                    { 
                                        reference: 'slice1' 
                                    }
                                ]
                             },
                             {
                                 cls: 'x-slice x-end',
                                 children: [
                                    { 
                                        reference: 'slice2'
                                    }
                                 ]
                             }
                        ]
                    }
                ]
            }
        ]
    }
]

Anche in questo caso abbiamo definito un nodo container “progressEl” che, una volta arrotondati i bordi tramite la proprietà “border-rarius” e posizionato al centro della faccia, conferirà alla progressbar, la forma circolare base caratteristica di questo componente. Ma purtroppo, come sicuramente avrete capito, questo non è abbastanza. Dando un’occhiata al template noterete sicuramente che all’interno del container, sono stati definite due div avante come classe base “x-slice”, e, al loro interno, altre due div avente soltanto un nome di riferimento. Questo dovrebbe farvi capire che saranno proprio quest’ultimi elementi HTML che andranno manipolati dinamicamente dal componente al fine di simulare l’effetto di avanzamento di riproduzione del brano. Iniziamo con il dire che ad entrambi i nodi avente classe base “x-slice” ed ai loro figli, verranno arrotondati i bordi con lo stesso raggio utilizzato per il nodo container. Questo perchè, ovviamente, la forma caratteristica del componente è circolare, quindi sarebbe poco intelligente avere elementi di forma rettangolare al suo interno. Bene, ma cerchiamo di arrivare al succo: Come possiamo simulare l’avanzamento circolare all’interno del componente utilizzando i soli elementi HTML finora definiti? Sono sicuro che ve lo state chiedendo da un po, non è vero? Bene, per capire al meglio questo concetto purtroppo le parole non bastano, quindi diamo insieme un’occhiata alle immagini sottostanti che hanno lo scopo di illustrare il posizionamento dei vari elementi che compongono la progressbar. Onde evitare inutili confusioni, verrà preso come riferimento l’elemento container “progressEl”, il primo elemento “x-slice” (x-half) ed il suo nodo figlio.

Come potete vedere da questa immagine, tutti gli elementi, fatta esclusione per il nodo avente classe “x-face.x-back”, hanno tutti una forma circolare, concentrici e esattamente della medesima dimensione. Attenzione però, vi faccio notare che l’unico dei tre div a forma circolare ad avere un colore di riempimento di rilievo diverso dal bianco è il nodo figlio dell’elemento avente classe “x-slice.x-half”, ovvero quello a cui è stato impostato il nome di riferimento a “slice1″.
Bene, ora che abbiamo capito come sono disposti gli elementi, passiamo a dare un’occhiata all’immagine che segue.

Nel primo riquadro potete notare com’è stato applicata la regola “clip” all’elemento avente classe “x-slice.x-half”, tenendo bene in mente che la parte evidenziata in grigio e la parte non visibile dell’elemento, pertanto, sarà visibile solamente la metà destra. Tutto quello al di sotto della parte sinistra quindi, verrà completamente tenuto nascosto.
Nel secondo riquadro invece potete notare come il figlio dell’elemento sopra citato (slice1) abbia applicato la regola clip esattamente nel modo opposto al suo nodo padre, nascondendo la parte destra e mostrando completamente la parte sinistra.
Fermandovi a ragionare un secondo capirete che, al momento in cui la progressbar verrà renderizzata e che quindi il tempo di riproduzuione è uguale a zero, la parte in blu raffigurante l’avanzamento verrà completamente nascosta, in quanto posta al di sotto della metà nascosta del nodo “x-slice.x-half”. Ora, tutto quello che ci occorre per mostrare l’avanzamento dello stato di riproduzione, è semplicemente sincronizzare la riproduzione dell’elemento media definito all’interno del template, con la rotazione sull’asse Z dell’elemento slice1. In questo modo, man mano che il tempo attuale di riproduzione del brano aumenterà, la parte visualizzata di tale elemento, entrerà all’interno della parte destra mostrata dal nodo padre, visualizzandone uno spicchio sempre più grande così come mostrato nel box numero 3 della figura soprastante, fino a raggiungere una rotazione massima di 180°. A questo punto non sarà più possibile ruotare l’elemento “slice1″, ma passeremo allo “slice2″.
L’elemento “slice2″ e il nodo padre “x-slice.x-end” sono infatti posizionati a specchio rispetto ai “fratelli” della prima metà, di conseguenza sarà possibile visualizzare anche lo stato di avanzamento corrispondente alla seconda metà del brano, coprendone i restanti 180°.
Complicato? Sono sicuro che inizialmente farete un po fatica a comprenderne completamente il funzionamento ( anche per via della pessima qualità delle mie immagini ), ma vedrete che rileggendo un paio di volte, tutto risulterà molto più chiaro e sarete così pronti per procedere con la lettura della terza parte di questo tutorial dove andremo finalmente a definire le funzioni che, di fatto, daranno vita a tutti questi elementi HTML e, di conseguenza, rendendo finalmente utilizzabile il componente stesso.

Terza Parte >>

1. Considerazioni prima di iniziare

La prima cosa in assoluto ancor prima di iniziare a scrivere la prima riga di codice di ogni componente che intendiamo realizzare e pensare quale questo dovrà andare ad estendere. Sencha Touch infatti fornisce numerosi componenti base come Container, Panel, List, Carousel, ecc.. e se il nostro componente deve esporre una User Interface, questo dovrà sicuramente essere l’estensione di qualcosa di diverso di un semplice Object e, in ogni caso, questo dovrà estendere almeno la classe base Ext.Component. Occorrerebbe un articolo dedicato alla scelta si quello giusto da estendere in base al componente che intendiamo realizzare effettuando diverse considerazioni, quindi non mi soffermerei troppo sull’argomento al momento, quindi cerchiamo di ragionare velocemente elencando le funzionalità base che il nostro componente dovrà fornire:

• Riproduzione di file audio (prevalentemente MP3).
• Funzioni di Play, Pause e Stop del file audio in riproduzione
• Avere accesso ad alcune informazioni importanti sul file audio quali durata del brano e tempo corrente di riproduzione
• Possibilità di override della User Interface. Deve essere quindi almeno un estensione della classe base Ext.Component così come accennato pocanzi.

Bene, a questo punto è abbastanza lampante che il componente che stiamo cercando è niente poco di meno che l’Ext.Audio.
Tale componente infatti ci fornisce già tutte le funzioni di cui abbiamo bisogno per il controllo del file audio, il reperimento delle sue informazioni, ed inoltre, essendo lui stesso un’estensione di Ext.Media che a sua volta è un’estensione di Ext.Component, ci consente di manipolare con facilità il template HTML con il quale questo viene renderizzato nella nostra applicazione dandoci di conseguenza la possibilità di definire la user interface necessaria a mostrare la copertina associata al file audio e la barra di avanzamento circolare. Direi che non ci manca proprio niente!
Deciso quindi il componente che ci fornirà le fondamenta per il tux, non ci resta che analizzare graficamente il componente nativo iOS, evidenziandone caratteristiche grafiche e funzionalità.

2. Analisi UI e funzionalità

Ora che abbiamo deciso quale componente fornirà le funzionalità necessarie allo sviluppo della nostra estensione, entriamo nel vivo del tutorial partendo con l’analizzare attentamente com’è strutturato da un punto di vista grafico il componente iOS e capirne il reale funzionamento. Non fraintendetemi, non che ci sia nulla di così complicato da capire, ma è meglio avere avere le idee chiare prima di iniziare a buttar giù le prime righe di codice, in modo da stabilire fin da subito gli elementi HTML di cui avremo bisogno per costruire l’interfaccia grafica, le proprietà CSS che dovranno essere applicate e gli eventi che andranno gestiti per garantirne le medesime funzionalità.
Per far tutto ciò, iniziamo con il dare un’occhiata a due screenshot di questo componente, presi direttamente da iOS 6 (beta 4):

Nella prima immagine a sinistra potete notare lo stato di “idle” del componente, ovvero quel momento in cui, la lista contenente tutti i brani viene renderizzata e nessuno di questi è attualmente in stato di Play. In questo stato tutti i componenti associati ad ogni singola canzone mostrano la copertina dell’album al quale questa appartiene, in attesa di un tap da parte dell’utente su una di queste al fine di iniziarne la riproduzione musicale mostrando una sorta di progress bar circolare con al mezzo un pulsante di stop che, se premuto, permette l’immediata interruzione così come mostrato nella seconda immagine posta sulla destra. Da non trascurare inoltre un dettaglio molto importante al fine di ricreare fedelmente questo componente, dettaglio che non viene mostrato nelle due immagini soprastanti: Non appena l’utente avrà toccato la copertina del brano, il componente dovrà utilizzare un effetto di transizione chiamato “flip” nel passare dallo stato di idle allo stato di riproduzione e viceversa.
Ricordate inoltre che sarà consentita la riproduzione di un solo brano alla volta e, nel caso in cui l’utente decidesse di avviare la riproduzione di un’altro mentre uno è già in riproduzione, quest’ultimo dovrà essere riportato allo stato di Idle mostrandone la copertina. A questo punto potrà essere avviata la riproduzione del nuovo brano mostrandone lo stato di avanzamento.

3. La Sfida

La vera e propria sfida nel riuscire a realizzare questo tipo di componente è data da due obbiettivi distinti:

• Definire un elemento HTML che ci permetta di sovrapporre due DIV delle quali, nella prima, verrà visualizzata la copertina del brano, mentre nella seconda andremo a creare la progressbar circolare addetta a mostrare lo stato avanzamento della riproduzione del brano collegato. Non dimentichiamoci inoltre che la visualizzazione di queste due “facce” dovrà essere alternata, andando a nascondere la seconda quando la prima è visibile e viceversa, inoltre, questo passaggio dovrà avvenire tramite un’effetto di transizione detto “Flip”, il quale conferirà al componente un pizzico di tridimensionalità.
• Creare la progress bar di tipo circolare che verrà costantemente sincronizzata con il tempo di riproduzione del brano in esecuzione.

Non preoccupatevi, sembra più complicato di quanto non lo sia in realtà, quindi andiamo con ordine e vedrete che tutto questo ci sarà possibile tramite due semplici regole CSS e qualche “trucchetto” che sono sicuro gradirete
Seguitemi quindi nella seconda parte di questo articolo dove, finalmente, inizieremo a “stendere” il codice base del nostro componente.

Seconda Parte >>