ITBazar, informatica 100%

Un programmatore di nome Alberto Zanot ha avuto un’idea molto originale, ossia quella di creare un Simulatore in Flash per guidare la linea M3 (gialla) della metropolitana di Milano. Il gioco è molto originale, è possibile accelerare, frenare, aprire le porte per far salire i passeggeri, proprio come si fosse nei panni del conducente, buon divertimento, non fate troppo ritardo e attenti a non sballottare troppo i passeggeri

Sito: www.o-zoners.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

Bene, per la serie complichiamoci la vita ecco una nuova serie di guide molto interessanti, l’argomento sarà la creazione in un gioco di carte online multiutente. Quando si da il via ad un progetto di tale portata la cosa principale è buttare giù su carta ogni minimo particolare, la struttura, le classi, i meccanismi, l’interfaccia…

Una volta fatto ciò si può passare alla parte più divertente, programmare!

Alla fine di queste guida che durerà 1 o 2 mesi al massimo chiunque abbia dimestichezza con la programmazione sarà in grado di creare un proprio gioco multiutente!

1. Quali linguaggi utilizzare?

La mia politica sarà quella di non far scaricare al giocatore nessun programma, il gioco avverrà direttamente online. Ecco dunque l’esigenza di un linguaggio client side…Ajax? Java? Flash? Flex?

La risposta è quasi scontata: Flash! Il flash presente una serie di vantaggi rispetto ai concorrenti. Questo linguaggio è stato creato apposta per animazioni interattive, giochi, e quant’altro sia legato alla grafica e all’animazione. Un gioco è qualcosa che deve far divertire l’utente, ragion per cui l’interfaccia grafica deve essere molto curata e accattivante, possibilmente tridimensionale, ma quest’ultimo aspetto non è fondamentale, ci accontenteremo di un 3d finto! Qualche effetto qui e li…e il gioco è fatto!

2. Linguaggio lato server?

Dunque 100% Flash? Ovviamente questo non è possibile. Il gioco che andiamo a creare è multiutente! Questo vuol dire che ogni giocatore deve “vedere” le mosse effettuate dagli altri utenti, è naturale quindi pensare ad un meccanismo che colleghi i giocatori, nel nostro caso 2 o più giocatori. I clients programmati in Flash dovranno comunicare con un server di gioco, che gestirà l’andamento dello stesso. Il server si occuperà di vedere se i giocatori sono ancora online o se hanno abbandonato il gioco, quali sono le loro mosse o le loro azioni in generale. Quale linguaggio allora per la parte server side? Bhe direi che questo punto non è fondamentale. Clients e server si scambieranno piccole informazioni della serie….

“Il giocatore 1 ha scartato un 3 di picche”

“Il giocatore 2 ha abbandonato la partita”

“Il giocatore 3 scrive: ‘Mi sto divertendo come un pazzo…’”

Tutti gli esempi di questa guida per quanto riguarda il lato server saranno in linguaggio PHP. Ho scelto PHP per 2 ragioni:

1. In questo modo potrò utilizzare un server Linux
2. Esistono ottimi framework gratuiti e opensource per far comunicare Flash e PHP…io userò AMFPHP

Se PHP non è tra i vostri linguaggi preferiti potete anche scegliere di usarne uno differente, ASP, Coldfusion (sarebbe l’ideale), ASP.NET, Ruby, Java, e chi più ne ha…..

Ripeto che il server non dovrà fare grandi cose. Il requisito essenziale è quello di potersi connettere ad un database, nel mio esempio userò Mysql ma anche questo è un particolare secondario.

…continua…

Capita spesso di voler salvare un contenuto multimediale, sia esso un video, un filmato flash, una presentazione per poterla poi conservare sul proprio pc. In questo articolo spiegheremo come farlo nel modo migliore.

Per i fortunati utilizzatori del browser gratuito e opensource Firefox, c’è una buona notizia, basta scaricare l’estensione “Fast Video Download”, (la migliore tra quelle provate) per poter salvare in un click contenuti video Youtube. Sicuramente esistono anche estensioni per internet explorer…ma questa può essere l’occasione buona per cambiare browser!

Fast Video Download Add-on

Dopo aver installato l’add-on e aver riavviato Firefox, navigando su una pagine Youtube apparira un icona in basso a destra che consente di scaricare direttamente il file.

Se volete convertire il video in altri formati, si può fare con Linux installando ffmpeg e dando il comando:

ffmpeg -i VideoYoutube.flv -vcodec xvid -acodec mp3 VideoConvertito.avi

In alternativa si possono sempre utilizzare siti come keepvid.com che permette il download di video da tutti i principali portali di streaming tra i quali ovviamente Youtube. Basta inserire l’url della pagina internet e scaricare direttamente il video. Se avete altri siti da segnalare lo potete fare aggiungendo un commento qui o nella pagina “Message Box”. Alla prossima…

L’utente marcolinux mi ha segnalato http://vixy.net, utilizzabile anche da utenti Windows, da questo sito è possibile scaricare i video da youtube e filmati flv in generale già convertiti in formato avi, è anche possibile estrarre l’audio dai video e scaricarlo in formato Mp3! Grazie per la segnalazione!