ITBazar, informatica 100%

Adobe Flex, (la piattaforma Adobe basata su Flash che consente di creare programmi desktop o intere pagine web in perfetto stile Web 2.0) è utilizzato da sempre più programmatori che danno vita alle più svariate applicazioni. Una di queste si chiama Taaz. Taaz è un sito gratuito di fotoritocco che consente di inviare immagini del proprio volto e modificare makeup e acconciatura in ogni dettaglio. Rossetto, lucido, matita, mascara, lenti a contatto colorate, fondotinta, phard, capelli per tutti i gusti! La cosa che soprende di questi sito, e la precisione con cui vengono applicate le modifiche, che rende il risultato irriconoscibile rispetto ad una foto reale! Un servizio utilizzabile senz’altro per uso professionale, lo consiglio a tutto il pubblico femminile e non solo. Indirizzo: www.taaz.com

Il datagrid è uno dei componenti più utilizzati quando si sviluppa in Flex, infatti non è soltanto una tabella, ma racchiude molteplici caratteristiche avanzate, può svolgere la funzione di form per l’inserimento e la modifica dei dati consentendo di interagire con i database e come ogni controllo Flex può essere popolato facilmente tramite binding con un file XML.
In questo articolo vedremo come inserire un’immagine o un generico componente in un datagrid.
In questa porzione di codice creiamo il datagrid, e lo associamo al file XML “filexml”.
Il punto fondamentale è la colonna ICONA, nella quale inseriremo delle immagini invece del testo. Per far ciò basta creare un <mx:itemrender>, al suo interno un <mx:component> e quindi inserire l’oggetto da noi desiderato. Possiamo inserire anche un nostro componente, creandolo dal menù Flex. Se il componente da noi creato si chiama comp1, dovremo inserire all’interno di <mx:component> nel datagrid <ns:comp1>. Nell’esempio sottostante invece, ho inserito semplicemente un’immagine, ma non c’è nessuna differenza, il procedimento è identico.

1
2
3
4
5
6
7
8
9
10
11
12
13
14

<mx:datagrid x="10" y="5" dataprovider="{filexml.item}" rowheight="64">
		<mx:columns>
			<mx:datagridcolumn headertext="Icona" datafield="icona">
			<mx:itemrenderer>
				<mx:component>
					<mx:image source="{data.icona}">
					</mx:image>
				</mx:component>
			</mx:itemrenderer>
			</mx:datagridcolumn>
			<mx:datagridcolumn headertext="Directory" datafield="dir">
			<mx:datagridcolumn headertext="Descrizione" datafield="descrizione">
</mx:columns>
</mx:datagrid>

Sopra potete vedere l’esempio appena realizzato, e visualizzare l’intero codice sorgente dell’esempio col tasto destro del mouse.

Flex è la miglior tecnologia client side oggi disponibile, esteticamente di grande effetto, e ricca di componenti già pronti da popolare con sorgenti XML. Php è uno tra i linguaggio di scripting server side più utilizzati, con una vastissima documentazione una estrema facilità di utilizzo ed una affidabilità ormai collaudata.
Questo esempio è una dimostrazione di quanto sia facile creare una pagina in Flex con un back-end PHP, può essere una valida alternativo ai classici Form HTML.

Quello che vi propongo è semplicissima messaggeria, l’utente può lasciare un messaggio e firmarlo.
Ecco qui l’esempio realizzato e funzionante.

Vediamo prima come è strutturato il codice della pagina PHP che permette il salvataggio dei messaggi nel file e il listing dello stesso ma in formato XML

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<?php   $nome = $_POST['nome']; $messaggio = $_POST['messaggio'];   //Se l'utente ha passato delle variabili tramite POST... if($nome && $messaggio) { $f=fopen("messaggi.txt","a"); //Apro il file messaggi.txt in scrittura (a=append) fwrite($f,"$nome#$messaggio\n"); //Scrivo nome e messaggio inserendo il separatore "#" fclose($f); //Chiudo il file }   //Leggo l'intero contenuto del file nella variabile $testo $testo=file_get_contents("messaggi.txt");     //Adesso stampo il contenuto del file in formato XML echo "<main>"; $tnome = strtok($testo,"#"); //Leggo fino al separatore (token) "#"   while($tnome !== false) { echo "<item>"; echo "<nome>$tnome</nome>"; $tmessaggio=strtok("\n"); //Leggo fino al carattere "a capo" echo "<messaggio>$tmessaggio</messaggio>"; echo "</item>"; $tnome=strtok("#"); //Leggo fino al carattere "#" } echo "</main>";   ?>

Questa pagina che chiameremo messaggeria.php, si occupa di scrivere i messaggi inseriti dagli utenti nel file messaggi.txt che verrà salvato sul server. Se l’utente (nel nostro caso tramite Flex) passa tramite POST le variabili nome e messaggi, lo script messaggeria.php salva nome e messaggio nel file di testo e poi stampa il contenuto del file in formato XML.

La pagina visitata con un browser da in output qualcosa del tipo…

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

<main> <item> <nome> Bill Gates </nome> <messaggio> Windows Vista va una favola </messaggio> </item> <item> <nome> Linus Torvals </nome> <messaggio> Anche Linux non se la cava male </messaggio> </item> </main>

Spero che la parte PHP sia abbastanza chiara, in caso contrario vi esorto a lasciare un commento con le vostre domande!

Adesso vediamo come costruire la parte Flex:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

