michielpost.nl


Download als PDF

Maak kennis met Silverlight 4

Nog maar een jaar geleden kwam Silverlight 3 uit en inmiddels staat Silverlight 4 alweer voor de deur. Bij het bepalen van de nieuwe functionaliteit voor Silverlight 4 heeft Microsoft goed geluisterd naar de wensen vanuit de Silverlight-community. Een groot deel van de functionaliteit waar de community om zat te springen, is gerealiseerd in Silverlight 4. In dit artikel worden de belangrijkste en meest aansprekende vernieuwingen van Silverlight 4 besproken.

Microfoon en Webcam

Silverlight wordt vaak vergeleken met Flash. Eén van de punten die daaruit elke keer naar voren kwam, was dat Flash gebruik kan maken van de microfoon en webcam van de gebruiker. Silverlight 4 heeft op veler verzoek deze mogelijkheid nu ook gekregen.

Het gebruik van een webcam of microfoon biedt interessante mogelijkheden voor applicaties. Zo is het nu mogelijk een video-telefoon-applicatie te maken met Silverlight.

Om gebruik te kunnen maken van de webcam of microfoon, dient de gebruiker eerst toestemming te verlenen. Elke applicatie kan zelf toestemming vragen en de toestemming die je afgeeft, geldt alleen voor die applicatie.
Afbeelding 1
Afbeelding 1: Silverlight vraagt om toestemming om de webcam en microfoon te gebruiken.

Het is slechts een paar regels code om een screenshot van de webcam te krijgen of een geluidsfragment op te nemen. Helaas is er nog geen eenvoudige manier om een live webcam stream vanuit een applicatie naar een server te versturen. Je hebt de optie om dit zelf te implementeren, of af te wachten totdat Microsoft of een derde partij een standaard implementatie beschikbaar stelt.

CaptureSource src = new CaptureSource();
WriteableBitmap
lastSnapshot = null;

void TakePhotoButton_Click(object sender, RoutedEventArgs e)
{
    //Vraag toestemming aan de gebruiker
    if (CaptureDeviceConfiguration.AllowedDeviceAccess ||
      CaptureDeviceConfiguration.RequestDeviceAccess())
    {
        src.Start();
        src.CaptureImageCompleted += new EventHandler<CaptureImageCompletedEventArgs>(src_CaptureImageCompleted);
        src.CaptureImageAsync();           
   
}
}

void src_CaptureImageCompleted(object sender, CaptureImageCompletedEventArgs e)
{       
     
lastSnapshot = e.Result;
      src.Stop();      
}
Codevoorbeeld 1: Een snapshot maken m.b.v. de webcam.

 

Drag & Drop

Een leuke toevoeging aan Silverlight is de mogelijkheid om bestanden van je lokale PC naar een Silverlight-applicatie te slepen. Denk bijvoorbeeld aan een scenario waar je een foto bestand vanaf je desktop naar Silverlight sleept. Vervolgens kun je de foto bewerken en uploaden naar een centrale webserver.

‘Drag & Drop’ implementeren in je applicatie is erg eenvoudig. Je hoeft alleen maar het ‘Drop’-event te implementeren. Dit zit op vrijwel elk visueel element in Silverlight. Als het ‘Drop’-event afgaat kun je de bestanden uitlezen die naar Silverlight zijn gesleept.

private void LayoutRoot_Drop(object sender, DragEventArgs e)
{
    FileInfo[] files = (FileInfo[])e.Data.GetData(System.Windows.DataFormats.FileDrop); 

    foreach (FileInfo file in files)
    {
      //Doe iets met de bestanden
    }           
}
Codevoorbeeld 2: Toegang tot de bestanden die naar Silverlight gesleept zijn.

 Het is mogelijk om meerdere bestanden tegelijk te slepen, maar je kunt geen directories naar Silverlight toe slepen. Ook werkt dit mechanisme slechts één kant op. Je kunt dus geen bestanden uit Silverlight terug naar het lokale systeem slepen.

 

