Dupa parcurgerea acestui walktrough veti stii sa creati un proiect Silverlight, sa intelegeti ce contine acesta si sa il integrati intr-o aplicatie web existenta.
1. Setup
Pentru dezvoltarea de aplicatii RIA cu Silverlight aveti nevoie de:
- Visual Studio 2008 cu Service Pack 1
- Silverlight Developer Tools
- Silverlight 2 developer runtime
- Silverlight 2 SDK
- Silverlight 2 Templates pentru Visual Studio
- Expression Blend 2 cu Service Pack 1
2. Crearea unui proiect Silverlight 2 cu Visual Studio 2008
Vom incepe crearea primei aplicatii Silverlight 2 prin selectarea din meniul Visual Studio 2008 sau Visual Web Developer 2008 (editie express, disponibila spre descarcare gratuit)File -> New Project. Vom numi aplicatia MyFirstSilverlightApplication.
Dupa ce am apasat butonul „OK”, Visual Studio ne va afisa o fereastra de dialog prin intermediul careia putem alege sa ne creem doar un proiect Silverlight specificat la pasul anterior sau, daca se considera necesar, adaugarea automata a unui proiect de tip
- ASP.NET Web Application
- ASP.NET Web Site
- ASP.NET MVC
pentru gazduirea proiectului nostru Silverlight.
Pentru acest walktrough am sa aleg sa genereze automat o pagina de test HTML, deoarece integrarea aplicatiei Silverlight in alte proiecte o vom trata mai jos, la pasul 4 (a doua optiune.)
3. Ce contine proiectul Silverlight 2
Prin crearea unei aplicatii Silverlight se adauga implicit un fisier Page.xaml si App.xaml, desigur, cu fisierele care contin codul asociate corespunzator (care pot sa fie scrise in C#, Visual Basic, Ruby sau Python). Solution Explorer in cazul proiectului nostru arata in felul urmator:
Fisierele XAML sunt niste fisiere de tip XML, care in plus fata de acestea pot sa specifice in mod declarativ interfata cu utilizatorul pentru aplicatiile Silverlight si/sau WPF. Fisierul App.xaml este folosit de obicei pentru declararea de resurse la nivel de aplicatie (stiluri, efecte etc.), in timp ce fisierul App.xaml.cs (App.xaml.vb etc.) asociat este folosit pentru tratarea evenimentelor aplicatiei (Application_Startup, Application_Exit si Application_UnhandledException etc.).
Fisierul Page.xaml este in mod implicit primul control UI care este incarcat in momentul in care aplicatia este rulata. Putem sa personalizam continutul acestei pagini pentru a obtine interfata cu utilizatorul dorita prin adaugarea de controale. Fisierul asociat care contine codul este utilizat pentru manipularea evenimentelor controalelor adaugate anterior in Page.xaml.
Cu toate ca intr-unul din urmatoarele walktrough-uri am sa ma concentrez asupra controalelor si animatiilor, pentru primul proiect Silverlight doresc realizam o interfata cu utilizatorul simpla, dar care totusi sa va ofere o privire de ansamblu asupra modului de lucru cu aceasta tehnologie.
In imaginea de mai sus puteti sa vedeti continutul fisierului Page.xaml. Partea de sus reprezinta designer-ul intregrat in Visual Studio (care insa nu este atat de performant ca si Expression Blend). In acest moment, pagina noastra este goala, deci nu exista nici un control pe care sa il afiseze. In partea de jos a imaginii se gaseste codul XAML al fisierului Page.xaml. Dupa cum se observa, Page este un control de tip utilizator, care implementeaza doua namespace-uri implicite si care este caracterizat printr-o inaltime si o latime (customizabile, desigur). In interiorul acestui control exista un container, numit „LayoutRoot”. [Pentru mai multe detalii despre ce inseamna si care este rolul unui contrainer, va recomand un articol scurt pe care il gasiti aici.] In interiorul acestui container ne vom adauga controalele noastre. Pentru prima aplicatia Silverlight, vom crea un „Hello World” personalizat. Astfel, vom adauga un Canvas. In interiorul Canvas-ului vom mai adauga un TextBlock, un TextBox, un Button si din nou un TextBlock, dupa cum se vede mai jos:
In acest moment, interfata cu utilizatorul ar trebui sa arate astfel:
Pentru tratarea evenimentului care apare in momentul apasarii butonului btnAction, in cazul nostru, deschidem fisierul atasat Page.xaml.cs si modificam metoda btnAction_Click dupa cum este prezentat mai jos:
private void btnAction_Click(object sender, RoutedEventArgs e)
{
txtSayHello.Text = "Hello, " + txtName.Text + "!";
}
Acum putem rula aplicatia (Ctrl+F5 sau click-dreapta pe Page.xaml si alegeti optiunea View in Browser). Cum la inceput am ales sa se genereze automat o pagina de test la rularea proiectului, puteti sa observati ca aplicatia noastra Silverlight este gazduita intr-o pagina HTML denumita TestPage.html, pe care o puteti gasi urmand calea MyFirstSilverlightApplication\MyFirstSilverlightApplication\Bin\Debug\. In acelasi folder, se gaseste si rezultatul compilarii proiectului Silverlight MyFirstSilverlightApplication.xap, folosit pentru adaugarea aplicatiei Silverlight intr-un alt proiect. Mai multe detalii gasiti la pasul 4.
4. Cum adaugam Silverlight 2 unei aplicatii
La rularea proiectului, Visual Studio compileaza automat tot codul si toate fisierele XAML. Rezultatul este un assembley .NET, care la final este „impachetat” impreuna cu toate resursele aplicatiei (imagini, fisiere statice pe care le includeti in proiect etc) intr-un fisier cu extensia .xap. Fisierele .xap folosesc algoritmul de arhivare .zip pentru a minimiza marimea fisierului pe care utilizatorii / clientii trebuie sa il descarce. Pentru adaugarea unui proiect Silverlight la o aplicatie web exista mai multe posibilitati:
Se adauga in pagina un obict dupa modelul urmator:
- Folosind controale ASP.NET pentru Silverlight
Reprezinta abordarea implicita utilizata de Visual Studio la crearea unui nou proiect Silverlight (daca alegeti sa host-ati proiectul intr-un nou proiect web). Pentru ca sa adaugam proiectul nostru la un proiect ASP.NET, trebuie ori sa deschidem un proiect existent ori mai intai sa adaugam un astfel de proiect solutiei noastre. Pentru simplitate, am sa aleg cea de a doua optiune.
La solutia pe care am creat-o la inceputul walktrough-ului, vom adauga un ASP.NET Web Application.
- La aplicatia tocmai creata vom adauga MyFirstSilverlightApplication.xap (click-dreapta pe WebAppWithSilverlight si alegeti Add->Existing Item, navigati la MyFirstSilverlightApplication\MyFirstSilverlightApplication\Bin\Debug\ si selectati fisierul .xap). Din acest moment, mai trebuie indepliniti 2 pasi:
- Adaugarea unui ScriptManager in pagina .aspx
- Drag and drop pe pagina .aspx a fisierului .xap
Gata! Puteti rula aplicatia web si veti obtine rezultatul de mai jos:
Codul sursa a acestui walkthough il gasiti disponibil pentru descarcare aici.