Silverlight 3: What’s new?

Met de introductie van Silverlight 3 maakt Microsoft het nog aantrekkelijker om Rich Internet Applications te ontwikkelen. In deze nieuwe versie van Silverlight worden nieuwe controls, een handig navigatie-framework en 3D geïntroduceerd.
In dit artikel zullen een aantal van de nieuwe mogelijkheden van Silverlight 3, ten opzichte van Silverlight 2, besproken worden.

Silverlight is nog geen twee jaar oud. In die tijd hebben er over de hele wereld al ruim 350 miljoen installaties plaatsgevonden. Waar Silverlight 1 zich voornamelijk richtte op audio en video, bracht versie 2 de mogelijkheid om Rich Internet Applications te ontwikkelen. In Silverlight 3 zien we vooral daar een uitbreiding van. Maar ook op audio- en videogebied blijft Silverlight sterk en zijn er diverse verbeteringen doorgevoerd.

Silverlight buiten de browser

Eén van de meest opmerkelijke toevoegingen in Silverlight 3 is de mogelijkheid om een Silverlight-applicatie ook buiten de browser en zelfs offline te draaien. Via twee eenvoudige stappen kan elke gebruiker een Silverlight-applicatie op zijn lokale pc installeren. De installatie procedure is voor elke Silverlight-applicatie hetzelfde om deze procedure voor eindgebruikers zo overzichtelijk mogelijk te houden.

Als ontwikkelaar van een Silverlight-applicatie bepaal je zelf of gebruikers jouw applicatie ook lokaal mogen installeren. Dit geef je aan in het “AppManifest.xml”-bestand dat bij elk Silverlight-project wordt aangemaakt. De configuratieregels welke het lokaal installeren activeren, staan hier al in. Je hoeft ze alleen nog maar uit te commentariëren.

<Deployment.ApplicationIdentity>

<ApplicationIdentity

ShortName="Yourname"

Title="Window title">

<ApplicationIdentity.Blurb>

Description of your Silverlight application

</ApplicationIdentity.Blurb>

</ApplicationIdentity>

</Deployment.ApplicationIdentity>
Codevoorbeeld 1: Silverlight buiten de browser.

Gebruikers kunnen vervolgens rechts klikken en krijgen een contextmenu met daarin de optie om de applicatie lokaal te installeren. Je hebt dan de keuze of je een link op de desktop en/of in het startmenu wilt opnemen. Het verwijderen van een applicatie is al net zo eenvoudig; je klikt met de rechtermuisknop op de applicatie en kiest voor “Remove this application”.

Afbeelding 1: installatie procedure Silverlight-applicatie.

Ontwikkelaars moeten er goed over nadenken of ze het toestaan om hun applicatie ook buiten de browser te laten gebruiken en wat daar de gevolgen van kunnen zijn. Veel Silverlight-applicaties maken gebruik van Webservices, xml-feeds etc.. Bij offline gebruik zouden deze niet beschikbaar kunnen zijn.
Je kunt hierop inspelen door gegevens tijdelijk op te slaan in de IsolatedStorage en deze als cache te gebruiken. Dit is een stukje afgeschermde ruimte op het lokale systeem waar Silverlight naar kan schrijven en uit kan lezen. Lokaal geïnstalleerde Silverlight-applicaties krijgen standaard 25MB aan ruimte in de IsolatedStorage.

Online/offline
Via de property Application.Current.ExecutionState kun je er achter komen of de applicatie lokaal draait of via de browser. Vervolgens kun je met de methode “NetworkInterface.GetIsNetworkAvailable” ontdekken of er een netwerkverbinding is. Zodra er een netwerk verbinding is, kun je bijvoorbeeld nieuwe RSS-feeds ophalen en deze weer lokaal cachen.

Een belangrijke eigenschap van Silverlight is het “sandbox model”. Silverlight-applicaties draaien in een afgeschermde zandbak waar ze niet zomaar uitkunnen. Dit zorgt ervoor dat Silverlight-applicaties veilig zijn en je ze kunt vertrouwen. Bij Silverlight 3 is dit nog steeds het geval. Ook applicaties welke buiten de browser draaien, zitten nog steeds in de sandbox en kunnen zo geen kwaad aanrichten op het lokale systeem.

