• Blendability
• Ninject power and flexibility
• Smooth animations
• Modularity (development & code)
• Fast “menu” system

Solution

The PluginSystem assembly contains the plugin base class, the view model base class and an animated content control.

PluginBase class :

This class force plugins to expose a user interface, an name (for menu printing in this case) and force overriding OnActivate and OnDeactivate methods.

PluginViewModelBase class :

This class is a simple layer over ViewModelBase defined in MVVM Light. The main difference is that it embeds the reference of the parent plugin. With this reference, the plugin can easily access to injected values for example.

AnimatedContentControl class :

This usercontrol works like a commn ContentControl. There is one difference : if you change the content, it will animate it.

You can set AnimatedContent for the content, Delay, EasingFunction and Transition properties to customize the transition when you change the content.

Main application side

You can use the plugin system to get a dynamic menu:

1. You can create a Ninject module for declaring plugin bindings.
2. Once done, we get all registered plugins by using Ninject Kernel
3. You set the list in your viewmodel
4. You bind the list to the view

Last step is to bind the selected item’s user control to a content control (or an animated content control).

You can also use the plugin system to get static region system.

Defining a new Plugin

You need to create a new class library. Include some WPF libraries (System.Xaml, PresentationCore, PresentationFramework) and create a plugin definition file and a pluginVM file.

In this plugin file sample, you can set the “MainPart” property, create the view model and set it to the datacontext. Here is a sample:

Blendability

With this system you can keep “blendability” by using “Sample data” system from Blend. You will have your view model with design mode detection and capability to set custom data.

Ninject power and flexibility

Based on Ninject system, you keep all the power of Ninject. For example :

This module defines 3 plugins but also define sorting parameters based on “Name”

You can use this module for extracting only “FirstScreenable” plugins

(Plugin3 is a dependency for Plugin2 it must not be printed on the first screen)

On the other hand, you can rely on Ninject to inject something else than plugins.

Smooth animations

Thanks to the AnimatedContentControl, if you change the “AnimatedContent” property, you automatically start an animation. You can also see/try these animations inside Blend.

Modularity (development & code)

As you can see, the main application is perfectly separated from plugins. Each team can work on a plugin without interact with other plugins.

Why not using PRISM

I have tried Prism during 20 minutes and I was not able to create a simple plugin system based on it. Moreover Prism4 documentation pdf file is more than 352 pages (too much to read for a simple modularity system). One of the best practice is KISS, keep it stupid simple! By the way, this simple plugin system took me less than 30 minutes to create !

Associated files

All sources are available for WPF here : PluginSystem.zip Contact me if you need a port in Silverlight

Context

You may need to integrate OData service in Silverlight. In this context, you could add your business code in the Silverlight part. It can result a sequence of asynchronous call in Silverlight (like Russian doll) :

When server raises an exception it must be propagated to the client (with or without message).

In my future example, I will try to create an address in AdventureWorks database, without filing mandatory fields, and asynchronously save it. The save MUST raise an exception. I will describe all methods used to do this.

Acknowledgement

Version 1 

The first version is fully functional and raises an exception in the callback. In a single call, we can’t see the difference but, in multiple and sequenced call, the process can be heavy.

Thanks to task parallel library, a new call system can be developed with Silverlight 5, based on Task.

Version 2, with TPL – ContinueWith 

The code below is also functional. We receive the exception and we can manage it.

Version 3 – TPL Wait & Result 

With or without the t.Wait(), t.Result must wait and block thread until result arrives. But this code is not functional. The test is a success without exception but it blocks when server raises an exception. I have done the same test in WPF (same server, same service, OData reference generated asynchronously) and WPF does not have this strange behavior.

Version 4 – TPL Explicit exception 

This version allow us to catch the exception on the Wait() call. This code is functional.

Conclusion

This peaces of code show us that a service exception is not caught/raised properly by Silverlight if you use Wait() or Result() without ContinueWith instruction…

Have you already experienced this strange behavior?

PS : Here is the source code for my tests : SilverlightApplicationTPL.zip (you may need AdventureWorks database and a local IIS)

Update

One of my collegues ask me to check some points for the working and the non-working scenario :

