Silverlight 4: End-to-End Application using Prism 4, WCF 4 and DataGrid Custom Behavior

Posted by: Mahesh Sabnis , on 5/12/2011, in Category Silverlight 2, 3, 4 and 5
Views: 46683
Abstract: With the support for Prism 4 and the growing popularity of Silverlight 4 for line-of-business application development, there is a lot of buzz amongst developers to use the new features these technologies has to offer. So for example, I have observed that the demand for providing a simple and more interactive UX for developing DML UI using DataGrid is increasing. In this article, we will cover just that. I have explained the mechanism for performing CRUD operations using the Silverlight 4 DataGrid and have used SL 4, Prism 4 and WCF 4.0, along with DataGrid Custom behavior.
With the support for Prism 4 and the growing popularity of Silverlight 4 for line-of-business application development, there is a lot of buzz amongst developers to use the new features these technologies has to offer. So for example, I have observed that the demand for providing a simple and more interactive UX for developing DML UI using DataGrid is increasing. In this article, we will cover just that. I have explained the mechanism for performing CRUD operations using the Silverlight 4 DataGrid and have used SL 4, Prism 4 and WCF 4.0, along with DataGrid Custom behavior. The architecture is as below:

 

Silverlight with Prism architecture

 

Creating WCF Service

Step 1: Open VS2010 and create a blank solution. Name it as ‘SL4_Prism4_App’. In this solution, add a new WCF service Application project and name it as ‘WCF_Service_DML_OP’. In this project rename ‘IService1.cs’ to ‘IService.cs’ and  ‘Service1.svc’ to ‘Service.svc’.

Step 2: Now add a new ADO.NET Entity-Data Model to the project and name it as ‘CompanyEDMX.edmx’. Here I have used ‘EmployeeInfo’ table with the following columns:

  • EmpNo, -> Primary key, Identity column
  • EmpName
  • Salary
  • DeptName
  • Designation

The EDM designer is as below:

Employee EDM

Step 3: In ‘IService.cs’ add the following interface

WCF Service

Step 4: Implement this interface in the Service class as shown below:

wcf-service-dml

Note: The methods form above class makes call to the ADO.NET EF methods.

Step 5: Publish the service on IIS.

 

Creating Silverlight Client Application

Step 1: In the solution created above, add a new Silverlight application. Name it as ‘SL4_DataGrid_Custom_Command_Behavior’. In this application, add the following Prism 4 namespaces.

  • Microsoft.Practices.Prism.
  • Microsoft.Practices.Prism.ServiceLocation.
  • Microsoft.Practices.Prism.Interactivity.
  • Microsoft.Practices.Prism.UnityExtensions.
  • Microsoft.Practices.Unity.Silverlight

Step 2: In the Silverlight project, add the reference of the WCF service. Now the service proxy will be consumed by the ServiceAdapter or ServiceAgent class. The use of this class is to isolate the asynchronous calls from the ViewModel class. In the SL project, add a new class file and name it as ‘ServiceAdapter.cs’. This file contains ServiceAdapter class. This class implements the IServiceAdapter interface. This interface defines methods which accepts EventHandler<T> delegate as an input parameter. This delegate is typed to the Asynchronous ‘EventArgs’ class generated by the WCF proxy class. The code for the ServiceAdapter and IServiceAdapter is as shown below:

 

silverlight-datagrid-custom

Note: You can create a folder and can put the above file in that folder.

Step 3: Now in the UI, we are going to make use of the DataGrid for performing CRUD operation. The reason behind using this control is that most of the users using Silverlight are comfortable with the ASP.NET GridView or the DataGridView control provided in WinForms. The nice part of these controls is they are capable to provide the facility for Insert, Update and Delete. In Silverlight DataGrid, you can perform these by adding the Template Button for Update and Delete. In some cases, the user demands that when the data is entered in all cells of the DataGrid row and control shifts to next row, the data should be Inserted/Updated. In such cases, you need to provide some custom behavior to DataGrid to perform such types of operation. In Silverlight, using Prism 4, custom behavior can be added to any control with its interactive out-of-box event e.g. for DataGrid the event can be RowEditEnded. For this event, the custom command behavior can be added. To do so, add a new class file in the SL project and name it as ‘DataGridCustomCommandBehavior.cs’. This file defines classes for custom behavior and command. The code is as below:

datagrid-custom-behavior

datagrid-custom-behavior1

 

