Silverlight - Integración del navegador
En este capítulo, veremos cómo una aplicación Silverlight puede funcionar junto con una página web utilizando el soporte de integración del navegador.
Podemos explorar la integración de Silverlight con el navegador de las siguientes dos formas:
El código JavaScript que se ejecuta en el navegador puede acceder a funciones dentro de su aplicación Silverlight.
Silverlight tiene la capacidad de proporcionar envoltorios de JavaScript para objetos. Tu.NET El código que se ejecuta dentro del complemento Silverlight tiene acceso al DOM HTML y otras funciones de programación del navegador debido a Silverlight .NET envoltorios para objetos JavaScript.
Veremos cómo una aplicación de software basada en navegador puede almacenar información de forma persistente en el cliente.
Silverlight y HTML
En lo que respecta al mundo del HTML, el contenido de Silverlight es solo un elemento. Esto es cierto para el diseño. Todo el complemento Silverlight y todo su contenido parece un solo elemento de objeto.
Debes tener en cuenta que -
Silverlight no reemplazó al HTML, fue diseñado para complementarlo. Por lo tanto, la capacidad de acceder a otro elemento del DOM es importante.
Le permite utilizar Silverlight cuando sea apropiado.
En una página que utiliza principalmente HTML, la integración de Silverlight con el mundo del navegador va más allá de la mera existencia como un elemento DOM, sujeto al diseño HTML normal.
Accediendo a DOM
El contenido de Silverlight debe poder participar plenamente en una página web. Por lo tanto, debería poder acceder al DOM HTML. Silverlight proporciona los objetos puente que envuelven los objetos de script del navegador como objetos Dot Net, elScript objectclase en el sistema. El espacio de nombres del navegador proporciona métodos que le permiten leer y escribir propiedades y dedicar funciones al objeto de script del navegador.
Necesita una forma de hacerse con un objeto Script en primer lugar. Silverlight proporciona una clase de página HTML que le da acceso a varias páginas de las funciones, como los objetos Script.
Echemos un vistazo a un ejemplo simple en el que tenemos un script simple que crea un objeto con algunos atributos. Algunos de ellos son solo valores y un par de ellos son funciones.
<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>A continuación se muestra el código XAML en el que se agrega un botón.
<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>Aquí está la implementación del clic del botón en la que se llama a un script que se crea en un archivo 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");
}
}
}A continuación se muestra el archivo HTML completo.
<!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>Cuando se compile y ejecute el código anterior, verá todos los valores en la ventana de salida, que se obtienen del archivo HTML.
