Extending the Notepad sample with a Web Browser View [Ricky Tan]

acropolis — Tue, 12 Jun 2007 09:35:00 GMT

The purpose of this post is to show just how easy it is to create additional views with Acropolis to extend the functionality of an application. The application shown here is the Notepad sample included as part of Acropolis CTP1. What the WebBrowserView will do is display the contents of the text in HTML format, like in a web browser.

Step 1: First, add the WebBrowserView. Open the Notepad sample in Visual Studio. In Solution Explorer, right-click the Notepad project and select Add | New Item. In the Add New Item dialog box that appears, select the Acropolis View (WPF) template, change the name to WebBrowserView.xaml and then click Add. In WebBrowserView.xaml.cs, add the following ViewExtensionInfo attribute to the WebBrowserView class declaration (see NotepadPartView.xaml.cs for an example):

[ViewExtensionInfo(DefaultViewTechnologies.WindowsPresentationFoundation,
                   "Web Browser View",
                   "Web Browser View for HTML",
                   typeof(INotepadPartViewContract))]

At this point, you can build and run to see the newly-added view with its default template. Click on the view-selector button, which is on the upper-right of the window (the button in the red circle in the image below), and select Web Browser View to change the view:

Step 2: Next, we shall customize the WebBrowserView. The WebBrowser control is from Windows Forms, so we need to add references to the System.Windows.Forms and WindowsFormsIntegration assemblies to our project. Then, in WebBrowserView.xaml, add the following to the class declaration (together with the other xmlns declarations):

xmlns:WF="clr-namespace:System.Windows.Forms;assembly=System.Windows.Forms"

Replace the default TextBlock with the WebBrowser control, which is hosted in a WindowsFormsHost:

Step 3: Finally, we hook up the WebBrowser control to the value of the NotepadText property from the Part-View contract. In WebBrowserView.xaml.cs, add the following method:

public override void BindToContract(IPartViewContract contract)
{
    base.BindToContract(contract);
    INotepadPartViewContract notepadPart = contract as INotepadPartViewContract;
    if (notepadPart != null && notepadPart.NotepadText.Value != null)
    {
        this.webBrowserControl.DocumentText = notepadPart.NotepadText.Value.ToString();
    }
}

That’s it. Build and run to get the Notepad application started up, then type in or paste in some HTML source, and use the view-selector button to switch between the default Notepad view and the web browser view. Just one ViewExtensionInfo attribute, some XAML declarations, and five lines of code is all you need to extend the Notepad sample with a WebBrowserView.

Acropolis Team Blog : Notepad Sample

Extending the Notepad sample with a Web Browser View [Ricky Tan]