Diamogli Vita!

A questo punto abbiamo già steso le basi del nostro componente, abbiamo infatti i parametri di configurazione e gli elementi HTML necessari al suo funzionamento. Come vi ho spiegato nell’articolo precedente, non occorre più definire le funzioni di get e set per tutti i parametri di configurazione che andiamo a definire, perché sarà il framework stesso ad andarle a creare automaticamente per noi, ma allora, vi chiederete voi, come andiamo ad aggiornare il “fillElement” non appena viene impostato un valore diverso? Beh, la domanda sorge spontanea . Quello che ancora non sapete, è che automaticamente, non appena viene richiamata la funzione set di un parametro di configurazione, verrà automaticamente richiamata anche la funzione update. Prima di spiegavi nel dettaglio questo concetto, diamo un’occhiata al codice della funzione in oggetto:

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	},
	template: [
		{
			tag: 'div',
			className: Ext.baseCSSPrefix + 'progressbar',
			reference: 'progressBarElement',
			children: [
				{
					tag: 'span',
					className: Ext.baseCSSPrefix + 'progress-value',
					reference: 'textElement'
				},
				{
					tag: 'div',
					className: Ext.baseCSSPrefix + 'progress-fill',
					reference: 'fillElement'
				}
			]
		}
	],

	/**
	 * Aggiorna il valore all'interno del textElement.
	 * @param {Number} value Il nuovo valore percentuale da impostare.
	 * @private
	 */
	 updateValue: function(value) {

		var me = this,
			maxValue = this.getMaxValue();

		//Viene reimpostato il valore se minore di 0
        if (value < 0) {
			value = 0;
		/* Viene reimpostato il valore se maggiore di quello
		 * massimo consentito impostato nella configurazione */
		}else if (value > maxValue){
			value = maxValue;
		}

		//Aggiornamento del valore percentuale all'interno del textElement
		me.textElement.setHtml(value + '%');

		/* Viene richiamata la funzione di aggiornamento
		 * addetta ad impostare la larghezza del fillElement. */
		me.upadateProgress(value);

    },

	/**
	 * Aggiorna la dimensione del fillElement.
	 * @param {Number} value Il nuovo valore percentuale impostato.
	 * @private
	 */
	upadateProgress: function(value){

		var me = this;

		//Calcolo della larghezza del fillElement
		value = (value * 100) / me.getMaxValue();

		//Aggiornamento della larghezza del fillElement
		me.fillElement.setStyle('width', value + '%');

	}

});