Een lokaal geïnstalleerde Silverlight-applicatie komt terecht in de “\AppData\LocalLow\”-directory van je user profile. Het originele download adres blijft gekoppeld aan de applicatie; dit geldt als thuishaven. Onder water wordt gecontroleerd of er updates zijn van de applicatie. Wanneer deze er zijn, worden ze gedownload en gebruikt wanneer de applicatie een volgende keer gestart wordt. Als gebruiker van een applicatie heb je daar geen keuze in, de nieuwste versie zal altijd worden gebruikt.

Navigatie Framework

Silverlight 3 komt met een navigatie-framework dat werkt met twee controls; een Frame en een Page. Met dit Framework kun je gemakkelijk een masterpage maken met daarin een Frame. Binnen het Frame kunnen de afzonderlijke pagina’s getoond worden.

Tijdens het navigeren naar andere pagina’s wordt er geen nieuwe webpagina geladen, maar wordt er alleen een andere XAML-page getoond vanuit het Silverlight-project. Ondanks dat je dus niet fysiek naar een andere webpagina navigeert, werkt dit Framework wel perfect samen met de “Vorige” en “Volgende” knoppen in de browser. Elke navigatie actie wordt door de browser geregistreerd. Binnen je Silverlight-applicatie kun je daarna gemakkelijk drie stappen terug door drie keer op de ”Vorige” knop van je browser te klikken.

Elke pagina binnen de applicatie heeft een eigen URL. Navigeer je bijvoorbeeld naar de pagina “Home”, dan zou de URL in je browser er zo uit kunnen zien: http://silverlight.net/MySilverlightAp.aspx#Home. Let op de toevoeging “#Home” aan het einde. Dit wordt door het navigatie-framework gebruikt om de juiste pagina binnen het Frame te tonen. Deze URL kan vervolgens ook gebruikt worden om op te slaan in je favorieten of om te e-mailen naar een kennis, zodat deze meteen bij de juiste pagina uitkomt.

Wanneer je de developer tools voor Silverlight 3 hebt geïnstalleerd, krijg je binnen Visual Studio de optie om een “Silverlight Navigation Application”-project aan te maken. Dit project bevat standaard een applicatie met een frame en twee pagina’s.

Afbeelding 2: standaard Silverlight navigatie applicatie.

Samen met het navigatie-framework komt ook een UriMapper. In de UriMapper kun je voor een URL een meer vriendelijke naam configureren. Met de configuratie in Codevoorbeeld 2 verwijst de vriendelijke URL “#Home“ naar de pagina “/Views/HomePage.xml”.

<nav:UriMapper x:Key="uriMapper">

<nav:UriMapping Uri="Home" MappedUri="/Views/HomePage.xaml"></nav:UriMapping>

<nav:UriMapping Uri="Klant/{id}" MappedUri="/Views/KlantDetail.xaml?id={id}"></nav:UriMapping>

</nav:UriMapper>
Codevoorbeeld 2: UriMapper voorbeeld configuratie.

De UriMapper kan ook overweg met querystring parameters. Stel, je hebt een pagina met detailinformatie voor elke klant. De gegevens haal je op aan de hand van een uniek ID welke je meegeeft in de URL. De URL kun je er zo uit laten zien: ”#Klanten/25” en dit verwijst dan naar “/Views/KlantenDetailPage.xaml?id=25”.

Binding Validation

Bij het bouwen van applicaties die om user input vragen, is het altijd erg belangrijk de ingevoerde data te valideren.
Je kunt een property van een object (bijvoorbeeld de “titel “ van de entiteit “boek”) binden aan een tekstbox. De tekstbox zal dan de titel tonen. Door gebruik te maken van two-way databinding wordt de waarde die je invoert in de tekstbox ook weer in het object terug gezet. Bijna altijd zul je de ingevoerde waarde willen valideren. Is het geen lege waarde? Zijn er wel minimaal 10 karakters ingevoerd? Etc..

Met Silverlight 2 kon je validatiemeldingen afhandelen in code. Je moest zelf bepalen wat je ermee ging doen en hoe je de melding aan de gebruiker wilde tonen. Silverlight 3 biedt een standaard ErrorTemplate om validatiemeldingen aan de gebruiker te tonen. Er is geen code voor nodig, dit kan volledig in XAML.

In de “set” methode van een property kun je eigen validatiecontroles uitvoeren. Wanneer er iets niet klopt, hoef je alleen maar een Exception te gooien met daarin een tekst voor de gebruiker.

public string Titel

{

get { return _titel; }

set

{

if (string.IsNullOrEmpty(value))

{

throw new Exception( "Titel mag niet leeg zijn." );

}

_titel = value;

}

}
Codevoorbeeld 3: data validatie.