Clipboard

Silverlight 4 geeft de mogelijkheid om programmatisch iets op het clipboard te plaatsen en dit uit te lezen. Het was uiteraard al mogelijk om gewoon tekst te knippen en te plakken in Silverlight-applicaties. Deze toevoeging zorgt ervoor dat je zelf kan bepalen wat er op het clipboard komt en wanneer je dit er weer afhaalt, bijvoorbeeld door knip- en plakknoppen te tonen.

Notification Pop-ups

Vrijwel iedereen kent het kleine notificatie-window dat je bijvoorbeeld krijgt bij een nieuw bericht in Outlook of MSN Messenger. Deze notificatie (ook wel Toast genaamd) kan nu ook vanuit een Silverlight-applicatie komen.

Via de Notification API geef je een titel en tekst op voor de notificatie pop-up. Het design van de pop-up kun je zelf bepalen, zodat dit aansluit bij de rest van je applicatie.

De notificatie pop-ups werken alleen als de applicatie ‘Out of Browser’ draait. Dit werkt dus niet wanneer de applicatie in de browser actief is. Later in dit artikel kom ik nog terug op ‘Out of Browser’ applicaties.


Afbeelding 2

Afbeelding 2: Notificatie pop-up vanuit Silverlight.
 

Printen

Sinds de eerste versie van Silverlight is de mogelijkheid om te printen al een veel gevraagde optie. Vooral bij Rich Internet Applications kan print-functionaliteit vaak niet ontbreken.

Tot nu toe was het een veel gebruikte manier om voor het printen door te verwijzen naar een webpagina. Daar werd dan de print-functionaliteit van de browser gebruikt om de getoonde gegevens te printen.

Met Silverlight 4 hebben ontwikkelaars volledige controle over wat er wordt geprint en hoe dit gevisualiseerd wordt op papier. Je kunt één of meerdere print knoppen aan je applicatie toevoegen. Achter elke print knop definieer je verschillende print acties.

Stel je hebt een Silverlight-applicatie met daarin een tabel met klanten. Dan zou je twee print knoppen kunnen maken, één om de hele tabel te printen en één om de detailgegevens van de geselecteerde rijen te printen.
In code bepaal je vervolgens wat er precies geprint gaat worden. Je kunt bestaande visuele elementen meegeven aan de print-actie, zoals de getoonde tabel. Het is echter ook mogelijk om iets te printen dat helemaal niet zichtbaar is voor de gebruiker, zoals de detailgegevens van de geselecteerde klanten. In de print-actie bouw je de visuele representatie zelf op en zo heb je volledige controle over wat er geprint wordt.

PrintDocument docToPrint = new PrintDocument();
docToPrint.PrintPage += (s, args) =>
{
    args.PageVisual = this.DisplayPanel;
};
docToPrint.Print("Documentnaam");
Codevoorbeeld 3: Printen vanuit Silverlight.

RichTextBox

In vorige versies van Silverlight zat nog geen RichTextBox. Wel kon je gebruik maken van externe controls die deze functionaliteit implementeerden. Vanaf Silverlight 4 hoort de RichTextBox bij de set van standaard controls.

Met de RichTextBox kun je tekst opmaken, denk aan bold en italic tekst. Ook kun je plaatjes en hyperlinks toevoegen aan de tekst. Dit is met een normale TextBox niet mogelijk. Eigenlijk kun je er een vereenvoudigde versie van Word mee maken. Voorbeeldcode om dit te doen is al te vinden op internet, inclusief de “ribbon” interface.

De inhoud van een RichTextBox kan uitgelezen worden als XAML. Vervolgens kun je daarmee doen wat je wilt, je kunt het opslaan voor later gebruik, tonen in een ander deel van de applicatie of printen.


Afbeelding 3
Afbeelding 3: RichTextBox in Silverlight met het uiterlijk van Microsoft Word.

 

Rechtermuisknop en Context Menu