Eccoci qua! Cominciamo con il dire che, come avrete potuto sicuramente notare, sono state aggiunte due nuove funzioni al nostro componente e, come leggete dai commenti, queste sono private, ovvero che non dovranno mai essere richiamate al di fuori del componente stesso. Come abbiamo detto poco fa, il framework si preoccuperà automaticamente di richiamare la funzione update del parametro di configurazione subito dopo aver richiamato quella di impostazione valore (set). Quindi, ricapitoliamo: se per ipotesi avessimo definito un parametro di configurazione “cloud” (non mi piacciono i nomi dei personaggi Walt Disney quindi userò quelli di Final Fantasy , verranno automaticamente definite le funzioni getCloud e setCloud, che saranno pubbliche e quindi accessibili anche all’esterno del componente stesso al fine di reperire ed impostare il valore del parametro stesso. Inoltre, non appena richiamata la funzione “setCloud” verrà automaticamente richiamata la funzione updateCloud, che sarà privata e quindi non accessabile al di fuori del componente, ma che dovrà essere definita manualmente al fine di consentirci la gestione dei vari elementi che compongono il componente stesso. Quindi direi che non ci manca proprio niente . Ma andiamo ad esaminare nel dettaglio le due nuove funzioni appena definite. La funzione updateValue come vi ho appena spiegato verrà richiamata automaticamente all’impostazione del valore specificato, quindi dobbiamo andare a gestire il ridimensionamento dell’elemento di riempimento della ProgressBar. A tal proposito, alla riga 66, noterete la seguente riga di codice:

me.textElement.setHtml(value + '%');

tramite questa semplice istruzione, verrà infatti impostato il contenuto html dello span corrispondente al “textElement” che abbiamo definito poco fa all’interno del template del componente. Vi faccio appunto notare come “textElement” sia il medesimo nome assegnato al parametro di configurazione “reference”, definito per l’elemento in questione. Il framework quindi, non solo a creato per noi l’elemento Html all’interno della pagina, ma ci ha anche reso disponibile una variabile di referenza, che ci permetterà di accedere direttamente a tale elemento. Ovviamente la stessa logica è applicata anche per tutti gli altri elementi definiti. Fantastico non vi pare? Vi faccio inoltre notare come alla riga 54, venga utilizzata la funzione getMaxValue automaticamente generata, al fine di prelevare il valore del parametro di configurazione “maxValue” che abbiamo definito. Su questo funzione quindi non aggiungerei altro in quanto mi sembra tutto abbastanza chiaro. Vengono infatti effettuati alcuni controlli sul nuovo valore che dovrà essere aggiornato al fine di evitare impostazioni fuori range, dopodiché viene aggiornato, come spiegato, il valore percentuale all’interno del “textElement”, ed infine richiamata l’altra nuova funzione “updateProgress” appena definita. Lo scopo di questa funzione è molto semplice: Viene infatti semplicemente calcolato il valore percentuale in corrispondenza del valore passato alla funzione stessa ed il maxValue impostato nella configurazione del componente e reperito tramite la funzione getter automaticamente creata getMaxValue. Infine, dopo aver calcolato tale valore, questo viene usato al fine di impostare il valore percentuale di larghezza che dovrà essere utilizzato dal fillElement, che, ricordiamo, è l’elemento addetto appunto a visualizzare la percentuale di avanzamento della nostra ProgressBar. Molto bene, a questo punto abbiamo creato tutte le funzioni base che permetteranno al componente di funzionare correttamente, a questo punto quindi, passiamo oltre, ed andiamo a definire tutti gli stili che la compongono utilizzando COMPASS, SASS e CSS3. Seguitemi quindi nel prossimo tutorial e scopriamo insieme come poterla rendere graficamente accattivante. La ProgressBar dovrà infatti essere, proprio come disse il grande Steve Jobs a Cordell Ratzlaff in merito alle ScrollBars di OS X, “bella a tal punto da volerla leccare”

Definizione base del componente

Vediamo in primis le basi che ci permetteranno di creare un componente personalizzato, ovvero la definizione del componente stesso.
Diamo quindi un’occhiata al codice che segue:

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'widget.progressbar'
});

Tramite queste poche righe di codice abbiamo steso le basi per il nostro componente che, di fatto, se incluso in un applicazione Sencha Touch 2, già funzionerebbe regolarmente. Certo con questo non voglio certo dire che abbiamo finito , ma semplicemente che questo componente è già riconosciuto dal framework e potrebbe teoricamente, già essere utilizzato, anche se non sarebbe certo di grande utilità in quanto non farebbe assolutamente nulla, ma è comunque stato registrato dal framework con il suo xtype “progressbar” associato.
Ma entriamo nel dettaglio e vediamo di fatto cosa stanno ad indicare queste poche righe di codice appena scritte:

Tramite l’istruzione Ext.define, andiamo a definire di fatto un nuovo componente, assegnandogli, in questo caso, il nome ProgressBar, ed andando a collocarlo all’interno del namespace Ext.tux. Vi starete sicuramente chiedendo perché Ext.tux non è vero? Beh presto detto: sicuramente se come me avete esperienza di sviluppo tramite Ext, saprete che tutti i componenti personalizzati di quest’altro stupendo framework, venivano e vengono tutt’ora racchiusi all’interno del namespace “Ext.ux” che sta per l’appunto a significare “Ext User Extensions”. Bene, sicuramente ora vi è facile intuire che “Ext.tux” rappresenta invece tutti i componenti personalizzati sviluppati per Sencha Touch, da qui, quindi, “Ext Touch User Extensions”. Tenete comunque presente che al momento non vi è nessuna convenzione ufficiale che impone tale namespace per i vostri componenti, infatti al momento penso di essere il solo ad utilizzarlo. Molti sviluppatori preferiscono utilizzare quello ufficiale, ovvero semplicemente “Ext” oppure lo stessto utilizzato per Ext “Ext.ux” ma mi sento di consigliarvi la mia alternativa.
Dopo questa piccola parentesi possiamo procedere.
Tramite l’istruzione extend andiamo a definire la superclasse della ProgressBar, ovvero, il componente dal quale si andranno ad ereditare tutti i metodi, eventi e proprietà. Nella star grande maggioranza dei casi, vi troverete, come in questo caso, a dover estendere direttamente la classe “Ext.Component”, ma nulla vi vieta di poter estendere un “Ext.Panel”, “Ext.Carousel” o qualsiasi altro componente. Questo dipende solamente dalle vostre necessità. Altra nota essenziale su questo piccolo gruppetto di righe di codice è la configurazione alternateClassName. Tramite questa configurazione infatti, potremo infatti associare un nome alternativo al nostro componente in modo tale che questo possa essere agilmente creato tramite l’istruzione