The DataGridCustomCommandBehavior class is inherited from ‘CommandBehaviorBase<T>’ class. The constructor of this class raises, the event for which custom command behavior and custom command parameter is to be configured. In this case, the DataGrid event used is ‘RowEditEnded’. The class RowEditEnded actually defines custom Command, CommandParameter and Behavior. The important part of the ‘RowEditEnded’ class is the ‘GetOrCreateDataGridBehavior’ method. This method is used to define the behavior of the DataGrid on the UI, based upon the user interaction on the DataGrid, the concerned Command is executed on the ViewModel class by choosing the concerned CommandParameter.

Step 4: After adding the ServiceAdapter and Custom CommandBehavior, now its time for us to define the ViewModel for the application. This class defines the following:

  • Constructor creating an instance of the ServiceAdapter.
  • DelegateCommand object for CRUP operations using DataGrid.
  • Public properties used for DataBinding.
  • Methods for making call to ServiceAdapter.
  • CanExecute and Execute methods for DelegateCommand object.

The DelegateCommand and its CanExecute and Execute methods relation is as shown below:

image

The code for the ViewModel class is as shown below:

silverlight-viewmodel

 

silverlight-viewmodel-1

The rest of the code can be viewed in the ViewModel class.

The important part of the above class is that, since it makes a call to ServiceAdapter and further an Async call is made to WCF service, the DataGrid refresh will not happen immediately. To do a timely refresh, we make use of the DispatcherTimer object. This class will come into picture for Insert/Update and Delete operations to refresh the DataGrid. The interval is set to 5 Seconds. In the Tick event of this class, the LoadEmployee() method is called. Another important method of the above class is the ‘UpdateEmployee’ method. This method accepts the EmployeeInfo object and then based upon the Operation type (Insert/Update), the ‘If’ condition is executed.

Step 5: Open MainPage.Xaml and write the following Xaml code:

silverlight-grid-xaml

The above xaml shows that the ViewModel instance is created in the UserControl resources. This instance is bound with the ‘LayRoot’ grid. The important part of the XAML code is that the DataGrid is bound with the custom command and custom command parameter as shown below:

datagrid custom command

The UpdateEmployeeCommand object of the type DelegateCommand is bound with the custom RowEditEnded command object and the custom CommandParameter is bound with the ‘SeelctedItem’ property of the DataGrid. Since the DataGrid is bound with the Employees property of the type ObservableCollection<EmployeeInfo> of the ViewModel class, the SelectedItem will be of the type ‘EmployeeInfo’. This means that when the user either Updates any cell or enters record in an empty row of the DataGrid, the parameter will be of the type EmployeeInfo and the UpdateEmployeeCommand will be raised on the ViewModel which will perform the concerned operation i.e. Update or Insert. The above XAML also has buttons for the following:

  • Load Employees - When clicked, all employees will be loaded in DataGrid.
  • Insert Employee - When clicked, a new Blank row will be appended in the DataGrid.
  • Delete Employee - When clicked, the selected record will be deleted.

These buttons are bound with the concerned commands and command parameter.

Step 6: Run the application and click on the Load Employees button, the following result will be displayed:

Click on Insert Employee button and the following result will be displayed:

Silverlight Prism App Demo

Add values to this row and using ‘TAB’,  navigate through all cells (Cell first ‘EmpNo’ is readonly). When you press TAB in the last cell, the result will be as shown below (after 5 seconds-read about the DispatcherTimer in Step 4):

Silverlight Prism App Demo

Click on ‘Ok’

Silverlight Prism App Demo

Select any row, change any cell value and TAB out of that row. The result will be as shown below (I changed the Salary of EmpNo 140 from 78000 to 90000)

Silverlight Prism App Demo

Click on Ok

clip_image012

Select a row and click on Delete Employee. Here I deleted the Last Row

Silverlight Prism App Demo

Click on Ok

Silverlight Prism App Demo

On a side note, there are modifications you can make in this application:

  • Instead of using DispatcherTimer you can use BusyIndicator.
  • You can use Child window to review the record to be deleted. This is to be done before the actual delete operation takes place.

 

Conclusion: In Silverlight, using the DataGrid control and its custom behavior, it is easily possible for us to develop an application for users to give them the same look, feel and functionality that they have been using in other DataGrids.

The entire source code of this article can be downloaded over here

Give a +1 to this article if you think it was well written. Thanks!
Recommended Articles


Page copy protected against web site content infringement by Copyscape


