In this day in age, I'm assuming that you've been exposed to HTML or XML before, since it's hard to be a programmer and not have touched either one for at least a few moments.
So today we are going to jump straight into the first piece of the MCML puzzle - the UI.
The term UI traditionally stands for 'User Interface', and that is exactly what each of the UI tags in your MCML markup represent - a single user interface object.
Let's get started on a very basic UI element, a simple text string with the classic "It's my first time writing in this language" line of text, "Hello World".
The MCML Tag
The first line we need is to open our <Mcml> tag. Since we have started our program based on the last blog post, we already have this written for us - it should look something like this...
<
Mcml xmlns="http://schemas.microsoft.com/2006/mcml"
xmlns:a="assembly://Basic Layout/Basic_Layout"
xmlns:me="Me">
So, what's this all on about?
MCML works with namespaces. In this case, we have defined three of them. The first is the namespace for all MCML code - this is located at http://schemas.microsoft.com/2006/mcml (no, it's not a real link - that just tells Media Center that it's a genuine MCML document and we will need to use the built-in MCML objects).
The second line includes all of the objects in our project. In this case, I called the project 'Basic Layout'. This makes sure that all of the objects we create in our C# code are accessible from our MCML markup. If we ever want to refer to one of our classes we will need to put a: in front of it (this is because we have xmlns:a.)
And finally, we have a 'Me' namespace. This allows us to refer to other objects that we have defined in this file. It allows us to create reusable object - we will go into this later.
Of course, since this is an XML document, we need to close the tag.
</Mcml>
The UI Tag
The MCML tag itself can only contain I few different kinds of objects - the most common being UI's and reusable animations.
From the title of this post, it's kind of obvious which one we are going to be looking at next - let's see how to create a UI.
Every UI should have a unique name. This is set with the 'Name' attribute. In this case, let's just call it 'Hello'.
<
UI Name="Hello">
</
UI>
What Do I Put In It?
UI tags contain four different types of information. Content, Locals, Properties and Rules. Since this is our first example, we will simply look at content. We will cover the later options shortly.
Content is - as you may have guessed - the visible objects within your UI. Since we just want a single line of text, we can add it with a <Text> tag..
<UI Name="Hello">
<
Content>
<
Text Color="White" Name="HelloWorld" Content="Hello World!"/>
</
Content>
</
UI>
Text objects have many attributes - the important one here is 'Content'.
A UI can only have a single child object within it, so you will almost always use one of the container objects to hold others. Panel, ColorFill, Scroller and Clip are all examples of container objects. Panel simply holds child objects. Colorfill is similar, apart from the fact that it also is a rectangular block of color. Scroller allows you to scroll the children either vertically and horizontally (often used to create lists) and Clip allows you to ensure that your children don't exceed a certain area on the screen - they fade away if they cross the edges of the clip region.
So to use a simple panel to allow us to have two different lines of text, we would do the following...
<
UI Name="Hello">
<
Content>
<
Panel>
<
Children>
<
Text Color="White" Content="Hello World!"/>
<
Text Color="White" Content="This is MCML!"/>
</
Children>
</
Panel>
</
Content>
</
UI>
Ahh, but if you press F5, you'll find that they are NEXT to each-other? What on earth can you do about that? It turns out that every container object has a 'Layout' property that you can use to tell MCML how you want the contents laid out. The easiest way to make your text objects to move vertically rather than horizontally is by adding the line
Layout="Vertical" to the panel that holds the Text objects.
OK - that's a UI. Now next time we will make something a little more complex...and maybe something that we can re-use in our projects.