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

secrettownpanamanianΚινητά – Ασύρματες Τεχνολογίες

10 Δεκ 2013 (πριν από 3 χρόνια και 6 μήνες)

78 εμφανίσεις

Build a scalable open source web application using
Moonlight on BSD UNIX
Skill Level:Intermediate
AaronOlds(amolds@hotmail.com)
Systems Engineer
Freelance
Sam Boucot(boucot@gmail.com)
Consultant andwriter
Freelance
12 Jul 2011
Haveyouever built awebapplicationthat performedsluggishly,becauseyoutriedto
display toomany columns or rows?Moonlight is anopensourceimplementationof
Microsoft's Silverlight technology that allows large,complex webapplications to
perform robustly,eventhoughthey havelargeamounts of datatoprocess or display.
Inthis article,wewill showyouhowtoinstall Moonlight onBSDUNIXandthenbuild
anapplicationwithhundreds of columns andthousands of rows usingMoonlight.No
prior Moonlight experienceis required.
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.
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 1 of 17
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 usesEasy 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 fromone 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 viewtwenty 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 rowx 50 columns) is the normfor most web applications.Now
the IT Department at Consolidated Powerworks has an answer for Easy Demand's
performance problema newtool 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.
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 2 of 17
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 (seeResources).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
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 3 of 17
 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
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 4 of 17
 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).
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 5 of 17
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.
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 6 of 17
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
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 7 of 17
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.Fromthe BSD command line,log into mySQL and
execute the statement inListing 5to 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(seeFigure 1).
Figure 1.Consolidated Powerworks seed data
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 8 of 17
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.
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 9 of 17
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
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).
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 10 of 17
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:
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 11 of 17
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
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 12 of 17
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.
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 13 of 17
Downloads
Description
Name
Size
Download
method
Article source code Consolidated_Powerworks.csv 30KB HTTP
Information about download methods
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 14 of 17
Resources
Learn
 Learn more aboutSilverlight,which is based on Microsoft's Silverlight
technology.
 View a good tutorial onMoonlight debugging.
 GetMono Project supportfor BSD operating systems.
 Get more information on how to use theMoonlight plugins for Chrome and
Firefox.
 Learn more about the open source development platform,Mono Project.
 Find out more aboutbunzip2and other Linux commands.
 Version 1 of Moonlight is available in theFreeBSD 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 fromONLamp.com.
 Find out more about commercial and open sourcecontent management
systemsfrom 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
thesepodcastsand 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
 DownloadFree BSD UNIX.
 DownloadMoonlight
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 15 of 17
 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
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
developerWorks® ibm.com/developerWorks
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 16 of 17
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.
ibm.com/developerWorks developerWorks®
Build a scalable open source web application using Moonlight on BSD UNIX Trademarks
© Copyright IBM Corporation 2011 Page 17 of 17