Silverlight och PHP

Silverlight är en ny teknik från Microsoft för att skapa mer avancerade webbgränssnitt än vad som är möjligt i helt HTML-baserade webbapplikationer. I en Silverlight-applikation kan du blanda vektorgrafik med media, animeringar och bilder för att skapa användargränssnitt utan de begränsningar som finns i traditionella webbapplikationer.

För att kunna köra Silverlight-applikationer krävs att du har en plug-in installerad som exekverar i webbläsaren (Internet Explorer, Firefox och Safari) och som finns tillgänglig för flera olika operativssystem (Windows Vista/XP/2000 samt Mac OS). En version för Linux kallad Moonlight håller även på att tas fram av Mono-teamet, som tidigare gjort en implementation av .NET-ramverket för Linux.

Silverlight kräver inte något speciellt på serversidan för att kunna köras utan laddas och exekveras helt och hållet i webbläsaren. I exemplet nedan kommer jag visa en Silverlight/PHP-applikation som utan problem kan köras från en Apache-server på en Linux-maskin.

I Silverlight version 1.0 är du hänvisad till Javascript eller anrop mot en backend-server via AJAX för att hantera logiken i din applikation. Med Silverlight version 2 görs även en light-version av .NET-ramverket tillgänglig för de operativssystem och webbläsare som stöds. Silverlight 2-applikationer skrivna i C# eller VB.NET kompileras till assemblies som laddas ner till webbläsaren och exekveras. Med Silverlight 2 får du bl.a. möjlighet att anropa webbtjänster, lagra lokalt data och en hel uppsättning anpassningsbara kontroller att använda, t.ex. DataGrid och Calender.

Silverlight 2 innehåller även en Dynamic Language Runtime (DLR) som gör det möjligt att exekvera dynamiska språk som Ruby och Python. Genom Phalanger-projektet kommer du att kunna skriva Silverlight 2-applikationer i PHP och exekvera dessa med hjälp av DLR. Tyvärr finns i Phalanger (i alla fall i skrivande stund) endast stöd för den alpha-version av Silverlight 2 som tidigare funnits tillgänglig - och inte den senaste Beta 2-versionen.

I följande exempel kommer jag visa hur du kan bygga en enkel applikation med hjälp av Silverlight 1.0 och PHP som gör en sökning i Amazons bok-katalog och visar upp resultatet. Flödet ser ut så här:

Principen är ganska enkel – jag läser av ett input-fält och anropar en PHP-sida med fältet som inparameter som i sin tur gör anropet mot Amazon samt bygger upp gränssnittsdefinitionen som returneras till Silverlight-applikationen med hjälp av svaret från Amazon. Du kan se en live-demo av applikationen här: http://91.189.45.77/robs/AmazonSLPHPDemo/.

Användargränssnittet i Silverlight definieras med ett XML-baserat märkspråk som heter XAML (Extensible Application Markup Language). Det är inte bara vektorgrafik som definieras med hjälp av XAML utan även tidslinjer, animeringar och mediaelement beskrivs i XAML-kod.

Här är ett exempel på XAML som beskriver en rektangulär vit ogenomskinlig vektorgrafisk form inom en svart canvas:

KOD: 1: <Canvas xmlns="http://schemas.microsoft.com/client/2007" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Background="Black"> 2:    <Rectangle Width="81" Height="72" Fill="#FFFFFFFF" Stroke="#FF000000" Canvas.Left="193" Canvas.Top="216"/> 3: </Canvas>

Observera de två XML-namespaces som måste finnas i rot-canvas för att Silverlight ska kunna rendera XAML-koden.

Färger kan anges antingen med namn eller genom att ange dess hexadecimala värde. Det första hexidecimala värdet #FF anger opacitet – d.v.s. hur genomskinlig färgen ska vara. Rektangelns placering inom dess Canvas avgörs av attributen Canvas.Left och Canvas.Top.

Om du vill undersöka hur XAML-definitioner ser ut utan att skapa en komplett Silverlight-applikation eller använda ett verktyg som Expression Blend så finns det en online XAML-editor tillgänglig här: http://silverlight.net/samples/1.0/Silverlight-Pad/default.html

