Windows Presentation Foundation on the Web: Web Browser Applications

Karen Corby
Windows Presentation Foundation
Microsoft Corporation

October 2005

Applies to:
   Microsoft .NET Framework 3.0 Runtime Components September CTP (PDC 2005 Build)

Summary: This document explores the potential of Windows Presentation Foundation on the Web. In addition, it discusses the technologies behind Web Browser Applications as well as how one might migrate their existing sites. It is targeted at folks in the Web space who are interested in enhancing their browser-based experiences. (14 printed pages)

Contents

Introduction
WPF on the Web: Web Browser Applications
Getting .NET Framework 3.0 on Computers
Deployment
The Windows Presentation Foundation Sandbox
Loose XAML
How to Migrate Your Existing Sites
Conclusion
Additional Resources

Introduction

Building a modern Web application is challenging. With all the options online, the bar for compelling Web experiences is continually rising: visuals need to be more impressive. Functionality needs to be more complex. And having a differentiated experience that attracts and retains customers is more important than ever.

The technical challenge of creating such a Web application is significant. On one hand, you need a technology that is powerful enough to support your visual goals, be it 3-D, complex animations, or enhanced typography. On the other hand, that same technology needs to enable your application logic. If you choose a solution that relies on the server, users suffer the latency of post back communication. If you instead use a client side implementation, you face the obstacle of developing in a scripting language.

Many times the above technical challenges are already solved on the desktop version of the application. However, online versions have difficulty leveraging desktop solutions because they need to be authored in a Web technology.

Windows Presentation Foundation (formerly code-named "Avalon"), part of the Microsoft .NET Framework 3.0, offerings, provides support for two application types: standalone applications and Web Browser Applications (WBAs). Web Browser Applications, pronounced "wuba," are online-only applications that run in the browser and are not installed. These applications execute in a security sandbox and harness the power of the Windows Presentation Foundation platform for the Web.

This paper discusses the potential of WPF in the browser, the technologies behind Web Browser Applications, and how you might migrate your existing sites. It is targeted at people in the Web space who are interested in enhancing their browser-based experiences.

Note   If you are interested in WPF installed, standalone applications that have "Web-like" deployment, you should explore ClickOnce deployment.

WPF on the Web: Web Browser Applications

Web Browser Applications (WBAs) bring the power of Windows Presentation Foundation to the Web. This section highlights what WBAs have to offer and identifies some of the scenarios that are conducive to Web Browser Applications.

What Web Browser Applications Offer

As a flavor of Windows Presentation Foundation applications, Web Browser Applications offer many benefits:

• XAML. WPF introduces a new declarative programming model called "Extensible Application Markup Language," or XAML. Because it is a direct reflection of the underlying platform APIs, developers can leverage all the benefits of a typed programming system. This includes friendly markup error messages during compilation as well as more transparency into what code is needed to provide UI "hookups."

  <Application x:Class="MyApp" />
  

  Figure 1. Application class defined in XAML

• **Data binding. ** Data binding provides a flexible, declarative and robust way of getting data into the UI; it allows an application author to keep business logic and UI separated.  Because WPF controls support data binding to information on a server, Web developers can asynchronously consume their data and visualize it in effective and interesting ways using a rich data templating system.

• 3-D. The WPF 3-D system is fully integrated into the platform. It is no more difficult to paint a 3-D shape with a solid color than to paint that same 3-D shape with a video or a paragraph of text.

  

  Figure 2. 3-D in the browser

• Flow Documents. Unlike fixed documents, flow documents dynamically layout content based on window size, device resolution, user preference, and so on. This provides users with a superior, and more personalized, reading experience.

       

  Figure 3. Same flow document, different window and font sizes

• Text. WPF unlocks the rich typography features available in OpenType fonts (both TrueType and CFF). This provides better text rendering using the latest advances in ClearType, including sub-pixel spacing and y-direction anti-aliasing.

  

  Figure 4. Typography in WPF

• Animations. The WPF animation system provides a flexible method of specifying complex, synchronized changes in your scene. Full integration with the property and eventing systems, databinding, styling, and templating allows for deep support of rich, interactive applications.

        

  Figure 5. Blackjack Card Animating in 3-D

