The Windows Media Center Platform Team Blog RSS 2.0
 Saturday, March 24, 2007

Update: I'm adding a mini-FAQ at the bottom as the comments and feedback arrives.

As part of the documentation updates for the upcoming revision of our Windows Media Center Software Development Kit I have been writing some topics on how to effectively use the MCML Preview Tool (MCMLPad.exe) during development. Since I've seen a few blog posts and discussion forums on the topic I thought I would preview this documentation for you, and ask for feedback and / or additional areas which need coverage. So, try this on for size...

Editing UI
The MCML Preview Tool is designed to assist in the development of individual pieces of UI and as such is specifically designed to NOT scale the MCML content you view therein when run in standalone mode. When run in Windows Media Center the MCML Preview Tool inherits the proportional scaling applied to all applications which run within Windows Media Center. There are some good reasons for this, among which my favorite is the the authoring and preview cycle when creating pieces of UI. You want to see your UI at full size, especially if working on some very nuanced / small feature of that UI. Because Windows Media Center scales the content proportionally to the window, the visual elements can get quite small when you want to switch quickly between your MCML authoring environment and the MCML Preview Tool. Compare the size of the button in each of the windows to the right of IDE window in this screenshot:

ButtonEditSmall.png

The MCML Preview Tool running in Windows Media Center is on the top and the standalone version is on the bottom (note: you can click on most of the images in this post for a life size view). As you can see, when editing the styling of the UI you want to be working at 100% -- otherwise it's just too small when you are fine tuning.

Evaluating Layout and Behavior
When run standalone, the MCML Preview Tool gives you the ability to see how your layout works and looks given different sizes and aspect ratios. Windows Media Center runs with two main aspect ratios in mind: 16:9 and 4:3. You can always set the monitor to some other resolution (example: 1920x1200 for 16:10) and run Windows Media Center at full screen to get different aspect ratios -- but this is rather tedious to do during development of the UI pieces. By contrast, you can run MCMLPad with a completely arbitrary size. For example, here I am testing the snowflake virtualization sample gallery at a 4:1 aspect ratio:

SnowflakeOriginal.png

As I increase the overall size, the gallery grows to accomodate more rows and columns of data, and I can observe how it handles this scenario (including and Show or Hide animations). This is without having to change the panel which defines the 'gallery' holding the snowflakes in my application, and avoiding recompiling, installing to the GAC and registering in Windows Media Center as I edit. Here is the result -- note the item sizes don't change because there is no proportional scaling -- we simply see more snowflakes:

SnowflakeGrow.png

Page Variables
The MCML Preview Tool has a page concept, but it is distinctly different (and much more simple) than the one provided by Windows Media Center (the PageSession and HistoryOrientedPageSession classes). Granted, a 'page' is really <UI Name=Page> -- but the underlying functionality for what you expect a page to do within the overall platform is provided by Windows Media Center. A good way to think about this: The MCML Preview Tool is designed to work with the visual layer of the platform only. Once you get far enough along to test page behaviors it's time to switch over to testing the pieces / parts of the application with Windows Media Center as the host rather than the MCML Preview Tool. An even better approach is to test the page behavior very early in the application development cycle using wireframe resources. The simple button from MCML Sampler is a great example of UI to use to implement and test the layout and databinding which involves your page variables. Later on you replace Simple Button with the more beautiful, fully realized design.

Testing UI
When run standalone, the MCML Preview Tool allows you the flexibility to create a test harness for your UI. To demonstrate, I have created a simple test harness (download the sample solution here) for a button. Here is a screen shot:

ButtonTestSmall.png

Windows Media Center (top right) has the application (a compiled assembly) running which loads Menu.mcml allowing me to test the functionality of the button -- in this case, it makes a method call to display a Windows Media Center dialog. The standalone MCML Preview Tool window (bottom right) is the result of pressing F5 in Visual Studio which loads Test.mcml, designed to show all the different ways to instantiate the button using it's settable properties (again, the non-scaling is quite desireable here).

Taking this a large step further: Throughout the creation and testing of the Z sample application we used the power of layouts and rules in MCML to provide a mechanism to step through all of the the UI for Z. Here is what it looks like:

ZTestHarness.png

