I got a lot of great feedback on my post Silverlight 3 Navigation: Dynamically Loaded Pages… Now MEF Powered!

Dinesh Chandnani decided to do an update to this sample after looking at the feedback and talking to Nikhil Kothari and Wes Haggard from the MEF dev team.   The goals for this update are:

  1. Show even more of a web like user model.  With the web, you often see all the links in the navigation, but the actual page only downloads once the user clicked the link. 
  2. Lose coupling.  I need to be able to be able dynamically add, update even remove pages from my application without taking down the app and without rebuilding it.
  3. Built in authentication.  In real business apps, we need to protect our data, so authentication is  very important.  The web has popularized a very interesting model where you are only asked to authentication when you try to do an operation that needs it.  For example, i can browse the netflx catalog any time, but I have to log in the minute I try to add something to my queue. 

Download the all the source code

 

Basic Authentication and User Settings

Let’s do a quick run through of what the app does (with no extensions just yet). 

image

As you can see, it is the basic Silverlight Business Application template with Home and About pages that you can navigate to.  As well as a log in button.  But also notice there is a User Settings page who’s link is red which indicates the user needs to log in to see the contents of the page.  So if I log in as a user (Login: guest        Password: guest**)

image

I am now logged in and can access the Site Settings page, so it is no longer red.

image

On this page, I can edit user level customization of the app.  In this case, the background color of this page.  This data is stored on the server is the ASP.NET profile store, so each user can have their own settings that will work on any machine they go to. 

image

To bring that point home, let’s go in and create a new user, and give that user a different background color. 

Click on login

image

then Register Now

image

I registered “guest3”..

Now, i set the background color to be yellow

image

Then I log out and log in as guest and it is back to red.

image

Oh, and what is even more cool, is if you haven’t noticed yet, if you are not logged in, and you click on a link that requires authentication, you are prompted to log in and then the page is shown to you!  Very web like.

image

 

Loading Extensions

Ok – that is cool and all, but this is a MEF blog post, so we have to talk about application extensibility right?  The scenario here is that you are building a composite applications that may have many possible pages.  The pages that are there are available maybe very dynamic… it may depend on who the logged in user is, in a multi-tenant environment  it may depend on the service level of the client, it may also depend on what has been developed yet.  In all those cases, we don’t want to rebuild the app each time there is a new extension, in fact we don’t even want to take the app out of production.  We’d like to simply xcopy the AdditionalPages.xap extension into a directory and instantly the right clients have access. 

image

 

Simply hitting refresh on the application makes two new pages show up “products” and “site settings”

image

Clicking on the “products” link causes the AdditionalPages.xap to be downloaded. 

image

Once the xap is downloaded the page displays

 

image

Once the xap is downloaded users can navigate between the pages with no delay.

 

As an aside, this xap also includes a page that only an admin can access.  So if you log in as a user, you still can’t access it. 

Not logged in at all, you can’t access user or site wide settings

image

Logged in as a guest, you can access only user settings

image

Logged in as admin, you can access both site and user settings

image

 

Communicating Between Exceptions

What we have shown so far is loading of isolated pages dynamically.. while that is very cool, what is more interesting is where these pages have to interact together.  For example, sharing data between pages.  As you might guess, MEF has a model that fits in very nicely here. 

If you check out the products page, it actually has access to information about the currently logged on user. 

image

It gets this information from the main silverlight application via an import.  In products.xaml.cs, we are importing the RiaContext (which includes information about who is logged in). 

   1: [Import]
   2: public RiaContextBase RiaContext
   3: {
   4:     get { ... }
   5:     set { ... }
   6: }

and in the Silverlight application, in Services.cs we are exporting the RiaContext which is populated from the server. 

   1: public static class Services
   2: {
   3:     [Export]
   4:     public static RiaContextBase RiaContext
   5:     {
   6:         get { ... }
   7:     }
   8: }

When the xap gets downloaded to the client, these exports and imports are resolved. Using this model any pages can share state. 

 

Adding Additional Pages

What is very cool about this model is how easy it is to add additional pages.

1. Add a new SilverlightApplication

image

 

Remove the test page…  

image

 

Remove MainPage.xaml and App.xaml..

Add References

image

DynamicNavigation  - David Poll’s Navigation Extension
System.ComponentModel.Composition – MEF
System.Windows.Controls.Navigation
System.Windows.Ria

and add a project reference to PageMetadata

 image

 

   1: namespace YetMoreAdditionalPages
   2: {
   3:     [PageContent(Name="employees")]
   4:     public partial class EmployeesPage : DynamicPage

 

Now build, and then copy the YetMorePages.xap over to the extensions directory.  

image

 

Hitting F5, now we have our page dynamically loaded!

image

 

If you are doing active development, i’d suggest setting the build output directory of the extensions to the extensions directory.   This avoids the explicit copy step each time.

image

 

 

Summary

In this example we looked at how to build an authentication aware, composite  silverlight application…  you can download the all the source code ..