Silverlight - Tutorial 1 - Layout Management

SilverLight pune la dispozite mai multe layout-uri pentru design-un aplicatiei web, ceea ce permite un control foarte bun asupra pozitionarii controls-urilor din aplicatia noastra.

Cele mai folosite layout-uri sunt :

* Canvas
* StackPanel
* Grid

Canvas

Este un layout destul de simplu. In acest layout se introduc controls-uri, iar aceastea de pozitioneaza folosind proprietatile Canvas.Left si Canvas.Top care pot fi atasate componentelor care se afla in canvas.

Iata si un exemplu foarte simplu :

< UserControl x:Class="SilverlightApplication1.Page"

xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"

xmlns:x=http://schemas.microsoft.com/winfx/2006/xaml

Width="400" Height="300">

< Canvas Background="AliceBlue">

< Button Content="Button 1” Width="100" Height="50" Canvas.Left="100" Canvas.Top="100">< /Button>

< Button Content="Button 2" Width="100" Height="50" Canvas.Left="100" Canvas.Top="200">< /Button>

< /Canvas>

< /UserControl>

Codul highlighted arata modul in care sunt folosite proprietatile Canvas.Left si Canvas.Top aplicate unor component-uri care se afla pe Canvas, in acest caz doua Buttons. Culoarea backround-ului am completat-o folosind auto-complete-ul pus la dispozitie de VS2008. Numele culorilor sunt destul de explicite.

Pagina web creata o sa arate cam asa :



Canvas-ul este un layout care poate fi folosit cu mare usurinta, insa el nu permite o prea mare libertate de pozitionare a component-urilor. Daca avem mai multe component-uri pozitionarea lor folosind numai proprietatile Canvas.Left si Canvas.Top ar fi anevoioasa.

O mai mare libertate o permite StackPanel layout.

StackPanel Dupa cum ii spune si numele, componentele din StackPanel sunt asezate unele sub altele.Un exemplu simplu de folosire a acestui layout :< UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> < StackPanel Background="AliceBlue"> < Button Content="Button 1” Width="100" Height="50" Margin="10">< /Button> < Button Content="Button 2" Width="100" Height="50" Margin="10">< /Button> < Button Content="Button 3" Width="100" Height="50" Margin="10">< /Button> < /StackPanel>< /UserControl> Proprietatea Margin stabileste distante intre component-uri.

Pagina web obtinuta ar trebui sa arate cam asa :

De asemenea StackPanel permite si “insiruirea” component-urile daca folosim proprietatea Orientation. < UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> < StackPanel Orientation="Horizontal" Background="AliceBlue"> < Button Content="Button 1” Width="100" Height="50" Margin="10">< /Button> < Button Content="Button 2" Width="100" Height="50" Margin="10">< /Button> < Button Content="Button 3" Width="100" Height="50" Margin="10">< /Button> < /StackPanel>< /UserControl>

Propietatea Orientation este implicit Vertical.

StackPanel ofera , in anumite cazuri, o flexibilitate mai buna decat Canvas, dar pentru majoritatea paginilor web nu este de ajuns.
Grid Acest layout ofera cea mai mare flexibilitate. Component-urile de pe el pot fi asezate pe mai multe randuri si coloane. Conceptual , grid layout este la fel ca HTML Table . < UserControl x:Class="SilverlightApplication1.Page" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Width="400" Height="300"> < Grid Background="AliceBlue"> < Grid.RowDefinitions> < RowDefinition Height="60"/> < RowDefinition Height="60"/> < RowDefinition Height="60"/> < /Grid.RowDefinitions> < Grid.ColumnDefinitions> < ColumnDefinition Width="110"/> < ColumnDefinition Width="110"/> < ColumnDefinition Width="110"/> < /Grid.ColumnDefinitions> < Button Content="Button 1" Width="100" Height="50" Grid.Column="1" Grid.Row="0"/> < Button Content="Button 2" Width="100" Height="50" Grid.Column="2" Grid.Row="1"/> < Button Content="Button 3" Width="100" Height="50" Grid.Column="0" Grid.Row="1"/> < Button Content="Button 4" Width="100" Height="50" Grid.Column="1" Grid.Row="2"/> < /Grid> < /UserControl> RowDefinition si ColumnDefinition definim dimensiunile liniilor si coloanelor. Atunci cand adaugam un component folosind proprietatile Grid.Column si Grid.Row specificam linia si coloana pe care se va afla acesta.