On the right we have each UI which defines an individual page within the Z sample application. You can select these items to load that 'page' (again, it's really a <UI> which, when combined with the HistoryOrientedPageSession becomes a bonified page in the application) into the larger, 4:3 constrained area on the left. This test harness is defined by Default.mcml in the sample code which ships in the SDK if you wish to adapt for use in your own applications.

To gain the Visual Studio F5 test harness functionality with the Z sample solution...

If you haven't previously done so...

    • Launch a command prompt with administrator privileges.
    • Navigate to C:\Program Files\Microsoft SDKs\Windows Media Center\v5.0\Samples\Windows Media Center Presentation Layer Samples\Z\.
    • Run Command.CreateDevEnvironment.cmd.

...otherwise MCMLPad will report an exception and close when you use F5 in Microsoft Visual C# 2005 Express Edition because the Z test harness can't find the data.

Then make the following changes in Microsoft Visual C# 2005 Express Edition:

    • Select Solution 'Z' (2 Projects) in Solution Explorer.
    • Select Project > Set StarUp Projects... from the menu.
    • Select Startup Project in the Solution 'Z' Property Pages.
    • Select the Single Startup Project option.
    • Select 'Z' in the drop down list.
    • Click OK.

Finally, select Debug > Start Debugging or press the F5 key to launch the Z test harness.

Note we set everything up to work this way by default for you in the Visual Studio template which ships with the SDK. Here are the basics of how this works if you want to modify to fit your workflow:

In order to launch MCMLPad from within Microsoft Visual C# 2005 Express Edition you have to manually edit the .csproj file for the solution because the Start Action setting isn't available in the Express SKUs user interface -- but it still works if you add some XML. For the purposes of this example let's take a look at the snippet which provides this functionality from the Z.csproj file:

  <PropertyGroup>
    <UseVSHostingProcess>true</UseVSHostingProcess>
    <StartWorkingDirectory>$(windir)\eHome</StartWorkingDirectory>
    <StartArguments>-load:"resx://Z/Z.Resources/Default" -assemblyredirect:"$(FullyQualifiedOutputPath)" -markupredirect:"resx://Z/Z.Resources/,file://$(MSBuildProjectDirectory)\Markup\,.mcml"</StartArguments>
    <StartAction>Program</StartAction>
    <StartProgram>$(windir)\eHome\McmlPad.exe</StartProgram>
  </PropertyGroup>

Most of these should be self explanatory and I'll break down <StartArguments> for you as it's the most complex but most important (read the Media Center Markup Language Preview Tool SDK topic for more information)

-load:"resx://Z/Z.Resources/Default"

Tells MCMLPad to load the Z assembly and navigate to the resource named Default (which is Default.mcml) contained therein. Default.mcml is never used by the application once installed -- its only purpose is to provide this <UI> test harness.

-assemblyredirect:"$(FullyQualifiedOutputPath)"

Tells MCMLPad to load the assembly from a specific location. When $(FullyQualifiedOutputPath) is evaulated it returns something like this: C:\Program Files\Microsoft SDKs\Windows Media Center\v5.0\Samples\Windows Media Center Presentation Layer Samples\Z\bin\Debug\. Note this won't work if the assembly is registered to the Global Assembly Cache, so be mindful of when you run Command.InstallAndRegister.cmd contained in the sample solution.

-markupredirect:"resx://Z/Z.Resources/,
 file://$(MSBuildProjectDirectory)\Markup\,
 .mcml"

This one is broke up into its three constituent parts on different lines for ease of readability. This tells the MCML Preview Tool to replace instances of 'resx://...' with 'file://...' and append .mcml to the end. This allows you to build the assembly once, load the test harness (Default.mcml) into the tool, make changes to the source MCML and test the results of those changes by refreshing MCMLPad without having to rebuild the assembly -- what I call interactive editing.

Interactive Editing
You can also create a compiled assembly and open MCML files directly in the MCML Preview Tool using the same -load, -assemblyredirect and -markupredirect switches as in the Visual Studio .csproj file. This allows you to edit / tweak UI and avoid recompiling, installing to the GAC and registering in Windows Media Center as noted earlier. You can use the command line for this, or the MCML Preview Tool Launcher power toy. Using this approach you can edit and preview your changes in real time by refreshing the MCML Preview Tool after you make markup changes. For example:

ButtonEditInteractiveSmall.png

In this screenshot we see the power toy defining the proper switches for the MCML Preview Tool, and the launched MCML Preview Tool window with our markup loaded. I've edited the Styles.mcml resource to change the focused button text color to red. I can continue to tweak all of Button.mcml resources (anything referenced with xmlns in the opened markup file, including those downstream) and returning to the MCML Preview Tool and pressing the F5 key to refresh and see my changes without a need to recompile. This allows me to make as many changes as I wish to the UI without committing them to my compiled assembly.

There are also other ways to leverage the power of the MCML Preview Tool -- with a little experimentation :-) -- so dig in...!