OData request : The OData request is perfectly send is both cases. Here is the fiddle traces :

In debug mode, it is clear that ContinueWith version will raise an exception …

…  and t.Result version has not any exception before calling t.Result and before program hangs :

Output window : in both cases, we see that the version 2 perfectly raises exceptions :

But version 3 does not :

There is still no response

• Blend is also for ergonomic specialist.
• Blend is also for developers.

How many times I have seen people saying :

“I am a developer so I develop the application and give it to the designer” : Without an ergonomic study before, you might create an application inside out, upside down and back-to-front…

“I am not a developer so I do not use Blend” : It is the biggest stupidity I have ever heard about Blend… I will prepare few samples that is usefull for developers inside Blend context.

What can be done in less than 15 seconds :

• Manage sample data and data sources
• Create a template associated to a control
• Edit a template
• Create animation
• Create states
• Using external user controls
• Edit shapes
• UI design with usefull tools
• Use and edit behaviors
• Manage resources

Manage sample data and data sources

Panel for sample data management:

Simple click to add data from classes:

Edit data format for better result:

Create a template associated to a control

Accessible to right click over the control with contextual result:

You can create a “copy” of the existing template and going directly to edition or apply an existing one :

Edit a template

Edition of a template with instant result preview :

Create animation

Animation edition based on timeline, direct edition/key recording, direct result with play button:

Create states

Few clicks to create a group and populate it with states :

Easy to see transition type and directly see result without launching application :

Using external user controls

After build, capability to search for a custom user control, define in your project or in a referenced assembly :

Edit shapes

Capability to create a shape, edit it visualy, combining multiple shape (binary operation over multiple items), converting to paths items defined in the layout :

UI design with usefull tools

Display/Hide and Lock/Unlock object in object view to prevent unwanted edition

Use and edit behaviors

Once created in your project or referenced in an assembly, behavior can be created by drag and drop over the associated object.

Manage resources

You can move resources for project re-factoring :

Conclusion

Here is few sample to boost productivity with blend without any graphic fancy stuff. It is just another helpfull tool but we MUST use it for all Xaml edition. I think it could be interisting for Html5 version of blend to propose same capabilities

We have developed a set of application based on a single “web services server”.

• An IPhone, IPad, Android version with Sencha Touch
• A Windows Phone 7 native version
• A Silverlight version
• A Windows 8 based on winRT version

This article will only talk about consuming web services on this 4 versions.  We add some constraints like activating HTTPS for enhancing security, taking care of enhancing speed for mobile devices, etc … What is the conclusion of the adventure ?!

Global architecture

Iphone, IPad and Android

we had set up JSON for the first time for IPhone and it was easy in IPhone side. But WCF was a bit more lazy …

Here is a sample of service header :

