Windows Sidebar Gadgets Ontwikkelen met Silverlight 2.0

Sectie: UX
Auteur(s): Fons Sonnemans
Publicatiedatum: 30-11-2009
Keywords: User experience, Windows Sidebar Gadgets, Silverlight
Type bijdrage: Artikel
Taal: Nederlands
Rating:

Currently 5/5 Stars.
1
2
3
4
5

Gadgets zijn mini-applicaties die draaien binnen je Live.com homepage, Windows Live Space of Windows Sidebar. De Windows Sidebar is een balk aan de rechterkant van je desktop waarop je gadgets kunt plaatsen waardoor je snel toegang hebt tot je favoriete applicaties en informatie (zie figuur 1). Deze mini-applicaties zijn eigenlijk kleine HTML-pagina’s waarin de logica meestal in JavaScript geprogrammeerd is. Deze kan je ook in Silverlight 2.0 programmeren. In dit artikel leg ik uit hoe dit moet door een eenvoudige ‘Hello World’ voorbeeld gadget te bouwen. Om Windows Sidebar gadgets te gebruiken heb je Windows Vista of Windows 7 nodig.

Fig. 1: Voorbeelden van Windows Sidebar Gadgets

Silverlight 2.0

Silverlight is een browser plugin die gebruikt kan worden door verschillende browsers op verschillende besturingssystemen. De plugin zorgt ervoor dat je eenvoudig animaties, video en audio kunt gebruiken in je browser. Silverlight bevat een subset van de functionaliteit van Windows Presentation Foundation (WPF). Dit betekent dat je kunt programmeren in je favoriete programmeertaal, in mijn geval C#. Deze oplossing is zeer krachtig en moet dan ook gezien worden als een alternatief voor Flash en het daarbij horende ActionScript.

Silverlight applicaties draaien in een browser, dus op de client PC. De applicaties worden via een <object> tag opgenomen in de HTML-pagina. Als deze pagina opgehaald wordt start de plugin. De plugin is een soort mini Common Language Runtime (CLR). De applicatie wordt vervolgens gedownload en draait daarna in de CLR. Hierdoor is de performance veel beter dan van JavaScript-applicaties. Omdat een Windows Sidebar Gadget een HTML-pagina is kun je hierin ook Silverlight gebruiken. Natuurlijk moet je dan wel rekening houden met de beperkte schermgrootte.

Omdat een Windows Sidebar Gadget een HTML-pagina is, kun je hierin ook Silverlight gebruiken

Windows Sidebar Gadget

Een Windows Sidebar Gadget installeer je normaal gesproken door een bestand met de gadget extensie te downloaden van het internet (zie figuur 2). Hiervoor heeft Microsoft de Windows Live Gallery website ontwikkeld met voornamelijk gratis te downloaden gadgets (zie link 1). Een aantal bekende zijn Buienradar.nl en Mini TV.

Na installatie is de gadget zichtbaar in je Windows Sidebar.

Fig. 2: Download buienradar.gadget

Silverlight Project ontwikkelen

Silverlight-applicaties ontwikkel je met behulp van Visual Studio 2008. Je moet hiervoor Service Pack 1 en de Silverlight Tools voor Visual Studio geïnstalleerd hebben (zie link 2). In Visual Studio maak je hiervoor een nieuw C# project aan van het type ‘Silverlight Application’ met de naam MijnSilverlightGadget. In de daarop getoonde dialoog (zie figuur 3) geef je aan dat je aan de solution een extra project van het type ASP.NET Web Site wil toevoegen voor het hosten van een HTML-pagina.

Fig. 3: Add Silverlight Application

De user interface van een Silverlight-applicatie is beschreven in een XAML-bestand genaamd Page.xaml (zie listing 1); de programmalogica is geprogrammeerd in de code-behind Page.xaml.cs (zie listing 2). In de XAML kun je eigen controls plaatsen.

Voor dit voorbeeld heb ik in een MediaElement en een Border met daarin weer een Button control toegevoegd. Het MediaElement gebruik ik om een video in de Background van de Border control af te spelen. Hiervoor heb ik een VideoBrush gebruikt waarvan de Source verwijst naar de Name van het MediaElement. Het MediaElement moet zelf niet getoond worden maar wel zichtbaar zijn; daarom heb ik deze doorzichtig gemaakt door de Opacity op 0 te zetten. Via het movie_MediaEnded event wordt de video op het einde opnieuw opgestart. Het SL.WMV videobestand heb ik aan het project toegevoegd waarbij ik in het Properties Window de Build Action op Resource heb gezet.

Als er op de knop geklikt wordt laat ik de Border ronddraaien inclusief de video en de Button. Daarnaast verandert de tekst van de Button gedurende de animatie in ‘Hallo wereld!’. Hiervoor heb ik een StoryBoard aan de Resources toegevoegd. In de StoryBoard is via een KeyFrame animatie opgegeven dat in 1,5 seconden de Angle van de Border van 0 naar 360 graden moet transformeren. Met het StoryBoard1_Completed event wordt de Angle daarna teruggezet op 0. De Button1_Click event start de animatie en wijzigt de tekst van de button in ‘Hallo Wereld!’.