Ext.create('Ext.tux.ProgressBar');

oppure molto più facilmente tramite

Ext.create('Ext.ProgressBar');

Certo, in questo caso non c’è molto differenza, ma provate a pensare in grande, ad un’applicazione molto più estesa e complessa.
Potreste trovarvi nel caso in cui uno sei vostri componenti sia stato definito all’interno del namespace ClientApp.components.cards.AdvancedCarousel. Non sarebbe più facile creare questo componente utilizzando un nome di classe alternativo tipo “CP.AdvancedCarousel” ? Sono sicuro che siete d’accordo con me .
Certo è anche vero che c’è un’altro modo per creare un componente, ovvero utilizzando l’istruzione “Ext.widget”, ed è proprio questo il motivo dell’ultimo parametro di configurazione impostato. Il parametro xtype infatti, vi permetterà di creare questo componente semplicemente tramite

Ext.widget('progressbar')

ma anche di poterlo inserire agilmente tra gli “items” di una Toolbar tramite la sintassi che segue.

var toolbar = Ext.widget('toolbar',{
	items: [
		{
			xtype: 'progressbar'
		}
	]
});

In questo modo si fornisce solamente la configurazione del componente che dovrà essere creato e sarà il framework che si preoccuperà automaticamente di crearlo non appena questo dovrà essere utilizzato. Inoltre, assolutamente da tenere in considerazione, è il fatto che l’impostazione di un “xtype” associato al componente, vi permetterà di creare i componenti delle vostre applicazioni server-side. Ma per ora, tralasciamo questo argomento, altrimenti rischiamo di confonderci le idee.

Configs

Bene, a questo punto è arrivato il momento di fornire al nostro componente alcuni parametri di configurazione che ci permetteranno, ad esempio, di impostare il valore corrente ed il valore massimo previsto dalla ProgressBar stessa, quindi aggiorniamo il codice come segue.

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	}
});

Penso non servi fornire maggiori informazioni su questi parametri, in quanto i relativi commenti associati parlano chiaro.
Tuttavia, voglio spendere un minuto per farvi notare qualcosa di veramente importante che occorre sempre tenere in mente relativo alla nuova Class System prima sviluppata per Ext 4, ed ora implementata anche su Sencha Touch 2. Ma di cosa starà mai parlando vi starete chiedendo? Beh, parlo proprio dell’oggetto Config appena definito. Questo oggetto infatti, vi permetterà di racchiudere tutti i parametri di configurazione che vorrete fornire al vostro componente generando automaticamente le rispettive funzioni Get e Set. Ma cosa vuol dire? Beh, questo vuol dire che per ogni parametro di configurazione non occorre andare a definire le funzioni, ad esempio:

/**
 * Ritorna l'attuale valore di avanzamento impostato sulla ProgressBar.
 * @return {Number} Il valore corrente della ProgressBar.
 */
getValue: function(){
	return this.value;
}

/**
 * Imposta il valore di avanzamento della ProgressBar.
 * @param {Number} value Il nuovo valore di avanzamento della ProgressBar.
 */
setValue: function(value){
	this.value = value;
}

Assolutamente NO!!! Questo non è più necessario. Sarà infatti il ClassManager a preoccuparsi di creare tali funzioni automaticamente per voi, quindi in qualsiasi parte all’interno della ProgressBar, potremo reperire tali valori semplicemente tramite le istruzioni

//Reperiamo il valore di avanzamento corrente impostato sulla ProgressBar
this.getValue();       //Ritorna 0

//Impostiamo il valore di avanzamento della ProgressBar
this.setValue(50);

//Reperiamo nuovamente di avanzamento corrente impostato sulla ProgressBar
this.getValue();       //Ritorna 50