Silverlight/PHP-applikationen i mitt exempel består av följande filer (du kan ladda hem källkoden här: http://91.189.45.77/robs/AmazonSLPHPDemo.zip).

/amazonSearch.php – innehåller logiken för att anropa Amazons webbtjänst med det sökord som angetts som inparameter och packar sedan om svaret till ett XAML-gränssnitt.

/index.php - startsidan för applikationen. Innehåller referenser till Javascript och ett anrop till en metod i Silverlight.js som instansierar Silverlight-kontrollen korrekta parametrar.

/js/Silverlight.js - hjälpscript för instansiering av Silverlight-kontrollen.

/js/View.js - logik i Javascript för eventhanterare och anrop mot amazonSearch.php.

/xaml/View.xaml - startdefinitionen av gränssnittet, innehåller de olika animeringar som används för knapp-tryckningar, Mouse over-effekter och laddningsanimeringen.

Några saker som är värda att nämna vad gäller applikationens uppbyggnad:

• För att anropa amazonSearch.php från Javascript används det inbyggda Downloader-objektet i Silverlight. Downloader-objektet är modellerat efter XMLHttpRequest-objektet som allmänt används för AJAX-funktionalitet och fungerar på liknande sätt – d.v.s. ett anrop görs mot en URL och svaret hanteras asynkront via en eventhanterare (downloadCompleted). Chris Klug har skrivit en utmärkt artikel om Downloader-objektet här: http://www.pellesoft.se/area/articles/article.aspx?artid=1055.
• Eftersom Silverlight 1.0 saknar ett inbyggt kontrollramverk är input-fältet ett dynamiskt skapat HTML-inputfält som läggs ovanpå Silverlight-kontrollen. Sök-knappen är definierad i XAML-kod med interaktionslogiken uppbyggd genom ett antal eventhanterare som har lagts till knappens huvud-element (som alltså är ett Canvas-element). Alla element i XAML som har namngetts med ett x:Name-attribut går att komma åt från Javascript vilket gör det möjligt att t.ex. haka på eventhanterare för event som MouseEnter, MouseLeave etc.

PHP-koden i amazonSearch.php för att ta hand om anropet från Downloader-objektet i Silverlight och vidarebefordra det till Amazons söktjänst är inte så märkvärdig utan rätt så självförklarande:

PHP: 1:   2: <?php 3:   4: function BuildXAML($item, $count, $left, $top)    5: { 6: ?> 7:     <Canvas xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 8:             MouseLeftButtonDown="handleClick" MouseEnter="imageMouseEnter" 9:             MouseLeave="imageMouseLeave"  Canvas.Left="<?php echo $left; ?>" 10:             Canvas.Top="<?php echo $top; ?>" RenderTransformOrigin="0.5,0.5" 11:             x:Name="ThumbnailImage<?php echo $count; ?>" Width="124"  12:             Height="320"> 13:         <Canvas.RenderTransform> 14:             <TransformGroup> 15:                 <ScaleTransform ScaleX="1" ScaleY="1" /> 16:             </TransformGroup> 17:         </Canvas.RenderTransform> 18:         <Image x:Name="Image<?php echo $count; ?>" Width="124" Height="160"  19:                 Source="<?php echo $item->MediumImage->URL; ?>" /> 20:         <Image x:Name="Image<?php echo $count; ?>_reflection" Width="124"  21:                 Height="160" RenderTransformOrigin="0.5,0.5" Canvas.Top="82" 22:                 Source="<?php echo $item->MediumImage->URL; ?>"> 23:             <Image.OpacityMask> 24:                 <LinearGradientBrush  StartPoint="0,.25" EndPoint="0,1"> 25:                     <GradientStop Offset="0.394" Color="#00000000" /> 26:                     <GradientStop Offset="1" Color="#CC000000" /> 27:                 </LinearGradientBrush> 28:             </Image.OpacityMask> 29:             <Image.RenderTransform> 30:                 <TransformGroup> 31:                     <ScaleTransform ScaleX="-1" ScaleY="1"/> 32:                     <RotateTransform Angle="-180"/> 33:                     <TranslateTransform X="0" Y="77"/> 34:                 </TransformGroup> 35:             </Image.RenderTransform> 36:         </Image> 37:         <TextBlock x:Name="BookURL<?php echo $count; ?>" Visibility="Collapsed" 38:             Text="<?php echo $item->DetailPageURL; ?>" /> 39:     </Canvas> 40: <?php 41: } 42:   43: // plocka sökvariabel 44: $keywords = (!empty($_GET['keywords'])) ? $_GET['keywords'] : 'php'; 45:   46: // Ladda Amazon search i variabel 47: $url = 'http://ecs.amazonaws.com/onca/xml?Service=AWSECommerceService&Version=2005-03-23&Operation=ItemSearch&SubscriptionId=1S494ZXP934WJ38NH5R2&AssociateTag=myamzn-20&SearchIndex=Books&Keywords='. $keywords .'&Sort=relevancerank&ResponseGroup=Images,Small'; 48: $content = file_get_contents($url); 49:   50: //Skapa parser object 51: $xml = simplexml_load_string($content); 52:   53: $count = 0; 54: $left = 20; 55: $top = 68; 56:   57: echo '<Canvas>'; 58: foreach ($xml->Items->Item AS $item) 59: { 60:    if (!empty($item->MediumImage)) 61:    { 62:       // spotta ut en Canvas med en bok-titel 63:       BuildXAML($item, $count, $left, $top); 64:   65:       $count++; 66:       $left = $left + 134; 67:       if (($count % 5) == 0) 68:       { 69:          $top = $top + 330; 70:          $left = 20; 71:       } 72:    } 73: } 74: echo '</Canvas>'; 75: ?> 76:

För varje bok som återfinns i den XML-kod som Amazon-tjänsten returnerar skapas ett nytt Canvas-element. Varje sådant element innehåller två Image-element: ett för att visa bilden på boken samt ett halvt genomskinligt element som är en spegling av bokens bild. Den innhåller också ett TextBlock-element som håller den URL som ska öppnas upp i ett nytt fönster när man klickar på boken. För att kunna köra en Silverligth 1.0-applikation på en webbserver som kör Windows 2003 och IIS6 krävs att en konfiguration görs i Internet Information Server där MIME-typen för XAML läggs till: .xaml: application/xaml+xml. På Windows 2008, Linux-, Unix eller OSX-maskiner krävs normalt inga speciella inställningar för att kunna hantera Silverlight 1.0-applikationer – det är bara att lyfta över filerna så ska det fungera.

Live demot körs på en Windows-maskin med IIS6 och FastCGI, men kan alltså köras på t.ex. Linux och Apache utan problem.

Du kan läsa mer om Silverlight på startsidan för allt utvecklar-relaterat kring tekniken: http://silverlight.net/