Manish Dalal's blog

Building Business Application with Silverlight 2 (Beta 2)

Silverlight 2 (b2) provides a new way to develop and deploy business applications in the familiar .net environment. Such applications are generally written to automate business processes, provide UI to visualize/manipulate data, and have various business rules ranging from data integrity to complex conditional logic.

In next couple of posts, I am planning to introduce the basic building blocks of a data centric application (primarily using DataGrid control), which can be used to develop full fledge business application.

Caution/Disclaimer: Code is for demo purpose only. It is neither production quality nor does it use any of the best practices.

We will start with the basic data entry functionality, introduce validation and work our way to more advance concepts. Following is a rough outline:

Part 0: Getting Started with Silverlight

Part 2: Deleting item

Part 3: Validation (sync)

Part 4: Validation (async, across the wire)

Part 5: Validation (refactored)

Part 6: IEditableObject and Add new item (Take 3!)

Part 7: Beyond Validation, Prevention

Silverlight Business Application Part 0: Getting Started with Silverlight

I am assuming that you have already installed Silverlight (SDK and tools) and are familiar with basic concepts. If not, please head over to http://silverlight.net/GetStarted/, install requisite software and explore various getting started tutorials (Be sure to read Scott Guthrie's 8-part blog series)

Ok, let get started!

Launch Visual Studio and create a new Silverlight application

Also create the corresponding web application to host and test the Silverlight application

Data Model:

We will use a simple data model consisting of two entities, Person and People. Person class consists of FirstName, LastName, Age and City fields and People class to represent list of persons.

Add a new class called Person.cs to the Silverlight project with the following code (you will also need to add using System.ComponentModel namespace directive)

public class Person : INotifyPropertyChanged {

    #region Constructors

    public Person() {

    }

    public Person(string firstName, string lastName, int age, string city) {

        this._firstName = firstName;

        this._lastName = lastName;

        this._age = age;

        this._city = city;

    }

    #endregion

    #region Properties

    private string _firstName;

    public string FirstName {

        get { return _firstName; }

        set {

            if (value == _firstName) return;

            _firstName = value;

            OnPropertyChanged("FirstName");

        }

    }

    private string _lastName;

    public string LastName {

        get { return _lastName; }

        set {

            if (value == _lastName) return;

            _lastName = value;

            OnPropertyChanged("LastName");

        }

    }

    private int _age;

    public int Age {

        get { return _age; }

        set {

            if (value == _age) return;

            _age = value;

            OnPropertyChanged("Age");

        }

    }

    private string _city;

    public string City {

        get { return _city; }

        set {

            if (value == _city) return;

            _city = value;

            OnPropertyChanged("City");

        }

    }

    #endregion

    #region INotifyPropertyChanged Members

    public event PropertyChangedEventHandler PropertyChanged;

    protected void OnPropertyChanged(string name) {

        if (PropertyChanged != null)

            PropertyChanged(this, new PropertyChangedEventArgs(name));

    }

    #endregion

}

Add another class People.cs (to the Silverlight project ) as follows (add  using System.Collections.ObjectModel namespace directive)

public class People : ObservableCollection<Person> {
    public static People GetTestData() {
        return new People() {
            new Person("Homer", "Simpson", 38, "Springfield"),
            new Person("Marge", "Simpson", 33, "Springfield"),
            new Person("Bart", "Simpson", 8, "Springfield")
        };
    }
}

Now add reference to System.Windows.Controls.Data and System.Windows.Controls.Extended to the Silverlight project.

DataGrid:

Open Page.xaml and switch to Xaml view to add DataGrid to Xaml.  First add xml name space reference for System.Windows.Controls.Data assembly with prefix data as

xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"

Now add DataGrid xaml declaration to Grid node. Following shows the complete page.xaml

<UserControl x:Class="Silverlight.Page"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    xmlns:data="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data"
    Width="400" Height="300">
    <Grid x:Name="LayoutRoot" Background="White">
        <data:DataGrid 
            x:Name="peopleDataGrid"
            />
    </Grid>
</UserControl>

In code behind page.xaml.cs file, setup Loaded event and load DataGrid with test data as shown

public partial class Page : UserControl {
    People _data;

    public Page() {
        InitializeComponent();
        this.Loaded += new RoutedEventHandler(Page_Loaded);
    }

    void Page_Loaded(object sender, RoutedEventArgs e) {
        _data = People.GetTestData();
        this.peopleDataGrid.ItemsSource = _data;
    }
}

Now F5 and run the application, you should have following UI

Congratulation! Play around with various DataGrid features and get a feel for the UI.

Now that we have a running application, next task is to allow user to add new items, make changes and delete items. We will tackle adding new item in next post.