Friday, August 6, 2010

Silverlight ViewModel UserControl

ViewModel UserControl is what we call the UserControl that given an ecospace type and a ViewModel name already in design time can derive a UI based on the UI-hints that the ViewModel definition might have, and in runtime, given an EcoSpace and a Root object, turns into a fully bound UI; derived purely from a declarative idea about what you want to achieve.

The ViewModel UserControls have different implementations for different UI-architectures of course. I have described the ViewModel UserControl for ASP.NET here; http://theblog.capableobjects.com/2010/02/viewmodels-in-aspnet.html .

The ViewModel UserControl for WindowsForms UserControl I have not really written anything about – but we use them frequently in Modlr – like in the Actions-dialog.

The ViewModel UserControl for WPF I have written about on numerous occasions, for example here; http://theblog.capableobjects.com/2010/01/viewmodel.html and not to mention that the WPF ViewModel UserControl is core to WECPOF / AppComplete that is discussed here http://theblog.capableobjects.com/2010/05/wecpof-icing-on-model-driven-cake.html

And earlier this week I wrote about the ViewModels now being consumable in Silverlight via generated code ; http://theblog.capableobjects.com/2010/07/silverlight-and-viewmodels-and-eco-and.html in the available beta builds of ECO6 for Visual Studio 2010.

Today we present the ViewModel UserControl for Silverlight – named ViewModelSLUserControl. That we were about to present such a control must have been obvious to everyone but today it is actually here.

The demo project is in the Demos folder named SLDemo20100806_UserControl

In the solution explorer this looks neat an tidy:

image

Click open the EcoModel1:

image

Clicking on the ViewModels button brings up the ViewModel editor:

image

I wanted to show a somewhat complex sample and at the same time really test the Silverlight implementation of the ViewModel UserControl. So I added comboboxes, and master detail grids in two steps followed by a detailing of the selected row of the last grid in discrete components.

I also added columns to the ViewModel for each of the auto created/ auto maintained vCurrent_ variables that comes with the ViewModel.

Even if this sort of UI is considered advanced by many standards (never mind the look of it just now) it is easy to produce and maintain in the ViewModel editor. And this is the whole point of the ViewModel UserControls – fast as your thoughts. The interesting part is really what you do with the time you do not spend in the ViewModel editor – the time you have gained by not being forced to create standard UI’s manually, and not needing to maintain them manually.

Consuming this in Silverlight is easy (from today and forward)

   1: public Page()
   2: {
   3:     InitializeComponent();
   4:  
   5:     DequeuerSL.Active = true;
   6:     _ecoSpace = new EcoSilverlightDemoEcoSpace();
   7:     _ecoSpace.Active = true;
   8:     ViewModelDefinitionsInApplication.Init(_ecoSpace);
   9:     
  10:  
  11:     CreateDemoData();
  12:             
  13:     ccc = new ViewModelSLUserControl();
  14:     ccc.EcoSpaceType = typeof(EcoSilverlightDemoEcoSpace);
  15:     ccc.SetEcoSpace(_ecoSpace);
  16:     ccc.ViewModelName = "TestViewModel";
  17:     TOPPanel.Children.Insert(0,ccc);

And you get this in runtime:

image

And I could not resist to spend some time to find out how far of WECPOF for Silverlight was now that the ViewModelSLUserControl was in place. It turned out that the biggest challenge was the Menus. Main menu is not in Silverlight (or the toolkit), and the ContextMenu’s that are in the Toolkit does not support hierarchical menu items – crap. I found a good start of implementing the Menus at CodePlex - http://sl3menu.codeplex.com/ , I will use this until the Toolkit catches on…

WECPOF / AppComplete for Silverlight actually works!

image 

I added the sample to a server with IIS7 : http://lulea.dyndns.org/EcoSilverlightDemo.Web/EcoSilverlightDemoTestPage.aspx 

As always – typos –> email me and I will fix & comments appreciated

The build that contains the sample and the necessary ECO6 versions is posted at the end of this topic: http://www.capableobjects.com/apps/InstantForum414/FindPost5469.aspx , if there are newer builds when you read this – use them instead…

4 Comments:

Anonymous Anonymous said...

FWIW, in the MVVM pattern, I THINK that your "ViewModel UserControl" would be better called a "View".

August 7, 2010 at 5:17 AM  
Blogger Hans Karlsen said...

I have been giving the naming a lot of thought - I know MS calls the pattern to implement a ViewModel for a "Model View ViewModel" or MVVM. Martin Fowler called it Model-View-Controller.

But we all talk about the exact same thing; a View of the model - we mean this in the aspect "not the whole model" and also in the aspect "the model according to me" and thirdly in aspect "the model transformed to solve my usecase or business process step".

So the ViewModel is one thing and the UserInterface (UI) is another. That being said it is important to say that the motivation for having a View of the Model and not always use the whole Model is very helpful when building a user interface.

The name "Model View ViewModel" seems a bit like "let us stack the same words next to each other a lot of times to make it exciting" - I do not get it...

August 7, 2010 at 8:44 AM  
Anonymous Anonymous said...

So if I have a remote SQL server database, changes from the client get persisted. Right!. How secure is this, could you inject sql commands from the client? How do you synchronize multiple clients? What if one client makes a change, can I push changes to the eco space of the client to notify user of change? (I suppose that would require a port to be open on the client which is not ideal)

August 16, 2010 at 5:17 PM  
Blogger Hans Karlsen said...

Yes, when the client persistence mapper is fully silverlight compatible (this is what we are working on now) stuff you change is persisted. And the way the Syncronize service works is that the client asks for a Refresh - so it is always the client that has initiave (no need to hold incomming ports open). If you want automagic on your updates - use a timer and call refresh frequently...

August 16, 2010 at 6:41 PM  

Post a Comment

Subscribe to Post Comments [Atom]

<< Home

 
Contact Us | Terms of Use | Privacy Statement © 2009 CapableObjects