In de user interface wordt de tekstbox rood en komt er een uitklapbaar panel met daarin de foutmelding. Hoe deze melding gepresenteerd wordt, staat gedefinieerd in de ErrorTemplate van een control. Dit template is natuurlijk volledig aanpasbaar.

Afbeelding 3: standaard validatiemelding.

Het mooie aan deze oplossing is de scheiding van validatie logica en user interface. De validatielogica zit echt bij het object, waar het hoort, en niet uitgeprogrammeerd in de presentatielaag. Minder mooi is het gebruik van Exceptions om een validatiemelding te tonen. Validatiemeldingen zullen regelmatig voorkomen, Exceptions zijn relatief zwaar en zouden eigenlijk niet voor moeten komen.

RIA Services Framework

Microsoft wil met Silverlight 3 nog verder uitbreiden op het gebied van Rich Internet Applications (RIA). Op de Mix 09-conferentie in Las Vegas is, tegelijk met Silverlight 3, het RIA Services Framework aangekondigd. Het doel van dit Framework is het vereenvoudigen van het ontwikkelen van RIA’s. Uiteraard sluit dit Framework perfect aan op Silverlight.

Bij een RIA zal er vaak data-uitwisseling tussen de client en de server plaatsvinden. Data wordt ingeladen vanaf de server, aangepast op de client en teruggestuurd naar de server via een Webservice om opgeslagen te worden. Op de server draait een data-access-laag die verantwoordelijk is voor de opslag in, bijvoorbeeld, een database.
In dit scenario kun je de client niet zomaar vertrouwen. Welke clients er gebruik maken van je webservices en hoe, heb je niet altijd in de hand. Je moet daarom goed bepalen welke data je beschikbaar wilt stellen aan de client en welke data aangepast mag worden. Ook zul je de data moeten valideren wanneer deze binnenkomt op de server.

Om de gebruiker een zo prettig mogelijke ervaring te geven, wil je de validatie ook op de client laten plaatsvinden. De gebruiker krijgt dan meteen feedback als hij bijvoorbeeld een verkeerde waarde intoetst. Echter, vanuit het oogpunt van een ontwikkelaar wil je de validatieregels niet op zowel de server als de client schrijven; dat zorgt immers voor dubbele code.

Met het RIA Services Framework wordt client-/server-ontwikkeling sterk vereenvoudigd. Een Silverlight-project en ASP.Net-website ontwikkel je als één applicatie. De applicatielogica deel je en is beschikbaar op zowel de client als de server. Je definieert eenmalig je business entiteiten, bijvoorbeeld een Orders-entiteit. Deze is dan zowel op de server als in Silverlight beschikbaar.

Het RIA Services Framework werkt goed samen met de Binding Validation uit de vorige paragraaf. De validatie-logica die bij het object zit, wordt ook gedeeld en doet zijn werk op de server en de client.

In een nieuw object, genaamd de DomainService, definieer je de methodes die beschikbaar zijn op de data. Bijvoorbeeld de methode “GetOrders()”, met als resultaat een lijst van orders. Wanneer je gaat compileren, zal er code worden gegenereerd, zodat de DomainService ook beschikbaar is vanuit Silverlight. In Silverlight heb je dan direct de “GetOrders”-methode tot je beschikking.

Als je deze methode vanuit Silverlight aanroept, maak je een webservice aanroep naar de webservices die gegenereerd zijn door de DomainService. Maar je hoeft je niet druk te maken over de locatie van de webservice of het asynchroon afhandelen van de webservice aanroep. Dit wordt onder water voor je geregeld door het RIA Services Framework. Door de kracht van databinding in Silverlight worden de resultaten getoond zodra deze beschikbaar zijn.

Afbeelding 4: RIA Services Framework Architectuur.

Dit is slechts het topje van de ijsberg. Het RIA Services Framework is erg krachtig en heeft nog veel meer mogelijkheden. Het is bijvoorbeeld mogelijk om wijzigingen in batches terug te sturen; zelf geschreven validatieregels kunnen worden gedeeld, zodat ze zowel in Silverlight als op de server worden uitgevoerd; sorting, paging, filtering, conflicthantering, etc..

Nieuwe controls

In Silverlight 3 zijn een aantal nieuwe controls toegevoegd.

