bits4beatsIdee e pensieri di Roberto Rossi

Ecco un interessante articolo su Sencha Touch pubblicato sul canale degli articoli tecnici di IBM, developerWorks.

Sencha Touch è un framework Javascript, nato dall’evoluzione del potente e popolarissimo ExtJS, e orientato al mondo mobile, principalmente Android e iOS.
Il suo obiettivo è quello di costruire interfacce web evolute per tali dispositivi che assomigliano a delle vere e proprie applicazioni native.
Il framework si basa su Javascript e sul potere espressivo del nuovo linguaggio di markup HTML5.

L’articolo, scritto da Michael Galpin, Software Architect presso eBay, presenta una semplice applicazione testata sia in un dispositivo Android che in un iPhone.

Ecco il link diretto all’articolo per chi volesse approfondire.

Recentemente ho avuto il bisogno di riscrivere completamente un’applicazione web.
Penso di conoscere bene html, css e javascript ma, nonostante questo, nella scrittura di applicazioni web ho dovuto spesso risolvere gli stessi problemi, rispondere alle stesse esigenze e scrivere in diverse occasioni lo stesso codice.

Per questi motivi mi sono guardato un pochino attorno cercando una libreria Javascript che mettesse in mano dello sviluppatore un ambiente con oggetti pronti all’uso, semplici da configurare, carini da vedere e potenti allo stesso tempo.
Mi sono concentrato sulla ricerca di toolkit Javascript e non su altro perché avevo necessità di sfruttare tale libreria con differenti tecnologie server side.
Ovviamente un aspetto fondamentale di valutazione è che il toolkit funzioni con tutti i browser web più diffusi (Firefox, Safari e Chrome, Internet Explorer … IE è volutamente stato messo per ultimo).

Indubbiamente anche in questo caso il panorama non è assolutamente deludente e il mondo open source offre come al solito le sue superbe soluzioni.
I più famosi in quest’ambito sono: Dojo, Prototype, Scriptaculous, jQuery (anche se più che un toolkit è un nuovo approccio Javascript alla selezione degli oggetti) , SmartClient, ed ExtJS (anche nella sua variante Yui).

Dopo aver visto gli esempi proposti nel sito e aver fatto alcuni test ho provato a svilupparla con ExtJS.

Rotte le prime iniziali difficoltà per impostare l’ambiente con tutte le opportune dipendenze, mi sono subito accorto di avere a che fare con una libreria veramente matura, flessibile e molto performante.
Il forum della comunità è attivissimo, la documentazione (presentata anch’essa tramite un’applicazione web ExtJS) è comodissima da navigare e ben scritta, i bug sono pochi e di poco rilievo, perlomeno nella versione che ho provato e che sto ancora usando, cioè la 2.2.1 (il ramo attuale è alla major release 3.x).

Essendo una libreria già molto famosa, numerosi sono i tool di contorno alla libreria stessa. C’è chi l’ha usata per generare un template wordpress (http://extjswordpress.net/), chi l’ha sfruttata per generare un desktop virtual su web, chi ci ha scritto un software di collaborazione.

Lo showcase dimostrativo è veramente molto ricco e ci sono oggetti già pronti per qualsiasi situazione.
Gli widget che sto usando più di tutti sono le griglie (con la possibilità di caricare i dati in modo asincrono via JSON), i form, le finestre flottanti, i tab e gli accordion.
Con ExtJS è anche semplicissimo implementare caricamenti e callback via AJAX mettendo infatti a disposizione degli oggetti statici per l’invio e la ricezione dei dati serializzati.

Per gli amanti del Google Web Toolkit c’è anche una versione di ExtJS integrata con GWT chiamata GXT. Il suo sviluppo, pur se con qualche ritardo dovuto a una partenza successiva, sta procedendo bene e contano a breve di allineare le funzionalità ExtJS con GXT.

Dal punto di vista della licenza ExtJS ha adottato una coercizione “forte” di chi la utilizza verso l’open source basata sul principio del Quid Pro Quo.
Chi vuole utilizzare ExtJS per progetti open source è liberissimo di farlo chi invece intende utilizzarla per progetti non “open” deve acquistare una licenza commerciale.
In realtà fino alla versione 2.x la politica di licenza era leggermente diversa (LGPL) e permetteva di utilizzare la libreria anche in progetti closed source.

In questo post voglio presentare gli step necessari per l’utilizzo di FCKEditor come tipo campo per il web toolkit javascript ExtJS 2.x.

Quasi tutte le informazioni sono state ricavate da questo preziosissimo thread nel forum di ExtJS e dal contributo congiunto di molti utenti e sviluppatori.

1. Prima di tutto bisogna procurarsi l’editor fckeditor nella precedente versione stabile (io ho usato la 2.6.5), scaricare il file zip e scompattarlo all’interno di una directory all’interno della web application.
2. Poi bisogna copiare il file all’interno della cartella fckeditor chiamato fckconfig.js in una directory a vostra scelta e rinominarlo: fckcustomconfig.js.
3. Quindi bisogna creare il file dell’estensione per ExtJS. Potete scaricare la mia versione da qui e inserirlo nella stessa directory in cui si trova il file fckcustomconfig.js.
4. A questo punto bisogna fare in modo che il nostro documento html contenga tutte le definizioni necessarie per caricare l’estensione in questione.
   Inserire quindi nell’head html del documento tali dichiarazioni.
   

   <script type="text/javascript" src="<percorso>/fckeditor/fckeditor.js"></script>
   
   	<script type="text/javascript" >
   		//change the config with the correct dirs
   		var oFCKeditorOptions = {
   		    BasePath : '<percorso>/fckeditor/'
   		    ,Config : {
   		    	BaseHref 	: window.location.href
   		        ,SkinPath	: '<percorso>/fckeditor/editor/skins/office2003/'
   		        ,CustomConfigurationsPath	: '<percorso>/fckcustomconfig.js'
   		        ,ProcessHTMLEntities 		: true
   		        ,ProcessNumericEntities 	: false
   		    }
   		    ,AllowQueryStringDebug 			: false
   		};
   	</script>
   
   	<script type="text/javascript" src="<percorso>/Ext.ux.FCKEditor.js"></script>
   

   Dove <percorso> e’ il percorso in cui si trovano fckeditor, il file Ext.ux.FCKEditor.js e il file fckcustomconfig.js.

5. Come ultimo passo, inserire il codice javascript per la gestione del campo di tipo fckeditor:

   			{
   			    xtype:'fckeditor',
   			    name:'body',
   			    id:'body',
   			    fieldLabel: 'label',
   			    height: 400,
   			    editorWidth: 650,
   			    toolbarSet: 'Default',
   			    value: 'some text...'
   			}