Getting started

This article is for programmers who are familiar with UNIX®, mySQL, and other open source technologies. You will learn the basics of Moonlight through building a simple application for the Consolidated Powerworks Company, which is a small fictional utility that needs to forecast monthly demand twenty years into the future for its one hundred thousand customers. By completing this article, you will learn about the following:

• Limitations of traditional web applications
• The advantages of Moonlight
• How to install Moonlight on Free BSD UNIX
• How to build and run an application using Moonlight

Back to top

Limitations of traditional web applications

Consolidated Powerworks uses Easy Demand to track and forecast monthly demand for its one hundred thousand customers. It was developed in-house ten years ago. The utility operations personnel who use Easy Demand have a real business need to be able to look at all twenty years of a customer's future monthly demand when they shape available energy generation. Clicking from one page to the next is simply not a viable option. They need to be able to look at all twenty years worth of monthly demand in one session to spot trends that will help them shape a customer's demand properly.

But this has proven difficult to do with Easy Demand. The utility operators can quickly look at one, two, or even three year's worth of monthly demand data in Easy Demand; but, starting with four years of data, performance diminishes and degrades appreciably with ten or more year's worth of data, often taking up to a couple of minutes to process. Although the operators need to view twenty years worth of data, they have given up trying it with Easy Demand. Their workaround is to export five years worth of data at a time to spreadsheets. For years, the Operations Department at Consolidated Powerworks has been clamoring for more speed. Until recently, the IT Department had countered that the performance degradation for large data sets (greater than 10,000 row x 50 columns) is the norm for most web applications. Now the IT Department at Consolidated Powerworks has an answer for Easy Demand's performance problem—a new tool called Moonlight.

Back to top

The advantages of Moonlight

Moonlight was developed by the Mono Project, an open source software platform sponsored by Novell. Mono Project offers cutting edge development solutions for the Linux® development community using an implementation of the .NET framework. Moonlight is free and runs on Linux, BSD UNIX, and many of the other flavors of UNIX.

Moonlight was designed with data and memory intensive web application processes in mind. Not only can it process large data sets (greater than 10,000 rows x 50 columns) robustly, but it can also integrate multimedia and graphics. Moonlight also makes programming easier. As you will see later in this article, all it takes to build a simple data base application is eight steps. In the not too distant future, Moonlight will work on Linux desktops in addition to web browsers. The current version of Moonlight is 2.0, which includes support for Silverlight 2.0 and some features of Silverlight 3.0. A preview version of Moonlight 3.0 was released in February 2010.

If you are using Chrome or Firefox, you are in luck. There are plugins that allow you to use Moonlight with these browsers (see the Resources section at the end of the article for more information).

Back to top

Installing Moonlight on Free BSD UNIX