Child Window
Met een ChildWindow is het eenvoudig geworden om een pop-up te tonen. Het pop-up-window kun je gebruiken in een situatie waarin je bijvoorbeeld een melding aan een gebruiker wilt tonen of om input/bevestiging van de gebruiker wilt vragen.

Save File Dialog
Er bestond al een Open File Dialog waarmee bestanden van het systeem van de gebruiker ingeladen konden worden. Nu is er ook een Save File Dialog; hiermee kun je een bestand opslaan op het systeem van de gebruiker. De gebruiker moet zelf een locatie en bestandsnaam opgeven. Silverlight krijgt vervolgens toegang om alleen naar die locatie te schrijven.

Wrap Panel
Dit panel bestond al langer in WPF, maar is nu ook toegevoegd aan Silverlight. Het is vergelijkbaar met een StackPanel, maar een WrapPanel toont controls netjes op de volgende regel als er niet genoeg ruimte meer is.

Silverlight Control Toolkit
Een aantal nieuwe controls zitten niet standaard in Silverlight, maar komen uit de externe Silverlight Control Toolkit. Deze toolkit bevat meer dan 16 controls die buiten de reguliere Silverlight-releases worden onderhouden. Zo is er bijvoorbeeld een TimePicker, om snel een tijd te selecteren en een Accordion-control, om een set van controls open en dicht te klappen. In de Toolkit zitten ook controls om uitgebreide grafieken te tonen.

Afbeelding 5: grafiek-control uit de Silverlight Control Toolkit.

Perspective 3D

Een van de meest gevraagde features voor Silverlight was 3D-support. Met de mogelijkheden die Silverlight 2 bood, is vaak geprobeerd 3D te simuleren. Maar met Silverlight 3 is 3D-functionaliteit een stapje dichterbij gekomen. Door middel van een “PlaneProjection” is het mogelijk om 2D-objecten in een 3D-perspectief te bekijken. Objecten die gedraaid zijn, blijven volledig actief en functioneel. Een knop die bijvoorbeeld achterstevoren staat, is nog steeds klikbaar.

Het is erg eenvoudig om Perspective 3D toe te passen. In Codevoorbeeld 4 staat de code die nodig is om een afbeelding te draaien.

<Image.Projection>

</Image.Projection>

</Image>
Codevoorbeeld 4: het toepassen van een PlaneProjection voor een 3D-effect.

Afbeelding 6: het resultaat van het toegepaste 3D-effect.

Perspective 3D maakt het mogelijk nieuwe vormen van user interface interactie te bedenken, bijvoorbeeld bedieningspanelen die in 3D inklappen en weer terugkomen. Het is geen ‘out-of-the-box’-oplossing om 3D-objecten te tonen, zoals een kubus of een 3D-wereld. Wel is het mogelijk om een kubus in 3D te tonen door het slim plaatsen en tegelijk animeren van meerdere, losse vlakken. Echte 3D-fanaten kunnen op deze manier Perspective 3D gebruiken om een eigen 3D-engine in Silverlight te bouwen.

En verder…

Een aantal van de meest opvallende toevoegingen aan Silverlight 3 heb je in dit artikel kunnen lezen. Maar er is nog veel meer nieuws in Silverlight 3.

Audio & Video
Ondersteuning voor de AAC en H.264 codec is toegevoegd. Ook is er de mogelijkheid om RAW audio/video binnen te krijgen en te laten decoderen door een externe codec. Dit opent de deur naar ondersteuning voor nog veel meer formaten.

Local Messaging
Via Named Pipes kunnen verschillende Silverlight-applicaties met elkaar communiceren. De applicaties kunnen op dezelfde pagina staan, in verschillende tabs en zelfs in verschillende browsers. De communicatie blijft lokaal.

Element-2-Element Binding
In WPF was dit al langer mogelijk, maar nu is het ook in Silverlight mogelijk om elementen van verschillende objecten in XAML aan elkaar te binden. Je kunt bijvoorbeeld de waarde van een Slider binden aan een Textbox, zodat de waarde van de Slider automatisch in de Textbox komt te staan. Volledig via XAML, zonder code.

Toekomst

Silverlight 3 is nu uit als beta. Algemeen verwacht wordt dat Silverlight 3 deze zomer officieel uitkomt. Er is bij deze versie goed geluisterd naar de wensen vanuit de Silverlight-community. Toch ontbreken er nog een aantal veelgevraagde features, zoals print en webcam ondersteuning.
Ook over de ondersteuning van de mobiele platformen is nog weinig bekend. Laten we hopen dat ze hier hard mee bezig zijn!