[OperationContract]
[WebInvoke(Method = "POST", UriTemplate = "SendRequest", RequestFormat = WebMessageFormat.Json, ResponseFormat = WebMessageFormat.Json)]
public string SendRequest(Stream multipartData)
{

we had to parse the multipartData stream and transform the JSON string with the JavaScriptSerializer…

Windows Phone

WCF setup was more easy.

[OperationContract]
public string SendRequest(string login, string password, int requestType, string startDate, string endDate, int startAM, int stopAM)
{

but we had to develop an “automatic certificate installer” for windows phone, based on http://wp7certinstaller.codeplex.com. If the phone does not have the certificate, it will be redirected on a website. We can’t use not trusted webservices without installing the certificate. Same as silverlight and windows 8 behavior, we do not have access to the ServicePointManager :

ServicePointManager.CertificatePolicy = delegate { return true; };

Silverlight

The silverlight consume the same web service than windows phone. Otherwise, it was mandatory to install the client certificate.

Windows 8

Due to close timeline, we have give up installing https for Windows 8. We use Http binding over the windows phone web service. It only use an other endpoint on the Windows Phone.

Summary

The sheet below describe what we can do and with predefined configurations :

Summary

For information here is the web.config :

<?xml version="1.0"?>
  <configuration>
    <system.web>
<system.serviceModel>
<bindings>
<wsHttpBinding>
<binding name="IPhoneBinding">
<security mode="Transport">
<transport clientCredentialType="None" />
</security>
</binding>
</wsHttpBinding>

<basicHttpBinding>
<binding name="WP7Binding">
<security mode="Transport"/>
</binding>
<binding name="WP7BindingNoHttps">
</binding>
</basicHttpBinding>
</bindings>

<behaviors>
<endpointBehaviors>
<behavior name="WebBehavior">
<webHttp />
</behavior>
</endpointBehaviors>

<serviceBehaviors>
<behavior name="TimeOffServiceBehaviors">
<serviceMetadata httpsGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>

<behavior name="TimeOffApp.TimeOffServiceWP7Behavior">
<serviceMetadata httpsGetEnabled="true" />
<serviceDebug includeExceptionDetailInFaults="true" />
</behavior>
</serviceBehaviors>
</behaviors>

<serviceHostingEnvironment aspNetCompatibilityEnabled="true" />

<services>
<service behaviorConfiguration="TimeOffServiceBehaviors" name="TimeOffApp.TimeOffService">
<endpoint address="" behaviorConfiguration="WebBehavior" binding="wsHttpBinding" bindingConfiguration="IPhoneBinding"
name="IPhoneEP" contract="TimeOffApp.TimeOffService" />
</service>
<service behaviorConfiguration="TimeOffApp.TimeOffServiceWP7Behavior" name="TimeOffApp.TimeOffServiceWP7">
<endpoint address="" binding="basicHttpBinding" bindingConfiguration="WP7Binding" contract="TimeOffApp.TimeOffServiceWP7" />
<endpoint address="" binding="basicHttpBinding" bindingConfiguration="WP7BindingNoHttps" contract="TimeOffApp.TimeOffServiceWP7" />
</service>
</services>
</system.serviceModel>
</system.web>
</configuration>

The silverlight solution

You just need to add the System.Windows.Control reference.

The main page Xaml is like described below :

Generate items

Here is the little code that generate 12 000 lines and put it to the itemsource :

You can run the sample at this time. There is a 10 sec latency (dependant to your computer power)…

Solve the problem

We will use blend to speed up development and show the simplest way to produce this solution.

At this time you need to edit the general template (Edit a copy, not create a blank one) :

And edit the “ItemPanel” of your selector :

You must replace the “StackPanel” with a VirtualizingStackPanel:

 –> 

At this point you mzy think you have finished but, if you run your solution, you will see it remains the latency.

Final tips

The tricky trick is to add a MaxHeight that force the system to generate a maximum of 250px of ItemTemplate

Sources

Sources are available here

This application use web services based on Object Client for SharePoint. We will only see the Blend 4 part and the Visual Studio for windows phone development.

I only use MVVM Light (as usual :p) as external framework. I have already done the link between the “enum application state” and the “data state mechanism” (see previous coding dojo for more details). I have set up MVVM Light with NuGet (see details on NuGet)

The first video show how you can set up the project and create quick content (approx 1h). The second video show the capability of the application, on normal usage.

We will now detail much more validation integration in the generated context.

How validation is integrated

Here is a schema that summarize the validation integration.

• The generated part (left side) is the MVVM DTO, processed from the edmx file. This file will be linked in the model in silverlight side. This part is absolutely not correlated with validation.
• The other partial class (right side) is added by user and can embed multiple information (extra properties, methods, …) and, in this case, flag the class and say it can be validated.
• The last part (below) is the validation definition. You can embed each rule in the constructor of the class.

Binding sample

The last step of this article is exposing what i am generally using in Silverlight/WPF programs. Some of them are from other sources.

Package helpers view

 Behaviors

• BindVisualStateBehavior : Link an enum property of your VM and, on changes, invoke a “change state” in the view. The main goal is to define a Laoding/Loaded state, an Error/NoError state, an Application state and allow user to orchestrate your silverlight application only by changing an enum value.
• BackToStateBehavior : On a specific action, set an enum to a specified binded property.
• KeyPressSelecterComboboxBehavior : On a user letter key press , select combobox item starting by the item.
• NotNullCheckboxBehavior : When someone set null to a checkbox, it will automatically be modified to false. Fighting against bad database format
• RadioButtonToValueBehavior : When a radio is checked, set the specified value to a linked property. Usefull to link radio button group to value.
• SecurityBehavior : This behavior is linked to a list of “Role” and, if a specified role is not found in the list, it hides the associated object.
• UpdateBindingOnTextChangedBehavior : On each key press, update the text binding.
• ValueToVisibilityBehavior : Only show the associated object if a linked property is equal to a specified value.

Converters

• BirthDateConverter : A simple converter to change a DateTime to a specified format.
• VisibilityConveter (& Inverted version) : Convert a boolean to visibility
• VisibilityFromDataConverter (& Inverted version) : Test if the data is null and transform the result to visibility.

Uses cases

Since few years, I am practicing Silverlight in a business context. In each cases clients ask us to develop a user interface with business logic and persistency. Most of time, clients wanted a CRUD application with a nice user interface.

Target

Theses software had to manage complex data and, for each data type, must:

• Have a read only view,
• Have a write view,
• Manage complex properties/navigation properties by adding or removing sub items,
• Have a corporate view and an innovative user experience,

I have proposed approximately the same architecture, even with my experience feedback… Silverlight over SOA was for me the solution by design for many requirements.

• Multi-User
• Less deployment problems
• Expose services/resources for others

Simplified architecture

Sample of my last project packages

Detailed package diagram

The (L) icon says that files are “add as link” under the project. In this case, changing it in the first and real reference says that you change it where the file is linked.

Tools & Technologies

Through NuGet, I am using MVVM Light, Entity Framework 4 and also T4 code generation from Microsoft with a T4 editor.

In details

From database to classes

Based upon the database, I create an EDMX file that generate the persistency layer and the POCO files. This POCO files embed all the entity framework persistence layer. Also based upon the EDMX file, a T4 file can generate the DTO in MVVM Light format and the AutoMapper configuration.

The T4 generator is a fork of the Self Tracking Entity version. It generates one file per class for the DTO and one global file that define the AutoMapper’s configuration.

In this configuration, changing the data format or the data source allow developer to be more reactive. They have to adjust web services and views.

DTO choice allow developer to extend the generated pack by custom DTOs. For example in auto-completion features.

The generated MVVM DTO

This file will contain one MVVM property for each corresponding property in the given class (with RaisePropertyChange call for example).

The generated AutoMapper configuration

It will generate the configuration from POCO to DTO (full copy) and from DTO to POCO preventing copy of primary key, complex and navigation properties.

The data transfer

Data migration/conversion through layers

We will now describe how the data will evolve in the architecture.

The data is actually stored in the database. Through a LinQ request, the business layer will find the data and Entity Framework will fill a POCO. By default, the lazy loading is disabled. It will prevent loading the entire database with AutoMapper or serialization. User must say which data is needed. Once the POCO filled, AutoMapper can transfer data from it to a new DTO before sending it through WCF.

Silverlight will receive data and can directly bind it on views.

On the other way, Silverlight can modify the principal data and send it back to the server. Business layer will receive a DTO. If it already exists, load it and write over thanks to AutoMapper. If it doesn’t exist, it will add data to the persistency layer.

Helped with a static method, it is possible to “merge lists” for hierarchical entities. You can find the script below and discover the target of the function. This is inspired from the stackoverflow thread solution exposed here.

public static void Reconcile(EntityCollection databaseList,
                                           ObservableCollection dtoList,
                                           Func keySelector,
                                           Func keySelectorDTO,
                                           Func databaseFinder) where T : class where TDTO : class
        {
            Dictionary databaseDict = databaseList.ToDictionary(key => keySelector(key));

            foreach (TDTO dtoObj in dtoList)
            {
                int key = keySelectorDTO(dtoObj);
                T databaseObj = null;

                if (databaseDict.TryGetValue(key, out databaseObj))
                {
                    databaseDict.Remove(key);
                }
                else
                {
                    T databaseObjFound = databaseFinder(key);
                    if (databaseObjFound != null)
                    {
                        databaseList.Add(databaseObjFound);
                    }
                }
            }

            foreach (T removed in databaseDict.Values)
            {
                databaseList.Remove(removed);
            }
        }

Validation

Validation can be setup by creating a partial class and adding the validation helped with FluentValidation. You can setup validation server side and add a link of the partial class client side. With this configuration, you can add client side only, server side only or both if you want.

The validation details can be found here

1 – Visual Studio 11

Visual Studio 11 is provided in the Windows 8 Developer Version. It is provided with some “Metro Application Style” templates. One first thing we can notice is that VS11 is very similar to VS10… Microsoft added usefull features detailed below. I am quite disapointed about Microsoft political point of view about Xaml Language and Html5/JavaScript…

Fast file preview

File preview in Visual Studio 11

You may know that Visual Studio is multi-tab layered. But, when you “simple-click” on a file in the file treeview, a new tab stacked on the left will appear. It will provide you a quick preview of the file content.

Quick search in Solution

Visual Studio 11 research in project

Visual studio embed now a search field just above the file treeview. You can now look for a file, a class, a method or a field in few seconds. It will enhance our productivity incredibly.

Quick Search Command

Visual Studio 11 research commands

You can also search for a command through the search field in the Visual Studio Toolbar and access quickly for all available commands.

Some “Metro Style Application” samples

Visual Studio provide us few templates and show us how “Metro Style Application” can be.

2 – Blend 5

Blend 5 is provided for testing JavaScript/Html5 solution for Windows 8. I used to work with Blend 4 for Silverlight and lots of features that was available and allow me to produce a fast/clean solution is not available for Html5/JavaScript solution… For example, binding states to an enum property… But in the JavaScript/Html5, there is no state or even storyboard. Blend is a JavaScript/Html5 WYSIWYG editor in this specific case …

Where are my tools ?

Blend tools

This is the only tools you have in the JavaScript/Html5 version of Blend

Assets, generated parts & Javascript

Blend static and generated parts

Here is a sample of a rating “control” in Blend 5. As you can see, the rating control will create a div and “generate elements inside” (elements with a lightning near the eye). You can access the div and do your stuff on the JavaScript side.

Long long long CSS train …

CSS big world

Once unfolded, CSS properties are numerous…

Plateform testing

Blend platform testing

Your application can be tester under multiple format. This is a good point of Blend 5. You can also activate an emulator for directly seeing the result. Here is the result in the emulator :

Blend emulator

Files created in a new Html5/Javascript

JavaScript project files

Here is the project content created for an Html5/JavaScript project.

Good features nevertheless …

CSS identification

Some good features are added inside Blend 5… You can fly over a CSS Style and see where it is applied.

 Conclusion

I am worry about Silverlight/WPF/Xaml-Based future for many reasons.

1. I have seen lots of Silverlight developers that doesn’t know how to use Blend… (too many …)
2. Microsoft only talk about Html5 and JavaScript in their meetings…

But, we have a big advantage. True Silverlight developers can create more shiny application in a shorter time than with Html5/JavaScript … And C# will always be smarter than JavaScript

Microsoft feels the difference many times ago and add a new step between integrators and developers. It’s called NuGet.

I was creating a new Windows Phone application and, in my disturbed mind, i was wondering if i could create a universal “Windows Phone 7 development starter kit”. Well … After bringing me down to earth, i only installed NuGet.

What is NuGet ?

NuGet can be compared as Synaptic for an OS or MarketPlace for a device but it is for a development project. You can download a vsix file (add-in) from this page : http://nuget.org/

After downloading and installing it, you own all 2845 framework at your fingertips ! (At this time)

Now you can create a blank Windows Phone 7 project and launch NuGet.

Through an efficient windows, you can find “frameworks” on the web.

NuGet and Framework selection

When you add a new framework to your project, NuGet will install dependencies locally, in your project, add them to your project and do some helpful tasks like adding helpers and classes.

For example, with MVVMLight, it will :

• Download references for Windows Phone 7 project
• Add it locally (not in Program Files or other …)
• Add references to your project
• Automatically add the ServiceLocator class and insert it’s reference the App.xaml file
• Automatically add the MainViewModel !

With this new “conception process”, you will be able to build an application more quickly and use this time gain to debug, drink a coffee or … write a paper