Listing 1: Page.xaml met extra Button control

public partial class Page : UserControl {

public Page() {
    InitializeComponent();
}

void Button1_Click(object sender, RoutedEventArgs e) {
    // Start animation if not already running
    if (Storyboard1.GetCurrentState() != ClockState.Active){
      this.Button1.Content = "Hallo wereld!";
      Storyboard1.Begin();
    }
}

void Video1_MediaEnded(object sender, RoutedEventArgs e){
    // auto-restart
    Video1.Position = TimeSpan.Zero;
    Video1.Play();
}

void Storyboard1_Completed(object sender, EventArgs e){
    // reset angle for the next animation
    MyRotation.Angle = 0;
    this.Button1.Content = "Klik mij";
}
}

Listing 2: Page.xaml.cs met de extra Button1_Click event handler

De Silverlight applicatie is voor dit voorbeeld nu klaar. Je kunt deze testen door de applicatie op te starten met Ctrl+F5. Je project wordt dan gecompileerd waardoor je Silverlight applicatie verpakt wordt in een .XAP-bestand (MijnSilverlightGadget.xap). Daarna wordt deze naar de ClientBin folder van je Web Site gekopieerd. De MijnSilverlightGadgetTestPage.aspx pagina wordt dan getoond in je browser. Deze pagina kun je overigens samen met de Default.aspx beter verwijderen uit je Web Site aangezien gadgets alleen HTML en geen ASPX-pagina’s ondersteunen. Hiervoor in de plaats ga je de MijnSilverlightGadgetTestPage.html pagina gebruiken. In deze pagina staat een <object> tag waarin de ‘source’ parameter verwijst naar het MijnSilverlightGadget.xap bestand (zie listing 3). Deze pagina gebruik je om je applicatie te testen en moet je daarom als ‘Startup Page’ instellen.

Listing 3: <object> tag in MijnSilverlightGadgetTestPage.html

De gadget zou je natuurlijk ook kunnen laten communiceren met het internet door middel van de netwerkmogelijkheden van Silverlight (HTTP, SOAP, WCF en ADO.NET Data Services). Je kunt overigens alleen communiceren met websites die cross-domain communicatie toestaan, dit omdat je eigen computer nooit in hetzelfde domein kan zitten als de website waarmee je communiceert (zie link 4).

Gadget maken

Nu je de Silverlight applicatie ontwikkeld hebt, kun je hiervan een Gadget gaan maken. Dit doe je door middel van een .gadget bestand. Dit is een ZIP-bestand dat waarvan de ‘zip’ extensie veranderd is in ‘gadget’. In deze zip file moeten alle bestanden opgenomen worden die samen de Gadget vormen. In dit geval zijn dat:

MijnSilverlightGadget.xap met daarin de Silverlight applicatie;
Index.html met daarin het <object> tag dat verwijst naar het XAP-bestand;
Icon.png is de afbeelding die getoond wordt in de Sidebar Gallery;
Gadget.xml manifest bestand, het XML-bestand dat de gadget definieert. Het bevat een aantal parameters zoals de naam, omschrijving en links naar externe bestanden die toebehoren aan de gadget.

Het Index.html bestand kun je eenvoudig aanmaken door MijnSilverlightGadgetTestPage.html bestand te kopiëren naar de ClientBin folder en daarna te hernoemen. Daarna kun je diverse “overbodige” onderdelen uit deze HTML verwijderen, bijvoorbeeld de twee <script> tags, de errorLocation <div> en de <iframe>. De width en de height van de body pas je via de inline CSS aan naar 130 bij 130 pixels.

Tot slot moet je nog drie belangrijke aanpassing aanbrengen in de <object> tag:

De width en height op 125 bij 130 pixels zetten. Deze width is 5 pixels minder dan de width van de body. Dit is nodig omdat anders de gadget niet gesloten kan worden. In diverse bronnen op het internet wordt een andere oplossing voor dit probleem beschreven. Hierbij wordt een extra Windowless parameter met de value ‘true’ toegevoegd. Deze oplossing veroorzaakt helaas een probleem met de MouseEvents events; het klikken op onze button werkt dan niet meer.
De value van de ‘source’ parameter moet gewijzigd worden van ‘ClientBin/MijnSilverlightGadget.xap’ naar ‘x-gadget:///MijnSilverlightGadget.xap’.
De ‘onerror’ parameter moet verwijderd worden aangezien er in dit geval geen foutafhandeling nodig is.

Dit resulteert uiteindelijk in een Index.html zoals weergegeven in listing 4.

<!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">
<head>
<title>MijnSilverlightGadget</title>
<style type="text/css">
    body {
      padding: 0px;
      margin: 0px;
      width: 130px;
      height: 130px;
    }
