Exercise 1: Manipulating the HTML DOM from Silverlight
This exercise introduces the HTML Bridge and walks you through the process of reading and writing the HTML DOM of the page that is hosting the SL application. The starter solution is set up only to contain the basic project structure required for this exercise as well as the non-coding elements necessary to jump right in and get started.
Task 1 – Preparing
In this task, you will open the starter solution in VS 2010 and explore the environment to understand what has been done to get things set up for the rest of the exercise.
Using Visual Studio 2010, open the starter solution named HTMLDOM from the <Install>\Labs\HTMLBridge\source\begin\HTML Dom folder. Solution Explorer should look like this:
Figure 1
Solution Explorer
- Notice that there are two projects in this solution:
- HTMLDOM – this is the actual project that will be deployed to SharePoint. It is an Empty SharePoint Project with a new project item added to it - the HTMLBridge item just above key.snk in the picture. The HTMLBridge project item is the Silverlight web part that will display our Silverlight application.
- SilverlightApplication1 – this is the Silverlight project in which we will build our Silverlight application. The output of this project is packaged with the output of the HTMLDOM project and deployed to SharePoint.
- Double-click on the Properties node in Solution Explorer underneath the HTMLDOM project and then open the SharePoint tab. Notice that the checkbox next to Enable Silverlight debugging is selected. This is necessary if we need to step through our code later on. Close the properties pane.
- [Optional] If desired, explore the different files in both projects, particularly the various Elements.xml files within HTMLDOM.
To finish exploring and see the results of what has been set up for you, hit the F5 key to deploy and activate the starter solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/htmlbridge/SitePages/SilverlightApplication1WebPartPage.aspx. Your page should look like this:
- The button and textbox controls are displayed, but they are not yet functional. We will take care of that in Task 2.
Task 2 – Using the HTML Bridge
In this task you will begin using the HTML Bridge to connect the Silverlight application to the HTML DOM and both read and write DOM elements.
- In Solution Explorer, double-click the MainPage.xaml file to open up the XAML designer. The starter solution has everything we need set up in here, so there is nothing for us to change.
Double-click on the Show Palindrome button. This will open up the code behind file and create the event receiver for the button click event:
Figure 3
Event receiver for button click event
Position your cursor on line 12 and add the following using declaration and then hit <Enter>:
using System.Windows.Browser;
- Referencing this namespace gives us shorthand access to the HTML Bridge classes (such as HtmlDocument, HtmlPage and HtmlElement) we will use throughout the rest of this exercise.
Position your cursor on line 17, just below the class declaration and hit <Enter>. Type the following declarations and then hit <Enter>:
HtmlDocument htmlDoc = HtmlPage.Document; HtmlElement htmlEl;
- This sets up the objects we will use to access the HTML DOM of the page hosting our Silverlight application.
Position your cursor inside the MainPage constructor (line 23) and hit <Enter>. Enter the following code:
htmlEl = htmlDoc.GetElementById("UserText"); htmlEl.SetAttribute("value", "bolton");
- This code connects to the HTML element with the ID of UserText and sets its value to the string “bolton”. This shows how to set the value of an HTML control from Silverlight.
Position your cursor on line 30 inside the buttonShowPalindrome_Click method and type the following code:
string theWord = htmlEl.GetAttribute("value"); tbOriginalWord.Text = theWord; tbPalindrome.Text = ReverseString(theWord); stackPanel1.Visibility = Visibility.Visible;
- This code retrieves the value currently set in the HTML textbox control with the ID of UserText (which we set to bolton above, but the user could change) and stores it in the string variable theWord. It the sets the Text property of the Silverlight textblock control named tbOriginalWord to the retrieved value. It then calls a method (which we’ll add in the next step) to reverse the letters in the string and sets the Text property of the Silverlight textblock control named tbPalindrome to the newly returned value. Last, this code sets the visibility of the Silverlight StackPanel object which causes all of its child controls to be shown on the screen. This code shows an example of reading a value from an HTML control and using it inside Silverlight.
Position your cursor on line 34 and hit <Enter> twice and then type in the following code:
private string ReverseString(string s) { char[] arr = s.ToCharArray(); Array.Reverse(arr); return new string(arr); }
- This code is simply our utility method to generate a palindrome from the supplied string.
This completes the coding, so hit F5 to test out the solution. After Visual Studio launches the browser, navigate to https://intranet.contoso.com/sites/htmlbridge/SitePages/SilverlightApplication1WebPartPage.aspx. Your page should look like this:
- The only visible difference from the previous screenshot is that the HTML textbox now has the value we gave it in step 5.
Click the Show Palindrome button to run the rest of our code. Your screen should now look like this:
Figure 5
Updated text fields
- [Optional] Try entering new text in the HTML textbox and clicking the Make Palindrome button to see the new results.
Exercise 1 Verification
In order to verify that you have correctly performed all steps of exercise 1, proceed as follows:
Verification 1
In this verification, you can compare the anticipated output shown in step 10 with the actual output shown on your screen. If the two match, you have completed the exercise successfully.