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

In this coding dojo we will see

• How to setup MVVM with Galasoft MVVM Light.
• How to use Blend as user interface designer.
• How MVVM can be applied in a concrete case.
• How developping quickly and with a relatively clean manner with MVVM.
• How to use chart of Silverlight toolkit.

It's burning ...

La Grèce a encore eu une rallonge de 150 milliards à la date du 21 juillet 2011 … La question est simple :

Peut on encore croire en l’Europe ?

Je suis loin d’être un expert économiste mais j’ai un brin de jugeote et Microsoft me fourni le reste : Excel. On peut rapidement faire le calcul, sur toutes les sommes données à la Grèce (soit 260 milliards € donc 364 milliards $), cela représente 730$ par habitant de l’union européenne. Je vous vois déjà venir avec des remarques et des critiques mais qu’on se le dise ce n’est qu’une approximation … Et si la Grèce faisait défaut…

Faisons un minimum d’effort de réflexion : pensez vous vraiment qu’un tchèque payerai 730 $ pour les grecs ? Non, on va être plus fin et indexer ça sur le PIB par habitant car dans l’idéal plus on gagne, plus on paye, non ? De plus je suis sympa, j’ai même inclus que les grecs payaient pour leur propre dette (huhu).

J’en ai déduit une petite sheet excel pour faire un résumé :

Greek loan impact on european population

Soyez aimable de me passer les quelques approximations sur l’euro (taux simpatoche de 1.4$ = 1€) ainsi que la somme versée par le FMI que j’ai inclus en mai 2010 …

La majorité des infos viennent de www.PopulationData.net et le taux de change que j’ai allègrement arondi à 1.4€ : capital.fr Mes sources en Excel et PDF sont aussi disponibles

 Update

Le monde publie un article sur le sujet qui démontre bien le malaise ambiant…

La spirale sans fin de la crise

- “Requièrement 10.3.2.45 : Après trois tours autour du téléphone sur les mains, l’application ne dit pas dans quel sens on a tourné !”

Enfin, c’est surtout pour assurer un minimum de qualité au MarketPlace, donc c’est pour la bonne cause !

Quelques sites miroirs ont immédiatement reprit l’info :

http://www.monsmartphone.net/marketplace/fdlv_lifestyle-a15274.html

http://www.monsmartphone.net/marketplace/fdlv_lifestyle-a15274.html

http://www.windowsphoneapplist.com/fdlv_lifestyle-a15433.html