Before we can build a new Moonlight application (we'll call it Easier Demand for Consolidated Powerworks), we will need to install Moonlight as well as our development tool, monodevelop. There are six steps:

1. Download Mono Project source code
2. Extract the source files
3. Verify the install
4. Install Mono Project development tools
5. Install Moonlight
6. Install monodevelop

Step 1: Download Mono Project source code

The Mono Project source files are available to the public. Using your browser, navigate to the Novell Mono Project source files (see Resources). You will need to download all of following files in the Mono and XSP / mod_mono directories:

• Mono
  • mono-2.8.2.tar.bz2
  • mono-basic-2.8.tar.bz2
  • libgdiplus-2.8.1.tar.bz2
  • gluezilla-2.6.tar.bz2
• XSP/mod_mono
  • xsp-2.8.2.tar.bz2
  • mod_mono-2.8.2.tar.bz2

All of the files in the Development Tools and Gtk# 2.12 directories will also need to be downloaded. Although we won't directly use any of these files, some of them need to be installed before we install the files in the MonoDevelop directory later.

• Development Tools
  • mono-tools-2.8.tar.bz2
  • gecko-sharp-2.0-0.13.tar.bz2
  • gtksourceview-sharp-2.0-0.12.tar.bz2
  • boo-0.9.3.3457.tar.bz2
  • ikvmbin-0.42.0.6.zip
  • mono-debugger-2.8.1.tar.bz2
  • cocoa-sharp-0.9.5.tar.bz2
  • nant-0.90-src.tar.bz2
  • IPCE-r7.zip
  • mono-addins-0.5.tar.bz2
• Gtk# 2.12
  • gtk-sharp-2.12.10.tar.bz2
  • gnome-sharp-2.24.1.tar.bz2
  • gnome-desktop-sharp-2.24.0.tar.bz2

And all of the following files in the MonoDevelop directory need to be downloaded to allow us to use MonoDevelop to build our application:

• MonoDevelop
  • monodevelop-2.4.1.tar.bz2
  • monodevelop-boo-2.4.tar.bz2
  • monodevelop-database-2.4.tar.bz2
  • monodevelop-debugger-gdb-2.4.tar.bz2
  • monodevelop-debugger-mdb-2.4.tar.bz2
  • monodevelop-java-2.4.tar.bz2
  • monodevelop-vala-2.4.tar.bz2
• Other
  • webkit-sharp-0.3.tar.bz2

Now that all of the necessary files have been downloaded, let's go ahead and install them.

Step 2: Extract the source files

You may have noticed that all of the files that you downloaded end with the extension .tar.bz2. This means that the files were archived with the tar utility and compressed with the bzip2 program. You will need to extract all of the downloaded files from the BSD command line using the following four step procedure:

1. Uncompress the file
   • To uncompress mono-2.8.2.tar.bz2: bzip2 -d mono-2.8.2.tar.bz2
2. Separate the archive into separate files
   • To separate the archive file mono-2.8.2.tar: tar -xvf mono-2.8.2.tar.bz2
3. cd into each of the untar'd directories
4. Run make && install in each untar'd directory

Step 3: Verify the install

Now that you have installed the Mono Project source files, you will want to verify that they were installed correctly. You can do this from the BSD command line by typing the following command:

pkg-config --modversion silverdesktop

If you are running Firefox or Chrome on Linux, you will also want to install a Moonlight plug-in (see Resources for a link).

Step 4: Install Mono Project development tools

You are now ready to install the following Mono Project development tools that will be later used when we build our application. They can be found in the mono and mono-basic directories.

mono
mono-basic
moscow_m1
mosh
mozart
mpd
mtasc
munger
nawk
nbc
neko
nesasm
newlisp
mhc98
nickle
vm14fb8#

To install the tools in the mono directory, enter the commands in Listing 1 at the command line.

cd /usr/ports/mono
make && make install && make clean

To install the tools in the mono-basic directory, enter the commands in Listing 2 at the command line.

cd /usr/ports/mono-basic
make && make install && make clean

Step 5: Install Moonlight

To install Moonlight, enter the commands in Listing 3 at the command line.

cd /usr/ports/multimedia/moonlight
make && make install && make clean

The following shows that the installation files have been installed correctly.

Moonlight
motion
mp3cd
mp4split
mpeg
mpeg2codec
/usr/ports/multimedia
vm14fb8# cd moonlight/
vm14fb8# ls
Makefile     distinfo     files
vm14fb8# pwd
/usr/ports/mulitmedia/moonlight

Your application will now be able to run against Moonlight. Only one more configuration task remains—to install monoDevelop.

Step 6: Install monodevelop

Monodevelop is the Moonlight development tool that we will use to build our application. To install monodevelop, enter the commands in Listing 4 at the command line.

cd /usr/ports/devel/monodevelop
make && make install && make clean

The following shows that the monodevelop files have been installed correctly.

vm14fb8# pwd
/usr/ports/devel/monodevelop
vm14fb8# ls
Makefile   distinfo   files   pkg-decr   pkg-plist
vm14fb8#

Your environment is now configured and setup; you can start building your application.

Back to top

Build and run an application using Moonlight

Now that Moonlight is installed, you are ready to build your state-of-the-art web application, Easier Demand for Consolidated Powerworks, that will access a mySQL database. We will go through the following eight step process:

1. Install mySQL Version 5.1
2. Create mySQL database and tables
3. Copy CSV file
4. Populate the tables
5. Start up monodevelop
6. Create a project
7. Customize the project files
8. Run the application

Install mySQL Version 5.1

Follow the directions in the mySQL link at the end of the article in the Resources section.

Back to top

Create mySQL database and tables

Now that mySQL is ready to roll, you need to create a database and the tables that are necessary for our application. From the BSD command line, log into mySQL and execute the statement in Listing 5 to create a database.

CREATE DATABASE ConsPow;
Then execute the following statements to create two tables:
CREATE TABLE Cust (id INT, name VARCHAR(50));
CREATE TABLE DemUsg(custId INT, mth DATE, dem float);

Copy CSV file

With the database and tables in place, you are ready to pull in our data that for the purposes of this article, resides in a CSV file. Copy the Consolidated Powerworks Seed Data (Cons_Pow.csv) to the directory mySQL is executed from (see Figure 1).

Populate the tables

You can now populate the tables. From the BSD command line, execute the following statement to load the Cust table:

LOAD DATA INFILE './ConsPow.csv' INTO TABLE Cust;

Note that you will need to be sure to prefix the file name with dot slash (./) which tells mySQL to look for the file in the current directory mySQL is being executed from.

Start up monodevelop

You will now start up monodevelop from the BSD command line by simply typing monodevelop.

Create a project

After you launch Monodevelop from the command line, the IDE appears (See Figure 2). The IDE makes it easy to create our new project.

Select Create New Project and the project type will be Moonlight Application Project. Give the project the name Main and click OK.

The Consolidated Powerworks application is very straightforward, just a grid on a page. A grid is a matrix that caches, paginates, and integrates fields on a web page and integrates nicely with the very popular web technology, AJAX (see Resources for AJAX information).

Customize the project files

Once the project is created, two files are generated. The first file, Main.xam, defines the user interface. It is coded in XAML, a popular markup language. Go ahead and replace the auto-generated file with the code in Listing 6.

<UserControl x:Class="ConsolidatedPowerworks.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d"xmlns:dataInput="clr-namespace:System.Windows.
Controls;assembly=System.Windows.Controls.Data.Input" d:DesignHeight="860" 
d:DesignWidth="966" xmlns:data="clr-namespace:System.Windows.Controls;assembly=
System.Windows.Controls.Data">
    <Grid x:Name="LayoutRoot" Background="White" Height="746" Width="1003">
        <dataInput:Label Height="50" HorizontalAlignment="Center" 
Margin="12,12,0,0" Name="label1" VerticalAlignment="Top" Width="376" 
Content="Consolidated Powerworks" FontSize="28" />
        <data:DataGrid AutoGenerateColumns="True" Height="552" 
HorizontalAlignment="Left" Margin="52,59,0,0" Name="dataGrid1" 
VerticalAlignment="Top" Width="892" DataContext="{Binding}" 
ItemsSource="{Binding}" />
    </Grid>
</UserControl>

XAML is a declarative XML-based language that was created by Microsoft® as a way to initialize values to objects. When you create a Moonlight application, an XAML file is generated for you. On the surface, the XAML file is not interesting; however, once you create and add components to the layout of your pages, the XAML file will be the center of your interest. In our case, we will add a DataGrid to our page. At the top of the XAML file are the necessary namespace includes for the relevant XML tags/controls we will need. You will notice that the DataGrid is encapsulated in the XML tag shown in Listing 7.

<data:DataGrid AutoGenerateColumns="True" Height="552" HorizontalAlignment="Left" 
Margin="52,59,0,0" Name="dataGrid1" VerticalAlignment="Top" Width="892" 
DataContext="{Binding}" ItemsSource="{Binding}" />

The data namespace comes from the following assembly: System.Windows.Controls.Data.Input. Of relevance to us is the DataContext and ItemsSource attributes of the DataGrid element. These attributes indicate that we will be binding our DataGrid, which should be of no surprise. The binding takes place in the .cs (code-behind) file.

The code-behind file is of very little interest to us. The only important thing here is that you set up your data binding for the DataGrid using the following statement:

dataGrid1.ItemsSource = getDataFromMySql();

Because you named your DataGrid dataGrid1, your code-behind is able to reference this grid directly by name and set the ItemSource to the table returned from MySql. While this statement is compact, there are a lot of things happening behind the scenes. First, the DataGrid will auto-generate all columns returned by the SQL select statement. Second, the DataGrid will handle display/pagination accordingly without any extra coding on your part.

The second file is named Main.xaml.cs and is the C# Implementation File, which is the code that ties together the user interface with the business logic. Note that the .cs extension identifies a files as a C# file. Go ahead and replace the auto-generated file with the code in Listing 8.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Net;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;


namespace ConsolidatedPowerworks
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {            
            InitializeComponent();
            dataGrid1.ItemsSource = getDataFromMySql(); 
        }
    }
}

