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:
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:
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/