Silverlight 3 : DataForm control features – Part 3

I am now going to talk a bit on DataForm control, I have already two articles on Silverlight 3 which was Lap around Silverlight 3 and Features of Blend 3.

From Silverlight 2, there were several discussions going on about Building “Line Of Business” application using Silverlight technology, I guess Controls like DataForm, DataPager etc. are the next step towards the vision of LOB applications using Silverlight 3 , since we already have excellent support of WCF,REST and rich controls.

DataForm basically will let you to push data from UI for processing, It will also enable to Enter data, provides UI to edit the existing data, We can also customize it to great extent and it also provides good validation support. Now lets discuss it step-by-step :

First you need to create blank Silverlight Project, then you need to add reference to following :

• System.ComponentModel
• System.ComponentModel.DataAnnotations
• System.Windows.Controls.Data
• System.Windows.Controls.Data.DataForm

There are two ways by which you can bind DataForm, Either by creating a resource to current User Control with set of properties in class or by creating Observable Collection. I am basically using both the approaches, but main focus is on building resource, check this code ,Here I have created a separate class file in which I am declaring some public fields like this :

public class sigheads
   {
       public string FirstName { get; set; }
       public string LastName { get; set; }
       public string Email { get; set; }
       public int Age { get; set; }
       public string SIG { get; set; }
   }

<UserControl.Resources>
        <sig:sigheads FirstName="Vikram"
                      LastName="Pendse"
                      Email="vikram.pendse@puneusergroup.org"
                      Age="27"
                      SIG="Silverlight"
                      x:Key="mySIG"/>
    </UserControl.Resources>
    <Grid x:Name="LayoutRoot" Background="White">
        <mydf:DataForm CurrentItem="{StaticResource mySIG}"
                       Header="SEED Infotech Ltd .NET Center of Excellence"
                       Background="#FFEFDCDC"
                       FieldLabelPosition="Auto">
         <mydf:DataForm.Effect>
                <DropShadowEffect/>
         </mydf:DataForm.Effect>
    </mydf:DataForm></Grid>

Before this XAML Code, you need to add following lines to your main User Control :

xmlns:mydf="clr-namespace:System.Windows.Controls;assembly=System.Windows.Controls.Data.DataForm"     
xmlns:sig="clr-namespace:SL_DataForm"

First xml namespace will allow you to have DataForm Control on your layout and second namespace sets a reference to the class [Project itself ] where we have declare those public fields like FirstName,Age,Mail etc.

1.Binding attribute with various modes :

Look at following Code :

[Bindable(true, BindingDirection.TwoWay)]
   public class sigheads
   {
       [Bindable(true, BindingDirection.TwoWay)]
       public string FirstName { get; set; }
       [Bindable(true, BindingDirection.OneWay)]
       public string LastName { get; set; }
       [Bindable(false)]
       public string Email { get; set; }
       [Bindable(true, BindingDirection.TwoWay)]
       public int Age { get; set; }
       [Bindable(true, BindingDirection.OneWay)]
       public string SIG { get; set; }
   }

Look carefully at top level attribute :

[Bindable(true, BindingDirection.TwoWay)] ,If we put “false” in place to “true”, data will not get bind to DataForm. BindingDirection basically provides you two modes “OneWay” and “TwoWay” ,Normally if binding direction is one way then the fields are read-only.

You can see some shadow kind of effect to DataForm, this is because if you observe the XAML above carefully, you can find I have applied DropShadow Effect. Observe screenshot above carefully, you will find some Pencil like symbol on rightmost top corner, that will allow you to change mode of DataForm to Edit mode, once you click on that, Fields will be in edit mode (Provided you have mentioned binding direction in two way) and you will get Save button too like shown below :

2. Implementing IEditableObject Interface :

To have more flexibility in operations like Edit,Save etc, Class can now implement interface IEditableObject which implements 3 methods as BeginEdit(),CancelEdit(),EndEdit(), Inside which you can implement your own logic.

public class sigheads : IEditableObject
{
    public string FirstName { get; set; }
    public string LastName { get; set; }
    public string Email { get; set; }
    public int Age { get; set; }
    public string SIG { get; set; }

    #region IEditableObject Members

    public void BeginEdit()
    {
        //Logic while Record is about to getting edited
    }

    public void CancelEdit()
    {
        //Logic on Cancelling Edit
    }

    public void EndEdit()
    {
        //Logic on Ending Edit
    }

    #endregion
}

3 . Working with “Display” Attribute :

Consider the code below :

public class sigheads
    {
        [Display(Name = "First Name :", Description = "Enter Your First Name", Order = 5)]
        public string FirstName { get; set; }
        [Display(Name = "Last Name :", Description = "Enter Your Last Name", Order = 4)]
        public string LastName { get; set; }
        [Display(Name = "E-mail ID :", Description = "Enter Your E-Mail ID", Order = 3)]
        public string Email { get; set; }
        [Display(Name = "Age :", Description = "Enter Your Age", Order = 2)]
        public int Age { get; set; }
        [Display(Name = "SIG of :", Description = "Enter Your SIG Name", Order = 1)]
        public string SIG { get; set; }
    }

Display attributes basically use to change Label heading of fields and their order in list of fields, so you can set priority in your fields by Order attribute, Description attribute gives you more information about the field by displaying a tool-tip message on a information button created next to the field by same attribute, like this, there are several more attributes like AutoGenerateField,AutoGenerateFilter,Description,Name ,Order,Prompt,ResourceType,ShortName. Each one have their own implementation.

4. Validations :

You can provide Validations to your fields while entering data like this :

public class sigheads
    {
        [Display(Name = "First Name :", Description = "Enter Your First Name")]
        [Required(ErrorMessage = "Field Cannot be left Blank")]
        public string FirstName { get; set; }

        [Display(Name = "Last Name :", Description = "Enter Your Last Name")]
        public string LastName { get; set; }

        [Display(Name = "E-mail ID :", Description = "Enter Your E-Mail ID")]
        [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")]
        public string Email { get; set; }

        [Display(Name = "Age :", Description = "Enter Your Age")]
        [Range(0, 999, ErrorMessage = "Invalid Age")]
        public int Age { get; set; }

        [Display(Name = "SIG of :", Description = "Enter Your SIG Name")]
        public string SIG { get; set; }
    }

Attributes like [Required(ErrorMessage = "Field Cannot be left Blank")] makes your field as “Compulsory Field”

Attributes like [RegularExpression(@"\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*", ErrorMessage = "Invalid E-Mail ID")] allows you to put your own Regular Expressions to validate data.

Those who have worked with Dynamic Data and had customized it, they may find this similar to the way they add custom validations and fields there.

On error, Data Form make the particular field highlighted in Red and also shows the summary of error in Error Summary below the DataForm Control.

  5. Showing Multiple Records :

Below screen shows how you get Pager control to navigate among records, I added multiple records using observable collection, I am not giving code of that since its very basic.

Hope, this will encourage you to go ahead and start using DataForm in your Silverlight Project. Soon I am going for few new things like Navigation, Pixel Shading and effects with SlSvcUtil and Silverlight 3 Out of Browser applications, so more things are coming soon, keep visiting here and let me know your feedback.

Vikram.