HowTo: Microsoft Silverlight 1.0 (Webanwendungen mit dynamischen SilverlightHosts verschönern)
Eine bestehende Webapplikation mit einem kleinen Silverlight Host die “Video” Fähigkeit beibringen ist nicht unbedingt schwierig, dass Problem was allerdings besteht ist, dass es bereits viele HTML Suchmasken oder Datenforumlare gibt.
Wenn man nun nur kleine Silverlight Teile benötigt, wollen wir keine große Silverlight Anwendung haben, sondern mehrere kleine, da wir diese mit den bereits bestehenden Forumlaren verschmelzen wollen:
Schritt 1: Template.xaml erstellen
Mit Microsofts Expression Blend 2 (August Preview) erstellen wir ein kleines Template, welches wir später befüllen wollen. Das Template ist ähnlich geartet wie das, welches ich bereits in diesem HowTo beschrieben habe.
Es enthält ein gespiegeltes Textelement, welches wir dynamisch unseren Divs hinzufügen wollen.
In diesem Template wurde die beiden Textelemente jeweils mit einem “x:Name=’TitleText’” & einem “x:Name=’TitleShadow’” versehen damit wir es in Javascript ansprechen können.
Schritt 2: Silverlight Projekt anlegen / Silverlight.js dem Projekt hinzufügen & Template einfügen
Ich hab in meinem Beispiel das Silverlight 1.0 Template des SDKs abgewandelt, aber ansonsten braucht man nur die Silverlight.js (aus dem Template z.B.) sowie unser Template aus dem Expression Blend Ordner (oder man hat die XAML Datei per Hand erstellt – ist am Ende egal) importieren.
Die Default.html enthält (neben dem Style und den JS Links):
<input type="text" name="Count" id="Count" /> <button type="button" onclick="createElements()">Click</button> <div id="AppHost"> </div>
In dem “AppHost” Div werden wir unsere Divs hinzufügen, welche dann wiederrum unsere SilverlightHosts darstellen.
In dem Inputfeld wird die Anzahl der Divs zum Erstellen angegeben welche bei “createElements()” erstellt werden.
Schritt 3: Javascript zum dynamischen Erstellen implementieren
In der Defaut.html.js liegt unsere “Logik”:
createElements():
function createElements()
{
var count = document.getElementById('Count').value;
for(var i = 0; i < count; i++)
{
var itemDiv = document.createElement('div');
itemDiv.id = 'element_' + i;
itemDiv.className = 'Elements';
var silverlightDiv = document.createElement('div');
silverlightDiv.id = 'element_silverlight_' + i;
silverlightDiv.className = 'Silverlights';
itemDiv.appendChild(silverlightDiv);
createSilverlight(silverlightDiv, i);
document.getElementById('AppHost').appendChild(itemDiv);
}
}
Die “createSilverlight(silverlightDiv, i)” Methode erstellt unsere SilverlightHosts – das “silverlightDiv” gibt dabei an, in welchen Div es erstellt werden soll und das “i” ist in diesen einfachen Fall meine Javascript-ID, welches unser Div repräsentiert. Im praktischen Umfeld könnte es aber z.B. ein JSON Objekt sein.
createSilverlight(parentDiv, id):
function createSilverlight(parentElement, id)
{
var slPluginId = 'SilverlightPlugIn_' + id;
Silverlight.createObjectEx({
source: 'Template.xaml',
parentElement: parentElement,
id: slPluginId,
properties: {
width: '295',
height: '189',
background:'#ffffffff',
isWindowless: 'false',
version: '1.0'
},
events: {
onError: null,
onLoad: onComplete
},
context: id
});
}
Diese Methode erstellt den Silverlight Host mit der “createObjectEx” Methode. Allerdings können wir im Anschluss nicht direkt auf den SilverlightHost zugreifen und unsere beiden Textelemente je nachdem anpassen – daher definieren wir eine Javascript “onload” Methode namens “onComplete“.
Der Aufruf dieser Methode geschiet nachdem das Silverlight Objekt angelegt wurde – allerdings benötigen wir noch eine ID, damit wir in der onComplete Methode auch wissen, bei welcher ID wir gerade sind.
Für das weitergeben des ID Parameters an das “onload” Event gibt es das context Objekt: In unserem Fall geben wir hier unsere ID weiter, damit wir dann in der “onComplete” Methode darauf zugreifen können.
Wie auch im vorherigen Abschnitt: Ein JSON Objekt könnte genauso gut weitergegeben werden.
onComplete(sender, userContext, eventArgs):
function onComplete(sender, usercontext, eventArgs)
{
sender.content.FindName("TitleText").Text = "My Item: " + usercontext;
sender.content.FindName("TitleShadow").Text = "My Item: " + usercontext;
}
Mit den Informationen können wir nun unsere dynamischen Silverlight Hosts erstellen. Über den “sender” können wir auf den XAML Content zugreifen und über die “FindName” Methode unseren Text ändern.
Ergebnis:
Die Anwendung ist natürlich sehr zweifelhaft, allerdings soll es nur das Prinzip zeigen, wie man mehrere Silverlight Hosts nehmen kann, um einzelne Abschnitte der Website zu erweitern.
Downloads / Demos:
[ Hier gehts zur Demoapplikation | Hier gibts den SourceCode ]
Links:
HowTo: Microsoft Silverlight 1.0 (dynamische Spiegeleffekte erzeugen)
Microsoft Expression Blend 2 August Preview
Silverlight SDK
Silverlight Plugin erstellen
Silverlight onLoad
Silverlight Events
Silverlight FindName
About the author
Written by Robert Mühsig
Robert Mühsig (@robert0muehsig) ist Webentwickler und beschäftigt sich mit Web-Frameworks (vor allem dem ASP.NET MVC Framework) und scheut sich auch nicht vor Javascript. Ansonsten bloggt er über all jene Probleme, die ihm über den Weg laufen. Seit 2008 ist er Microsoft MVP für ASP.NET und er arbeitet bei der T-Systems Multimedia Solutions GmbH in Dresden. Treffen kann man ihn online via Twitter (@robert0muehsig) oder dieser Seite oder bei der .NET User Group Dresden.
Letzte Kommentare