Mini-FAQ

How do I get proportional scaling in the MCML Preview Tool?
Use <ScaleLayout MaintainAspectRatio="true" AllowScaleUp="true" AllowScaleDown="true"/> in your test harness. For an example look at Default.mcml in the Z sample application, specifically <UI Name="TestWrapper">.

How can I easily switch between 16:9 and 4:3 aspect ratios?
The MCML Preview Tool defaults to 4:3 aspect ratio. Select the top or bottom window frame, hold down the CTRL key and size the window up or down -- the window will eventually 'snap' to the 16:9 aspect ratio. To reverse, select the right or left window frame, hold down the CTRL key and size the window up or down.

How can I test pieces of UI which are wired up to Windows Media Center APIs?
Generally speaking, you shouldn't (or rather, wouldn't). If the individual <UI> pieces are hard coded like this you probably aren't architecting your application properly -- even in a web / codeless scenario. In a properly architected application you should almost *always* be able to test your individual pieces of <UI> in the MCML Preview Tool without hooking them up to the Windows Media Center API. Follow the example in Button.mcml provided in the sample code for this post. When you run the application in Windows Media Center it loads Menu.mcml which uses the <Command> model item and <Rules> to wire up the functionality (in this case a C# method). When you are designing or testing the visuals for Button.mcml you load Test.mcml in the MCML Preview Tool. Test.mcml contains several <Command> model items but no <Rules> to perform the binding -- therefore the buttons behave visually as they will in the application, but have no functionality.

Categories: Resources | Comments [2] | # | Posted on Saturday, March 24, 2007 12:24:11 AM (GMT Standard Time, UTC+00:00)   
 Saturday, March 03, 2007

Aaron's got a great writeup on this over at his personal blog: Mailbag: How can I create a loading page for an MCML application?

Categories: Sample | Comments [3] | # | Posted on Saturday, March 03, 2007 3:51:22 PM (GMT Standard Time, UTC+00:00)   
 Tuesday, January 09, 2007

I'm pleased to announce our first Windows Media Center Community Development Experts over at http://discuss.mediacentersandbox.com, Niall Ginsbourg (mobilewares) and Andrew Cherry (andyc). These guys have been really active in our forums and have given great advice and help to others in the community. Here is more about them...

Niall is a freelance software developer/solution architect (with over 15 years experience) from Melbourne, Australia - and runs mobilewares.net - a small company with a passion for producing personal video recording (PVR), interactive television (ITV) and mobile phone related applications and services. Prior to starting mobilewares, Niall worked for several high profile Australian companies (and Microsoft Partners) in the enterprise and e-commerce space. Niall's current focus has been developing applications for Windows Vista using the Microsoft .NET Framework 3.0 and Windows Media Center Presentation Layer Application (managed code + Media Center Markup Language aka 'MCML').

Andrew lives in the UK and has over 20 years experience in corporate and commercial IT. He has been using and working with Media Center since 2004, and has been involved with both hardware and software development for the platform.  He has written commercial and custom software for the platform, initially for Windows XP Media Center Edition 2005 and most recently for Windows Media Center in Windows Vista.

Look for their new role icons to show up in the forums -- they look like this...

Congrats to Andrew and Niall...!!!

Categories: Discussion | Comments [4] | # | Posted on Tuesday, January 09, 2007 9:33:43 AM (GMT Standard Time, UTC+00:00)   
 Wednesday, December 13, 2006

I recently undertook an exercise to convert the installer source files for the Q sample application in the Windows Media Center SDK from WiX v2.0 to WiX v3.0.  Since I wasn't sure how much general interest this topic would have, I posted an item on my personal blog that describes this experience.

