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å.
Subscribe