pellesoft.se

Introduktion till Silverlight 1.0

Postad 2008-02-08 av Chris Klug i sektionen ASP.NET, C#, Okategoriserat med 3 Kommentarer | Läst av: 6104, Betyg: 85%

Förord

En liten intro till Silverlight. Steg 1 i en, om intresset finns, förhoppningsvis reletivt lång serie med Silverlight artiklar. I denna tar vi en snabb titt på teknologin och mjukvarorna och skapar en första enkel applikation.

Innehåll

» Silverlight 1.0
» Vad är Silverlight?
» 1.0 säger du, men 2.0 då?
» Silverlight 1.0
» Mjukvaror
» Skapa första projektet
» Steg 1 - xaml-koden
» Hur går man vidare?

Relaterade artiklar

» Att skapa kontroller i Silverlight 1.0

Silverlight 1.0

De flesta har hört talas om Silverlight, men det verkar som om ganska få har faktiskt använt teknologin. Silvlight 1.0 släpptes live i höstas och har redan börjat användas runt omring på nätet. Framförallt ser man att Microsoft har valt att använda Silverlight överallt på sin web.

Vad är Silverlight?

Silverlight är en cross-platform, cross-browser, client-side runtime. Det är helt enkelt bara en massa fina ord för en browser plug-in. Plug-in finns för både Windows och Mac OS och för IE, Netscape, Firefox och Safari. Kan tänkas det är fler, men de är de största som jag kommer att tänka på just nu. Tanken med plug-inen är att man skall kunna flytta delar av WPF till internet, dvs man vill göra det möjligt att bygga web applikationer med stöd för vektorbaserad grafik, media, animationer mm.
Många brukar fråga om det är Microsofts sätt att utmana Flash. Ja, det är det väl på sätt och vis även om Microsoft (än så länge) verkar ganska ödmjuka när man ställer frågan. Men tittar man på funktionaliteten så är produkterna väldigt lika. Båda har dock olika styrkor och svagheter. Detta ämne kan man spendera hur mycket tid som helst att diskutera, men jag tänker lämna den diskussionen till andra eller möjligen till ett senare inlägg.

1.0 säger du, men 2.0 då?

Ja Silverlight 2.0 är påväg, men är i dagsläget lång ifrån klart (alfa release). Men troligen kommer det släppas en beta på Mix08. Den kommer troligen dessutom släppas med en go-live licens, vilket gör det möjligt att börja producera applikationer på riktigt på den plattformen. Men jag håller mig till 1.0 i denna artikel. 2.0 utökar egentligen bara funktionaliteten i 1.0, så att börja med den är inget problem. Det är väldigt lite som man inte har nytta av när man börjar med 2.0. Även om 2.0 går över till .NET baserade språk för kodningen så kan man fortfarande, och måste i vissa fall, använda JavaScript modellen.

Silverlight 1.0

Grunden för Silverlight är XAML, eXtensible Application Markup Language. Men hjälp av denna markup byggar man upp layout och animationer på ett enkelt och strukturerat vid. Det som sedan skapats i markup kan man sedan koda mot med hjälp av JavaScript. Ja, JavaScript... JavaScript är ett helt klart mycket mer kompetent och avancerat språk än ryktet säger. Det räcker gott och väl för att göra bra applikationer med. Har till och med hört talas om en del människor som använder det för Windows applikationer. Bland annat så kan man ju nämna att i C# 3.0 sammanhang så snackas det bland annat om "extension methods", vilket är en av nyheterna i C# 3.0. Det är gammal skåpmat för JavaScript utvecklare. Nu ska man inte tro att jag är gammal JavaScriptare, men desto mer jag jobbar med det, desto mer förändras min syn på språket.

Mjukvaror