Of particular interest to me in WiX v3.0 is the Votive Visual Studio 2005 add-in.  Votive allows you to create a WiX project (.wixproj) and include it in the solution for your Windows Media Center application.  Then, you can easily configure Visual Studio to rebuild your application binaries and repackage the MSI sequentially.  You can also use MSBuild to perform these build steps if you would like to script your build process instead of using the Visual Studio IDE.

For folks working on creating deployment solutions for Windows Media Center applications, I encourage you to check out this blog post and download the sample setup source files and build scripts that are included in the post.

You can find the blog post at http://blogs.msdn.com/astebner/archive/2006/12/10/converting-the-q-sample-application-setup-to-use-wix-v3-0-and-votive.aspx.

Aaron

 

Categories: Sample | Comments [0] | # | Posted on Wednesday, December 13, 2006 1:08:38 AM (GMT Standard Time, UTC+00:00)   
 Saturday, November 18, 2006

We just posted the Windows Media Center Software Development Kit 5.0. Aaron stated it most appropriately: Sweeeeeeeeeeeet!!!!

Not many surprises in our RTW release (well, a few) -- let me recap some of the highlights of what you get in the SDK...

Documentation -- The overall structure of the documentation has been vastly reworked to take a task based approach, including a new 'Designing For...' section. *New* We have also added a good bit of new material to the Media Center Markup Language tutorial for this release.

Media Center Markup Language Preview Tool -- Available in Windows Media Center and as a standalone application. Be sure to also download our first ever SDK Powertoy -- the Media Center Markup Language Preview Tool Launcher which provides cut-n-paste and history functionality.

Media Center Markup Language Sampler -- 145 Media Center Markup Language samples demonstrating how to create a user interface, starting with the typical 'Hello World' and progressing through animations, input handlers, layouts, repeaters, scrollers, transformers, rules and API usage.

*New* Media Center Markup Language Sampler Online -- Coming soon, this resource will showcase new MCML examples as we build them, particularly targeted for the web approach.

Visual Studio Templates -- For Windows Media Center Presentation Layer Applications and .NET Framework 3.0 eXtensible Markup Language Applications for both C# and VB.NET.

Sample Application 'Q' -- A podcasting and videoblog client for Windows Media Center.

*New* Sample Application 'Z' -- An end-to-end sample which demonstrates how to put the pieces + parts found in MCMLSampler together in a real world application. I posted more in-depth information about Z here (or click the screencap).

Click To Record Authoring Wizard -- This applet helps you craft the XML needed to pass in to the Click To Record API methods to schedule TV recordings using the DVR features of Windows Media Center.

*New* Registration Example -- There is now sample registration XML and registry keys which demonstrates how to register a web application for every integration location available within Windows Media Center.

Download the Windows Media Center Software Development Kit 5.0 from...

http://www.microsoft.com/downloads/details.aspx?FamilyId=A43EA0B7-B85F-4612-AA08-3BF128C5873E&displaylang=en

Categories: SDK | Comments [7] | # | Posted on Saturday, November 18, 2006 12:35:30 AM (GMT Standard Time, UTC+00:00)   

Several weeks ago a few of us were helping out some friends in MCML creation and realized the Media Center Markup Language Preview Tool wasn't exactly optimized for testing with web applications (i.e., any time you need to type http:// for a URI). It also has a few shortcomings in the history department (ummmmmm, there isn't one). So a few of us got together and created a powertoy (i.e., not an official part of the SDK and not supported by Microsoft --read the EULA for details) which greatly enhances use of the Media Center Markup Language Preview Tool as a standalone application. It provides a handy dandy graphical user interface which...

  • Allows you to browse to / type / copy / paste / edit a URI and launch MCMLPad with command line switches.
  • Maintain a history of all URIs opened using the launcher.
  • Automatically save the history when the tool is closed and restore the next time you launch the tool.
  • Double-click any item in the history to launch MCMLPad with the item selected (and bubble it up to the top of your history).
  • Drag and Drop files from Windows Explorer to add items to your history.
  • Save a history to share with others or create resource groups for various projects.
  • Open histories you have saved or received from others. Included with the tool is a history for the MCMLSampler (MCMLPadAuto.Sampler.xml).
  • Clear the history.

      

The Media Center Markup Language Preview Tool Launcher Powertoy is available for download from...

