Implementing Avatar Login (Profile Picture)

2010-03-21T03:40:00.000-07:00

Creating Rich Business Applications using Silverlight 4 and WCF RIA Services- Part 2

Creating Rich Business Applications using Silverlight 4 and WCF RIA Services- Part 1

2010-03-02T00:12:00.001-08:00

Usually in any organization it is a good practice that whatever the applications are developed (ASP.NET, Win Forms, etc), will follow N-tier Architecture. Even in Silverlight also we can create N-tier Architecture but till SL 3 it was simple and easy.
It seemed Implementing N-tier Architecture on SL 4 to be little difficult.
But I was wrong, with the help of Max, Colin Blair and David’s Blogs I was able to create a very rich Business Class N-Tier Application, which I wish to Share with you People.
First of all I would like to thank each of them personally
Thanks to Max Paulousky who wrote an article on Code Project for creating N-Tier Business Application using Silverlight 3 and .net RIA Services.
Thanks to Colin Blair for his nice videos on creating N-Tier architecture in SL 4
Thanks to David Rousset for Avatar Login
Prerequisites: you’ll need Visual Studio 2010 Beta 2, Silverlight 4 Beta & WCF RIA Services in order to follow this tutorial or load the final project. You can find all the needed resources here: http://silverlight.net/getstarted/silverlight-4-beta/#tools
Power Commands for VS 2010: http://visualstudiogallery.msdn.microsoft.com/en-us/e5f41ad9-4edc-4912-bca3-91147db95b99
Now let’s get started.
This Solution has 3 parts:
1) Creating N-Tier Architecture
2) Implementing Avatar Login (Profile Picture)
3) CRUD Operations Using RIA Domain Services
I) Creating N-Tier Architecture
Usually when we see any Web / Windows Application Solutions, they use specific Architecture like 2-tier, 3-tier etc. where the Project components are separated from the main application.
Likewise, we can also construct our Silverlight Application Structure, for this solution I will use 3-tier Architecture.
My Solution is classified as below:
i) Silverlight Client Project
ii) ASP.Net project to host Silverlight Client
iii) Business Layer for ASP.Net Project
iv) Business Layer for Silverlight Project
So let’s create our project.
Fire-up our Visual Studio 2010

Click on New Project, in the new Project Window select Silverlight Business Application.

Note: we are using the Default Business Application Template to create the Solution and then we will transform it into our requirement.

Provide the desired Project Name, Location and Solution Name and hit ok
Now our VS will create our Solution, Initially our Solution will have 2 Projects
1) Silverlight Client Application (BApp.Silverlight)
2) ASP.net Web Application which Will host our SL Client Application (BApp.Silverlight.Web)
By default our Visual Studio SL Template will provide Authentication Service, Login Screen, User Registration screen etc.
But this is not what we want; we want to customize our Application Structure, so let’s take the help of WCF RIA SERVICES to implement our Application Structure
Note: WCF RIA SERVICES is nothing but our old .NET RIA SERVICES. From SL 4 onwards RIA Services will implement WCF techniques to make the Server Call Secured and Much faster using Async Calls.
Don’t forget to build your Application for some required Auto-Generated code
Ok let’s fire-up our Add new Project window by Right Clicking on the Solution and Add->New Project (or File Menu->Add->New Project) and Select WCF RIA services Class Library

Name the Project as BApp.AppServices and hit ok
Our VS will create 2 more projects
1) Silverlight Enabled Class Library(BApp.AppServices)
2) Class Library(BApp.AppServices.Web)

Once the Project is created delete the Unwanted Class files from both the projects. Our solution should look like this
Now Move Models, Resources and Services Folders from BApp.Silverlight.Web to BApp.AppServices.Web
Copy all the References of BApp.Silverlight.Web to BApp.AppServices.Web.
Note: Once we install Power Commands for VS2010 we will get one handy utility in the context menu to copy and Paste the references.

Now Open any class file in BApp.AppServices.Web and Change the Namespace of all the Files in the Project from BApp.Silverlight.Web to BApp.AppServices.Web (using Quick Replace Ctrl + H).

And even in the Using Section’s also

Now our ASP.net Project Changes are completed except clearing the Unwanted Files (that we will do later). Let’s move on to our Silverlight Client Changes.
Copy Assets, Helpers, Models, Web folders of BApp.Silverlight to BApp.AppServices project.
Now delete
a) Style.xaml from Assets folder in BApp.AppServices Project.
b) All the .CS files from Helpers Folder except ResourceWrapper.cs in BApp.AppServices Project.
Now Change the Namespace and Using sections to BApp.AppServices instead of BApp.Silverlight.