För att utveckla Silverlight 1.0 applikationer räcker det med Internet Explorer, Silverlight 1.0 runtime och Notepad. Men det är klart lättare om man använder Visual Studio. Både Visual Studio 2005 och 2008 fungerar. VS2008 har fördelen att man kan debugga sina JavaScript, vilket inte stöds av VS2005. För Silverlight 1.0 behöver man inte installera några extra tools, vilket behövs för 2.0. Dock bör man installera SDK:n som innehåller mallar för VS samt dokumentation.
Vill man göra webservice anrop underlättar det också om man tankar ner ASP.NET AJAX. Alla webservice anrop i Silverlight 1.0 måste nämligen göras via AJAX.
För delar av XAML knackandet bör man tanka ner Expression Blend 2. Blend 2 har direkt stöd för Silverlight "vanliga Blend" inte har. Blend är ett snabbt och smidigt verktyg för att skapa animationer och till viss del även designa applikationer. För ren design bör man använda ett annat verktyg. Microsofts verktyg för design delen kallas Expression Design. Men är man van vid Fireworks eller Illustrator så finns det XAML export plug-ins att ladda ner till dessa på nätet.
Vill man jobba med video i Silverlight (vilket man absolut vill), så bör man även installera Expression Encoder. Silverlight stödjer enbart video i WMV-format och Encoder hjälper till med konverteringen till WMV på ett smidigt sätt. Det kan dessutom göra mycket mer än bara konvertera filformat, men det får bli en senare artikel (från mig eller någon annan).
Så för en effektiv miljö är det alltså:
- VS2005/2008 för kodningen
- Silverlight 1.0 SDK för VS integration och support
- Blend 2 för interaktions design
- ASP.NET AJAX för webservices mm
- Någon form av XAML program. Rekommenderar antingen Illustrator eller Fireworks eftersom Expression Design tyvärr inte är vidare lyckat.
- Expression Encoder för video konvertering/"editering"/"manipulation"
De flesta av dessa program finns tillgängliga för nedladdning, antingen helt gratis eller som trials. En bra lista finns på: http://silverlight.net/GetStarted/

Skapa första projektet

Jag kommer använda VS2008 eftersom det är det jag har installerat, men tillvägagångs sättet är nästan identiskt under 2005.
Öppna VS och starta ett nytt Silverlight 1.0 projekt. I VS2008 gör man det genom File > New > Website. Detta kan kännas lite skumt, men det fungerar som Website modellen. I VS2005 har jag för mig att man väljer File > New > Project och sen finns det en Silverlight nod om man installerat SDK:n. Gör man samma sak i VS2008 så får man en 2.0 applikation om man har "Silverlight 1.1 Tools Alpha for Visual Studio 2008" installerat. (1.1 är omdöpt till 2.0 därav det missvisande namnet på Tools:en)
När man startar ett nytt projekt får man ett antal dokument på köpet.

Default.htm - htm-sidan som kommer "hosta" Silverlight applikationen. En extremt enkel sida, men funkar för ändamålet. Lite html, JavaScript och CSS som arbetar ihop för att få det att fungera.

Default.htm.js - kommer om man har VS2005 om jag inte minns fel. En JavaScript fil som innehåller en funktion för att skapa upp dra igång applikationen. I VS2008 är denna JavaScript de inkluderad i htm -filen. Vill man kan man flytta ut den, men för tillfället så lämnar jag den där.

Scene.xaml - innehåller XAML-koden för vår Silverlight applikation. Som standard innehåller den en enda Canvas som vi sedan skapar våra objekt inom. I VS2008 ingår dessutom en ganska snyggt designad knapp som visar grunderna i Silverlight. (Ungefär detsamma som denna artikel pratar om)

Scene.xaml.js - innehåller JavaScript koden som är kopplad till elementen i Scene.xaml. Normalt skapar man en js-fil per xaml-fil och håller ihop dem som en sorts user kontroll. Denna fil är inkluderad i Default.htm.

Silverlight.js - innehåller koden för den faktiska instansieringen av Silverlight plug-inen. Kan ignoreras så länge man kommer ihåg att inkludera den i Default.htm.

web.config - ja...den kan man också ignorera då vi i detta fall inte skall skapa några ASP.NET sidor.

Steg 1 - xaml-koden

Öppna Scene.xaml och titta runt lite och få lite koll på vad som finns där. Vi vill hålla exempet enkelt och därför börjar vi med så lite som möjligt så när du gjort det så markerar du all markup innuti den yttersta Canvas.taggen. Filen skall alltså se ut som följer:

Innuti Canvas elementet skapar vi ett Rectangle element istället. Kom ihåg att XML är case sensitive. Elementet gör vi 100px gånger 100px och placerar det 50px in från vänster och toppen. VS ger oss ganska bra intellisense här. Det gör tyvärr inte Blend 2 om man väljer att göra det där, men och andra sidan behöver man inte det, vid detta tillfälle, då man gör det hela visuellt iställer.

Top och Left sätts med hjälp av Canvas.Top. Dessa properties "kommer från" Canvas objektet som extension properties. Jag gjorde dessutom boxen rosa för att den ska synas. Färg kan sättas på flera vis, men för detta exemplet så håller vi oss till en simpel namngiven färg. Men Silverlight stödjer att man gör färger delvis genomskinliga, gradients, masker med mera. Det kan bli mycket mer avancerat än så här, men vi håller det enkelt denna gången.
För att sedan kunna koda mot rektangeln så behöver den ett namn. "Name" attributet kommer ifrån namespacet "http://schemas.microsoft.com/winfx/2006/xaml" som inkluderas i Canvas elementet och får prefixet x. Detta är vedertagen standard, och namnet anges alltså "x:Name"

Spara xaml-filen och stäng ner den och öppna upp Scene.js. I denna finns det en "klass" som heter "ProjektNamn.Scene". Snyggt och objekt orienterat har VS skapat ett namespace och en "klass" som motsvarar vår Canvas i Scene.xaml.
I prototype:n finns det dessutom en del kod. I VS2008 får man en handleLoad metod och 3 eventhandlers. I VS2005 har jag för mig att det är lite annorlunda.
Plocka bort allt innehåll i prototype:n så vi kan börja från början.
Kvar finns alltså:


MyProject.Scene.prototype =
{
}

I vår Default.htm, alternativt Default.htm.js, finns det kod som registrerar en handleLoad metod som eventhander för load-eventet för plug-in:en. Pga detta bör vi skapa en sådan. "onLoad" eventet är starten på allt för en Silverlight applikation. Ungefär som vår Main() i .NET. Handlern kan självklart döpas till vad som helst, men då måste man ändra i den automat genererade koden, så för denna gången lämnar vi det så. Eventhandlern tar in 3 parametrar.
Parameter 1 - referens till plug-in
Parameter 2 - användar context (lämna denna för denna gång)
Parameter 3 - rootElement
Passa på att spara undan parameter 1 och 3. De kan vara användbara i framtiden. Spara dem under något lämpligt namn.


MyProject.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		this.root = rootElement;
	}
}

Sen vill vi hantera mouseover, mouseout och mus klick. Men för att göra det så måste vi få tag i vårt element, dvs vår Rectangle. Det kan göras på flera vis. I den auto genererade koden föreslår VS "rootElement.children.getItem(0)". Jag gillar inte riktigt det sättet då vi ganska lätt kan råka ändra ordningen på Canvas:ens children och på så vis förstöra allt. Det är dessutom ibland svårt att lösa en sådan "bugg". Nästan alla element i Silverlight har en findName() metod som vi kan använda istället. Den fungerar som document.getElementById(), som de flesta känner till.


MyProject.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		this.root = rootElement;
		this.box = rootElement.findName("myBox");
	}
}

Sen behöver vi skapa eventhandlers för de event som vi är intresserade. Här bör vi använda Silverlight.createDelegate för att det ska bli rätt. Annars blir det fel context vid hanteringen. Detta är inte helt lätt att greppa initialt, men för denna gång så lämnar vi det med kommentaren "så är det bara".
De event som är intressanta är "MouseEnter", "MouseLeave", "MouseLeftButtonDown" och "MouseLeftButtonUp".
Ja, jag vet att de påminner väldigt mycket om det som fanns i js-filen från början. Men om vi bara använt dem så hade vi inte lärt oss något.
Det första vi måste göra är att skapa metoder för att hantera eventen. Nästan alla event fungerar precis som .NET event, även om det är JavaScript, dvs vi får ett "sender object" som första parameter och ett eventargs som andra parameter. Skapandet av event handlersen sker alltså enligt följande:


MyProject.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		this.box = rootElement.findName("myBox");
	},
	mouseEnterHandler: function(sender, eventArgs) 
	{ 
	},
	mouseDownHandler: function(sender, eventArgs) 
	{
	},
	mouseUpHandler: function(sender, eventArgs) 
	{
	},
	mouseLeaveHandler: function(sender, eventArgs) 
	{
	}
}

Därefter skapar vi våra delegater i handleLoad metoden. Detta skall som sagt var göras med Silverlight.createDelegate(). Silverlight.createDelegate() finns fördeffinierad i den kod som vi fick per automatik. Det är ingen avancerad kod, men eftersom den finns färdig åt oss så använder vi den utan att pilla på den.
Själva delegaten "hookas upp" med hjälp av metoden addEventListener() på det objekt vi vill hantera. I detta fall är det vår Rectangle, så vi anropar "this.box.addEventListener()". Första parameters till denna metod är namnet på det event vi vill lyssna på, det andra är den delegat som skall användas.


MyProject.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		this.box = rootElement.findName("myBox");
		
		this.box.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.mouseEnterHandler));
		this.box.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.mouseDownHandler));
		this.box.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.mouseUpHandler));
		this.box.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.mouseLeaveHandler));
	},
	mouseEnterHandler: function(sender, eventArgs) 
	{ 
	},
	mouseDownHandler: function(sender, eventArgs) 
	{
	},
	mouseUpHandler: function(sender, eventArgs) 
	{
	},
	mouseLeaveHandler: function(sender, eventArgs) 
	{
	}
}

För att sedan se att något faktiskt händer så byter vi färg på boxen vid de olika eventen. Eftersom "sender" är en referens till objektet så kan vi använda det direkt. Egenskapen "Fill" som vi vill komma åt kan man komma åt på flera vis. Bland annat "sender.Fill", "sender['Fill']" och "sender.getValue('Fill'). Det kanske lättaste sättet är att använda indexern då den är lika för alla properties. Dessutom kan vi lägga till en alert-ruta vid mouseup så vi får lite feedback på vad som hänt. Tyvärr stödjer Silverlight inte hantering av höger musknapp, men det kommer version 2.0 att göra enligt uppgift.


MyProject.Scene.prototype =
{
	handleLoad: function(plugIn, userContext, rootElement) 
	{
		this.plugIn = plugIn;
		this.box = rootElement.findName("myBox");
		
		this.box.addEventListener("MouseEnter", Silverlight.createDelegate(this, this.mouseEnterHandler));
		this.box.addEventListener("MouseLeftButtonDown", Silverlight.createDelegate(this, this.mouseDownHandler));
		this.box.addEventListener("MouseLeftButtonUp", Silverlight.createDelegate(this, this.mouseUpHandler));
		this.box.addEventListener("MouseLeave", Silverlight.createDelegate(this, this.mouseLeaveHandler));
	},
	mouseEnterHandler: function(sender, eventArgs) 
	{ 
	    sender["Fill"] = "Green";
	},
	mouseDownHandler: function(sender, eventArgs) 
	{
	    sender["Fill"] = "Black";
	},
	mouseUpHandler: function(sender, eventArgs) 
	{
	    sender["Fill"] = "Green";
	    alert("Box clicked");
	},
	mouseLeaveHandler: function(sender, eventArgs) 
	{
	    sender["Fill"] = "Pink";
	}
}

Nu har vi en färdig applikation. Tryck Ctrl+F5 för att skåda vad som skapats (en "knapp"). Kanske inte allt för imponerande, men det var första applikationen. Något bättre än ett "Hello World". Kanske skulle ha använt "Hello World" i alerten.
Nu är det bara att labba vidare och se vad man kan göra. Om intresset finns, så kan det självklart komma fler artiklar om Silverlight som tar allt lite längre. Det som visats nu är bara en mikrosopisk bråkdel av det man kan göra med Silverlight, men jag hoppas det väckt ett intresse för att fortsätta med tekniken.

Hur går man vidare?

Ja, finns det intresse för det så skriver jag självklart lite fler artiklar som visar mer av vad man kan göra. Det finns massor att skriva om. Orkar man inte vänta så bör man ta en titt på http://silverlight.net. Där finns allt man behöver för att börja.

Upp