Navigating - and Another MCMLPad Warning

There's another minor bug/issue in MCMLPad - something you should be aware of once you start doing more advanced development.

To navigste from 'page' to 'page' (eg. between UI's) you can use the <Navigate> action within any Rule.

The only required member of this tag is URI - the address to the next page. Most frequently, this will be a link to an MCML file that you have enclosed in a resource (usually the same DLL that contains your .NET application).

You can also pass objects in this Navigate tag. Since Navigate opens another UI as the main interface, you pass objects to this new UI exactly the same way that you do between UI's in a single interface - by passing them as properties.

So, for example, you can create a property on the base-UI in 'Page2.mcml', and set it with the Navigate tag in 'Page1.mcml'. This is how you can continue to pass information between pages and propagate information through your entire application.

ONE WORD OF WARNING: MCMPad has a small glitch (I hesistate to call it a 'bug', but it IS annoying) where pressing F5 to refresh the page will NOT work correctly for any page that has been passed a property. The property will not be re-sent, which means that any strings will be reset to empty and any objects will be set to 'null', which will normally mean that MCMLPad will close with an exception.

Tips & Tricks: 'Global' Variables

A quick word for the wise when it comes to MCML and your variables.

As much as you would like every UI to be it's own completely autonomous control, there are times when you need real feedback from your UI's.

This can actually be quite a problem, since a UI can not talk to it's parent.

So what is the trick? It's actually not too difficult, but for the newbie it can be very confusing.

We have already introduced properties, allowing you to set the attributes of the UI's you are creating. As well as properties, we have locals. These are in a very similar form to properties, with the only real difference being that you can't tell a UI what it's locals should be.

The trick is to take one of your local variables and basically just 'pass it on' as properties to all other objects that need access to it.

BUT - and here's the trick - you need to be aware of what TYPE of property you are using. This is because the variables work differently depending on what type you use.

If you use an object from the cor: namespace (such as cor:String, cor:Int32, cor:Boolean etc.) then you have created a simple type, like 'int' or 'long' in C. If you pass simple objects to a UI, it gets it's own new copy of the variable, meaning that if you change the value in any of your sub-items, the change will only effect THAT ITEM.

However, if you use something more complicated, a CLASS like EditableText for instance, every UI that is sent it as a property gets a reference to the object. This means that when you change a value in ANY of the UI's you have passed it to, it will be changed for ALL UI's.

<UI Name="MainUI">

  <Locals>
    <cor:String Name="Brand" cor:string="My Brand">
    <EditableText Name="Area" EditableText="None">
  </Locals>

  <Content>
    <Panel Layout="VerticalFlow">
      <Children>
        <Text Name="BrandName" Color="White" Font="Tahoma,20"/>
        <Text Name="AreaName" Color="White" Font="Tahoma,20"/>
        <me:BrandedOption BrandVar="[Brand]" AreaName="Option #1" BrandName="ACME" AreaVar="[Area]"/>
        <me:BrandedOption BrandVar="[Brand]" AreaName="Option #2" BrandName="Someone Else" AreaVar="[Area]"/>
      </Children>
    </Panel>
  </Content>

  <Rules>
    <Binding Source="Brand" Target="BrandName.Content">
    <Binding Source="Area" Target="AreaName.Content">
  </Rules>

</UI>

<UI Name="BrandedOption">

  <Properties>
    <cor:String Name="BrandVar" cor:string="$Required">
    <cor:String Name="BrandName" cor:string="$Required">
    <EditableText Name="AreaVar" EditableText="$Required">
    <cor:String Name="AreaName" cor:string="$Required">

  </Properties>

  <Content>
    <Panel Layout="HorizontalFlow">
      <Children>
        <Text Name="ButtonArea" Color="Red" Font="Arial,20" Content="[AreaName]"/>
        <Text Name="ButtonBrand" Color="Red" Font="Arial,20" Content="[BrandName]"/>
      </Children>
    </Panel>
  </Content>

  <Rules>
    <Condition Source="[Input.MouseFocus]" SourceValue="true">
      <Actions>
        <Set Target="[BrandVar]" Value="[BrandName]">
        <Set Target="[AreaVar]" Value="[AreaName]">
      </Actions>
    </Condition>
  </Rules>

</UI>

I haven't actually TESTED this UI (although I do something similar in my existing MCML) but that will give you the basic outline.

What we have is an interface that has two text boxes in white, giving you the current brand name setting, and the current area name setting. These are constantly updated with the rule we have specified, which makes sure the value of 'Area' and 'Brand' are copied into the text controls whenever the values are updated.

There are also two buttons. Each button has two text elements, the brand and the area/type of a product (set with the AreaName and BrandName properties) and the button is also passed our global Brand and Area variables through the AreaVal and BrandVal.

In the buttons, we have a rule that says that whenever the object is given mouse focus (Input.MouseFocus = true) then we are to set the AreaVal and BrandVal properties to AreaName and BrandName (the names displayed on the button).

What you should find when you do this is that when you roll over a button, the AREA will change, but the BRAND will not. This is because of the rules I explained earlier.

So now you know how to share a variable through your entire UI. This will come in handy in the next project discussed.

Project 1 - A Basic MCML File

This is the first part of my project. Like all my Media Center interfaces, the new version of Yougle is going to have the same look and feel (or as close as I can get to it, anyway) as the Media Center interface.

But I'm just starting out here, so let's get the basics covered.

Step 1: Make sure Visual Studio 2005 (Express or Pro) is installed. They aren't required for a basic application, but chances are you'll want to write some code to work behind the UI eventually - that, and the fact that Intellisense works for your MCML file in Visual Studio is just plain invaluable.

Step 2: Download and Install the Windows Media Center 5.0 SDK from http://www.microsoft.com/downloads/details.aspx?familyid=a43ea0b7-b85f-4612-aa08-3bf128c5873e&displaylang=en

Step 4: Create a new project in Visual Studio. Once the SDK is installed, you will have a new template under 'Media Center Applications', called 'Windows Media Center Presentation Layer Application'. This will set up a project so you can get started quickly and easily.

Step 5: Now, it's time to write some MCML code. MCML is an XML based language, so all the usual rules to tagging apply. You'll have an MCML application already generated with colour-changing text and a bouncy smiley button. But for now, Let's kill that off and learn a couple of new tags...

<mcml> - Just like the 'html' tag in web pages, this tag is the first one that should appear in any MCML file, after the schema information.

<ui> - This defines a User Interface. These are also used to define new types of reusable control. We will explore this a lot more later. Right now, we just need to get us a working page, so simply know that everything inside a UI tag is part of your user interface.

<text> - This, quite obviously, displays some text.

So, let's get some code in.

<mcml> <ui name="HelloWorld">
<content>
<text content="Hello World" color="White">
</content>
</ui>
</mcml>

There ya' go. A working MCML file, which should give you a 'Hello World' in pretty white, sitting in the middle of the screen.

Don't you feel special?

Next up: Using UI's