</style>
</head>
<body>
<div id="silverlightControlHost">
    <object data="data:application/x-silverlight-2,"
      type="application/x-silverlight-2" width="125"
      height="130">
      <param name="source"
        value="x-gadget:///MijnSilverlightGadget.xap" />
      <param name="background" value="white" />
      <param name="minRuntimeVersion" value="2.0.31005.0" />
      <param name="autoUpgrade" value="true" />
      <a href="http://go.microsoft.com/fwlink/?LinkID=124807"
        style="text-decoration: none;">
        <img src="http://go.microsoft.com/fwlink/?LinkId=108181"
          alt="Get Microsoft Silverlight"
          style="border-style: none" />
      </a>
    </object>
</div>
</body>
</html>

Listing 4: Index.html

In het voorbeeld is daarna het Silverlight-logo in een 64 bij 64 pixel PNG-afbeelding geplaatst en opgeslagen als ‘Logo.png’ in de ‘ClientBin’ folder.

Tot slot moet je een XML-bestand met de naam ‘Gadget.xml’ toevoegen aan de ‘ClientBin’ folder. Dit XML-bestand heeft een voorgeschreven structuur die beschreven staat op MSDN (zie link 7).

Voor dit voorbeeld heb ik o.a. de name op ‘Mijn Silverlight Gadget’ gezet, mijzelf als author opgenomen, een verwijzing gemaakt naar het Icon.png bestand en de Index.html: zie listing 5.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
<name>Mijn Silverlight Gadget</name>
<namespace>ReflectionIT.MijnSilverlightGadget</namespace>
<version>1.0.0.0</version>
<author name="Fons Sonnemans">
    <info url="www.reflectionit.nl" />
</author>
<description>Hallo Wereld voorbeeld gadget</description>
<icons>
    <icon height="64" width="64" src="Icon.png" />
</icons>
<hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="Index.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
      <defaultImage src="Icon.png" />
    </host>
</hosts>
</gadget>

Listing 5: Gadget.xml manifest bestand

Fig. 4: Solution Explorer

Gadget installeren

Je bent nu klaar met het ontwikkelen van de gadget. De Solution Explorer in Visual Studio is weergegegeven in figuur 4. De gadget moet geïnstalleerd worden. Dit doe je door de 4 bestanden van de ClientBin folder in een ZIP-bestand te plaatsen. Dit ZIP-bestand hernoem je naar ‘MijnSilverlightGadget.gadget’. Door dit bestand daarna te openen wordt de gadget geïnstalleerd en daarmee zichtbaar in de Windows Sidebar (zie figuur 5). Bovenaan in de Sidebar bevindt zich een + icoon. Door hierop te klikken kun je extra gadgets aan je Sidebar toevoegen via de Gadget Gallery.De ‘Mijn Silverlight Gadget’ is nu natuurlijk ook in deze Gallery opgenomen (zie figuur 6). De Manifest gegevens worden bij de details weergegeven. Vanuit de Gallery kun je ook extra gadgets online downloaden.

Fig. 5: Windows Sidebar

Fig. 6: Gadget Gallery

Gadget verzenden naar Microsoft live.com

Nu je klaar bent zou je natuurlijk deze gadget ook kunnen toevoegen aan de Gadget Gallery van Microsoft live.com zodat iedereen deze gadget kan downloaden. Dit kan door de gadget te verzenden naar Microsoft. Microsoft behoudt zich het recht voor om inzendingen te beoordelen en af te wijzen. Wil je de gadget veiliger maken, dan dien je deze te controleren op schadelijke code. Vergeet ook niet je gadget te ondertekenen met een certificaat, zodat gebruikers weten wie het gadget heeft gemaakt.

Silverlight Gadgets in Windows Vista 64 bits

Indien je een 64bits versie van Windows Vista gebruikt, werken de gadgets die gebruik maken van Silverlight helaas niet. Dit komt omdat Silverlight alleen een 32 bits-applicatie is. Dit probleem kun je oplossen door je Windows Sidebar af te sluiten en daarna de 32bits-versie van de Windows Sidebar op te starten (C:\Program Files (x86)\Windows Sidebar\sidebar.exe). Helaas heeft Microsoft nu nog geen mogelijkheid om dit binnen de 64bits operating systemen te gebruiken.

Project Template

Op de blog van Ioan Lazarciuc (zie link 10) staat een Visual Studio Project Template voor het ontwikkelen van Silverlight Sidebar Gadgets. Deze Template ondersteunt een aantal extra mogelijkheden zoals Settings en Flyout. Helaas maakt dit template gebruik van de Windowless parameter. Toch raad ik aan om de oplossing te bestuderen aangezien er diverse nuttige helper functies gebruikt worden.

Conclusie

Het bouwen van Windows Sidebar met behulp van Silverlight is niet echt complex. Er is wel een aantal zaken waar je rekening mee moet houden. Natuurlijk moet je goed bedenken wat je in de beperkte ruimte van een gadget gaat presenteren. De voorbeeldapplicatie maakt slechts zeer beperkt gebruik van de mogelijkheden van Silverlight 2.0. Juist door die te benutten kun je de mooiste mini-applicaties bouwen. De toekomst zal uitwijzen of Silverlight ook hiervoor veel gebruikt gaat worden. Ik ben zeer hoopvol gestemd.