Run the application

After the files have been replaced, hit F5 to run the application. The web page will be displayed with a pre-populated grid (see Figure 3).

Consolidated Powerworks now has its web application, Easier Grid, that displays 20 years of monthly forecast data for its 100,000 customers. A grid this large (240 columns x 10,000 rows) would not perform as well with standard web technology. But, using Moonlight, it does perform well.

Back to top

Conclusion

Ten years ago, cutting edge web applications had limitations. They could process only so much data, and memory-intensive features, like animation and multi-media, were difficult to program. With Moonlight, all of this changes. Large amounts of data (240 columns x 10,000 rows) are handled easily, and memory-intensive features have become dramatically easier to program.

Back to top

Download

Information about download methods

Resources

Learn

• Learn more about Silverlight, which is based on Microsoft's Silverlight technology.
  
  
• View a good tutorial on Moonlight debugging.
  
  
• Get Mono Project support for BSD operating systems.
  
  
• Get more information on how to use the Moonlight plugins for Chrome and Firefox.
  
  
• Learn more about the open source development platform, Mono Project.
  
  
• Find out more about bunzip2 and other Linux commands.
  
  
• Version 1 of Moonlight is available in the FreeBSD Ports directory.
  
  
• What is Open Source: Open source software is an attractive option for companies wishing to maximize their IT dollars. To find out more about open source software read this article from ONLamp.com.
  
  
• Find out more about commercial and open source content management systems from Wikipedia.
  
  
• Five Ajax best practices (Nathan Good, developerWorks, November 2010): Learn five best practices you can apply to your everyday Asynchronous JavaScript + XML (Ajax) development.
  
  
• A guide to writing unobtrusive JavaScript and Ajax (Joe Lennon, developerWorks, November 2010): Learn how to employ techniques to reap the benefits of developing web applications in an unobtrusive manner.
  
  
• MySQL is the most popular open source database. For more information try these podcasts and tutorials.
  
  
• Open source: Visit the developerWorks open source zone for extensive how-to information, tools, and project updates to help you develop with open source technologies and use them with IBM products.
  
  
• developerWorks technical events and webcasts: Stay current with developerWorks technical events and webcasts.
  
  
• Podcasts: Tune in and catch up with IBM technical experts.
  
  