User Feedback
Comment posted by Vikram Wala on Saturday, May 14, 2011 5:31 PM
Bloated code just to do a simple insert.  Certainly doesn't covers the true intricacies of developing a real business app in Silverlight.
Comment posted by Mahesh Sabnis on Monday, May 16, 2011 1:10 AM
Hi Vikram,
Thanks a lot for the feedback. The article is dedicated to all those developer who are interested in using Sliverlight for real-world application development. The article should put them on the track for implementation and developing using loosely coupled application.
Thanks
Regards
Mahesh Sabnis  
Comment posted by Maria Castiglione on Friday, May 20, 2011 1:20 PM
This is a good start but this isn't a LOB application. Also, I am tired of everyone taking the easy route in their articles with ADO.Net/EF. Many of us are bringing older applications to the new age and don't have the option of simply using SQL Server or have a simply designed DB structure and use EF. I am looking into using POCO and a DomainService to get me that data. How loosely coupled is this application if it is strongly tied to the data using EF? Lastly, a LOB application also has user authentication. Again, I am looking for something using POCO. I have done this with an authentication service overriding ValidateUser instead of depending on SQL, ASP, or windows authentication. We have accomplished all of this in seperate projects but wow we are just trying to put all the pieces together into a Silverlight/Prism/MVVM application.

Sorry for my rant but there are enough articles/tutorials out there doing the basic stuff.
Comment posted by Maria Castiglione on Friday, May 20, 2011 1:37 PM
And all the code is images so you can easily copy/paste and create your own projects for learning! Hmmm, looks like everything (or random sampling) from dotnetcurry has images for the code. Well, worthless articles/site unless you are just looking for bits of info.
Comment posted by Carol on Sunday, May 22, 2011 8:46 PM
@Maria: The entire source code is available as a download - check at the end of each article. You just need to download it!
Comment posted by Mahesh Sabnis on Friday, May 27, 2011 10:46 AM
Hi Maria,
  Thanks a lot for the feedback/comments. Yes the above SL4 application is for the beginners. As I wrote on my comments on 16-05-2010, the article are for all those guys who wants to start  the development using SL4. The article discuss most of the UI side e.g. writing the custom behaviors for the SL 4 DataGrid control for performing the Operations. The use of ADO.NET EF here is just for creation of DAL and use it through WCF service. Yes POCO is the nice solution for loosely coupled applications. So developers can use it. Another thing is that in my earlier articles  I have already posted articles on using Security with SL application using ASP.NET membership providers and custom providers etc and also I have posted articles on various features implementation of Prism w.r.t Silverlight. So for the complete application development all these articles can be referred.
Thanks
Regards
Mahesh Sabnis  
Comment posted by Andrey on Thursday, June 2, 2011 2:38 PM
Hi.
In your example it seems, that you or may be I, missed your declaration/ use of the CompanyEntities structure. It is used, but never declared or created in your example. Basically, without it, this example is not usable. Can you please add missing instructions ?
Thanks.
Comment posted by Maria Castiglione on Thursday, June 16, 2011 2:11 PM
Thanks Mahesh. I will look at your other articles! (Still don't like the code as images. Means I have to rifle through the downloaded code as I walk through your article)
Comment posted by Carol Nadarwalla on Friday, June 17, 2011 3:10 AM
@Maria Can't help with the images. It's one of the ways to protect our content from being copied and posted on other blogs. Plagiarism is evil and we are making desperate attempts to save our authors hard work.

The download code link is to save our readers from the trouble of coding the app. It causes a litte discomfort but at the end, we are giving away everything - including the code.
Comment posted by Rulin Hong on Wednesday, August 24, 2011 2:18 PM
The download code is different from the article. This article talks about asyn ways. The download code is using WCF by synchronous way which can't be generate wcf proxy in real SL 4 environment.  The output type of download code is windows Application, but it can ONLY be runned in browser. It still works after replacing with WPF prism assemblies. Author must use a custom application template.
Comment posted by iti tyagi on Wednesday, August 29, 2012 3:32 AM
This example is not showing where the shell is used and where are the regions in this shell etc. So I was looking for the example where we can show the modules and their updation as well as the role of dependency injectors and eventaggregator.
Comment posted by Barry on Wednesday, May 7, 2014 11:12 AM
Nice Article, can you fix the source download link.

Post your comment
Name:  
E-mail: (Will not be displayed)
Comment:
Insert Cancel