• Vector graphics. WPF's native use of vector graphics allows it to operate at full visual fidelity (with brilliant anti-aliasing) at any scale or resolution.

    

  Figure 6. Same vector graphic, different window sizes

• Hardware acceleration. Today's graphics hardware is getting better and better all the time. WBAs can take advantage of WPF's hardware acceleration support to create new levels of visual complexity while leaving the CPU free for the application's computing requirements.

• Security sandbox. WBAs run in a security sandbox that limits the types of actions that they can perform. This means WBAs can do things like render UI, talk to site of origin servers, write and read to/from isolated storage, and so on. However, they cannot do more dangerous things like access the registry, read or write directly to the file system, and so on (for more details, see the sandbox section of this document).

• No-touch deployment. Because Web Browser Applications are sandboxed non-installed applications, they do not require user interaction to launch: there is no need to click through a security prompt or an information bar message. They just run.

• .NET Framework programming languages. WPF is built on top of the .NET Framework. WBAs therefore receive all the benefits of being strongly typed managed applications. This includes the use of .NET Framework programming languages ( C#, Visual Basic, and so on), native communication to ASMX Web services, and access to the many tools available for the .NET Framework platform.

• Same programming model for desktop/Web. Many product teams are forced to author two independent versions of their applications: a Web DHTML version and a desktop Win32 version. Because WPF offers support for both online and installed applications, desktop and Web applications can share code bases. In order to build your application as a Web Browser Application, simply use the template included in Visual Studio 2003 or set three properties in your project file:

  <HostInBrowser>True</HostInBrowser>
  <Install>False</Install>
  

  Note   The Web version of the application should also disable any functionality disallowed in the sandbox.

• Designer and Developer split. WPF minimizes the contract between UI and logic, allowing developers and designers to focus on the thing they do best. Moreover, by encapsulating powerful design concepts (such as rich 2-D, animation, and dynamic layout) and exposing them in a highly toolable markup format, WPF enables the designer to directly express his or her best and most creative ideas and become an independent UI creator.

Application Scenarios for Web Browser Applications

Web Browser Applications offer many benefits to Web developers. As a Windows technology, they can also greatly enhance customer experience on Windows XP, Server 2003, and Vista machines. However, depending on the application content and customer reach goals, WBAs may not be the most appropriate technology for you. In this section, we discuss the scenarios where Web Browser Applications offer a big win.

Scenarios Where Web Browser Applications Are Recommended

WPF can offer many development and user experience advantages. Web Browser Applications are recommended in these scenarios:

• Reading and Rich Content Visualizations. WPF can enable a better experience for content-based sites that are driven by asynchronously data-bound 3-D, animations, or text. They can also be easier to build: visuals can be defined in XAML, which designers can author directly or create using tools like Expression Interactive Designer. For sites that store content as XML, creating a server-side transform to both XAML and HTML is low cost and high impact.
• Online Gaming and Modeling. Sites like online games and scientific modeling require sophisticated logical or computational engines. Because WBAs use managed code to drive the applications, building complicated client-side logic comes with greater ease. And, because the heavy lifting can happen on the client with cached information in isolated storage, the user doesn't need to feel the latency of Web postbacks.
• Data Flow Management and Productivity Applications. Like gaming applications, data flow and productivity Web applications are logic driven. In addition, these applications often require Web service interaction. Since WPF is built on .NET, you can use the provided ASMX Web services infrastructure. There is no need to build your own mechanism to communicate between applications and Web services.
• Two Versions of Application: Desktop and Web. Instead of using two different application technologies, product teams can leverage the same code base by creating a WPF Web Browser Application and WPF installed application.
• Corporate Applications. The deployment of any of the above applications is even simpler in corporations where administrators control the hosting environment. This might include having the .NET Framework 3.0 pre-installed on all client machines or customizing security policy for intranet applications.

Scenarios Where Web Browser Applications Should Be Considered

Below are some scenarios where using Web Browser Applications should be considered. Depending on the relative importance of visual complexity, development ease, and customer reach, it may be compelling to create a preferred WBA experience in addition to a wider reaching HTML version.

• Marketing campaigns. With WPF, Web designers can create an immersive, interactive marketing campaign that draws in potential customers. In many cases, it may be valuable to create a more compelling experience for Windows users by building WBAs.
• E-commerce. Depending on the customer base, offering a differentiated experience for .NET Framework 3.0 users may be advantageous to a company's brand and business.

Getting .NET Framework 3.0 on Computers

The ubiquity of this new platform is an important consideration for developers looking to target .NET Framework 3.0. We plan to address increasing .NET Framework 3.0 ubiquity in several ways.

For Windows XP SP2 and Server 2003, .NET Framework 3.0 will be available as a download at Windows Update. We are currently exploring ways of making this installation point more discoverable for these users.

For the PDC Beta release of Windows Vista, the runtime components necessary to run Windows Presentation Foundation applications are not installed by default. However, a shortcut provides a pointer for installation from the setup disk. The installation experience for Windows Vista is not final and is subject to change for future beta releases.

Deployment

Getting applications out to customers is a pivotal part of any application platform story. This section delves deeper into the deployment aspects of Web Browser Applications, including deployment technology, browser hosting, and WPF detection.

ClickOnce

ClickOnce is a new .NET Framework technology that offers Web-like deployment. When a user clicks on a link, application files are downloaded and installed on the machine. Subsequent runs always launch the latest published version of the application, providing a smooth versioning story.

In addition, ClickOnce application installation itself is isolated, non-impactful, and reversible. Applications cannot take dependencies on other applications (just Global Assembly Cache assemblies) and installation cannot affect the state of your machine. This means that when the application is uninstalled (either explicitly through Add Remove Programs or by falling out of the ClickOnce application cache), the entirety of the application is removed.

ClickOnce also provides applications with a Code Access Security-based security deployment model. (This is discussed further in the sandbox section.)

Web Browser Applications are cached, online-only, ClickOnce applications. In addition to the above benefits, they are not permanently installed on the machine. However, because they are cached, second runs are faster and more efficient.

Note WPF applications that wish to be installed and run outside the sandbox can still be standalone ClickOnce applications and leverage Web-like deployment features. For more information on ClickOnce, please see the ClickOnce whitepaper.

Browser Hosted

Aptly named, Web Browser Applications only run in the browser. They may appear top-level in the browser, or hosted within an HTML IFrame.

The application does not need to be compiled differently depending on where in the browser it is hosted.

Figure 7. Web Browser Applications in the Browser

Supported Browsers

Out of the box, Web Browser Applications can run in Internet Explorer 6 or later, as well as any browser that hosts the Microsoft WebBrowser Control.

Internet Explore WBA hosting was enabled by creating a Windows Presentation Foundation document object host. It is possible for third parties to author a plug-in (based on the extensibility model of a given browser) that hosts the WebBrowser control. More information on hosting the WebBrowser control can be found in Additional Resources.

Determining When WPF Is Installed

In order to determine when to deliver an enhanced experience to .NET Framework 3.0 users, you can inspect the user agent string to determine if WPF is installed on the machine. The SDK provides a useful article describing how to do this.

The Windows Presentation Foundation Sandbox

With the prevalence of Web-distributed malware and viruses, users have become increasingly confused when confronted with a security prompt. Many "click through" and get burned. Others refuse to "click OK" and avoid installing anything they encounter on the Web or e-mail. As such, there are many advantages to providing Web customers with a safe and prompt-free experience.

Web Browser Applications run in a security sandbox that is limited by their deployment location. By default, all WBAs run in the Internet sandbox. Because they are sandboxed and not installed, Web Browser Applications do not require a security prompt.

How the Sandbox Was Built

The WPF sandbox is built using Code Access Security (CAS), the .NET security framework. This security model uses a combination of permission sets and deployment zones to determine an application's privileges. Please see the Code Access Security article for more information on CAS.

Sandbox Features

Today's WPF Internet sandbox encompasses a rich feature set that allows Web Browser Applications to take advantage of much of the platform's offerings. The following list highlights this feature set.

* Coming in the Beta 2 release of Windows Presentation Foundation.

Not all platform features are available in the sandbox. This is by design. Following are examples of features not enabled in the Beta 1 Internet sandbox.

Note Because of zone-based deployment, intranet applications may request to run in a slightly wider sandbox than Internet applications. This includes the ability to launch new windows or access a fuller set of clipboard formats.

Extending the Sandbox

The extensibility mechanism in WPF is the same as that found in the .NET Framework. A fully trusted, strongly named signed assembly can install itself into the Global Assembly Cache (GAC). By placing the AllowPartiallyTrustedCallers (APTCA) attribute on the assembly, the author opens up the assembly's public APIs to any Web Browser Application.

The decision to make an assembly APTCA is nontrivial. It implies a strong endorsement of the security of the DLL as well as appropriateness of the API set for sandboxed callers. Adding an assembly to the GAC requires an MSI installation and a security prompt.

In you are interested in more information on writing APTCA GAC'ed assemblies, please see Additional Resources at the end of this article.

Loose XAML

Loose XAML files are markup-only files that use XAML to define the visual content to be rendered. They are not compiled with an application, but exist as discrete files on a Web server. Like WBAs, they can be hosted top-level in the browser or within an HTML IFrame. Loose XAML always runs in the Internet sandbox.

Because loose XAML is markup-only, it is constricted to content-only rendering. This means that loose XAML cannot support things like button event handlers or preserve application state on the client. However, they are a powerful and low-cost way of creating dynamic, server-generated WPF visuals.

Figure 8. Flow Document Loose XAML Hosted in HTML IFrame

How to Migrate Your Existing Sites

While you may see the benefits of Web Browser Applications, it may not be technically or financially possible to convert your entire Web presence to Windows Presentation Foundation. This section discusses how you can incrementally add WPF to your Web space.

Add Loose XAML

You can add Loose XAML to create islands of rich WPF content. These could be full "pages" or frames of rich text, 3-D, etc. For example, a site might add a virtualized tour of their product in XAML and then navigate to an HTML product information page. Or, an online encyclopedia could maintain its advertising HTML-based structure while displaying article content in XAML flow documents. (If an encyclopedia stored its content in XML streams, this is even a bigger win because transforming XML to XAML is low cost.)

Put WBAs in IFrames

You may want to create more interactive "islands" of WPF content than loose XAML supports. This content would require code in order to hook up UI events like button clicks or form submits. Small Web Browser Applications that are hosted in IFrames could form such smart WPF islands.

Create a mixed site

You might take the plunge and decide to migrate the actual infrastructure of your Web site to one large (or a series of focused) Web Browser Application. However, you may not have the time or resources to move your entire site to WPF. You can leverage existing implementations by pointing a WPF Frame to an HTML page at the hosting server. For instance, if you have not created a WPF chat forum, you can host the existing HTML-based version inside a WBA.

Communicating between HTML and WPF

You have several options to enable communication between HTML hosted in WPF or WPF hosted in HTML:

1. Use the server as a mediator for communication (HTTP Web requests).
2. Leverage URI parameters on the hosted HTML or WBA URI.
3. Use first-party Internet Explorer cookies.

By implementing one or a combination of the above solutions, you can create an organic way of creating a WPF experience for your .NET Framework 3.0 users.

Conclusion

Web Browser Applications bring the potential of Windows Presentation Foundation to the Web. They enable first class visualizations while providing the tools to create the supporting application logic. Loose XAML and tight browser integration provide effective ways to migrate existing sites. Coupled with a seamless deployment story and a security sandbox, WBAs are a powerful Web technology choice.

Additional Resources

1. MSDN Magazine ClickOnce Article
   On Demand Downloading
2. .NET Framework Developer's Guide: Code Access Security
   Default Security Policy
   Configuring CAS policy on machines
3. WebBrowser Control Hosting Article
   Sample MFC application hosting the WebBrowser control
4. Deploying Microsoft .NET Framework Version 3.0 (Detecting .NET Framework 3.0 and Earlier Releases)
5. Working with Assemblies and the Global Assembly Cache
6. .NET Framework Assemblies and the AllowPartiallyTrustedCallers Attribute
7. Performing Isolated Storage Tasks