This application is now included in the Windows Media Center SDK available from http://www.microsoft.com/downloads/details.aspx?familyid=a43ea0b7-b85f-4612-aa08-3bf128c5873e&displaylang=en.

Once installed, this powertoy resides in \Program Files\Microsoft SDKs\Windows Media Center\v5.0\Tools\ (unless you change the path) with a shortcut on the Windows Start Menu in the Microsoft Windows Media Center SDK folder. You can copy the executable anywhere you wish on the machine and run. It will create history and settings XML in the same folder as long as it has RW permissions.

Categories: SDK | Comments [0] | # | Posted on Saturday, November 18, 2006 12:34:04 AM (GMT Standard Time, UTC+00:00)   

For years we have had folks ask us for a complete end to end sample. Allow me to take a brief moment of your time and introduce you to our newest family member...

Z

Here are screenshots of what you get with this sample application which debuts with the Windows Media Center Software Development Kit we are making available today:

An on screen keyboard designed to work especially well for remote control (while still working quite naturally for mouse and keyboard). For example, Channel Up / Down allows you to cycle through pages of characters (we ship EN-US uppercase, lowercase and symbols) without having to navigate off of the characters themselves. You can expand the number of pages by adding additional MCML to the source. A commented QWERTY version is already present in the source if you prefer that approach for your end users.

The login page demonstrates a typical username, password and remember me functionality. It's not actually wired up to anything for authentication, but provides a ready made example appropriate for most login experiences.

The top level navigation ('Main Menu') features a nice animation to highlight the row which has current focus. The hypothetical Z company is a triple play, offering great content for Movies, TV and Music. You will begin to notice the animated 'living' background and multiple levels of transparency within and across objects.

The main menu features promotional items which can drill down to the detail page for that item. A good bit of Z is data driven using XML and the SDK includes the Microsoft Access database used to create the XML for developers who want to start with Z and expand features.

Selecting the Movies item takes us to the gallery featuring all movies. The galleries have working filters similar to the pivot points in Windows Media Center. Here we begin to see that in Z, content is king. The design is heavily weighted towards highlighting the images associated with the content and a de-emphasis of the user interface elements.

Selecting one of the items in the gallery takes us to the details page where content is really highlighted with a full screen image. Note the alpha blending of graphics. This is also a good chance to point out the Z main menu logo at the top as well as the Search and Downloads buttons at the bottom which persist on almost every page in Z.

After selecting the Preview button you are treated to the graphics alpha blended on top of a full screen video. In this case it's a sample from the Windows Media High Definition Showcase.

After selecting the Purchase button, Z begins the download of the content using a download manager service (again, full source code included in the SDK) which runs in the background. You can exit out of Z and even close Windows Media Center and the download will continue. By default, downloaded files are placed in \users\public\videos\ so they can be viewed in the Windows Media Center Videos gallery. Note the dialog box customization with Z logo.

Navigating down to and selecting the Downloads button takes us to a page where we can monitor the status of all current downloads, complete with working progress bar.

Here we see the TV gallery which showcases reuse of the same focus elements as other galleries but sized differently and arranged in two rows. In addition, the TV feature is 'deeper' than Movies -- it features 'Shows' which can be selected to see the 'Episodes'. This is designed to show how flexible the databinding is in Media Center Markup Language.

Drilling down to one of the TV episode items ('Error Amice') takes you to a details page which demonstrates use of the FindService method. As with Movie Preview we have alpha blended graphics (we can't show you a screen shot of that because we don't have rights to the images in the TV show -- but it works :-).

Selecting the 'Poena Commemorandum' item in the TV strip on the Main Menu takes you to a details page where you can schedule an individual recording using the Click To Record API. Note the Dialog box customization with the show image instead of the Z logo.

The Music feature in Z is designed to enumerate files and folders located in \users\public\music\ and offer them up to the user. This was one of the last features we implemented and we didn't have time to 'make it pretty' via interop with Windows Media Player to get additional metadata and album art. There have been a few requests from end users to be able to walk folders and this example provides a good starting point. When you select and individual music file we add it to the queue using the PlayMedia method. If there are no other items in the queue it immediately starts playing.

Z implements a search feature which returns results from the data XML and allows you to navigate directly to the detail page for the items found in the search. This works for Movies and TV but we didn't get around to enabling music. (Ah, work to book for vNext...!) It's also important to note anytime you navigate to a text box you can invoke the on screen keyboard.

