Arrangementet 

Onsdag inden jeg fik set Manchester United blive kronet som europas konger, var jeg til MIX Essentials i Cinemaxx i København. Vi tog afsted 4 mand høj, eller to mandlige udviklere og to kvindlige grafikere for at være helt præcis, for at lære lidt mere om Silverlight, og søge inspiration til hvordan vi kan benytte det i vores virksomhed. Uden at jeg gik derfra med hænderne over hovedet, synes jeg det var et udemærket arrangement. Niveauet var måske lidt lavere end forventet og der var knap så mange rigtige eksempler som vi kunne have ønsket os, men vi fik da set nogle bud på hvad Silverlight kan bruges til. Mere vigtigt for mig ihvertfald var at vi fik nogle links og navnene på nogle tools sådan at jeg har noget mere at gå videre med.

Links til inspiration

En af de ting jeg ikke selv havde hørt så meget til var deepzoom og dertil værktøjet deepzoom composer, der er i beta og kan hentes direkte hos Microsoft. Deepzoom giver som navnet antydet mulighed for at man kan lave virkelig store billeder i virkelig høj kvalitet, som downloades delvist til klienten sådan at der kun sendes de detaljer der er nødvendige i forhold til det gældende zoom niveau. Et fedt eksempel på dette og hvad det kan bruges til kan ses på hardrockcafe.com under memorabelia.

Af tools der blev fremvist synes jeg især KAXAML ser lækkert ud. Det er et lille letvægts værktøj til at arbejde med XAML i et splitview. Helt sikkert et tool jeg selv skal lege lidt med fremover :) Et andet tool der så spændende ud er Silverlight Spy der er til at udforske hvordan Silverlight applikationer er skrevet. Og som med alle andre teknologier er der naturligvis også en WPF Profiler, som nok skal vise sig uundværlig på et tidspunkt, som den slags tools ofte viser sig at gøre.

Sidst i den mere futuristiske afdeling så og hørte vi lidt mere til surface som mange umiddelbart forbinder med "a big ass table". Naturligvis er perspektivet i teknologien meget mere og andet end den prototype som det her bord er - men som så tit før ser den almindelige forbruger ikke længere end på det der er lige foran dem. Jeg tror imidlertid nok teknologien skal vinde frem, og håber da også selv en dag at komme til at lave en surface baseret løsning.

Igang med Silverlight

Jeg har besluttet mig for at lege lidt med nogle nye teknologier, og har anskaffet mig nogle bøger omkring Silverlight og F#. Jeg vil derfor det næste stykke tid blogge lidt omkring de ting jeg roder med, på en guide baseret måde som forhåbentlig kan bruges til at komme igang hvis du selv synes et af emnerne lyder interessant.

Her den seneste halve uge har jeg været igang med bogen "Silverlight 1.0 Unleashed", og er begyndt at lege lidt med at kode Silverlight. Jeg vil absolut godt anbefale bogen hvis man vil igang med Silverlight, da den kommer godt omkring teknologien og indeholder både gode eksempler og illustrationer samtidig med at der bliver meldt klart ud omkring bugs og mangler der måtte være rundt omkring.

Hvad angår Silverlight 1.0 er det tydeligt hvilke muligheder det giver fremover, men det er også klart at der mangler en hel del ting som betyder at det først bliver rigtigt anvendeligt når version 1.1 kommer ud. Men hvis man vil igang med at lære teknologien er 1.0 imidlertid et rigtigt godt udgangspunkt, da det indeholder rigeligt til at man kan lære at skrive XAML, håndtere input events og arbejde med animation og video.

Jeg vil derfor blogge lidt omkring nogle af de basale ting man skal vide for at komme igang, og så vil tiden vise hvor mange afsnit jeg skriver og hvor meget af teknologien jeg dækker.

Visning af en Silverlight kontrol

For at få vist en Silverlight kontrol på en webside bruges object eller embed tags alt afhængig af hvilken browser der anvendes. Heldigvis har Microsoft lavet en javascript fil til at håndtere instantieringen af kontrollen, sådan at vi som udviklere slipper for at spekulere over om der skal anvendes det ene eller det ander tag.

Et typisk eksempel kan se ud som vist herunder. I det her tilfælde vises XAML filen HelloWorld.xaml og denne indsættes i container tagget der er navngivet MyContainer.

function createSilverlight()
{   
 Silverlight.createObjectEx(
  {
          source:"xaml/HelloWorld.xaml",
          parentElement: MyContainer,
          id:'SilverlightControl',
          properties:
    {
          width:"350", height:"350", background:"#FFFFFFFF",
   inplaceInstallPrompt: true, version:"1.0"
    },
          events: {onLoad: myOnLoadFunction },
          context: null
 });
}