Lo stessa logica, viene anche applicata al parametro di configurazione maxValue.
Pasterà ricordarsi sempre di anteporre get seguito dal nome del parametro avente la prima lettera Maiuscola per poter reperire il valore di tale parametro, invece, se vogliamo impostarne uno nuovo, anteporremo set sempre seguito dal nome del parametro avente la prima lettera Maiuscola, e, questa volta, ricordandoci di specificare il nuovo parametro che dovrà essere utilizzato.
Beh che dire? Fantastico no .
Passiamo quindi oltre e vediamo come poter ora definire i vari elementi che comporranno la nostra ProgressBar definendo semplicemente un “Template”.

Il Template

Come abbiamo visto poco fa all’interno dell’articolo inerente alla progettazione di questo componente, la ProgressBar dovrà essere composta da due elementi div ed uno span addetto a contenere il testo da visualizzare al suo interno.
Già, vi starete chiedendo, ma qual’è il modo migliore per farlo? Dobbiamo creare manualmente questi elementi ed aggiungerli al DOM?
Assolutamente, no! Tutto ciò che dovrete fare è riassunto dal codice che segue.

/**
 * @class Ext.tux.ProgressBar
 * @extend Ext.Component
 * @author Andrea Cammarata
 */
Ext.define('Ext.tux.ProgressBar', {
	extend: 'Ext.Component',
	alternateClassName: 'Ext.ProgressBar',
	xtype: 'progressbar',
	config: {

		/**
		 * @cfg {Number} maxValue Il valore massimo raggiungibile
		 * dalla ProgressBar.
		 * @accessor
		 */
		maxValue: 100,

		/**
		 * @cfg {Number} value Il valore iniziale ProgressBar.
		 * @accessor
		 */
		value: 0

	},
	template: [
		{
			tag: 'div',
			className: Ext.baseCSSPrefix + 'progressbar',
			reference: 'progressBarElement',
			children: [
				{
					tag: 'span',
					className: Ext.baseCSSPrefix + 'progress-value',
					reference: 'textElement'
				},
				{
					tag: 'div',
					className: Ext.baseCSSPrefix + 'progress-fill',
					reference: 'fillElement'
				}
			]
		}
	]
});

Ecco fatto . Semplice non è vero? Ma vediamo nel dettaglio cos’ho fatto:
Specificando un oggetto templare al componente, chiediamo al framework di creare automaticamente tutti gli elementi di tipo tag, impostandone la classe CSS className associata ed inoltre di referenziarlo all’interno del componente stesso mediante l’oggetto reference. Infine, chiediamo di fare lo stesso con tutti gli elementi children definiti. Forse spiegandovelo in questo modo vi ho un po confuso le idee, capisco. Quindi prendiamoci un po più di tempo per capire bene questa parte.
In sintesi lo scopo principale dell’oggetto Template è quello di racchiudere un set di configurazione di tutti gli elementi HTML di cui vogliamo il nostro componente sia composto, e non appena il componente stesso verrà inizializzato, verranno automaticamente creati anche tutti gli elementi di cui abbiamo fornito la configurazione. Ma vediamo nel dettaglio quali sono i parametri forniti per ognuno degli elementi HTML che dovrà essere creato.

• tag: tale parametro sta ad indicare per l’appunto la tipologia dell’elemento che dovrà essere creato. Per esempio, impostandone il valore a “div” verrà, come scontato, creato un elemento div all’interno del DOM associato a questo elemento. Un valore di tipo span invece…beh provate ad indovinare
• className: questo parametro indica invece la classe CSS da applicare all’elemento. Questo parametro sarà di vitale importanza in fase di styling del componente. I più attenti di voi avranno sicuramente notato l’utilizzo del valore Ext.baseCSSPrefix. Bene, il valore corrispondente è “x-”. Tale prefisso viene di norma applicato a tutti gli elementi che compongono i vari componenti Sencha Touch. Per esempio: il classico Ext.Panel viene renderizzato tramite classe CSS “x-panel”; L’oggetto Ext.Slider tramite classe “x-slider” e via dicendo. Quindi, cerchiamo di rispettare gli standard, e assegniamo al nostro Progress Element la classe CSS “x-progressbar” e adottiamo lo stesso ragionamento per tutti gli elementi figli.
• reference: questo parametro è decisamente interessante. Specificandone un valore infatti, all’interno di qualsiasi funzione che andremo a definire all’interno del componente stesso, sarà possibile recuperare tale elemento tramite, ad esempio, “this.fillElement”. In questo modo, secondo le nostre necessità, potremo manipolare tali nodi DOM, a nostro piacimento. Per ora vi basti sapere questo, poiché, a breve, approfondiremo ulteriormente l’argomento.
• children: No. Per tutti quelli della mia generazione, vi interrompo subito, dicendovi che con questo parametro non sto parlando del celeberrimo hit anni ’90 di Robert Miles ma semplicemente andiamo ad indicare che tale elemento dovrà contenere al suo interno altrettanti elementi, che seguiranno la medesima configurazione di cui abbiamo appena parlato.

