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.

image

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:

image

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:

<script language=”javascript”>
function writeToSilverlight()
{
        MS_AJAX_Silverlight.HelloWorld.HelloWorldMethod(document.getElementById(“textBox”).value, onComplete);
}

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)]

Letzte Posts

  • image_thumb.png
    NuGet Package Restore & Build Server wie z.B. AppVeyor

    NuGet ist ja mittlerweile weit verbreitet, aber eine Frage stellt sich natürlich immer noch: Checkt man die NuGet Packages ein oder nicht? In meinem kleinen Side-Projekt, welches auf GitHub liegt und ich über AppVeyor auch bauen lasse nutze ich das Package Restore Feature von NuGet, d.h. in meinem Repository befindet sich kein NuGet Package mehr, […]

  • image.png
    Microsoft Account Login via ASP.NET Identity

    Der Microsoft Account ist die zentrale Identifikationsstelle in der “Consumer-Microsoft-Welt”, allerdings ist das Einbinden eben dieser in die eigene Applikation eher schwierig. Das “Live SDK” ist nun unter dem OneDrive Dev Center zu finden und ganz professionell wurden auch alle Links zum alten Live SDK damit unbrauchbar gemacht. Beim Microsoft Account ist es auch unmöglich […]

  • image.png
    Zeitgesteuerte Azure WebJobs – so einfach kann Azure sein

    Das noch in Entwicklung befindliche Azure WebJob SDK bietet einige coole Features zum Verarbeiten und Bereitstellen von Daten. Bekanntes Beispiel ist das Sample welches auf eine Azure Queue lauscht und sobald ein Item da vorhanden ist anfängt dies zu verarbeiten. Szenario: Zeitgesteuerte Aktivitäten – ohne Queue und co. Mein Szenario war allerdings wesentlich trivialer: Ich […]

  • image.png
    Get Involved in OSS! Ja, aber wie geht das denn mit GitHub?

    Auch im .NET Lager gibt es Bewegung im OSS Bereich und es gibt verschiedene Arten wie man bei einem Open Source Projekt “Contributed”. Was zählt alles zu “Contribution”? Unter “Contribution” läuft eigentlich alles – ob es Fragen/Probleme zu dem Projekt via Issues ist oder Dokumentation nachreicht oder ob man darüber bloggt oder das Projekt vorstellt. […]

  • HowTo: Web.config samt eigener ConfigSection zur Laufzeit ändern

    In dem HowTo geht es darum wie man die Web.config zur Laufzeit ändert und was es dabei zu beachten gilt. Das ganze klappt auch mit komplexeren ConfigSections. Eigene ConfigSection? Vor einer ganzen Weile habe ich mal über das Erstellen einer eigenen ConfigSection geschrieben – im Grunde nutzen wir jetzt fast dieselbe Config. Zur Laufzeit? Startet […]

Support us!