Monday, January 29, 2007

What is this UI thing anyway?

OK - Let's talk about UI's.

UI is (of course) short for User Interface. All of your visible controls (text, colorfills, panels, graphics etc.) must be within the 'contents' tag of a UI.

But they are more than just a once-off tag.

For those familliar with .NET programming (and from now on in this blog, I'm going to assume you know the basics of object oriented programming, either C++, Java, C# or J# will do), a UI is also very much like a control class.

Each UI can have properties, local variables, rules of behaviour and it's own appearance. You can use UI's and name them to define a set of reusable controls.

Before we can use a UI, we need to make sure there is a line at the top of our MCML file, one that creates a namespace so we can play with our own UI controls. If you have created your MCML from the wizard in Visual Studio, you may already have it. For those who are hand-writing it, make sure your first tag looks like this...

<Mcml xmlns="http://schemas.microsoft.com/2006/mcml"
xmlns:cor="assembly://MsCorLib/System"
xmlns:me="Me">


OK - so now every UI we create in this document will be in the namespace called 'me' (which is what that whole xmlns:me thing is about.

Now, the first UI is the MAIN UI. This is the one that will automatically be drawn by Media Center.

We will keep our first example very simple. We want two lines of text, both saying 'Boo!' in blue.

<UI Name="Main">
  <Content>
    <Panel Layout="VerticalFlow">
      <Text Content="Boo" Font="Tahoma,30" Color="Blue"/>
      <Text Content="Boo" Font="Tahoma,30" Color="Blue"/>
    </Panel>
  </Content>
</UI>


Or, we could create a new UI, making a reusable control for our text item.

<UI Name="Main">
  <Content>
    <Panel Layout="VerticalFlow">
      <me:BooText>
      <me:BooText>
    </Panel>
  </Content>
</UI>

<UI Name="BooText">
  <Content>
      <Text Content="Boo" Font="Tahoma,30" Color="Blue"/>
  </Content>
</UI>


OK, we didn't save much space this time. But check the next post for how this starts to become useful.

No comments: