Description
For Silverlight applications that live inside the browser, interacting with the hosting web page is an important capability. This lab guides you through using the HTML Bridge to do just this - manipulating the hosting HTML page as well as exploring two-way interaction between managed code inside Silverlight and JavaScript inside the HTML page.
Overview
For Silverlight applications that live inside the browser, interacting with the hosting web page is an important capability. This lab guides you through using the HTML Bridge to do just this - manipulating the hosting HTML page as well as exploring two-way interaction between managed code inside Silverlight and JavaScript inside the HTML page.
Objectives
This lab will demonstrate how to use the HTML Bridge to enable interactivity between the HTML page and the Silverlight application. Specifically, you will
- Interact with the HTML Document Object Model (DOM) from Silverlight
- Call JavaScript methods in the HTML page from Silverlight
- Call managed code inside Silverlight from JavaScript in the HTML page
System Requirements
You must have the following items to complete this lab:
- 2010 Information Worker Demonstration and Evaluation Virtual Machine
- Microsoft Visual Studio 2010
- Silverlight 4
- Silverlight web part extension for Visual Studio
- Silverlight 4 Toolkit
Setup
You must perform the following steps to prepare your computer for this lab...
- Download the 2010 Information Worker Demonstration and Evaluation Virtual Machine from https://tinyurl.com/2avoc4b and create the Hyper-V image.
- Install the Visual Studio 2010 Silverlight Web Part. The Silverlight Web Part is an add-on to Visual Studio 2010 and can be downloaded from https://code.msdn.microsoft.com/vsixforsp
- Ensure that the latest version of Silverlight 4 is installed by visiting https://www.silverlight.net
- Install the Silverlight 4 Toolkit from here: https://silverlight.codeplex.com/
- Run the SetupLab.cmd file from the <INSTALL>\Labs\HTMLBridge\Source\Begin folder to establish the SharePoint environment necessary for this lab
Exercises
This Hands-On Lab comprises the following exercises:
- Manipulating the HTML DOM from Silverlight
- Calling Silverlight code from JavaScript
- Calling JavaScript code from Silverlight
Estimated time to complete this lab: 45 minutes.
Starting Materials
This Hands-On Lab includes the following starting materials.
- Visual Studio solutions. The lab provides the following Visual Studio solutions that you can use as starting point for the exercises.
- <INSTALL>\Labs\HTMLBridge\Source\Begin\HTML DOM\HTML DOM.sln: This solution uses the HTML Bridge to interact with the HTML DOM
- <INSTALL>\Labs\HTMLBridge\Source\Begin\Calling Silverlight\CallSL.sln: This solution uses the HTML Bridge to call Silverlight managed code from JavaScript.
- <INSTALL>\Labs\HTMLBridge\Source\Begin\Calling JavaScript\CallJS.sln: This solution uses the HTML Bridge to call JavaScript from Silverlight managed code
Inside each exercise folder, you will find an end folder containing a solution with the completed lab exercise.