Molto bene ragazzi, ora abbiamo finalmente definito le basi che comporranno il nostro componente, quindi diamo un’occhiata alla console javascript al fine di osservare da vicino come questo componente verrà renderizzato all’interno della nostra applicazione Sencha Touch.

Come potete vedere da questa immagine, tutti gli elementi sono stati creati correttamente all’interno del DOM rispettando la gerarchia che abbiamo definito. Attenzione però, non fate confusione: Io sono in grado di vedere questo risultato perché ho di fatto inserito questo componente all’interno dei un form. La sola definizione del componente senza la relativa creazione, non vi permetterà di ottenere il medesimo risultato. Molto bene, siamo sulla buona strada.
Passiamo quindi al prossimo articolo all’interno del quale andremo a definire le funzioni che permetteranno alla nostra ProgressBar di funzionare correttamente.

• Firefox Nightly 6.0a1
• Opera 11.10
• Chrome 11.0.696.65

L’intento di questo articolo quindi, non è assoltamente quello di andare a rimpiazzare uno standard HTML5 o tantomento quello di creare un inutile componente che potrebbe essere semplicemente realizzato mediante un semplice tag già esistente, ma semplicemente quello di guidarvi attraverso i passaggi che vi permetteranno di realizzare un semplice, ma di fatto molto richiesto, componente Sencha Touch 2, in quanto al momento il framework, non ne mette a disposizione una versione ufficiale.

Pronti…via!

Procediamo dunque con calma, partendo dalla fase di progettazione, infatti, il primo step verso la creazione della nostra ProgressBar, è sicuramente quello di prendere visione di come questo dovrà essere composto da un punto di vista del DOM HTML., quindi, prima di andare oltre, soffermiamoci un istante a dare un’occhiata all’immagine che segue addetta a rappresentare le varie parti che la andranno a comporre.

Come avete potuto constatare, il componente è davvero molto semplice da realizzare in quanto è composto dai seguenti tre elementi.

ProgressBar Element

Questo elemento può essere definito come il “wrapper”, ovvero quel nodo DOM che permetterà di fornire al componente stesso una base all’interno del quale poter racchiudere tutti gli elementi che comporranno la nostra ProgressBar. Inoltre, in fase di styling, potremo decidere di volerla personalizzare con un colore, o un’immagine di sfondo. Bene, in tal caso questo elemento farà proprio al caso nostro.

Fill Element

Beh, penso sia quasi inutile spendere molte parole su questo elemento.
Vi basti sapere che questa div, rappresenterà il livello di avanzamento vero e proprio della ProgressBar andando a ridimensionarsi dinamicamente il corrispondenza al valore impostato.

Text Element

Anche ciò che riguarda questo elemento è abbastanza chiaro…all’interno di questo nodo infatti, andremo ad inserire il valore percentuale di avanzamento della ProgressBar, o, se al componente verrà conferita una particolare configurazione, un eventuale messaggio che vorremmo fosse visualizzato.

Lo Scheletro

Bene, ora che ci siamo fatti un’idea di quali dovranno essere gli elementi che andranno a comporre la ProgressBar, “indossiamo per un attimo gli occhiali a Raggi X” e osserviamo quello che potremmo definire “lo scheletro” del componente, ovvero, i tag HTML associati ad ognuno degli elementi sopra elencati, in modo tale da avere una visione completa e definitiva della sua struttura.

Cosa ne dite? Tutto chiaro fin qui? Nulla di così complicato non vi pare?
Il nostro componente sarà costituito da due div addette a rappresentare rispettivamente il “ProgressBar Element” ed il “Fill Element”, mentre un semplice “span” andrà a contenere il valore percentuale, o messaggio, che dovrà essere visualizzato al suo interno.
Bene, penso non ci sia nient’altro da aggiungere, quindi possiamo proseguire verso la prima parte interessante, ovvero, la scrittura del componente vero e proprio.

