Silverlight och PHP

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/

Sida 1 av 1
[ 1 ]
Välkommen Anonymous
Logga in
Registrera
Snabblänkar
Markera alla forum som lästa
Skriptarkivet [86 av 97]
Visa nya inlägg
Visa dina inlägg
Visa obesvarade huvudinlägg
Läs vår skola
  Introduktion
  Programmera i webbmiljö
  Installationen i Windows
  Variabler och konstanter
  Vektorer
  Operatorer
  Villkorssatser
  Slingor
Statistik
Registrerade medlemmar: 19714
Inlägg totalt: 718990
Senaste medlem: alexsologub
Online
Besökare just nu: 39,
1 registrerad,
0 dolda och
38 gäster
Besökare som mest var 337 den 2007-07-16 20:05

Våra medlemmar
Inloggade medlemmar
Bra att veta
Förhållningsregler
Trivselregler
phpBB-FAQ
För dig som vill länka
Kontakta oss på adressen: info@phpportalen.net
Webbplatsen bygger i grunden på phpBB © 2001, 2002 phpBB Group

Modifieringar har senare gjorts i systemet av PHPportalen
Sid och logotypdesign skapad av Daren Jularic