<mx:HTTPService fault="crea_fallito()" result="crea_feedback()" id="creaRequest" url="http://www.itbazar.org/wfkjbn/messaggeria.php" useProxy="false" method="POST">   <mx:request xmlns=""> <nome>{nome.text}</nome> <messaggio>{messaggio.text}</messaggio> </mx:request> </mx:HTTPService>     <mx:DataGrid x="18.5" y="10" width="343.5" height="143" id="datagrid1" dataProvider="{creaRequest.lastResult.main.item}" > <mx:columns> <mx:DataGridColumn headerText="Nome" dataField="nome"/> <mx:DataGridColumn headerText="Messaggio" dataField="messaggio"/> </mx:columns> </mx:DataGrid>

Il blocco HTTPService permette al client Flex di inviare una richiesta (creaRequest) alla pagina “url” con il metodo POST (cioè esattamente come un form HTML) le due variabili nome e messaggio, prendendo i valori dal testo inserito dall’utente in due textbox.

Il DataGrid invece, cioè la tabella dell’esempio, ha come fonte il file XML ricavato dall’HTTPService, questa “fonte” tecnicamente si chiama dataProvider. Ogni riga della tabella quindi sara popolata con il contenuto del tag del nostro file XML.
HeaderText è il titolo della colonna che può essere scelto liberamente, dataField invece deve coincidere con un tag XML contenuto nel tag superiore .

A questo punto ogni volta che vogliamo aggiornare i dati dobbiamo solo inviare un creaRequest.send();

Adobe Flex 3 - Logo

Cos’è il Web 2.0? Niente di concreto, è un’idea, un nuovo modo di concepire internet, o semplicemente la naturale evoluzione dell’informatica e della tecnologia che si ripercuote anche sul web.

Uno dei concetti fondamentali del Web 2.0 sono le RIA, Rich Internet Applications, come dice la definizione stessa delle “Applicazioni Internet”. Dunque nel Web 2.0 i siti internet assumono l’aspetto, le funzioni, i comportamenti e quindi la potenza di un’ applicazione desktop, diventando Internet Applications. A questo punto qualcuno ha pensato di fondere le caratteristiche di web e desktop creando un’unica piattaforma per scrivere applicazioni che funzionino come Internet Applications e come Applicazioni Desktop, stiamo parlando di Adobe Flex 3.

Flex è un framework che consente di creare moderne applicazioni Web utilizzando la tecnologia Flash, ma con particolare attenzione all’aspetto funzionale piuttosto che grafico. Allo stesso tempo Flex può generare applicazioni cosiddette AIR, cioè applicazioni desktop classiche, esteticamente di grande effetto ma veloci da sviluppare grazie al massiccio utilizzo di componenti per tutte le esigenze (Datagrid, Filesystem, Tree, Grafici, repeater,…) già pronti e XML.

Una serie di motivi per cui, Flex è la scelta giusta per creare RIA ed Ajax non lo è.

• Chi usa Ajax deve creare ulteriore codice per mantenere una compatibilità con tutti i browser, perchè essendo basato su Javascript viene interpretato da ogni client in un modo diverso. Lo sviluppatore ha l’onere di effettuare una serie di controlli per mantenere tale compatibilità, riducendo le potenzialità del linguaggio. Inoltre con il release di nuove versioni dei browser lo sviluppatore deve ricontrollare se tale compatibilità è rimasta invariata. Java invece è pesante, lo sviluppo è laborioso e complesso, l’utente deve aver installato una Java Virutal Machine, non presente su tutti i computer, molto lenta da scaricare e di difficile installazione su sistemi non windows. Flex si basa sul plugin Flash Player presente ormai su tutti i browser e su tutti i sistemi operativi, il plugin è leggero da scaricare e il tutto avviene in maniera automatica, compresi i futuri aggiornamenti dello stesso.

• Ajax è un ritorno al passato. Dal punto di vista dello sviluppo, dopo essere passati dalle funzioni, alla programmazione ad oggetti e alla programmazione ad eventi si ritorna allo “Spaghetti Code”. Righe di codice confuse e disordinate sparse qua e la nelle pagine web, i concetti di riusabilità, modularità, scalabilità vanno a farsi benedire. Faccio un esempio, sviluppando con Ajax spesso il tasto “Indietro” del browser non funziona, per evitare ciò Google nelle sue Google Maps ha create un IFrame invisibile in cui viene inviato il risultato della XMLHttpRequest . Questa soluzione non è per niente elegante, anzi contribuisce a generare confusione e a rendere il codice “usa e getta”. Flex è in linea con il moderno concetto di sviluppo, utilizzando in modo massiccio XML, Classi, Componenti, al pari di Java o di qualsiasi altra piattaforma di ultima concezione.

• Flex è opensource, un particolare molto importante per chi crede in questa filosofia, ciò significa che potenzialmente milioni di utenti possono contribuire al miglioramento del codice e alla scoperta di possibili bug in tempi brevi. Opensource vuol dire anche trasparenza di conseguenza sicurezza e affidabilità.

• Flex è flessibile. Nonostante il si basi sulla tecnologia Flash, permette e incoraggia l’utilizzo di CSS in modo da avvicinarsi alla programmazione web tradizionale e mantenere una omogeneità tra le varie “pagine” e la possibilità di effettuare veloci modifiche in futuro. Inoltre Flex permette di incorporare al suo interno praticamente qualsiasi cosa, dai controlli giù presenti a filmati Flash a elementi multimediali di vario genere.

Qui puoi provare tutti i componenti Flex e visualizzarne il codice di esempio