Questo tutorial sarà molto esteso, quindi ho deciso di scomporlo in tanti piccoli articoli, ognuno dei quali tratterà le fasi appena elencate. Prestate comunque attenzione: Questo mini gruppo di articoli sono soprattutto rivolti agli sviluppatori con un minimo di familiarità con SenchaTouch 1, quindi, nel caso foste ancora “alle prime armi”, vi consiglio di partire con qualcosa di più semplice, cercando di fare un passo alla volta e, soprattutto, non abbiate fretta. Cercate di dedicare del tempo allo studio del framework stesso anziché partire subito con lo sviluppo di un’applicazione complessa. Tenete sempre bene a mente che stiamo sviluppando per dispositivi mobili, quindi creare un’applicazione “leggera” e performante non è un opzional, ma una necessità.

NavigationView Example

while its documentation, can be reached by this other address

NavigationView Docs

I also point out that the entire Sencha Touch 2 documentation has been completely updated, so it’s now finally possible to see, for example, the complete list of all the events associated with each component as you can see from the screenshot below.

So now you have no more excuses to find events of interest in the documentation by yourself, so just don’t ask the same questions in Sencha forums (joke of course ).
Well, I only miss to show you the address where you can download the latest version of this wonderful framework and to wish you “Happy Coding”

Download Sencha Touch 2 PR3

Finalmente giungo in aeroporto intorno alle 06.00, ma il mio volo non partirà prima della 10.30. Essendo un volo intercontinentale, mi è stato vivamente consigliato dalle compagnie aeree di recarmi in aeroporto almeno tre ore prima dell’ora di partenza prevista, cosa che si è rilevata assolutamente inutile visto e considerato che non è stato possibile consegnare il bagaglio prima delle 09.00, non appena la Lufthansa ha dato il via per il check-in.
In questo lasso di tempo che sembra non passare ma, trovo tuttavia un modo utile di ingannare il tempo: decido di avvolgere la mia amabile valigia in quello che ha tutto l’aspetto di essere un “condom” rosso fuoco

Voglio precisare che questo rivestimento è una protezione che consente di impedire che il bagaglio venga aperto durante le procedure di smistamento, e visto che dovrò affrontare non uno, ma ben tre voli prima di mettere piede su suolo Americano, preferisco evitare in partenza spiacevoli inconvenienti. Quindi, ripeto, soprattutto a tutte quelle persone che una volta fatto scalo a Huston, osservandomi prelevare il mio bagaglio dal nastro trasportatore si sono avvicinate con compassione domandandomi; “Is that your baggage?…I’m so sorry for you!”, si tratta di un rivestimento protettivo, e non di un rattoppo improvvisato applicato al fine di rattoppare una valigia ormai distrutta dagli addetti dell’aeroporto, anche se, osservandola bene, posso ben capire il loro rammarico .
Dopo questa piccola parentesi, passiamo oltre…
Tra un giro in aeroporto qualche caffè e un po di tempo trascorso ad approfondire la mia conoscenza su CSS3 leggendo un ottimo libro acquistato dal Kindle Store, giungono finalmente le 10.30, quindi mi imbarco sull’Airbus A320 di Lufthansa per un volo di circa un ora e mezza, destinazione Francoforte.

Come potete immaginare, un volo intercontinentale richiede un aereo dalle dimensioni, oltre che dalle prestazioni, decisamente superiori rispetto all’Airbus di Lufthansa, e questo presenta tutte le caratteristiche richieste oltre a numerosi confort che mi permetteranno di affrontare comodamente questo lungo viaggio.
Eccitato dal mio primo viaggio in territorio Americano, non riesco a chiudere occhio (a dire il vero non ci ho neanche provato), quindi decido di guardarmi qualche film direttamente dal monitor Touch Screen di undici pollici posto sul retro di ogni sedile. Il sistema di intrattenimento multimediale proposto è davvero ben fornito: posso infatti scegliere quale film guardare scegliendo da una libreria di circa duecento titoli, e selezionare la lingua tra una delle quattro disponibili: Italiano, Inglese, Tedesco e Spagnolo. Ovviamente la lingua selezionata è l’inglese per tutti e cinque film che mi hanno intrattenuto durante questo interminabile viaggio.

