Managed Code Shines in Silverlight 1.1 : Page 3

Editing Card Data
Out of the box, Silverlight includes only the most basic controls such as Rectangles, TextBlocks, and Canvases—meaning it has no built-in input functionality. As you can imagine, writing complex controls such as TextBoxes and ListBoxes yourself, from scratch, would be quite an undertaking. To circumvent that problem, Silverlight provides rich interaction with the HTML Document Object Model (DOM), giving you the ability to interact both with HTML elements already on the page, and with HTML elements you create and add to the page dynamically at run-time using the HTML DOM.

When creating a Silverlight host control you obviously need to specify certain common properties such as width, height, and version, but you also need to set some other properties to control specific aspects of Silverlight's behavior when interacting with the host HTML page and the HTML DOM. If you need to overlay HTML controls on top of the Silverlight host control you must specify a value of true for the isWindowless property. However, you should set isWindowless to true only when you truly need that functionality, because there are performance implications when running in windowless mode:

   Silverlight.createObjectEx({
      source: "Page.xaml",
      parentElement: document.getElementById(
         "SilverlightControlHost"),
      id: "SilverlightControl",
      properties: {
         width: "100%",
         height: "100%",
         version: "1.1",
         enableHtmlAccess: "true",
         isWindowless: "true"
      },
      events: {}
   });

Figure 3. Overlaid HTML Controls: You can see the three editable HTML text input controls that have replaced the read-only Silverlight TextBlock controls on this card.

You need to set one other property, called EnableHtmlAccess, to true for a Silverlight application to interact with the HTML DOM (see the preceding code for an example). Strictly speaking, that code isn't necessary—the default value for this property is true, so you only need to provide a value if you need to disallow access to the DOM from Silverlight. Setting this property to false in the user viewer application would cause it to throw a run-time error stating that HTML access is restricted, and the page would fail to render.

Because Silverlight doesn't provide editable widgets, the user viewer application supplies editing functionality by replacing Silverlight TextBlock controls containing username, email, and messenger information with HTML text input controls as shown in Figure 3. After you have a reference to an HTML control, you can then manipulate it just as you would in JavaScript:

   HtmlElement txtEmailInput = 
      HtmlPage.Document.GetElementByID("txtEmail");
   
   // Set value.
   txtEmailInput.SetAttribute(
      "value", _txtEmail.Text);
   
   // Set style.
   txtEmailInput.SetStyleAttribute(
      "display", "block");
   txtEmailInput.SetStyleAttribute(
      "position", "fixed");

Through the HtmlElement reference, you can read or modify a control's attributes and style attributes. Attributes represent properties such as input type and value, while style attributes represent anything that would be contained within the control's style attribute in HTML. Because processing happens in the same context on the client as the hosting HTML page, when a user updates the contents of an HTML control, that update is immediately available to your managed code. To get data out of the HTML controls, you just read the value attribute; in this case you want to update the TextBlock values before minimizing the edited card, transferring any user edits back to the original card:

   string email = 
      HtmlPage.Document.GetElementByID(
      "txtEmail").GetAttribute("value");
   _txtEmail.Text = email;

Possible Enhancements
While the sample user view application is functionally feature complete, there are certainly ways to update the application and take it to the next level. Hooking the data retrieval and updating functionality into the ASP.NET membership system would be a great next step. The application could then be used to manage user attributes as well as manage user passwords and roles.

One thing Silverlight does really well is manage use of screen real estate. You could enhance the user viewer to take further advantage of this strong suit. Imagine an application such as this for managing all the data associated with an ASP.NET membership system user. You could display data such as name, username, and email on the front of the card, and use an animation to flip the card over and expose a role management UI on the back side. With Silverlight, the opportunities are wide open.

Previous Page