Som det fremfår kan man angive en række attributter der beskriver en masse ting så som størrelse, farve, version og flere andre ting som jeg dog ikke vil gå i dybden med her. Jeg vil dog nævne attributten inplaceInstallPrompt, som bevirker at man kan installere Silverlight direkte fra siden hvis man ikke allerede har det installeret. Er denne ikke angivet vil man istedet bliver ført videre til en installations side som man kender det fra Flash. Der findes også en anden javascript funktion der hedder blot createObject, men jeg foretrækker createObjectEx, da den er baseret på JSON syntaks, som jeg følger giver er bedre overblik. Som man kan se kan man associere en function med eventet onload - der findes ligeledes et onError event til at lave exceptuion handling. Context værdien giver mulighed for at passe initialiseringsdata til applikationen.

Der er en konvention der foreskriver at denne javascript funktion ligges i en fil der navngives createSilverlight.js.

Med det som udgangspunkt kunne ens html se ud som følger.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Silverlight HelloWorld</title>
    <script type="text/javascript" src="js/Silverlight.js"></script>
    <script type="text/javascript" src="js/createSilverlight.js"></script>
</head>
<body style="position:absolute;left:100px;top:50px;">
    <div id="MyContainer">
    <script type="text/javascript">
        createSilverlight();
    </script>
    </div>
</body>
</html>

HelloWorld

Traditionen tro vil jeg, som du måske allerede har gættet, starte med at lave et helloworld eksempel. Det er lidt en fortærsket cliche men det giver nu engang et godt udgangspunkt for at komme igang.

<Canvas Name="Canvas1"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="640" Height="480">

<TextBlock
      Name="myTextBlock"
      Canvas.Left="100" Canvas.Top="25"
      FontFamily="Verdana"
      Foreground="Red"
      FontSize="24"
      Text="Hello world!" />
</Canvas>

Først kan man se der oprettes et canvas, som skal bruges som container for andre kontroller. Dette er ikke strengt nødvendigt, men da det er et XML format må der kun være ét rodelement. Det vil sige at hvis applikationen skulle udvides vil det være nødvendigt at have et canvas eller andet som den yderste container. Rodelementet SKAL definere et namespace som beskriver det XAML format der anvendes. Er er angivet både det format der er beregnet til Windows Presentation Foundation og det til Silverlight applikationer.

Næste og eneste andet element er en TextBlock som bruges til at vise tekst. Det første man nok studser over er måden Left og Top er angivet på. Syntaksen Canvas.Left skyldes det er det man kalder en attached property som kan angives på alle elementer, og ikke kun det som definerer attributten. FontFamily fungerer som man kender det fra css ved at man kan angive en komma separeret liste af fonte - men som udgangspunkt kan man dog kun anvende 9 forskellige fonte som er defineret som værende platform uafhængige. Der findes nogle forskellige teknikker hvis man vil anvende andre fonte, men det er et emne der må vente til en anden gang.

Foreground minder også om noget man kender, men hvad man ikke umiddelbart kan se er at der er associeret en TypeConverter med propertien. TypeConverters bruges hvis værdien er kompleks, for at give en kort og koncis syntaks. I det her tilfælde et det et komplekst objekt, da typeconverteren faktisk dækker over at der underlæggende laves et brush objekt, som kan meget andet end blot definere en enkelt farve idet man kan lave gradienter eller brushes baseret på billeder og videoklip!

For lige at berøre eventhåndtering kort har jeg som du så tidligere i createObjectEx defineret at der skal kaldes en onLoad funktion ved navn myOnLoadFunction. Normalt vil man bruge funktionen til at initialisere sin kontrol, men for lige at holde os til helloworld scenariet kan du skrive en funktion som den her.

function myOnLoadFunction()
{
    alert("Hello world!");
}

Konklusion

Silverlight kontroller embeddes på en webside på samme måde som en Flash applikation. Til at beskrive brugergrænseflader bruges markup sproget XAML, som giver en fantastisk fleksibilitet der langt overstiger hvad man kan med en traditionel html baseret aspx side. Vi har rundet nogle af de helt grundlæggende ting, så som hvordan man embedder en kontrol på en webside, og hvordan en helt basal XAML fil ser ud. Dette burde give et godt udgangspunkt for selv at lege lidt og google sig frem til eksempler på hvordan man bruger andre tags til at tegne ellipser, rektangler, billeder og hvad man ellers kan finde på.