Ok - many people still have some trouble visualising their interfaces when it comes to writing their MCML. They don't know where to start, or what to do. I'm going to take a page from an MCML application and show you how to 'de-construct' it to figure out how it's made.

The basic trick is to imagine you are drawing the page with a vector graphics program. If you have Adobe Illustrator, Harvard Graphics, or even MS Word, you should be able to make some basic vector graphics. For those who don't have any of these programs, try the open-source project InkScape.

In vector programs, you only have some fairly simple primative objects - boxes, circles, text & graphics - to work with, in a very similar way to MCML. And most of the adjustments you can do to these objects is also similar to MCML, the most important being scaling and rotation.

So if you draw your interface in one of these vector programs, you almost naturally discover how to replicate them in the Media Center Markup Language.

Let's take a look at a basic screen from EMUCenter.

Step 1 - Isolating The Elements

The first thing to do is isolating each seperate element we see on the screen. If it's positioned independently - eg. it's doesn't seem to be physically part of another element on the screen - then we basically draw a 'box' around it. We will want to make a UI for each of these.

By looking at our screen, we can come up with several seperate elements.

   Background Text (saying 'emucenter')

   Filter Bar (top left corner)

   Position Bar (bottom right corner)

   Selected Game Info (bottom center, underneath the selected game)

   Games

If you were drawing these in a vector program, you'd build these items on different layers or, to make them easier to move around and get their positioning right, you'd group them. Everywhere you would put a group or a layer, you build a Panel control, or even more likely a seperate UI.

So each of the sections we isolated above would make perfect UI elements.

Then you attack each UI as a completely seperate, indpendent creature. Remember at all times that there are only really three object types they could possibly be - Text, Graphic and ColorFill. Anything that isn't writing or a solid square of colour is almost certainly a Graphic object - it's as simple as that.

The Background Text:

   The background element is self-evident - we've already looked at how to make these earlier.

The Position Bar:

   The position bar LOOKS as if it's a single item, but with two numbers that change and a slash that stays where it is, you can actually build it out of three seperate Text objects. You can but them together by putting them in a HorzontalLayout.

The Filter Bar:

   The filter bar is similar - single Text objects that appear in a HorizontalLayout, this time with a bit of spacing between them. You'll of course have to put these elements in a Scroller though, to make it scroll, and you'll need to set the LockedPosition, since the selection doesn't actually move - the selection stays still and the options move around it instead.

Selected Game Info:

   Again, three Text objects. This time they are going DOWN the screen, so we need a VerticalLayout.

Games

   No big surprise, it's like the filter bar - Graphic objects (one normal, one inverted and faded by a Clip object), repeated in a Scroller, with a HorizontalLayout.

Of course, there's more work in making the selection work correctly, making your scrollers and repeaters happy etc. But when  you get down to it, it's just a handful of UI's, each with a few text objects or graphic objects. And if you had drawn it, you'd know exactly what you need to do to make the reflections work.

So if you can't visualise it without help, follow this guide and draw your interface in Illustrator, InkScape or it's friends first, and the solution will be much clearer, and you'll have a nice prototype to work off.