Moonlighting Linux: the future of rich web apps

David M Williams
Wednesday, 07 May 2008 20:11

Opinion and Analysis

If you built Moonlight yourself you have a brand new compiler called smcs which compiles Moonlight code. Actually, it will run on a Windows platform too, and compile your Silverlight code too.

When you choose to create a Silverlight/Moonlight project, you get two stub XAML files to kick off with. These are App.xaml and Page.xaml. XAML is the markup language which makes up user interfaces; it stands for “eXtensible Application Markup Language” and is based on XML. Additionally, Page.xaml has a corresponding C# code-behind file called Page.cs where traditional program code is written. You will also have a simple HTML web page which invokes the Silverlight app when loaded in a web browser. (You can also find a standalone HTML page for testing from the Mono Project)

App.xaml lists all the resources used by the project; as you add more files – whether XAML or mp3 or jpg or any other item – they must be included here between a matching pair of <Application.Resources> ... </Application.Resources> tags.

Page.xaml produces the opening user interface; most any complex piece of software will have multiple screens and dialogs in which case other XAML files will need to be added. However, you need at least one – else you have no user interface at all – and Page.xaml is that starting point.

Within Page.xaml you will find a pair of <UserControl> ... </UserControl> tags. Here’s where you add all your markup tags to construct what the user will see.

You can make a very simple interface, as proof that it works, by adding these tags:

<StackPanel Background=”White”>
  <TextBox Width=”100” />
  <Button Width=”100” Content=”Say Hello” />
</StackPanel>

Compile this and open the provided HTML page within Firefox and if all is installed properly you will see a textbox and a button. That proves things work but isn’t terribly useful.

In order to manipulate the controls we’ve put on the form we need to give them names; this lets them be referenced in program code. Modify the lines above like so:

<TextBox Width=”100” x:Name=”txtHello” />
<Button Width=”100” Content=”Say Hello” x:Name=”btnHello”>

Next, open Page.cs and find the line Public Page() near the top of the file. This routine runs whenever Page.xaml is loaded into a browser. Add a line to it, and a new routine underneath, like so:

Public Page()
{
  InitializeComponent();
  btnHello.Click += new RoutedEventHandler(btnHello_Click);
}

void btnHello_Click(Object sender, RoutedEventArgs e)
{
  txtHello.Text = “Hello world”;
}

What this does is make an event handler to execute when the button is clicked. You should be able to guess what is going to happen. If you compile and launch this code again you will find you can now click the button; when you do so “Hello world” is printed in the text box.

Check out the output of your compiled project – or indeed, the source of any web page which invokes Silverlight. You’ll find what the compiler generates, and consequently the web server is offering up, is a single file with a .xap suffix. This is a XAML Zip file and if you rename the extension to .zip you’ll find it is just like any other zip file.

CONTINUED