Ciao a tutti,
Eccomi qui, tornato a scrivere dopo un pò di tempo .... il matrimonio porta via un sacco di tempo ai propri hobbies!
Una delle cose che mi ha divertito e mi ha dato da pensare molto in questo periodo è la velocità con cui stanno migliorando lo sviluppo di Silverlight i progettisti di Microsoft. Ho iniziato a dare un'occhiata a WPF circa 1 anno e 1/2 fa quasi per divertirmi (ho scritto in proposito un articolo su MSDN.COM: http://msdn.microsoft.com/en-us/library/bb410039.aspx), mi sono accorto che Silverlight (partito dalla versione 1.0) stava rivoluzionando il modo di vedere il web che Microsoft aveva avuto fino ad allora. Quindi mi sono piano piano interessato a questa nuova tecnologia, oggi stiamo realizzando un intero sito di un squadra di serie A totalmente con questa tecnologia. Tornando a noi, vorrei aprire una serie di articoli dedicati a Silverlight, questo primo è interessante perchè ci permette di creare un'applicazione che richiama un filmato video da un server di streaming.
Prima di iniziare dobbiamo predisporre il nostro PC in modo tale che possa lavorare con Visual Studio 2008, Expression Blend 2 e Silvelight 2.0 Beta 2.
Non mi dilungo sui vari step da seguire per l'installazione dei vari componenti (anche perchè l'installazione del SP1 di Visual Studio 2008 è veramente tediosa), ma vi elencherò in ordine cronologico le patch da installare:
1) Installare il tool per preparare il sistema all'installazione del SP1 di VS 2008
2) Installare SP1 di Visual Studio 2008
3) Installare Microsoft SDK di Silverlight 2 Beta 2
4) Installare Microsoft Silverlight Tools Beta 2 for Visual Studio 2008
5) Installare Microsoft Expression Blend 2 Trial
6) Installare Microsoft Expression Blend 2.5 June 2008 Preview
Adesso siamo pronti per iniziare a creare la nostra prima applicazione Silverlight 2. Per prima cosa apriamo VS 2008 SP1 e creiamo l'applicazione Silverlight 2.0 in C#. (Ved Fig. 1)
Chiamiamo il progetto "sbvideo" e premiamo OK per crearlo, VS 2008 aprirà un'altra schermata dove ci chiederà se vogliamo creare anche un'applicazioen Web che ospiterà al suo interno l'applicazione SIlverlight 2, oppure se vogliamo che venga generata uan pagina HTML direttamente durante la fase di Debugging da VS 2008. Noi confermiamo che vogliamo creare anche un progetto web e premiamo su OK.
Dopo circa 10 secondi avremo il nostro primo progetto SIlverlight 2.0 all'interno del "Solution Explorer". (Ved. Fig. 2)
Facciamo click con il tasto destro sulla pagina "Page.xaml" e selezioniamo la voce "Open in Expression Blend", il sistema aprirà Blend 2 June 2008 Preview (Ved. Fig 3)
Al centro di tutto troveremo la nostra pagina "Page.xaml" (XAML è il meta linguaggio che viene utilizzato da Blend e VS 2008 per la realizzazione di applicazioni WPF e Silverlight), come avrete potuto notare per lavorare bene con Silverlight 2 bisogna avere un grafico che lavori con Blend 2 sulla grafica e uno sviluppatore che utilizzi VS 2008 per la parte di programmazione in C#.
Possiamo iniziare a creare la nostra applicazione. Per prima cosa selezioniamo dalla barra degli strumenti a sinistra il rettangolo (Ved. Fig 4)
Una volta selezionato lo possiamo disegnare all'interno della pagina XAML. Una volta che lo abbiamo disegnato vedremo solo un quadrato bianco, quindi per prima cosa dobbiamo assegnargli un nome e definire un colore.
Per settare il nome del componente (si avete letto bene, tutto quello che disegnamo con silverlight diventerà per noi un componente interamente programmabile da VS 2008) dobbiamo selezionare dal menu a destra la voce "Properties" (Ved. Fig 5).
Nel campo "Name" inseriamo "TVRetro" (Ved. Fig. 6)
Una volta settato il nome dobbiamo selezionare il colore, per fare questo sempre nel menu "Properties" nell'area "Bruches" selezioniamo "Solid Color Brush" (Ved. Fig. 7)
Selezioniamo il colore grigio scuro (Ved. Fig. 8)
Una volta creato il nostro primo quadrato, costruiamone un secondo che dovrà chiamarsi "TVAvanti" e dovrà essere di grigio chiaro. Alla fine il risultato che avremo sarà simile a quello nella figura 9
Ora siamo pronti per inserire il nostro filmato video posizionato all'interno del Windows Media Services. Per prima cosa dobbiamo settare alcune proprietà importati del server di streaming, in modo che possa erogare il filmato video anche via HTTP. Per fare questo dobbiamo aprire il programma di management del server di streaming ed andare nel menu "Properties" (Ved. Fig. 10)
Facciamo click con il tasto destro del mouse sulla voce "WMS HTTP Server Control Protocol" all'interno della voce "Control Protocol". Selezioniamo "Properties", selezioniamo il Radio Button "Use Other Port" indichiamo come porta TCP la 8888 (Ved. Fig 11)
Premiamo il tasto "OK" per confermare, ora dobbiam oattivare il servizio di erogazione via HTTP, per farlo dobbiamo cliccare con il tasto destro sul serivzio e selezionare "Enable". Ora il nostro server (Firewall permettendo, qui sta a voi aprire la porta 8888) è pronto per visualizzare il filmato all'interno del nostro componente Silverlight 2.0.
Torniamo a Blend 2 ed inseriamo all'interno del quadrato grigio chiaro (TVAvanti) un componente "MediaElement". Per prima cosa facciamo click su ltasto "Asset Library" all'interno del menu degli strumenti a sinistra (Ved. Fig. 12)
Si aprirà il menu degli asset (non sono altro che tutti i componenti che possiamo utilizzare all'interno di WPF), spunteremo la voce "Show All" che troveremo sulla destra del menu degli asset (in modo tale da visualizzare tutti gli assett disponibili su Blend 2) e selezioneremo il componente "MediaElement" (Ved. Fig. 13)
Ora possiamo disegnare il nostro componente. Una volta inserito dobbiamo dargli un nome e settare la path da cui dovrà scaricare il file di streaming. Per prima cosa torniamo al menu a destra (sempre avendo selezionato il componente "MediaElement") e selezioniamo la voce "Properties". Nel campo Name inseriamo "sbvideowmf" e nella voce "Media" (Ved. Fig 14) inseriamo la path internet del video (ES: mms://localhost:8888/sbsoft.vmw , troverete un video all'interno del file con l'esempio già realizzato)
Ora lanciamo e testiamo l'applicazione premendo il tasto F5 della tastiera.
Chiaramente l'applicazione può essere migliorata e resa più gradevole inserendo pulsanti e sfondi, nell'esempio che potrete scaricare troverete un esempio molto carino (Ved. Fig. 15)
Scarica l'applicazione completa
Che dirvi, alla prossima e BUONA PROGRAMMAZIONE!
Fulvio
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=
Fulvio Giaccari [MCPD/MCSD/MCT]
CEO
SB Soft S.r.l. - http://www.sbsoft.it
-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=-=