Build a scalable open source web application using Moonlight on BSD UNIX

Have you ever built a web application that performed sluggishly, because you tried to display too many columns or rows? Moonlight is an open source implementation of Microsoft's Silverlight technology that allows large, complex web applications to perform robustly, even though they have large amounts of data to process or display. In this article, we will show you how to install Moonlight on BSD UNIX and then build an application with hundreds of columns and thousands of rows using Moonlight. No prior Moonlight experience is required.

Share:

Aaron Olds (amolds@hotmail.com), Systems Engineer, Freelance

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 (boucot@gmail.com), Consultant and writer, Freelance

Sam BoucotSam 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.



12 July 2011

Also available in Chinese

Getting started

Prerequisites

The following tools are needed to follow along with this article:

  • Free BSD UNIX
  • mySQL
  • Consolidated Powerworks Seed Data File (Consolidated_Powerworks.csv)
  • Moonlight

See the Resources section at the end of this article for links to download these technologies, and Downloads for the CSV file.

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

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.


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).


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.

Listing 1. Installing the tools in the mono directory
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.

Listing 2. Installing the tools in the mono-basic directory
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.

Listing 3. Installing Moonlight
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.

Listing 4. Installing monodevelop
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.


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.


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.

Listing 5. Creating the 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).

Figure 1. Consolidated Powerworks seed data
Screen shot of the Consolidated Powerworks seed data

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.

Figure 2. Monodevelop IDE
Screen shot of the monodevelop IDE

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.

Listing 6. Main.xam
<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.

Listing 7. Encapsulated DataGrid
<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.

Listing 8. Main.xaml.cs
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).

Figure 3. Consolidated Powerworks web page
Consolidated Powerworks web Page

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.


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.


Download

DescriptionNameSize
Article source codeConsolidated_Powerworks.csv30KB

Resources

Learn

Get products and technologies

Discuss

Comments

developerWorks: Sign in

Required fields are indicated with an asterisk (*).


Need an IBM ID?
Forgot your IBM ID?


Forgot your password?
Change your password

By clicking Submit, you agree to the developerWorks terms of use.

 


The first time you sign into developerWorks, a profile is created for you. Information in your profile (your name, country/region, and company name) is displayed to the public and will accompany any content you post, unless you opt to hide your company name. You may update your IBM account at any time.

All information submitted is secure.

Choose your display name



The first time you sign in to developerWorks, a profile is created for you, so you need to choose a display name. Your display name accompanies the content you post on developerWorks.

Please choose a display name between 3-31 characters. Your display name must be unique in the developerWorks community and should not be your email address for privacy reasons.

Required fields are indicated with an asterisk (*).

(Must be between 3 – 31 characters.)

By clicking Submit, you agree to the developerWorks terms of use.

 


All information submitted is secure.

Dig deeper into AIX and Unix on developerWorks


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=1
Zone=AIX and UNIX, Open source
ArticleID=710780
ArticleTitle=Build a scalable open source web application using Moonlight on BSD UNIX
publish-date=07122011