Silverligth

Introducción a Silverlight
Parte 1: Creando un Proyecto Silverlight
¿Cómo agrega Ud. Silverlight a su página Web? Un proyecto Silverlight típico tiene cuatro archivos: un archivo HTML que contiene (“hostea”) la instancia del Plug-In Silverlight, un archivo silverlight.js, un archivo XAML, y un archivo JavaScript que le da soporte al archivo HTML. Este documento describe cómo crear un proyectobásico, y agregarle contenido Silverlight al archivo HTML. Antes de Comenzar… Antes de poder crear contenido Silverlight, necesitará los siguientes elementos: El Plug-In de Silverlight Un archivo HTML para mostrar el contenido SilverLight Un editor de texto, como Notepad para editar su archivo HTML.

Paso 1: Agregue referencias al Script en su Página HTML En este paso, Ud. adicionará referenciasapuntando a los archivos JavaScript Silverlight.js y createSilverlight.js en su página HTML y creará un elemento para contener (“host”) su Plug-In Silverlight. El archivo Silverlight.js es un archivo de soporte JavaScript que permite que su contenido Silverlight sea visualizado en múltiples plataformas. Ud. creará el archivo createSilverlight.js como parte del Paso 2. a. Obtenga el archivoSilverlight.js. Ud. puede obtener de la carpeta Tools (Herramientas) del Silverlight SDK. Abra su página HTML y adicione el siguiente “markup” dentro de la sección :

b. c. d.

Cree un archivo vacío, y nómbrelo createSilverlight.js. Lo utilizará en el Paso 3. En su página HTML, adicione otra referencia dentro de la sección . Esta vez especifíquelo como: Su página HTML debe contener los siguienteselementos básicos:
A Sample HTML page

e.

1

Paso 2: Crear el Elemento HTML “Host” y el Bloque de Inicialización a) Cree el elemento HTML “host” adicionando las siguientes tres líneas a su archivo HTML, entre las etiquetas (tags) , en donde desea que aparezca su contenido Silverlight.


Ud. puede cambiar el ID de la etiqueta (tag) , si desea. Si Ud. está creando múltiplesinstancias del Plug-In Silverlight en la misma página, repita este paso para cada instancia, y asegúrese que cada ID sea único. b) Cree un bloque de inicialización: después del HTML que Ud. adicionó en el pase previo, adicione el siguiente script y HTML.
// Recobra el elemento div que Ud. creó en el paso previo var parentElement = document.getElementById(―mySilverlightPluginHost‖); // Esta funcióncrea el Plug-In Silverlight. createMySilverlightPlugin();

Si está creando múltiples instancias del Plug-In Silverlight en la misma página, repita este paso para cada instancia, asegurándose de que cada uno tenga nombres de función únicos, o que utilice una función que tome un parámetro que utilice para establecer un ID único. También asegúrese de que cada bloque de script siga inmediatamente alDIV correspondiente creado en el paso previo. Ud. ha llegado al fin del paso 2. Su archivo HTML debe contener los siguientes elementos:
A Sample HTML page // Recobra el elemento div que Ud. creó en el paso previo var parentElement = document.getElementById("mySilverlightPluginHost"); // Esta función crea el Plug-In Silverlight. createMySilverlightPlugin();

2

Paso 3: Defina laFunción de Creación que Inicializa su instancia del Plug-In Abra el archivo createSilverlight.js que creó en el paso 1 y adicione la siguiente función JavaScript:
function createMySilverlightPlugin() { Silverlight.createObject( "myxaml.xaml", parentElement, "mySilverlightPlugin", { width:'300', height:'300', inplaceInstallPrompt:false, background:'#D6D6D6', isWindowless:'false', framerate:'24',version:'1.0' }, { onError:null, onLoad:null }, null); } // // // // Valor propiedad OnError -nombre función del event handler. Valor propiedad OnLoad -nombre función del event handler.

// // // // // // // // // // // // // //

Valor de Propiedad Source. Referencia DOM a DIV tag hosteador. Valor de ID del plug-in. Propiedades por cada instancia. Ancho del plug-in en pixels. Altura del...