Tot Silverlight 4 was het niet standaard mogelijk om een klik van de rechtermuisknop in Silverlight af te vangen. Uiteraard waren er wel workarounds mogelijk, maar er was geen standaard ondersteuning voor. De gedachte hierachter was dat niet alle systemen waar Silverlight op draait een rechtermuisknop hebben.

Het Silverlight-team is inmiddels van dit principe afgestapt en heeft de ondersteuning van de rechtermuisknop aan Silverlight 4 toegevoegd. Ontwikkelaars kunnen nu zelf de keuze maken of ze dit willen gebruiken.

De implementatie is vergelijkbaar met die van een normale muisklik. Vaak zal je een soort contextmenu willen tonen als de gebruiker op de rechtermuisknop klikt. Voor zulke standaard implementaties biedt de Silverlight Toolkit een ContextMenu-control. Via dit control toon je eenvoudig een contextmenu zoals in afbeelding 4 te zien is. Het control vangt automatisch de rechtermuisknop voor je af en toont een menu. Achter elk menu item kun je een command plaatsen dat uitgevoerd wordt als je erop klikt.


Afbeelding 4
Afbeelding 4: Contextmenu.

Ook ondersteuning voor het scrollwiel op je muis is toegevoegd. Dit werkt volledig automatisch op controls waar je het verwacht, zoals een listbox met meerdere items. Je hebt natuurlijk ook de mogelijkheid om de scrollwiel-events zelf af te handelen.

 

Implicit Styles

Eén van de sterke kanten van Silverlight en WPF is het design van je applicatie door middel van XAML. Door middel van styles voorzie je alle elementen van de juiste uitstraling. In een style voor een knop definieer je bijvoorbeeld dat de achtergrond blauw is en de tekst wit. Je kunt een style explicit maken; je geeft de style een naam en geeft bij een element aan dat het deze stijl dient te gebruiken. Of je maakt een style implicit; je geeft dan eigenlijk aan dat die style gebruikt moet worden voor alle elementen van een bepaald type.

In WPF was het gebruik van Implicit Styles al langer mogelijk. Ondersteuning hiervoor is nu ook toegevoegd aan Silverlight 4. Je kunt dit gebruiken om razendsnel het gehele uiterlijk van je applicatie aan te passen.

<Style TargetType="Button">
   
<Setter Property="Background" Value="Green"/>
    <Setter Property="Foreground" Value="Black"/>
</Style>
Codevoorbeeld 4: Implicit Style.

 In de voorbeeldcode zie je een Implicit Style die elke knop een groene achtergrondkleur geeft en zwarte tekst. Dit is een Implicit Style aangezien er geen “Key” wordt opgegeven. Als er een “Key” zou worden opgegeven, is het een Explicit Style die alleen toegepast wordt bij elementen die om een style met die “Key” vragen.

Een style heeft altijd een targettype. In dit geval een knop (‘Button’). Styles definieer je per targettype.
 

Out of Browser

In Silverlight 3 werd voor het eerst de mogelijkheid geïntroduceerd om applicaties op je lokale PC te installeren. Deze ‘Out of Browser’-applicaties kunnen ook gestart worden wanneer er geen internetconnectie is.

In Silverlight 4 is de functionaliteit rondom Out of Browser-applicaties flink uitgebreid. Zo heb je bijvoorbeeld meer controle over de grootte van het venster van de applicatie en kun je het venster minimaliseren en maximaliseren. Ook heb je de beschikking over een WebBrowserControl. Dit control gebruik je om webpagina’s of een stuk eigen HTML weer te geven. Een grappige bijkomstigheid is dat je nu een webpagina met Flash kunt hosten binnen een Silverlight-applicatie!

Applicaties die lokaal draaien, zitten nog steeds in een “sandbox”. Ze kunnen dus geen schade aanrichten of gevaarlijke dingen op de lokale PC uitvoeren. In Silverlight 4 kun je nu echter ook nog een stap verder gaan; een stap uit de zandbak met Trusted Applications.


 

Trusted Applications

