Silverlight - Intégration du navigateur
Dans ce chapitre, nous allons voir comment une application Silverlight peut fonctionner en conjonction avec une page Web en utilisant le support d'intégration de navigateur.
Nous pouvons explorer l'intégration de Silverlight avec le navigateur de deux manières:
Le code JavaScript exécuté dans le navigateur peut accéder aux fonctionnalités de votre application Silverlight.
Silverlight a la capacité de fournir des wrappers JavaScript pour les objets. Votre.NET le code exécuté dans le plug-in Silverlight a accès au DOM HTML et à d'autres fonctionnalités de script du navigateur grâce à Silverlight .NET wrappers pour les objets JavaScript.
Nous verrons comment une application logicielle basée sur un navigateur peut stocker des informations de manière permanente sur le client.
Silverlight et HTML
En ce qui concerne le monde du HTML, le contenu Silverlight n'est qu'un élément unique. Cela est vrai pour la mise en page. L'ensemble du plug-in Silverlight et tout son contenu ne ressemblent qu'à un seul élément objet.
Vous devez garder à l'esprit que -
Silverlight ne remplaçait pas le HTML, il a été conçu pour le compléter. Par conséquent, la possibilité d'accéder à un autre élément du DOM est importante.
Il vous permet d'utiliser Silverlight le cas échéant.
Sur une page qui utilise principalement du HTML, l'intégration de Silverlight avec le monde du navigateur va au-delà du simple fait d'exister en tant qu'élément DOM, sous réserve d'une mise en page HTML normale.
Accéder au DOM
Le contenu Silverlight doit pouvoir participer pleinement à une page Web. Par conséquent, il devrait pouvoir accéder au DOM HTML. Silverlight fournit les objets de pont qui enveloppent les objets de script de navigateur sous forme d'objets Dot Net, leScript objectclasse dans le système. L'espace de noms du navigateur fournit des méthodes qui vous permettent de lire et d'écrire des propriétés et de consacrer des fonctions à l'objet de script du navigateur.
Vous avez besoin d'un moyen de mettre la main sur un objet Script en premier lieu. Silverlight fournit une classe de page HTML qui vous donne accès à diverses pages des fonctionnalités telles que les objets Script.
Jetons un coup d'œil à un exemple simple dans lequel nous avons un script simple qui crée un objet avec quelques attributs. Certains d'entre eux ne sont que des valeurs et quelques-uns sont des fonctions.
<script type = "text/javascript">
myJsObject = {
answer: 42,
message: "Hello, world",
modifyHeading: function(title)
{ document.getElementById('heading').innerHTML = title; },
performReallyComplexCalculation: function(x, y) { return x + y; }
};
</script>Ci-dessous, le code XAML dans lequel un bouton est ajouté.
<UserControl x:Class = "DomAccess.Page"
xmlns = "http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x = "http://schemas.microsoft.com/winfx/2006/xaml"
Width = "400" Height = "300">
<Grid x:Name = "LayoutRoot" Background = "White">
<Button x:Name = "useDomButton" Content = "Use DOM" Width = "75" Height = "30"
Click = "useDomButton_Click" />
</Grid>
</UserControl>Voici l'implémentation du clic de bouton dans laquelle un script est appelé qui est créé dans un fichier HTML.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using System.Windows.Browser;
using System.Diagnostics;
namespace DomAccess {
public partial class Page : UserControl {
public Page() {
InitializeComponent();
}
private void useDomButton_Click(object sender, RoutedEventArgs e) {
ScriptObject myJsObject = HtmlPage.Window.GetProperty("myJsObject") as ScriptObject;
string[] propertyNames = { "answer", "message", "modifyHeading",
"performReallyComplexCalculation" };
foreach (string propertyName in propertyNames) {
object value = myJsObject.GetProperty(propertyName);
Debug.WriteLine("{0}: {1} ({2})", propertyName, value, value.GetType());
}
object result = myJsObject.Invoke("performReallyComplexCalculation", 11, 31);
HtmlElement h1 = HtmlPage.Document.GetElementById("heading");
h1.SetProperty("innerHTML", "Text from C# (without JavaScript's help)");
h1.SetStyleAttribute("height", "200px");
}
}
}Vous trouverez ci-dessous le fichier HTML complet.
<!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" >
<!-- saved from url = (0014)about:internet -->
<head>
<title>DomAccess</title>
<script type = "text/javascript">
myJsObject = {
answer: 42,
message: "Hello, world",
modifyHeading: function(title) {
document.getElementById('heading').innerHTML = title; },
performReallyComplexCalculation: function(x, y) { return x + y; }
};
</script>
<style type = "text/css">
html, body {
height: 100%;
overflow: auto;
}
body {
padding: 0;
margin: 0;
}
#silverlightControlHost {
height: 100%;
}
</style>
<script type = "text/javascript" src = "Silverlight.js"></script>
<script type = "text/javascript">
function onSilverlightError(sender, args) {
var appSource = "";
if (sender != null && sender != 0) {
appSource = sender.getHost().Source;
}
var errorType = args.ErrorType;
var iErrorCode = args.ErrorCode;
var errMsg = "Unhandled Error in Silverlight 2 Application " +
appSource + "\n" ;
errMsg += "Code: "+ iErrorCode + " \n";
errMsg += "Category: " + errorType + " \n";
errMsg += "Message: " + args.ErrorMessage + " \n";
if (errorType == "ParserError") {
errMsg += "File: " + args.xamlFile + " \n";
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
} else if (errorType == "RuntimeError") {
if (args.lineNumber != 0) {
errMsg += "Line: " + args.lineNumber + " \n";
errMsg += "Position: " + args.charPosition + " \n";
}
errMsg += "MethodName: " + args.methodName + " \n";
}
throw new Error(errMsg);
}
</script>
</head>
<body>
<!-- Runtime errors from Silverlight will be displayed here.
This will contain debugging information and should be removed or hidden when
debugging is completed -->
<div id = 'errorLocation' style = "font-size: small;color: Gray;"></div>
<h1 id = 'heading'></h1>
<div id = "silverlightControlHost">
<object data = "data:application/x-silverlight-2,"
type = "application/x-silverlight-2" width = "100%" height = "100%">
<param name = "source" value = "ClientBin/DomAccess.xap"/>
<param name = "onerror" value = "onSilverlightError" />
<param name = "background" value = "white" />
<param name = "minRuntimeVersion" value = "2.0.30923.0" />
<param name = "autoUpgrade" value = "true" />
<a href = "http://go.microsoft.com/fwlink/?LinkID=124807"
style = "text-decoration: none;">
<img src = "http://go.microsoft.com/fwlink/?LinkId=108181"
alt = "Get Microsoft Silverlight" style = "border-style: none"/>
</a>
</object>
<iframe style = 'visibility:hidden;height:0;width:0;border:0px'></iframe>
</div>
</body>
</html>Lorsque le code ci-dessus est compilé et exécuté, vous verrez toutes les valeurs dans la fenêtre de sortie, qui sont extraites du fichier HTML.