Observam ca mai sus am creat doar 3 linii si 3 coloana de dimensiuni fixe. Daca dorim ca dimensiunea sa nu fie una fixa, ci sa fie “restul” ramas din dimensiunea ferestrei , in loc de o valoare folosim “*”.
< RowDefinition Height="60"/>< RowDefinition Height="*"/> Astfel prima linia va avea inaltimea 60 iar cea de a doua va avea ca Height restul ferestrei. Rezultatul codului de mai sus ar trebui sa fie acesta :

Silverlight - Introducere

SilverLight este alternativa celor de la Microsoft pentru Flash. Inca nu a ajuns sa inlocuiasca produsul celor de la Adobe, dar este intr-o continua crestere de popularitate.

Ce este SilverLight ?

SilverLight este un plug-in pentru browser-ere care face dezvoltarea web mult mai interesanta decat daca am folosi HTML si JavaScript. Chiar daca este un produs Microsoft, SilverLight-ul este independent de platforma, el putand fi utilizat foarte bine si pe sisteme ce ruleaza MAC sau Linux. De asemenea SilverLight-ul este independent si de motorul de cautare : Internet Explorere, FireFox, Safari etc.

Versiunea 1.0

SilverLight 1.0 este foarte asemanator cu Flash Player-ul celor de la Adobe. Ofera posibilitatea de a vizualiza animatii si orice alt fel de documente multimedia, pastrand tot odata compatibilitatea cu HTML. SilverLight este compatibil cu multe formate audio si video : mp3, WMA, WMV etc. In acelasi timp SilverLight se comporta foarte bine si atunci cand vine vorba de streaming, fisierele media putand fi rulate pe masura ce se incarca, fara a fi necesar download-ul lor.

Interfata cu utilizatorul pe care SilverLight o ofera este XAML (Extensible Application Markup Language).

Daca utilizatorul nu are SilverLight instalat , atunci cand deschide o pagina web care necesita acest plug-in pentru a putea fi vizualizata, in motorul de cautare ii va aparea un pop-up care ii ofera posibilitea de a instala SilverLight foarte usor si rapid ( plug-in-ul are doar 1.2MB ).

Versiunea 1.1

Incepand cu aceasta versiune SilverLight ofera posibilitatea de a dezvota cu adevarat aplicatii web.

Daca in versiunea 1.0 SilverLight era compatibil doar cu HTML si JavaScript, acum aceasta compatibilitate s-a extins la C#,VB.Net sau orice alte tehnologii .Net.

In SilverLight 1.1 au fost introduse o multitudine de clase ce faciliteaza lucrul cu tehnologii ca LINQ, generics, multithreading. De asemenea exista support si pentru manipularea XML-urilor, colectiilor , interfetelor I/O etc.

Cu toate imbunatarile aduse , SilverLight 1.1 inca nu are incluse controlere de baza ( buttons, images etc) .

Versiunea 2.0

Odata cu aparitia versiunii 2.0, SilverLight poate sa dezvolte cu adevarat aplicatii web. In continuare codul folosit este XAML ( acesta este o interfata asemanatoare cu HTML-ul : programare declarativa, tag based ), se pastreaza compatibilitatea cu tehnologiile .Net, iar Visual Studio 2008 ofera posibilitatea de a creea proiecte de tip SilverLight 2.0.
Iata un exemplu de program simplu in SilverLight, pentru a vedea asemanarea dinte XAML si HTML.

Proiectul este creeat in Visual Studio 2008. Evident ar putea fi creeat si in alte SDK-uri( Eclipse , devC++ etc.), dar eu prefer VS 2008 datorita Intelisence-ului ( auto-complete-ul VS-ului care mi se pare foarte util ).


Grid – layout-ul suprafetei de afisare.

Button – user control-ul introdus.

x:Name – numele user control-ului.
Iar rezultatul in urma compilarii proiectului este urmatorul.


Ce am vazut mai sus este un exemplu foarte simplu ( practic un “Hello World” in SilverLight ) pe care l-am dat doar pentru a arata codul XAML care este in “spatele” aplicatiilor SilverLight.

Aceasta a fost doar o introducere in SilverLight si cateva cuvinte despre evolutia SilverLight-ului. Ce este de retinut este faptul ca SilverLight este o tehnologie proprietare Microsoft, independenta de platforma, care vrea sa fie o alternativa la Flash-ul celor de la Adobe.

Pentru a va familiariza si mai mult cu SilverLight-ul, cititi tutorialele ce vor aparea in curand pe site unde o sa prezint cum putem construi aplicatii complexe in care vom folosi toate efectele vizuale si optiunile multi media pe care le ofera SilverLight 2.0.