Get products and technologies

• Download Free BSD UNIX.
  
  
• Download Moonlight
  
  
• Download MySQL.
  
  
• Get the Novell Mono Source Files.
  
  
• Get the Moonlight plug-in.
  
  
• Try out IBM software for free. Download a trial version, log into an online trial, work with a product in a sandbox environment, or access it through the cloud. Choose from over 100 IBM product trials.
  
  

Discuss

• Get answers quickly: Visit the Ajax forum.
  
  
• Follow developerWorks on Twitter.
  
  
• Participate in developerWorks blogs and get involved in the developerWorks community.
  
  
• Get involved in the My developerWorks community.
  
  
• Participate in the AIX and UNIX® forums:
  • AIX Forum
  • AIX Forum for developers
  • Cluster Systems Management
  • Performance Tools Forum
  • Virtualization Forum
  • More AIX and UNIX Forums
  
  

About the authors

Aaron Olds graduated with a M.S. in computer science from Portland State University in 2004. He has worked as a systems engineer on large, complex enterprise applications at several Fortune 500 companies.

Sam Boucot graduated with a B.S. in mathematics from the University of California in 1986 and has worked for many years as a business systems analyst on large, complex ERP applications at several Fortune 500 companies.

Rate this article

Comments

Back to top

Table of contents

• Getting started
• Limitations of traditional web applications
• The advantages of Moonlight
• Installing Moonlight on Free BSD UNIX
• Build and run an application using Moonlight
• Create mySQL database and tables
• Conclusion
• Download
• Resources
• About the authors
• Comments

Next steps from IBM

Create rich Internet applications using WebSphere Portal Express Web 2.0 technologies.

---

• Try: WebSphere Portal Express
• Article: Get started using Ajax and WebSphere Portal Express
• Tutorial: Quickly build a an Ajax-enabled WebSphere Portal Express Web application
• Demo: Architecture, design, and construction using the IBM Rational Software Delivery Platform: AJAX
• Buy: WebSphere Portal Express

Dig deeper into AIX and UNIX on developerWorks

Try IBM PureSystems. No charge.

Experience today!

---

Get started with the cloud-based trial and pattern development kit.

Special offers