Trusted Applications zijn voor de eindgebruiker vergelijkbaar met Out of Browser-applicaties. De Silverlight-ontwikkelaar geeft echter aan dat hij meer rechten op het lokale systeem wil en dus een Trusted Application wil worden. De gebruiker krijgt hier een melding van en wordt gewezen op de mogelijke gevaren. Zie ook afbeelding 5.


Afbeelding 5
Afbeelding 5: Installatie van een Trusted Application.

Welke extra mogelijkheden krijgt je als ontwikkelaar dan? Je krijgt bijvoorbeeld direct toegang tot een aantal folders, namelijk: MyDocuments, MyVideos, MyPictures, etc. Je kunt hier direct uit lezen, zonder dat de gebruiker extra toestemming hoeft te geven.

Gevaarlijker is echter dat de Silverlight-applicatie ook direct kan schrijven naar deze directories. Het is heel eenvoudig om een applicatie te maken die alle documenten uit de MyDocuments-folder verwijdert. Dit is dus een groot risico. Installeer daarom alleen Trusted Applications die je ook echt vertrouwt.

Andere extra mogelijkheden van Trusted Applications zijn gelukkig minder gevaarlijk. De rand om elke applicatie (ook wel “Chrome” genaamd) kan worden weggelaten of je kunt de style hiervan aanpassen aan het uiterlijk van de applicatie. Let er wel op dat je zelf de knoppen implementeert om een venster te minimaliseren, te maximaliseren en te sluiten.

Trusted Applications die fullscreen worden gedraaid hebben volledig toegang tot input van het toetsenbord. Je kunt dus in fullscreen-mode gewoon tekst in een textbox typen. Bij Silverlight-applicaties die niet geïnstalleerd zijn als trusted application is dit niet mogelijk. Deze beperking is opgelegd om te voorkomen dat kwaadwillende een loginbox kunnen tonen in fullscreen-mode en zo de gebruiker zijn wachtwoord in handen krijgen.

Tot slot zijn er enkele beperkingen op het gebied van netwerk-toegang weggehaald voor Trusted Applications. Het is bijvoorbeeld mogelijk om webservices aan te roepen die geen ‘Cross Domain Policy’ hebben en als je sockets gebruikt, zijn er geen restricties meer over de portnummers die gebruikt mogen worden.

Let op: geef als Silverlight-ontwikkelaar alleen aan dat je applicatie een Trusted Applications moet zijn als je de extra functionaliteit ook echt nodig hebt. Gebruik anders gewoon de normale Silverlight Out of Browser-mogelijkheden.

COM Interop

Een opmerkelijke toevoeging aan Silverlight is de mogelijkheid COM-interfaces aan te spreken. Deze stap is opmerkelijk te noemen, omdat dit alleen mogelijk is op het Windows-platform. Op een Mac zal deze functionaliteit niet werken, de volledige cross-platform-compatibiliteit van Silverlight komt hiermee dus te vervallen. Ook valt te betwisten of Silverlight het juiste framework is voor deze functionaliteit, hetzelfde is immers al mogelijk met WPF.

Er zijn veel scenario’s te bedenken waarbij COM Interop handig kan zijn. Bijvoorbeeld voor de interactie met Microsoft Office. Vanuit Silverlight kun je Excel starten, data inladen in Excel en later weer terugsynchroniseren naar Silverlight. Maar het is ook mogelijk om bijvoorbeeld een scanner aan te spreken of het registry uit te lezen.

//Create an instance of excel
dynamic excel = AutomationFactory.CreateObject("Excel.Application");
excel.Visible = true;  // make it visible to the user.

//Add a workbook to the instance
dynamic workbook = excel.workbooks;
workbook.Add();
Codevoorbeeld 5: Excel openen vanuit Silverlight.

Let op: COM Interop werkt alleen bij Silverlight-applicaties die geïnstalleerd zijn als Trusted Application.

 

Databinding

