HowTo: Microsoft Silverlight 1.0 (dynamische Spiegeleffekte)

In dem vorherigen HowTo (Microsoft Silverlight 1.0 (Spiegeleffekte erzeugen)) ging es grob darum, wie man mit Blend 2 arbeitet. Heute kommt daher noch ein kleiner Abschnitt, der eigentlich noch mit in dem letzten HowTo mit reinkommen sollte: Wie dynamisiere ich das jetzt?

Schritt 1: Silverlight samt MS AJAX enabeld Projekt in Visual Studio erzeugen und den unsinnigen Kram rauswerfen

Wie ausführlich beschrieben hier beschrieben, erzeugen wir ein ASP.NET AJAX enabeld Project (oder eine Website) und laden die benötigten Komponenten rein:

Silverlight.js (kommt direkt von MS und wurde von mir nicht angefasst)
default.html.js (wurde durch das Projekttemplate aus dem vorherigen HowTo erstellt und dort angepasst) :

function createSilverlight() 
{ 
var parentElement = document.getElementById('SilverlightPlugInHost'); 
    Silverlight.createObject( 
        "Page.xaml",                  // Source property value. 
        parentElement,                  // DOM reference to hosting DIV tag. 
        "mySilverlightPlugin",         // Unique plug-in ID value. 
        {                               // Per-instance properties. 
            width:'300',                // Width of rectangular region of  
                                        // plug-in area in pixels. 
            height:'300',               // Height of rectangular region of  
                                        // plug-in area in pixels. 
            inplaceInstallPrompt:false, // Determines whether to display  
                                        // in-place install prompt if  
                                        // invalid version detected. 
            background:'#D6D6D6',       // Background color of plug-in. 
            isWindowless:'false',       // Determines whether to display plug-in  
                                        // in Windowless mode. 
            framerate:'24',             // MaxFrameRate property value. 
            version:'1.0'               // Silverlight version to use. 
        }, 
        { 
            onError:null,               // OnError property value --  
                                        // event handler function name. 
            onLoad:null                 // OnLoad property value --  
                                        // event handler function name. 
        }, 
        null);                          // Context value -- event handler function name. 
}

Page.xaml (siehe vorheriges HowTo mit dem “HelloWorld”)

und dann muss noch die Default.aspx angepasst werden:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="MS_AJAX_Silverlight._Default" %>    

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    

<html xmlns="http://www.w3.org/1999/xhtml" > 
<head runat="server"> 
    <title>Untitled Page</title> 
    <script type="text/javascript" src="Silverlight.js"></script> 
    <script type="text/javascript" src="Default.html.js"></script> 
</head> 
<body>    

   <div id="SilverlightPlugInHost"> 
      <script type="text/javascript"> 
         createSilverlight(); 
      </script> 
   </div>    

    <form id="form1" runat="server"> 
        <asp:ScriptManager ID="ScriptManager1" runat="server" /> 
    <div>    

    </div> 
    </form> 
</body> 
</html>

Am Ende hat man eine ASP.NET AJAX Projekt mit den benötigten Silverlight 1.0 Datein.

Schritt 2: Mit Javascript den Text verändern

In der Page.xaml müssen wir 2 Veränderungen vornehmen, damit wir per Javascript auf die Elemente zugreifen können. In den “Run” Elemente (wo der Text drin steht), müssen wir eine Art ID vergeben:

<Run x:Name="HelloWorld" FontSize="24" Foreground="#FFFFFFFF" Text="Hello World!"/>

Das x:Name Attribute muss noch an dem “gespiegelten” Run Element genauso dran - damit man später beide zugreifen kann. Das original nennt sich bei mir “HelloWorld” und das andere “HelloWorldMirror”. Jetzt fügen wir ganz trocken noch ein Input Feld und einen Button unter das Div, in welches das Silverlight geladen wird:

<input type="text" id="textBox" /><button onclick="writeToSilverlight()">Klick</button>

Nun noch die Javascriptfunktion erstellen und dort auf die DOM des Silverlights zugreifen (die Silverlight DOM ist ähnlich wie die normale DOM - die eigenschaftsnamen der Elemente sind wie die im XAML (kann es aber nicht garantieren)) :

    <script language="javascript"> 
    function writeToSilverlight() 
    { 
           var silverlight = document.getElementById("mySilverlightPlugin"); 
            silverlight.content.findName("HelloWorld").Text = document.getElementById("textBox").value; 
            silverlight.content.findName("HelloWorldMirror").Text = document.getElementById("textBox").value; 
    }    

    </script>

Erklärung: Zuerst holen wir uns in eine “silverlight” Variable die DOM der ID und hinterher können wir auf diese recht bequem zugreifen. Die “findName” Methode nimmt dabei sehr viel ab - damit finden wirunsere beiden Texte wieder und können die wie in alter Javascript Manier setzen.

Achtung: Bei “document.getElementById(“mySilverlightPlugin”)” ist NICHT die ID des DIVs gemeint, in der wir es reingeladen haben. In der createSilverlight Funktion (siehe oben) legen wir eine “unique Plug-In ID” fest - diese ist hier gemeint und nur darüber kommen wir in das Silverlight rein.

Ein kleiner Tipp: Hier kann man sehen, dass man HTML Elemente und Silverlight Elemente gut mischen kann - auch einer Benutzung von Google Maps oder Virtual Earth steht dadurch nix im Wege - Silverlight kann “nebenher” laufen.

Schritt 3: Volle Kraft - MS AJAX und Silverlight

Damit das MS AJAX jetzt hier auch eine Verwendung findet, pimpen wir nun unsere Javascript Eingabe: Der Text geht an einen Webservice, welcher durch die AJAX Extensions eingebunden ist und geben die Ergebnisse dann letztendlich wieder als JSON in ein JS und das zeigt es im Silverlight an. Es soll eigentlich nur eine Inspiration sein, was man damit machen kann, vom Sinn her ists hier etwas mangelhaft ;)

Webservice erstellen und “ScriptService” Attribut über den Webservice schreiben:

namespace MS_AJAX_Silverlight 
{ 
    /// <summary> 
    /// Zusammenfassungsbeschreibung für HelloWorld 
    /// </summary> 
    [WebService(Namespace = "http://tempuri.org/")] 
    [WebServiceBinding(ConformsTo = WsiProfiles.BasicProfile1_1)] 
    [ToolboxItem(false)] 
    [ScriptService] 
    public class HelloWorld : System.Web.Services.WebService 
    {    

        [WebMethod] 
        public string HelloWorldMethod(string name) 
        { 
            return "Hello World:" + name; 
        } 
    } 
}

Das jetzt im ScriptManager auf der Default.aspx einbinden:

<asp:ScriptManager ID=”ScriptManager1” runat=”server”> <Services> <asp:ServiceReference Path=”HelloWorld.asmx” /> </Services> </asp:ScriptManager>

… und am Ende unser Javascript Funktion neu basteln:

function onComplete(result) { var silverlight = document.getElementById(“mySilverlightPlugin”); silverlight.content.findName(“HelloWorld”).Text = result; silverlight.content.findName(“HelloWorldMirror”).Text = result; }

</script>

Fertig - das Ergebnis ist das selbe, allerdings diesmal komplett mit Webservice. Toll, oder?

[Hier gehts direkt zum nächsten HowTo: Microsoft Silverlight 1.0 (Bilder “kippen” mit Spiegeleffekten)]