nRoute Samples Revisited

Posted by Rishi on 19-May-10 2:58 PM - Comments (13)

Tags: , , , , , | Categories: .NET, nRoute, Silverlight, WP7, WPF, Code

Post the new of release of nRoute, I've updated and upgraded seven sample applications from earlier releases to the latest version.

1. Future Desktop 2 [Silverlight 4, nRoute.Framework]

Future Desktop 
Future Desktop was the first ever demo-app for nRoute in Silverlight 2, and since then we've come a long way - as a metric for progress consider in upgrading to the latest release of nRoute we've managed to cut the code count by half. Also, I could sense two non-quantifiable improvements, Panelsone nRoute is a lot less invasive as it generally stays out by the way of attributes. Secondly within Views, use of Blend based behaviors is a lot more productive than having to fiddle with xaml directly.

As can be seen on the right, I've added bit of the UI functionality - basically, now you can add, close, and refresh workspaces. However, I've removed the browser-shell integration functionality, which allowed you to navigate back or forward directly from the browser's shell - I did this because nRoute is now using Silverlight's built-in Browser History Manager which unfortunately can't tell when one navigates' back. Also there are some new keyboard shortcuts for managing workspaces.

Read more about the Future Desktop app
View the nRoute's Future Desktop 2 App here [Silverlight 4, nRoute.Framework]

2. Office(r) 2010 [Silverlight 4, nRoute.Framework]

Officer 2010
This demo mimics Office 2010 beta version's look and feel, and it was primarily designed to showcase nRoute's navigation feature-set and use of containers-within-containers. Changes from the earlier version include use of Site-Maps, Controllers and View-Services for things like the message-toasts. Also in the earlier version we made of us TransitioningContent Control from Silverlight Toolkit to show navigation-transition effects, this has been replaced to use the newly added Transition Effects feature in Silverlight/Blend 4:

Navigation Transition Effects   
Making use of navigating-related transition-effects in your app is quite easy, it's actually just three steps - one, edit (or create a new) template for your navigation container, two, add a Navigating-to-Navigated transition (shown with the green rectangle border), and three, pick and choose your transition effect (using the fx button shown with a red circle border). Also shown above are some of the built-in effects from which I've used the Wipe Effect, but you could always add your custom effects.

Read more about the Officer 2010 app
View the Office(r) 2010 v2 App here [Silverlight 4, nRoute.Framework]

3. Web Xcel [Silverlight 4, nRoute.Toolkit Sample]

WebXcel

The Web Xcel sample was designed to showcase the use of ViewServices - which basically are services that are implemented visually. So things like toasts, open/save file dialogs, confirmation dialogs, etc. Also, I've updated the sample to show how you can implement ViewServices from your ViewModel in addition to doing it via code-behinds and using custom-controls.

Read more about the Web Xcel app
View the WebXcel App here [Requires Silverlight 4]

4. Office(r) Xcel [Silverlight 4, nRoute.Framework Sample]

Officer Xcel
This sample is basically an amalgamation of the previous two samples, the backstage view allows you to open-close ".xcel" files and the spreadsheet-like view visualizes the content.

Read more about the Office(r) Xcel App
View the Office(r) Xcel App here [Silverlight 4, nRoute.Framework]

5. Silverlight Console [Silverlight 4, uses nRoute.Toolkit]

Silverlight Console

The Silverlight Console project makes use of nRoute to provide two things, one a Console Window control that can be used to output text and take input, and two, it provides a script-commands engine that can dynamically resolve, parse, and execute script based commands. You combine the two and you have a domain specific console control and runtime right within your app.

To coordinate with samples release, I've just updated Silverlight Console to Silverlight 4, and as a way of samples included some new script-commands that can list, start and stop processes on the host server right from the textual interface.

Read Silverlight Console's introduction here
Get the source and sample app from Codeplex

6. Sudoku X2 : iPhone & WP7 [Silverlight, uses nRoute.Toolkit]

SudokuX2

The Sudoku sample is an end-to-end example of a MVVM style application - it shows how we can break apart an application in a Model, View, and ViewModel components only to bring it back as a loosely-coupled but highly cohesive application using nRoute. Using the clearly demarcated setup, I've refactored the sample to support two UIs (iPhone and WP7 themed) using the same View, ViewModel, ViewServices and other non-visual components. In addition to the main-view visuals, the working/busy indicator controls for WP7 has also been updated to use running bars - though both operate using the same ViewService definition.

Read more about the Sudoku MVVM app
View both Sudoku UIs side-by-side here

7. Simple MVVM [WPF, Silverlight 4, and Windows Phone 7, uses nRoute.Framework]

SimpleMVVM

I've also updated the Simple MVVM sample that shows without much fanfare how to use Navigation, Navigation-State, ViewModels, Services, etc across Silverlight, WPF and Windows Phone 7. Now, I've updated the sample to first make use of SiteMaps to define a crude navigation-menu shown in the UI, and secondly to seamlessly load and use external resources again just by just declaring it in the SiteMap. The SiteMap for the WPF version is shown below:

SiteMap

The SiteArea section defines an external resource which is uniquely identified using a SiteArea key ("ExtendedArea" above), and we use the same key to indicate that a Navigation page in the SiteMap resides in an external resource. Now, when asked for the externally resident Navigation page, nRoute automatically downloads, loads, maps and initializes all included resources (including things like Services, ViewModels, ViewServices, Navigation-resources etc), following which it resolves the asked for Navigation page. In the Silverlight version of the sample, we make use of an Xap file (though you could use a dll), whereas for WP7 loading of external resources at runtime is not allowed so we've just referenced the resource but it still is provisioned in a loosely-coupled manner like in Silverlight and WPF.

Future Reference App

 BusinessAppDesktop  BusinessAppWeb

For future release I'm working on a reference LOB application for nRoute that will provide a much broader and in-depth look at how you can leverage nRoute to make a composite application including the use of MVVM related techniques. And in my experience nRoute really shines in that composite role, as it allows you compose at various levels of consumption - at the application-level using things like SiteAreas, Modules, Services etc., at the infrastructure-level using Navigation, Messaging-Channels, IoC etc. and at the UI-level using ViewModels, ViewServices, ICommands, Behaviors etc. With the larger point being that by breaking you application into properly separated components there is a lot of synergy to be had in bringing it together using nRoute - and that's what I intend to demonstrate.

Download all the Samples Apps' Source-Code from Codeplex

Comments

Nic
Nic Canada
on 19-May-10 10:38 PM
Hi Rishi,

I am getting errors in the VS2010 designer like so for the Views\PageA.xaml page.

Error  1  The type 'nBehaviors:BridgeViewModelBehavior' was not found. Verify that you are not missing an assembly reference and that all referenced assemblies have been built.  D:\Dev_03\Silverlight\Frameworks\nRoute\SimpleMVVM\SimpleMVVM\nRoute.Samples.SimpleMVVM.Silverlight\Views\PageA.xaml  13  10  nRoute.Samples.SimpleMVVM.Silverlight

The solution compiles and runs fine though, and in Expression Blend 4 RC is fine as well.

Any ideas on why the VS 2010 designer is not happy?

I'm using the just released RTW of Silverlight 4 tools for VS 2010.

Thanks!


Rishi
Rishi
on 20-May-10 12:34 AM
@Nic, I'm guessing but it's likely the issue is related to nRoute requiring a specific version of System.Observable.dll or System.Windows.Interactivity.dll - but since there have been updated releases/versions of Rx-framework and Blend it might be causing such erroneous messages. So yesterday, I updated both the dlls and source to NOT be bound to any specific version of either System.Observable.dll or System.Windows.Interactivity.dll(.)

So basically just try using either the latest source or re-download the dlls and try using those - and to ensure you are not keeping any old references around delete both the "bin" and "obj" folders in all your projects (clean sometimes doesn't work properly).

Let me know if that worked.
Cheers,

Rishi

trackback
DotNetKicks.com
on 20-May-10 12:46 AM
nRoute Samples Revisited

You've been kicked (a good thing) - Trackback from DotNetKicks.com

trackback
DotNetShoutout
on 20-May-10 12:47 AM
nRoute Samples Revisited

Thank you for submitting this cool story - Trackback from DotNetShoutout

Nic
Nic Canada
on 20-May-10 1:56 PM
Hi Rishi,

Afraid that did not work.

I also downloaded the latest nRoute source and added the nRoute.Framework.Silverlight visual studio project directly to the SimpleMVVM solution, then added this project as a reference for nRoute.Samples.SimpleMVVM.Silverlight and nRoute.Samples.ExtendedMVVM.Silverlight. Same issue.

I was also premature on the Expression Blend 4 RC working happily. PageA/B/C.xaml open in the blend design surface but after hitting build in Expression Blend the same issue pops up as was present in VS 2010.

I'll continue to investigate.

Thanks.



Nic
Nic Canada
on 20-May-10 2:27 PM
Hi Rishi,

Me again. Figured it out Smile

The xaml files had this

xmlns:nBehaviors="clr-namespace:nRoute.Behaviors;assembly=nRoute.Framework"

when replace with this

xmlns:nBehaviors="http://nRoute/schemas/2010/xaml"

all is good with the designers in VS and Blend.

Strange that the xaml intellisense was happily working though.


pingback
topsy.com
on 21-May-10 3:05 AM
Pingback from topsy.com

Twitter Trackbacks for
        
        nRoute Samples Revisited
        [orktane.com]
        on Topsy.com

Rishi
Rishi
on 21-May-10 4:47 AM
@Nic, ahh the vagaries of development. I too had experienced the xml-namespace issues in VS/Blend, but it was a bit random. Anyway, it's a good tip that everyone using SL4 and WPF should use the "http://nRoute/schemas/2010/xaml" namespace, but do remember WP7 doesn't support customized xml-namespaces so you need to go resort to the clr/assembly type declaration.

Cheers,
Rishi

Nic
Nic Canada
on 27-May-10 8:04 AM
Hi Rishi,

You mentioned that you were building a LOB app to demo nRoute. I was wondering if you could demonstrate:

1. Integration with the browser address bar so that the url reflects the location in the app and also the ability to supply query parameters to the browser url and have those parameters accessible in silverlight.

2. Ability to paste an invalid url and get an error page.

3. Ability to paste a valid but protected url. The user would be prompted to login. When successfully logged in, the requested page would show.

Not sure if nRoute supports all of this but it's looking very promising.

thanks.



Rishi
Rishi
on 27-May-10 1:07 PM
@Nic, I'll try and put out the sample, but understand that it is really very easy to get the browser Url integration going - all you need to do is to put the NavigationShellIntegrationBehavior behavior on any navigation container that you want to pair with the browser. Now there are two important points to this, one, by default you can only have one container in the whole application that is paired with the browser-shell. Two, the built-in NavigationShellIntegrationBehavior does not support bi-directional containers (ie. you can't use it with BrowsingContainer control) this is a limitation of the Silverlight's Browser History Manager (see this thread for more info nroute.codeplex.com/.../View.aspx