Op het gebied van databinding zijn enkele kleine verbeteringen toegevoegd die erg handig zijn. Een veel voorkomend probleem is dat je een datum wilt tonen in een textbox, maar welke formatting moet de datum hebben? Daar wil je niet perse een ValueConverter voor schrijven, een “string.Format” zou genoeg moeten zijn. Dat is nu precies wat er is toegevoegd.

<TextBox Text="{Binding Path=BeginDatum, Mode=OneWay, StringFormat='dd-MM-yyyy'}"/>
<
TextBox Text="{Binding Path=Naam, Mode=TwoWay, FallbackValue=Onbekend}" />
<
TextBox Text="{Binding Path=Hoeveelheid, Mode=TwoWay, TargetNullValue=0}" />
Codevoorbeeld 6: Nieuwe databinding mogelijkheden.

De FallBackValue kan gebruikt worden als de binding mislukt. In het geval van code voorbeeld 6 zal dan de waarde “Onbekend” in de tweede textbox verschijnen. Een TargetNullValue wordt getoond als de uitkomst van de binding NULL is. In dit geval, als de property “Hoeveelheid” NULL is, wordt er “0” in de textbox getoond.

Bovenstaande databinding mogelijkheden zijn geleend van WPF, waar dit al langer mogelijk was.
 

Managed Extensibility Framework

Het Managed Extensibility Framework (MEF) is een nieuwe toevoeging aan .Net 4.0 en is ook aanwezig in Silverlight 4. Het is een zeer krachtige en complexe toevoeging. In dit artikel zal ik proberen MEF kort en eenvoudig uit te leggen.

Met behulp van MEF kun je een applicatie dynamisch uitbreiden via plugins terwijl de applicatie draait. In de applicatie definieer je waar plugins aan moeten voldoen, bijvoorbeeld welke interface deze dienen te implementeren.
Tijdens het draaien van de applicatie scant MEF alle DLLs, bekijkt of er plugins aanwezig zijn en of deze overeenkomen met de gevraagde interface. De plugin wordt aangeboden (er ontstaat een koppeling tussen vraag en aabod) en kan vervolgens gebruikt worden in de applicatie.

Een mogelijk voorbeeld is een applicatie waarin je foto’s kan bewerken door middel van verschillende filters. De applicatie zelf weet niks van de filters, maar definieert alleen een interface waaraan filters moeten voldoen. Vervolgens lever je met de applicatie DLLs mee waarin filters zitten die deze interface implementeren. MEF maakt de koppeling tussen de vraag naar filters en het aanbod van filters in de DLLs waardoor je in de applicatie alle meegeleverde filters kunt gebruiken.

Een handige toepassing van MEF voor Silverlight is dat je een complexe applicatie kan verdelen over meerdere XAP bestanden. Het initiële XAP-bestand van een Silverlight applicatie kan klein gehouden worden. De applicatie wordt dan snel gedownload en start dus snel op. Extra functionaliteit uit andere XAP-bestanden wordt daarna gedownload en wordt beschikbaar zodra de download klaar is. Door hier rekening mee te houden bij het ontwikkelen van je Silverlight-applicatie, eindig je niet met een logge applicatie die er lang over doet om op te starten.

 

Toekomst

Zoals je hebt kunnen lezen, zit het Silverlight-team niet stil. Er is veel functionaliteit aan Silverlight 4 toegevoegd. Het ontwikkelen met Silverlight gaat sneller, omdat er design time ondersteuning is ingebouwd in Visual Studio 2010. Aan de lijst van ondersteunde browsers is Google Chrome toegevoegd en later dit jaar zullen we Silverlight ook terugvinden op mobiele telefoons die Windows Phone 7 draaien. Silverlight gaat een mooie toekomst tegemoet!
 

Referenties

Tim Heuer’s Blog
http://timheuer.com

Mike Taulty’s Blog
http://mtaulty.com

Silverlight 4: Get Started
http://www.silverlight.net/getstarted/silverlight-4/

Hands on Labs
http://www.silverlight.net/learn/handsonlabs/