PresentazioneSilverl ight

0 %
100 %
Information about PresentazioneSilverl ight
Entertainment

Published on November 28, 2007

Author: Christo

Source: authorstream.com

Slide1:  A cura di: Arcudi Daniele Piero Toffanin (http://www.pierotofy.it) INDICE::  INDICE: Introduzione Un primo semplice applicativo C# e Silverlight Case Study Cos’è Silverlight?:  Cos’è Silverlight? Introduzione Microsoft® Silverlight™ è un plugin multi-piattaforma, disponibile per più browser per utilizzare le applicazioni multimediali .NET. Silverlight offre un modello di programmazione flessibile che supporta VB.NET, C#, Python e Ruby e si integra con le esistenti applicazioni Web. Ambiente di runtime:  Ambiente di runtime Introduzione Per eseguire un applicativo Silverlight serve: Un browser web. La versione 1.1 alpha di Silverlight supporta: Internet Explorer (MS Windows), Safari (Mac OSX) e Firefox (GNU/Linux, Windows). Il plugin Silverlight, scaricabile gratuitamente dal sito http://www.silverlight.net Tanta pazienza Ambiente di sviluppo:  Ambiente di sviluppo Introduzione Per sviluppare un applicativo Silverlight serve: Microsoft Visual Studio 2008 beta2 (o superiore) Microsoft Silverlight Tools Alpha Refresh for Visual Studio Expression Blend 2 (opzionale) Expression Encoder (opzionale) Expression Design (opzionale) Nota: scaricando il Silverlight 1.1 SDK Alpha è anche possibile sviluppare un’applicazione tramite un semplice editor di testo File necessari (1 di 2):  File necessari (1 di 2) Un file HTML di base (Default.html): Questo è il file che fornisce l’entry-point per il browser. Esso incorpora le funzioni che richiamano il plugin (tramite due files Javascript forniti nell’SDK), oltre a definire il contenuto visualizzato intorno all’applicativo. Primo file Javascript (CreateSilverlight.js): In Visual Studio questo file è chiamato TestPage.html.js. Questo file contiene il metodo createSilverlight. Questo metodo è un template da cui si richiamano i metodi createObject o createObjectEx, definiti in Silverlight.js. Dei parametri specifici su questi due metodi definiscono le dimensioni del plugin nella pagina HTML e referenziano il file XAML che contiene la definizione dell’interfaccia utente dell’applicativo. Secondo file Javascript (Silverlight.js): Questo file definisce i metodi createObject e createObjectEx. Fornisce inoltre il codice per gestire il caso in cui il plugin Silverlight non sia presente sul browser. Per contratto questo file non può essere modificato (consultare il License Agreement del Silverlight SDK per maggiori dettagli). Un primo semplice applicativo File necessari (2 di 2):  File necessari (2 di 2) Un file XAML (Page.xaml): Questo file è referenziato come parametro “sorgente” dal metodo createSilverlight o createSilverlightEx. Definisce l’interfaccia utente che apparirà nel contenuto Silverlight. Il tag principale include le definizioni xmlns minime che sono richieste da un’applicazione basata su Silverlight. Canvas è il tipico elemento principale perché fornisce il supporto più ampio per la composizione di interfacce utente. Se l’applicazione usa codice managed, il progetto deve anche includere: Un file sorgente C# o VB.NET (Page.xaml.cs oppure .vb): Questo file compila nell’assembly il codice managed per i gestori d’evento. Il codice deve definire la stessa classe specificata nel valore x:Class di Page.xaml. I gestori d’evento devono essere scritti come membri di questa classe. Il codice sorgente non dev’essere necessariamente fornito; solo l’assembly di output è necessario per l’applicazione finale. Un primo semplice applicativo I file necessari:  I file necessari Un primo semplice applicativo In questo esempio cercheremo di creare un’applicativo d’esempio che dovrà caricare il plugin Silverlight e disegnare al suo interno alcune figure. Il programma sarà composto dai seguenti files: Un file HTML che fa da host per l’istanza del plugin Silverlight (index.html) Un file Javascript contenente codice preso dall’SDK (Silverlight.js) Un file XAML che conterrà il codice delle figure (mioxaml.xaml) Un ulteriore file Javascript che supporti il file HTML (createSilverlight.js) Prima di procedere con lo sviluppo sarà necessario assicurarsi di aver installato il plugin Silverlight dall’indirizzo: http://go.microsoft.com/fwlink/?LinkID=88923&clcid=0x409 Non avremmo bisogno di ulteriori strumenti dal momento che utilizzeremo Notepad per creare questo semplice applicativo. Index.html:  Index.html Un primo semplice applicativo <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>A Sample HTML page</title> <script type="text/javascript" src="Silverlight.js"></script> <script type="text/javascript" src="createSilverlight.js"></script> </head> <body> <!-- Where the Silverlight plug-in will go--> <div id="mySilverlightPluginHost"> </div> <script type="text/javascript"> // Retrieve the div element you created in the previous step. var parentElement = document.getElementById("mySilverlightPluginHost"); // This function creates the Silverlight plug-in. createMySilverlightPlugin(); </script> </body> </html> File dove è presente la funzione createObject File dove è presente la funzione createSilverlight In questa parte viene richiamata la funzione che caricherà il plugin Index.html Riferimento DOM all’elemento che conterrà il plugin createSilverlight.js:  createSilverlight.js Un primo semplice applicativo function createMySilverlightPlugin() { Silverlight.createObject( “mioxaml.xaml", // Valore proprietà sorgente (nome del file contenente l’interfaccia utente) parentElement, // Riferimento DOM all’oggetto che conterrà il plugin "mySilverlightPlugin", // Un valore stringa di riferimento che identificherà il plugin { width:'300', // Larghezza plugin height:'300', // Altezza plugin inplaceInstallPrompt:false, // Determina se installare sul momento oppure visualizzare un errore background:'#FFFFFF', // Colore di sfondo (bianco) isWindowless:'false', // Determina se visualizzare il plugin in modalità “senza-finestra” o no framerate:'24', // Numero massimo di frames (FPS) version:'1.0' // Versione di Silverlight da usare (in questo esempio useremo la 1.0) }, { onError:null, // Evento onError onLoad:null // Evento onLoad }, null); } createSilverlight.js Silverlight.js:  Silverlight.js Un primo semplice applicativo /////////////////////////////////////////////////////////////////////////////// // // Silverlight.js (1.1 Preview) version 1.0 // // This file is provided by Microsoft as a helper file for websites that // incorporate Silverlight Objects. This file is provided under the Silverlight // SDK 1.1 license available at http://go.microsoft.com/fwlink/?linkid=94243. // You may not use or distribute this file or the code in this file except as // expressly permitted under that license. // // Copyright (c) 2007 Microsoft Corporation. All rights reserved. // /////////////////////////////////////////////////////////////////////////////// ………….. Silverlight.js Il file Silverlight.js lo andremo a prendere dalla directory ~\Tools del Silverlight SDK (http://msdn.microsoft.com/vstudio/eula.aspx?id=c8bf88e7-841c-43fd-c63d-379943617f36). Supponendo che l’SDK sia installato in C:\Programmi\Silverlight SDK, copieremo il file C:\Programmi\Silverlight SDK\Tools\Silverlight.js nella directory root del nostro progetto. In base a quanto scritto nella licenza fornita da Microsoft, questo file non dev’essere modificato. Per maggiori dettagli rimandiamo a: http://go.microsoft.com/fwlink/?linkid=94243 Mioxaml.xaml:  Mioxaml.xaml Un primo semplice applicativo <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"> <Ellipse Height="200" Width="200" Stroke="Black" StrokeThickness="10" Fill="SlateBlue" /> </Canvas> mioxaml.xaml Crea un ellisse all’interno del Canvas Dimensioni Colore di riempimento e proprietà del bordo Ogni file XAML Silverlight comincia con un tag <Canvas> che contiene la dichiarazione del namespace di Silverlight e un attributo xmlns che dichiara il namespace di Silverlight assieme ad un attributo xmlns:x che dichiara il namespace XAML Congratulazioni! Avete appena concluso la vostra prima applicazione Silverlight. Ora aprite il file index.html con il vostro browser e ammirate il risultato. La gestione degli eventi:  La gestione degli eventi C# e Silverlight In Silverlight è possibile suddividere gli eventi in quattro “categorie”: Eventi gestiti da C# e scatenati da Javascript Eventi gestiti da Javascript e scatenati da C# Eventi gestiti da C# e scatenati da C# Eventi gestiti da Javascript e scatenati da Javascript In questa breve presentazione prenderemo in esame solamente il 3° tipo di eventi, che sono quelli più immediati, utili, e richiedono un minor tempo di implementazione. E’ possibile comunque trovare informazioni su come gestire gli altri tipi di eventi dal sito http://www.silverlight.net/ La gestione degli eventi:  La gestione degli eventi C# e Silverlight Dopo aver creato una nuova soluzione Silverlight da Visual Studio 2008 beta 2, ci ritroveremo con i seguenti files: Facendo doppio click su Page.xaml.cs sarà possibile visualizzare il codice C# utilizzato dall’applicazione Silverlight. Essendo Silverlight attualmente ancora in fase di sviluppo (1.1 alpha), non esistono controlli (Button, Textbox, Listbox, ecc.) che ci permettano di effettuare delle dimostrazioni. In future versioni di Silverlight si spera che questi componenti verranno resi a disposizione (assieme ad un editor di interfaccia che per il momento non è disponibile). Per il momento l’uso di questi controlli è possibile solamente tramite l’uso di una libreria esterna. Le librerie GOA Winforms:  Le librerie GOA Winforms C# e Silverlight Di fronte alla mancanza dei controlli Button, Textbox, Listbox, ecc. è intervenuta Netikatech (http://netikatech.com) che ha messo a disposizione degli sviluppatori un set di librerie per inserire alcuni controlli all’interno di un applicativo Silverlight. Dopo aver scaricato le librerie GOA Winforms dal sito ufficiale (http://www.netikatech.com/downloads/default.aspx) e seguendo la procedura descritta all’indirizzo http://community.netikatech.com/quickstarts/silverlight/ è possibile inserire bottoni, caselle di testo e altri controlli all’interno della nostre applicazioni. Le librerie GOA Winforms:  Le librerie GOA Winforms C# e Silverlight Gestire i controlli GOA in un applicativo Silverlight non è per nulla diverso dal gestire dei normali controlli in una classica applicazione C#. Il codice del Form principale, non appena si crea una soluzione Silverlight in combinazione con le librerie GOA, appare come: public class MyForm : System.Windows.Forms.Form { private System.Windows.Forms.Button btnSeleziona; private Button btnAggiorna; private Button btnInserisci; private Button btnElimina; private ListBox lbAnagrafica; private Label lblMostraNome; /* continua… */ Una vista molto familiare, no? La gestione degli eventi (2):  La gestione degli eventi (2) C# e Silverlight Ritornando al discorso degli eventi quindi, per visualizzare una MessageBox alla pressione di un bottone è sufficiente scrivere: /* Nel metodo InitializeComponent() */ this.btnSeleziona.Click += new System.EventHandler(btnSeleziona_click); /* Nell’implementazione della classe */ private void btnSeleziona_click(object sender, EventArgs e) { MessageBox.Show(“Hello World!”); } Alla pressione del bottone verrà ora visualizzato il messaggio “Hello World!”. Accesso a database:  Accesso a database C# e Silverlight Nella versione 1.1 alpha, classi come SqlConnection, SqlDataReader, SqlCommand, ecc. non sono disponibili. L’unico sistema per accedere al database si basa sul fatto che Silverlight permette di appoggiarsi ad uno o più Web Services e quindi, costruendo una ASP.NET Web Service Application nella stessa soluzione del progetto Silverlight è possibile raggirare questa limitazione. Prima di collegare il progetto Silverlight al Web Service, è necessario assicurarsi che entrambi risiedano SULLO STESSO SERVER. Questo a causa del fatto che (per motivi di sicurezza?) Silverlight non permette di usare percorsi che facciano riferimento ad un server esterno (se voglio usare i Web Services di ViaMichelin ad esempio, non posso, a meno di non caricare l’applicativo Silverlight sul sito di ViaMichelin stessa). E’ necessario quindi impostare come segue le proprietà del progetto Silverlight e quelle del Web Service: click con tasto destro sul progetto, proprietà, scheda WEB, selezionare USE IIS WEBSERVICE, sostituire LOCALHOST con il nome del computer locale. Accesso a database:  Accesso a database C# e Silverlight Applicativo Silverlight Web Service DATA BASE Nota: lo stesso discorso vale anche per l’I/O su file e le connessioni di rete Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Dopo aver scaricato le librerie GOA Winforms e aver creato un nuovo progetto Silverlight, abbiamo configurato l’IIS per supportare i WEBSERVICES. Abbiamo creato il database di prova con SQLSERVER2005 Abbiamo creato una tabella anagrafica (ID,NOME, COGNOME, ecc.) nel database. Abbiamo creato all’interno della stessa soluzione un WEBSERVICE il cui scopo è di fare da “proxy” tra l’applicativo silverlight e le classi del framework.net nella loro totalità in quanto, un progetto silverlight, non permette di richiamare tutte le classi del framework (es. le classi della gestione del database). Abbiamo aggiunto un riferimento WEB dal progetto silverlight al WEBSERVICE Nota: per richiamare i metodi dal progetto Silverlight è necessario de commentare la riga // To allow this Web Service to be called from script, using ASP.NET AJAX, uncomment the following line. [System.Web.Script.Services.ScriptService] Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Abbiamo costruito una classe che usa gli URL http://maps.google.com/maps/geo?output=xml&key=chiave_google&q=indirizzo e http://maps.google.com/mapdata?latitude_e6=12345&longitude_e6=123456&zm=1524&w=500&h=500&cc=NO rispettivamente per trovare le coordinate geografiche dato un indirizzo e visualizzare una mappa date le coordinate geografiche. Abbiamo aggiunto un nuovo campo nel database per memorizzare l’immagine delle mappe Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Abbiamo costruito una funzione che permette di convertire il formato dell’immagine fornita da google, da gif, in jpeg perché silverlight, nella versione alfa 1.1, non supporta le immagini gif. public static class ImageConverter { /// <summary> /// Write Image to browser /// </summary> public static byte[] ConvertToJpg(Bitmap Image) { //HttpResponse Response; MemoryStream objStream = new MemoryStream(); try { MemoryStream result = new MemoryStream(); Image.Save(result, System.Drawing.Imaging.ImageFormat.Jpeg); return result.GetBuffer(); } catch (Exception e) { throw e; } } } Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Abbiamo costruito una nuova pagina Asp.Net per prendere l’immagine memorizzata dal database e restituirla come output al richiedente, questo perché silverlight non permette di usare URL assoluti per visualizzare immagini. È necessario avere una pagina all’interno del server locale in modo da poter utilizzare un URL relativo del tipo: /ViewImage/ViewImage.aspx?id=x. Anche per usare immagini abbiamo dovuto ricorrere ad uno stratagemma poco elegante, usando una classe costruita sul momento che gestisce la creazione di un controllo Xaml canvas (ci auguriamo che tutto questo venga migliorato nelle versioni successive di Silverlight). Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study public class MyAsyncImageBox: XamlCanvas { private System.Windows.Controls.Image image; private string name; public MyAsyncImageBox(string name) { this.name = name; } protected override void OnCreateControl() { base.OnCreateControl(); string xamlString = "<Canvas x:Name=\"" + this.name + "\""; xamlString += " xmlns=\"http://schemas.microsoft.com/client/2007\""; xamlString += " xmlns:x=\"http://schemas.microsoft.com/winfx/2006/xaml\""; xamlString += " x:Class=\"FriendsLocator.MyImageCanvas;assembly=ClientBin/FriendsLocator.dll\""; xamlString += " ></Canvas>"; Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study this.AddFromXaml(xamlString, "Canvas_Loaded"); image = new Image(); image.Stretch = Stretch.Fill; this.Canvas.Children.Add(image); } public void GetImage(string imageName) { Downloader downloader = new Downloader(); downloader.Open("GET", new Uri(imageName, UriKind.Relative)); downloader.Completed += new EventHandler(Downloader_Completed); downloader.Send(); } public void Downloader_Completed(object sender, EventArgs e) { image.SetSource((Downloader)sender, null); } } Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study MyAsyncImageBox imgMappa; imgMappa = new MyAsyncImageBox("imgMappa"); imgMappa.Location = new Point(50, 210); imgMappa.Size = new Size(500, 500); imgMappa.GetImage("/immagine_url_assoluto.jpg"); Poi facilmente richiamabile dal form principale con: Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Durante lo sviluppo della funzione per lo zoom, abbiamo riscontrato un bug nell’interazione tra silverlight e i web services. A quanto pare chiamare un WebMethod dichiarato come void genera un errore durante la chiamata del metodo da silverlight. E’ possibile raggirare il problema con una tecnica priva di logica: facendo ritornare un valore dal metodo (una stringa?) anche se non serve. Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Per l’inserimento di nuovi record abbiamo creato un’apposito metodo sul Web Service che prende come parametro un oggetto Nominativo (una classe che astrae il concetto di nominativo, incapsulando dei membri quali nome, cognome, indirizzo, ecc.) ed esegue una query di INSERT nella tabella del database. Una volta inserito il nuovo record, il Web Service si occupa anche di convertire l’indirizzo del nominativo in coordinate geografiche, di prelevare e successivamente di salvare i bytes prelevati da Google Maps della mappa corrispondente a tali coordinate in un campo della tabella (bytes che verranno poi utilizzati dalla nostra pagina ASP.NET per visualizzare l’immagine in formato JPEG). Successivamente all’inserimento del record, richiamiamo anche i metodi che si occupano di aggiornare la lista dei nominativi sull’applicativo Silverlight e di visualizzare a schermo la mappa del nominativo selezionato. Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Per l’aggiornamento dei record abbiamo creato un’apposito metodo sul Web Service che prende come parametro un oggetto Nominativo ed esegue una query di UPDATE nella tabella del database. Una volta aggiornato il record sul database i dati vengono cambiati anche sull’interfaccia e quindi senza dover fare il fetch dei dati. Al momento dell’UPDATE viene anche aggiornata la mappa corrispondente all’indirizzo e città. Applicativo Silverlight per la gestione di un’agenda:  Applicativo Silverlight per la gestione di un’agenda Case Study Per la cancellazione dei record la procedura è sempre la stessa: un metodo del Web Service prendendo un oggetto Nominativo si occupa di eseguire una query di DELETE a cui segue una cancellazione “lato client” direttamente sull’interfaccia per non eseguire ulteriori fetch per aggiornare i dati visualizzati. Per rendere poi l’interfaccia più gradevole abbiamo aggiunto delle proprietà CSS sul tag <DIV> per aggiungere un bordo intorno al contenuto Silverlight e abbiamo spostato il contenuto a centro pagina (sempre modificando l’HTML dal file Testpage.html). Considerazioni personali:  Considerazioni personali “Durante lo studio e lo sviluppo di questo applicativo siamo giunti alla conclusione che Silverlight è una tecnologia dal potenziale enorme, infatti permette di scrivere applicazioni portabili, eseguite dal lato client (a differenza delle applicazioni classiche ASP.NET dove sono necessari frequenti aggiornamenti della pagina per interagire con l’applicazione, risultando in un maggior numero di dati trasferiti durante il dialogo client-server). Essendo tuttavia ancora in versione Alpha, secondo noi questa tecnologia ora come ora è inutilizzabile dal punto di vista aziendale, manca un editor di interfaccia, i controlli disponibili sono limitati al controllo Canvas (che costringe a doversi “inventare” i controlli, anche quelli più basilari, da zero), la documentazione è scarsa, sono presenti diversi bug e altri piccoli difetti che nel loro complesso, rendono lo sviluppo, anche di una semplice applicazione, lungo, difficoltoso e quindi, anti-economico. È nostra opinione che si dovrà attendere come minimo il rilascio della prima beta per poter utilizzare questa tecnologia anche in ambito business.” - Piero Toffanin e Daniele Arcudi

Add a comment

Related presentations