Next, to integrate url parameters is also quite easy. Below is a simple example of the a VM which responds to the "Help/About/{Topic}" url - where "Topic" is a named parameter you resolve through the Url:

[DefineNavigationContent("Help/About/{Topic}", typeof(HelpPage))]
[MapViewModel(typeof(HelpPage))]
public class HelpPageViewModel : NavigationViewModelBase
{
    protected override void OnIntialize(Components.ParametersCollection state)
    {
        var _topic = state.ContainsKey("Topic") ? Convert.ToString(state["Topic"]) : null;
    }
}

Above in the VM we're overriding the OnIntialize method (which comes from NavigationViewModelBase base class, which actually gets it from implementing the ISupportNavigationLifecycle interface) to get the passed in parameters. Now, you could have more than one parameters, and they will come through the same parameters dictionary. Note, if you are not using a VM then just implement ISupportNavigationLifecycle interface on your View to get the passed in parameters.

As for an invalid Url request, the infrastructure should automatically lead the container to an error page. There is nothing special you need to do.

Lastly, about authorization based on Urls - we'll there is nothing explicitly in nRoute that caters for that. However, there are tons of extensibility points that can help you bring that in - eg. you could write a behavior attached to the container that checks for the roles/users on the VM as it navigates, or you could extend the MapNavigationContent attribute to seek authorization, or you could simply throw security exceptions within the VM on initialization etc.

Also, for future improvement I've looked into ways to allow hooks into the routing pipeline, so you can attach some kind of pre and post handlers. This would have been an ideal point for adding authorization checks, but alas not yet.

Rishi

trackback
orktane
on 01-Jul-10 12:19 AM
Creating a Netflix App using nRoute: A Step-by-Step Guide

Creating a Netflix App using nRoute: A Step-by-Step Guide

Uwadia Emovon
Uwadia Emovon Netherlands
on 28-Jul-10 10:52 AM
Hi Rishi,
I am a lover of nroute framework. nroute packs a punch. i have one problem though. The resource locator frame work does not work when you implement an and map an interface that lives in another dll or prject. I can only get it to work when both interface and implementation are in the same projecct(dll). Is this by design? As for protected urls pls take a look at this site(www.davidpoll.com/.../) if you have the time or better still post a sample showing how one can do protected urls.
Thanks for all the resources you have put into developing this wonderfull piece of framework called nroute. it sure is routing me un the right direction as far as silverlight is concerned.

Rishi
Rishi
on 29-Jul-10 1:50 AM
@Uwadia, thanks for your good words. Firstly the about issue with different assemblies might be related to this work item:

http://nroute.codeplex.com/workitem/4699

If you can send me a reproduction of the issue, I can probably confirm and update nRoute to correct it. Secondly, the authorization based SiteMaps, well, there are may ways to do the same with SiteMaps in nRoute. One easy way would be to use the "tag" property in SiteMap Nodes to store the Roles information and then trim the tree. However, a  better and more powerful way to approach it would be to create a custom SiteMap Provider, and then only have nodes that are applicable to the current user. Once I have some time I'll demonstrate a server based and database-driven SiteMap, and with that I'll also show how you can do server based trimmings. It's not too hard. Additionally, for the next version I'm thinking about adding a pipeline model for both navigation and controllers so you will be able to do authorization with a simple attribute - a la ASP.NET MVC.

Hope this helps,
Rishi

Add comment


(Will show your Gravatar icon)

  Country flag

biuquote
  • Comment
  • Preview
Loading