At the top of every Z page (with the exception of login, main menu and on screen keyboard) there is a 'back to main' button which allows you to return to the Z Main Menu at any time. It's a graceful animation when it gets focus and the logo 'expands' to show the 'back to main' text.

Here I've brought up the mouse navigation and transport toolbars. Our design team did a great job making the 'back to main' button conform to the SDK guidelines for mouse overlays while at the same time giving it 'feature parity' with the Green Button and Back buttons native on the mouse toolbar.

Z was a wonderful group effort leveraging a great team both internal and external to Microsoft. A huge word of 'Thanks...!' goes out to the following folks.

The 'Softies...

Brian Kralyevich, Design Manager and Kristina Voros, Usability Engineer were invaluable in working with Method (see below) to make sure our design and usability was awesome and elegant.

Chris Glein, Software Development Engineer was responsible translating the design and making it a reality for the bulk of the data + logic (managed code) and UI (Media Center Markup Language).

Jeff Bogdan, Software Development Engineer took on the stretch goal of implementing the download manager using the new Windows Communication Foundation.

Michael Creasy, Software Design Engineer for Test and Reza Khoshbin provided the testing to make sure Z worked well and delivered what we said we wanted. Michael also provided some of the photography you find in Z.

Aaron Stebner, Program Manager provide a ton of testing, code reviews, developer scripts, Visual Studio integration, source code control and the wonderful Wix (http://wix.sourceforge.net/) installer files which makes it super easy for developers to compile and build a ready made MSI with this sample out of the box.

Michael Palermiti and Lars Giusti provided images from their personal photography collection.

And our partners...

Method (http://www.method.com/) in San Francisco did a great job working with the design and usability team here at Microsoft to envision a back story for the hypothetical Z company as well as come up with several elegant (and highly usable) designs which really made 'the content king' as we requested. Let me give props to Wendy McKennon - Senior Interaction Designer, Tomas Celizna - Senior Designer, Jon Arnett - Senior Designer, Aaron Clinger - Design Technologist, Darcy DiNucci - Interaction Director, Robert Murdock - Design Director, David Nelson - Senior Design Technologist and Galen Myers - Relationship/Account Manager. You guys utterly ROCK...!

Thomas Hawk provided the bulk of the wonderful photos from his personal collection. We wanted some images which would really inspire designers and developers alike and evoke emotion to represent TV and movies. It is very gratifying to highlight the work of a capable photographer who is also an end user fan of Windows Media Center and a passionate blogger.

Watch for a subsequent post today on where you can go to download the Windows Media Center Software Development Kit 5.0. Once you've gotten the SDK we encourage you to compile this app, install and give it a whirl...!

Categories: Application | Sample | SDK | Comments [7] | # | Posted on Saturday, November 18, 2006 12:32:07 AM (GMT Standard Time, UTC+00:00)   
 Thursday, October 26, 2006

Ian Dixon has posted part 2 of the interview I did with him a few weeks ago where we discussed Media Center Markup Language (MCML) development.  This episode goes into more detail about MCML development.  We discuss topics such as using Rules in your UI, when and how to write code-behind assemblies for MCML applications, Windows Media Center Presentation Layer web applications, and packaging and deployment of applications.

Here are links to this segment and also to the previous segment and the extra session that Ian recorded where he demonstrates some of the Windows Media Center SDK tools and samples:

Aaron

 

Categories: News | Comments [0] | # | Posted on Thursday, October 26, 2006 5:38:01 PM (GMT Standard Time, UTC+00:00)   
 Thursday, October 19, 2006

A new episode of the Media Center Show has been posted today that focuses on Media Center Markup Language (MCML) development.  I talked with Ian Dixon a few weeks ago, and he decided to create a  2 part show based on our talk (part 2 will be coming next week).

The first part focuses on getting started if you are new to MCML development.  It includes a discussion of some of the learning tools and samples included in the Windows Media Center SDK (such as McmlSampler and the Q sample podcast and videoblog client).

In addition, Ian posted a Media Center Show Extra segment where he presents an overview of both McmlSampler and Q running within Windows Media Center.

Here are links to both the show and the extra segment:

Hopefully you will find this information useful as you get started with Windows Media Center development.

Aaron

 

Categories: News | Comments [1] | # | Posted on Thursday, October 19, 2006 4:51:55 PM (GMT Standard Time, UTC+00:00)   
 Wednesday, October 04, 2006

One of the developers on our team recently created a sample Windows Media Center Presentation Layer web application that demonstrates how to utilize a Host object to access data that is created dynamically on a server without requiring the page to reload.  This technique can be particularly useful when you want to update some content on a page that contains numerous assets that you do not want to re-download and/or if you want to avoid visible flashing and transitions for page reloads.

There are two components to this sample - the sample UI and the sample data generation file.

Sample UI component

A live version of the sample UI can be found at http://play.mediacentersandbox.com/Sample.DataTransfer.mcml.  It contains 2 UI elements: a DataTransfer UI, and the main UI.

DataTransfer UI

The DataTransfer UI is an abstraction layer that encapsulates the functionality of loading new data into an already visible MCML page. 

Consumers that want to use this DataTransfer object need to provide the following properties:

  • A ResultSet (which is an ArrayListDataSet object) to store the results of the server-side data generation
  • A RequestStatus (which is an EditableText object) to store the current status of the data transfer
  • A TargetSource (which is a string) to specify the URL where the data should come from
  • A RefreshCommand (which is a Command object) that will invoke a data refresh

Main UI

The main UI contains an example of a common usage scenario using the DataTransfer UI. It contains the following elements:

  • An instance of the DataTransfer UI
  • A button that triggers the DataTransfer object to refresh its data when invoked (this could be easily modified to automatically refresh the data by using a timer instead of a button that the user has to click)
  • A Text field to display the status of the data transfer - it is bound to the RequestStatus that is returned by the DataTransfer object
  • A Repeater to display the updated data - it is bound to the ResultSet that is returned by the DataTransfer object

Sample data generation file

A live version of the sample data generation file can be found at http://play.mediacentersandbox.com/RandomData.aspx.  The source code for it looks like this:

<%@ Page Language="C#" %>
<% Response.ContentType = "text/xml"; %><%Response.Expires=0; %>
<% Random r = new Random(); %>
<Mcml
    xmlns="http://schemas.microsoft.com/2006/mcml"
    xmlns:cor="assembly://MSCorLib/System"
    xmlns:me="Me"
>

  <UI Name="Result">
    <Properties>
      <ArrayListDataSet Name="ResultSet">
        <Source>
          <cor:String String="Random.Next = <%=r.Next()%>" />
          <cor:String String="Random.Next = <%=r.Next()%>" />
          <cor:String String="Random.Next = <%=r.Next()%>" />
          <cor:String String="Random.Next = <%=r.Next()%>" />
          <cor:String String="Random.Next = <%=r.Next()%>" />
          <cor:String String="Random.Next = <%=r.Next()%>" />
        </Source>
      </ArrayListDataSet>
    </Properties>
  </UI>

</Mcml>

You can try out this example on your Windows Vista Home Premium or Ultimate Edition RC1 or later system by downloading this RegisterMceApp XML file and running RegisterMceApp.exe <path to codeless_datatransfer_example.xml>

When you register this XML file, you will have an entry named Data Transfer Sample in the Program Library.  When you launch the sample in Windows Media Center and click the Load New Data button, the ResultSet object will be populated with 6 new random numbers, and since the ResultSet is bound to the repeater on the client UI, the data in the repeater will automatically update each time you click the button without requiring the entire page to refresh.  The UI will look like the following:

A couple of additional notes

  1. Keep in mind that due to the security restrictions in place for Windows Media Center Presentation Layer Web Applications, the UI page and the data generation page must both be hosted on the same web domain for this scenario to work as expected.  For this sample, both are hosted on the play.mediacentersandbox.com domain
  2. This scenario demonstrates a relatively simple dynamic data scenario.  For a more involved example of how to dynamically switch hosts, see the sample in McmlSampler named AdvancedMarkup.HostViewItem.mcml

Aaron

 

Categories: Sample | Comments [1] | # | Posted on Wednesday, October 04, 2006 1:14:38 AM (GMT Standard Time, UTC+00:00)   
Blogroll
About

Disclaimer
All information available via this site is provided 'as is' with no warranties and confers no rights.

© Copyright 2008 Microsoft Corporation.

Sign In
All Content © 2008, Microsoft Corporation.