Intuisco che molto probabilmente non vi interessa sapere quali fossero, ma voglio elencarveli ugualmente

• Captain America
• Bad Teacher
• Cars 2
• I Pinguini di Mr. Popper
• Piovono Polpette

Così in compagnia di questi film, dopo parecchi caffè e una cena precotta abbastanza gustosa, è giunta l’ora di portare le lancette dell’orologio indietro di otto ore: è finalmente giusto il momento l’ora dell’atterraggio a Huston. Sono le ore 17.35 locali, ovvero circa le 01.35 del mattino in Italia. Ma non è ancora finita..

Dopo il rituale controllo dei passaporti e la scansione delle impronte che mi vedono bloccato per circa mezz’ora nella coda destinata ai non “Non US Citizen”, posso ora ritirare il mio bagaglio, imbarcarlo per il prossimo volo, e, dopo aver superato con successo il “Body Scanner” mi dirigo con passo spedito verso il prossimo terminal.

Dopo una camminata di circa dieci minuti, raggiungo finalmente il terminal, e, mentre mi lascio tentare dall’acquisto di una delle tante felpe souvenir “Huston, abbiamo un problema” (alla quale non cederò ), incontro finalmente le prime facce conosciute, ovvero ragazzi con i quali ho parlato per anni sul forum Sencha, ma che non ho mai avuto il piacere di incontrare di persona. Tra queste anche Nils Dehl il quale avrà un ruolo fondamentale durante la conferenza grazie alle sue eccellenti fotografie, un ottimo showcase di un’applicazione Sencha Touch che terrà nei prossimi giorni e anche grazie all’applicazione sviluppata durante l’Hackahon sponsorizzato dal Google Chrome Team. Ma di questo ne parleremo più avanti. Dopo qualche chiacchiera siamo finalmente pronti per l’imbarco, quindi, dopo aver preso posto sull’aereo e aver dato un’occhiata ad un piccolo match di football americano, è arrivato il momento di affrontare l’ultimo volo di circa un’oretta a bordo del Boeing 737-800 sempre della United Airlines.

Dopo essere decollati alle ore 19.15 circa, sono finalmente giunte le ore 20.00 ed è il momento dell’atterraggio, quindi, solita solfa: dopo aver atteso e prelevato il mio bagaglio fortunatamente ancora integro (e sempre completamente avvolto dal condom color rosso vivo . Ci dirigiamo all’esterno dove, per prima cosa, ripongo immediatamente il mio cappotto invernale visto la temperatura di circa 30°C, e dopo aver discusso su quale fosse il modo migliore per raggiungere l’Hilton hotel, optiamo per un taxi, quindi, dopo circa quindici minuti raggiungiamo finalmente la nostra destinazione finale. Ma questo è soltanto l’inizio… Seguitemi nel prossimo articolo dove parlerò in primis di questa enorme struttura alberghiera che è L’Austin Hilton Hotel…a dire il vero, più che un hotel sembra seriamente essere un intero quartiere

Attualmente il mio lavoro viene svolto da remoto qui in Italia, in attesa dell’imminente trasferimento in California.

In conclusione non mi resta che affermare di essere letteralmente elettrizzato da questa nuova esperienza all’interno di una società da me sempre stimata e conosciuta in tutto il mondo, e, aggiungo, con tutta onestà, che non vedo l’ora arrivi il momento del trasferimento oltreoceano, per abbandonare, se pur un po a malincuore, la mia patria ed affrontare una nuova sfida lavorativa, vivendo, come si suol dire “The American Dream”

Thanks to Nils Dehl for his great SenchaCon 2011 Pictures

Demonstration Video

Presenting Minglle at Startup Riot

• View Catalogs and Products in different languages.
• Orders creation.
• Currency price lists.
• Catalogs navigation by pages, types and brands.
• View products pictures, PDF and videos.
• Calculator.
• And much more…

Actually the application is at version 1.5.0, but we are waiting that the back-office development will be completed before to release it officially. In the meantime, I’m going to show you a funny commercial that was realize to sell the application.

Finally, you can see a demonstration video that will show you how the application works and which features it offers. Don’t care to much at the application layout, because it has to be completed by the graphic designer.

As always, please feel you free to write any feedback about the application