Here is the Most Tricky Part.
It’s kind of a bug in Visual Studio 2010 B2 when we copy the Web folder from BApp.Silverlight to BApp.AppServices the project files won’t update automatically to accommodate the Resources References so we have to do it manually.
To do that we have to take our Projects (BApp.Silverlight and BApp.AppServices) offline and Edit the Project Files.
To do this right click on the BApp.AppServices Project and select Edit Project file in the context Menu. And change all resource includes
Include="..\bapp.Silverlight.web\resources\ErrorResources.Designer.cs">
To
Include="..\bapp.AppServices.web\resources\ErrorResources.Designer.cs">
Now we have to create a wrapper for our WebContext to do so Add a new Class in our BApp.AppServices project name it as WebContext and paste the Below Code

namespace BApp.AppServices
{
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Web.Ria.Data;
using System.Windows.Ria;
using System.Windows.Ria.Services;
using BApp.AppServices.Web;
/// <summary>
/// Context for the RIA application.
/// </summary>
/// <remarks>
/// This context extends the base to make application services and types available
/// for consumption from code and xaml.
/// </remarks>
public sealed partial class WebContext : WebContextBase
{
#region Extensibility Method Definitions
/// <summary>
/// This method is invoked from the constructor once initialization is complete and
/// can be used for further object setup.
/// </summary>
partial void OnCreated();
#endregion
/// <summary>
/// Initializes a new instance of the WebContext class.
/// </summary>
public WebContext()
{
this.OnCreated();
}
/// <summary>
/// Gets the context that is registered as a lifetime object with the current application.
/// </summary>
/// <exception cref="InvalidOperationException"> is thrown if there is no current application,
/// no contexts have been added, or more than one context has been added.
/// </exception>
/// <seealso cref="Application.ApplicationLifetimeObjects"/>
public new static WebContext Current
{
get
{
return ((WebContext)(WebContextBase.Current));
}
}
/// <summary>
/// Gets a user representing the authenticated identity.
/// </summary>
public new User User
{
get
{
return ((User)(base.User));
}
}
}
}

Now we can get rid of all unwanted things from our ASP.net Application and our Silverlight Client by deleting the Folders Models, Resources and Services in Asp.net Application and Compare and delete the files which are existing in BApp.AppServices from BApp.Silverlight
Make the Default.aspx file to Host the Silverlight Client Application by copying the HTML Markup of BApp.SilverlightTestPage.html and set as start up file.
So that we don’t need to keep more files in our ASP.Net Application.
Our solution should look like this.
Now add reference to BApp.AppServices to BApp.Silverlight,
BApp.AppServices.Web to BApp.Silverlight.Web
And remove the .net RIA services Link in BApp.Silverlight.

Make Necessary changes in the Namespaces and Using Sections in our Silverlight Client. And Clear all the errors by adding Namespaces in the Using Sections in all the XAML Pages
There will be an error regarding Actual Password

To rectify that error go to RegistrationDataExtensions.cs file in BApp.AppServices Models folder and change the property

[Display(AutoGenerateField = false)]

internal string ActualPassword { get; set; }

[Display(AutoGenerateField = false)]

public string ActualPassword { get; set; }

We have to make a major change in App.XAML in order to AuthenticationContext to talk with our Silverlight client

First Navigate to APP.XAML.CS file in BApp.Silverlight and Add below line in Application_Startup method

((WebAuthenticationService)WebContext.Current.Authentication).DomainContext = new AuthenticationContext();

Below this line

this.Resources.Add("WebContext", WebContext.Current);

Your Code should look like

this.Resources.Add("WebContext", WebContext.Current);

((WebAuthenticationService)WebContext.Current.Authentication).DomainContext = new AuthenticationContext();

Now go to APP.XAML file and replace your

<Application.ApplicationLifetimeObjects> section with

<Application.ApplicationLifetimeObjects>

<appServices:WebContext>

<appServices:WebContext.Authentication>

<appsvc:FormsAuthentication/>

</appServices:WebContext.Authentication>

</appServices:WebContext>

</Application.ApplicationLifetimeObjects>

And Register (reference) your AppServices project by adding the below lines

xmlns:appServices="clr-namespace:BApp.AppServices;assembly=BApp.AppServices"

Replace the existing xmlns:res with the below one

xmlns:res="clr-namespace:BApp.AppServices.Resources;assembly=BApp.AppServices"

That’s it. Our application is ready for the First Run.

Note: When we run our project it will Use the ASPNET database for Authentication and registration of new users. For using our own database for Authentication along with CRUD operations Please navigate to Part 2 of this Blog.