Microsoft LightSwitch : Créer une application desktop

En entreprise, la grande majorité des applications demandent un développement répétitif de formulaires d’affichage, d’ajout et/ou de modification de données, le tout dans des interfaces utilisateurs le plus souvent redondantes ou dont les particularités sont les relations entre les différentes tables impactées. LightSwitch est une solution visant à simplifier ces traitements, allant jusqu’à s’affranchir complètement d’écrire une ligne de code.

 

Son histoire et sa techno

Microsoft Visual Studio LightSwitch est une extension et un framework basés sur les technologies .NET existantes et les plates-formes Microsoft. Spécialement adaptées pour créer des applications business, celles-ci sont produites sur une architecture 3-tiers :

• L’interface utilisateur qui s’exécute soit via Microsoft Silverlight, soit HTML 5, soit une application SharePoint 2013
• La couche logique et d’accès aux données qui est basée sur WCF Data Services et qui expose un flux OData dans ASP.NET
• Le stockage de données qui prend en charge MS SQL Server Express, MS SQL Server, MS SQL Azure, mais également MS SharePoint, OData et WCF RIA Services.

Des concepteurs graphiques sont mis à disposition du développeur pour concevoir les écrans et entités ainsi que les relations, requêtes, etc… La logique métier peut être écrite en VB.NET ou C#. LightSwitch est inclus dans Visual Studio 2012 Professional et supérieur. Désormais, il est possible de déployer une solution LightSwitch sans la couche interface, permettant ainsi de déployer la solution en tant que service.

Publiée pour la première fois le 26 juillet 2011 avec la version de Visual Studio 2012 Professional, il y a actuellement un fossé entre cette première version et la version actuelle, qui est devenue un produit autonome. Dans sa version 2013, Microsoft a mis l’accent sur la conception des écrans avec HTML 5.

LightSwitch utilise le mapping objet-relationnel (ORM Mapping Objet-Relationnel), qui est le plus souvent créé de trois manières :

• Model-First – Vise à créer les relations, les classes et les héritages directement depuis le modèle d’entité et de générer le schéma de bases de données. Cette approche est très efficace pour les petits projets.

•  Code-First – Cette approche, qui est utilisée le plus couramment, permet d’implémenter une application de façon flexible et logique. Elle consiste à créer une classe (POCO pour Plain Old CLR Objets) pour à la fois gérer les structures de tables et les objets liés. Le changement dans les classes affecte à la fois directement les objets et les tables en base de données. Les classes peuvent cependant être créées à partir de tables existantes. 

• Database-First – Les modèles, les classes et les objets sont générés en partant des tables de la base de données et de leurs relations. Cette approche est souvent utilisée quand les tables existent déjà, ou sont développées séparément. 

LightSwitch se charge, depuis une base de données existante, de générer toutes les interfaces d’affichage, d’ajout, de modification et/ou de suppression, tout en permettant de préciser, au besoin, le code métier propre à certains traitements ou certaines données.

Dans cet article nous allons voir comment LightSwitch va nous permettre de gagner du temps sur tout travail répétitif que sera amené à faire un développeur que ce soit pour l’écriture de code pour interagir avec une source de données, ou pour la création d’interface utilisateur (ici écrans « desktop » avec MS Silverlight). Seule la logique métier devra être écrite (du code C# ou VB.Net) par le développeur pour répondre aux demandes spécifiques.

La source de données

Lorsque vous utilisez une base de données avec LightSwitch, celui-ci peut la créer automatiquement ou pointer vers une source de données existante sans aucune ligne de code. Ici, nous allons mettre en pratique la première approche.

Remarque : Dans cet article nous ne verrons pas comment utiliser le code pour valider les données.

Le contexte de l’article

Nous allons créer une nouvelle application LightSwitch pour gérer la relation entre un commercial et un collaborateur au travers d’une mission. Nous devrons définir trois tables :

• Commercial (id, nom, prenom)
• Collaborateur (id, nom, prenom, email, portable)
• Mission (id, dateDebut, dateFin, nomClient, PosteOccupe)

En utilisant les fonctionnalités de base de LightSwitch, l’application va nous permettre :

• d’ajouter, modifier et supprimer des commerciaux
• d’ajouter, modifier et supprimer des collaborateurs
• d’ajouter, modifier et supprimer des missions
• d’afficher des détails concernant les missions
• de lister les commerciaux et les collaborateurs

 Création du projet

On va commencer par créer un nouveau projet « LightSwitch Desktop Application » pour le Framework 4.5 :

Une fois le bouton OK actionné, la solution est créée :

On remarque que celle-ci comporte deux projets : un pour l’interface client, avec son dossier « Screens » pour les écrans, et l’autre pour les sources de données, qui seront localisées dans le dossier « Data Sources ».

Création des tables

Vous noterez que LightSwitch vous place directement dans la première phase du projet, à savoir la création des tables, à l’aide du Concepteur de table :

Alors allons-y, commençons par la table Commercial en cliquant sur « Create new table » :

Pour ajouter une nouvelle propriété, il suffit de cliquer sur « <Add Property », de saisir un nom, et de choisir un type de données. L’option « Required » est cochée par défaut. Il faut faire attention à son utilisation car il est souvent la cause d’erreurs de validation.

L’information de « Perspective » est très importante lorsqu’on va écrire du code qui va être exécuté quand cette table sera sollicitée. C’est pour cela que Visual Studio a besoin de savoir, via cette information, si le code doit être exécuté côté serveur ou côté client.

Une fois complété avec les noms des propriétés ainsi que le nom de la table dans la fenêtre « Properties », on obtient :

Pour chaque propriété, on a juste à saisir son nom et on laisse le type de données par défaut (String) ainsi que la case à cocher « Required ». Cette dernière nous permet de forcer l’utilisateur à saisir le nom et le prénom du commercial avant d’effectuer la sauvegarde.

LightSwitch sauvegarde automatiquement le nom du fichier au pluriel.

Faisons de même avec la table Collaborateur :

La propriété « portable » n’est pas requise pour la création d’un collaborateur.

LightSwitch met à disposition des types de données tels que « Email Address », « Web Address », « Phone Number », « Person »,… Il faut savoir que lorsqu’on utilise ces types de données, une validation et une vérification se feront automatiquement quand l’utilisateur entrera une valeur.

Pour la propriété « portable », nous allons ajouter deux formats qui seront utilisés par LightSwitch pour valider l’information saisie. Pour cela, il faut cliquer sur le lien « Phone Number Formats »

Puis, au travers de la fenêtre qui s’ouvre, ajouter nos deux formats, ici les deux dernières lignes du tableau :

Vous pouvez voir que l’on a la possibilité de tester nos formats :

Et la table Mission :

Ici, la date de fin et le poste que va occuper le collaborateur ne sont pas obligatoires pour la création d’une mission.

Création des relations entre les tables

Une fois l’étape de création des tables terminée, nous pouvons créer les relations entre ces tables. Nous commencerons par la relation entre les tables Mission et Commercial. Puis, nous en ajouterons une autre entre les tables Mission et Collaborateur. On vérifiera, par l’apparition de nouvelles propriétés dans les tables, que ces relations ont bien été créées.

Ouvrez la table Mission dans le concepteur de table LightSwitch, puis cliquez sur le bouton « Relationship… »

Dans cette fenêtre, vous devez choisir la table à relier à la table Mission. On va sélectionner la table Commercial. L’information « Multiplicity » correspond aux cardinalités qui reflètent les règles de gestion au bas de la fenêtre :

• Une mission ne concerne qu’un et un seul commercial
• Un commercial peut être associé à zéro ou plusieurs missions

Cliquez sur le bouton « OK » pour créer la relation.

On procède de la même façon pour relier la table Mission à la table Collaborateur. Ici, les règles de gestion étant :

• Une mission ne concerne qu’un et un seul collaborateur
• Un collaborateur peut avoir effectué zéro ou plusieurs missions

Vérifions maintenant comment LightSwitch a modélisé ces relations.

On remarque que deux nouvelles propriétés ont fait leur apparition dans la table Mission. Elles ont comme type de données un Collaborateur et un Commercial qui représenteront par la suite des éléments des tables correspondantes.

Pour les tables Collaborateur et Commercial, une seule propriété a été ajoutée et son type de données correspond à une Collection de Mission

         

Regardons maintenant le projet « BusinessRelations.Server », on notera que le dossier « Data Sources » comporte désormais une source de données appelée « ApplicationData » où sont rattachées nos tables.

A ce niveau de la création de l’application, aucune base de données n’a encore été créée. Pour ce faire, nous allons cliquer droit sur la solution et cliquer le « Build Solution ».

Une fois la solution compilée, on peut aller vérifier la création de la base de données dans le dossier suivant :

Remarque : LightSwitch utilisera une connexion vers SQL Express pour générer cette base de données.

Personnalisation

Ajout de logique métier

Pour commencer cette deuxième partie avec la création d’écran desktop, nous allons implémenter la logique suivante : un commercial doit avoir un grade. Grâce à celui-ci, il aura la possibilité de suivre un certain nombre de collaborateurs (portefeuille collaborateur). Pour ce faire, nous allons ajouter une nouvelle propriété « Grade » (obligatoire) de type « string » dans la table Commercial.

Cette propriété devra se comporter comme une liste de choix avec les trois informations suivantes : Responsable commercial ; Commercial ; Stagiaire. Pour cela, il faut cliquer sur le lien « Choice List… » et saisir les valeurs comme ci-dessous :

Nous ajouterons également une propriété « Portrait » (non obligatoire) de type « Image » dans la table Collaborateur :

Création d’écrans standards

Passons maintenant à la réalisation de l’interface utilisateur ! Nous allons créer des écrans en utilisant chaque modèle prédéfini que LightSwitch met à notre disposition.

Le modèle du tableau éditable (Editable Grid Screen)

Ce modèle nous sera utile pour ajouter rapidement des données dans les tables Commercial et Collaborateur.

Commençons par la table Commercial en ouvrant sa fenêtre de conception. Changeons de perspective afin d’avoir les menus adéquats pour la création d’écrans, puis cliquons sur le bouton « Add : Screen » :

Dans cette fenêtre, il faut : choisir le modèle d’écran, saisir un nom et surtout choisir la source de données à rattacher à l’écran :

Une fois validé, on arrive sur un écran de conception relatif au modèle choisi et à la source de données (ici Commercial). LigthSwitch s’occupe de tout paramétrer de l’agencement de l’interface utilisateur et des colonnes du tableau jusqu’aux liaisons entre la source de données et les composants consommateurs de données.

Vous remarquerez également l’ajout de notre nouvel écran (son représentant physique) dans le dossier « Screens » du projet « DesktopClient ». Voyons voir à quoi ressemble cet écran à l’exécution! Pour ce faire, appuyez sur F5.

Sans aucune ligne de code, nous avons là un écran opérationnel qui nous permet de faire du CRUD. Et c’est exactement ce qu’il nous faut pour ajouter des jeux de données. Alors allons-y, ajoutons trois ou quatre commerciaux… Vous noterez lors de la saisie qu’une liste déroulante s’affiche lorsque vous êtes dans la colonne « Grade » :

Cependant, quelques points sont à revoir si cet écran devait être utilisé par un client final. Par exemple : les quatre dernières colonnes, les boutons d’action, le titre de l’écran et le lien « Design Screen ». Ce dernier permet de passer en mode personnalisation et ainsi d’avoir un environnement de conception pour réaliser des modifications d’ordre graphique (dans la phase de développement du projet, en mode debug).

Nous allons profiter de cet environnement pour rendre invisibles les quatre dernières colonnes (propriété « Is Visible »). Nous y reviendrons pour les autres modèles d’écran.

La sauvegarde des données en base ne se fera qu’après avoir cliqué sur le bouton « Save » en bas de l’écran !

Nous avons vu que la saisie des données pouvait se faire directement dans le tableau. Néanmoins, elle peut également se faire via les boutons d’action. Ici, le bouton pour ajouter un enregistrement suivi de la « popup » (auto-générée par LightSwitch) :

Et là, le bouton d’édition suivi également de l’interface utilisateur créée :

Nous adopterons la même démarche pour créer le « Editable Grid screen » pour les Collaborateurs. Ci-dessous, l’ajout d’un enregistrement (j’ai volontairement choisi le type de contrôle « Textbox » pour la saisie du numéro de portable dans le tableau) :

Le modèle d’écran d’ajout de données (New Data Screen)

Nous allons à présent préparer l’écran qui nous servira à saisir les informations d’une mission (en ajout et en édition). Nous personnaliserons l’affichage de certaines informations et implémenterons une validation personnalisée.

Pour commencer, sélectionnons le modèle d’écran d’ajout de données :

Dans la fenêtre d’édition de ce nouvel écran, on va apporter des modifications sur les listes déroulantes qui concernent le commercial et le collaborateur de la mission. Initialement, elles sont organisées ainsi :

Le type d’objet sélectionné (Summary) dans l’image affichera, à l’exécution, la valeur du premier champ de la table Commercial juste après l’identifiant (ici le nom).

Ce qui aura pour rendu :

Pour afficher le nom et le prénom, il faut changer ce type d’objet en « Columns Layout » pour avoir tous les champs de la table associée et choisir lesquels afficher :

Les objets « Columns Layout » et « Rows Layout » permettent de placer des contrôles sur l’écran, en ligne ou en colonne. Ils peuvent être imbriqués et facilitent ainsi l’organisation des informations à afficher.

A l’exécution, on verra :

On peut également changer le type de filtre utilisé par les listes déroulantes en modifiant la propriété « Filter Mode » :

Par défaut (« StartsWith »), lorsqu’on saisit un nom, la liste est filtrée sur les noms commençant par notre saisie

Intéressons-nous maintenant à la mise en place d’une validation personnalisée sur la date de fin d’une mission. La règle de gestion sera : la durée minimum d’une mission est de sept jours. Retournons dans la table Mission, sélectionnons le champ concerné et cliquons sur le lien « Custom Validation » qui se trouve dans la fenêtre des propriétés.

La personnalisation va se passer dans le code C# (ou VB) du fichier Mission.lsml.cs. On va utiliser le paramètre de la méthode « (EntityValidationResultsBuilder results) » pour renseigner le message d’erreur à retourner si la règle de gestion n’est pas respectée lorsqu’une date de fin est saisie :

Lors de l’exécution de l’application, si une date de fin ne respectant pas la règle de gestion est saisie, le contrôle est entouré de rouge et on peut voir notre message personnalisé :

Libre à vous de changer les autres informations affichées sur l’écran comme le titre de l’écran, les labels de chaque contrôle, etc…

Nous reviendrons sur cet écran plus tard pour l’utiliser en ajout et en édition d’une mission depuis un autre écran.

Le modèle d’écran détail (Detail Screen)

Ici, nous allons créer un écran de détails pour le commercial et ses missions. Et comme c’est un type d’écran qui n’apparaît pas dans le menu, nous créerons un accès depuis l’écran éditable qui concerne les commerciaux.

Commençons par choisir le modèle d’écran détails depuis la fenêtre de création d’écran :

Après quelques modifications dans la fenêtre d’édition de l’écran :

Vous pouvez voir qu’il y a un bouton « Save », car cet écran va nous permettre également d’éditer les informations personnelles d’un commercial.

Modifions l’écran CommercialsEditGrid.lsml :

A cette étape, nous allons modifier le bouton « Edit… », pour afficher l’écran que l’on a créé ci-dessus. Pour ce faire, double-cliquons sur le bouton et ajoutons la ligne de code nécessaire :

La première méthode créée va servir à vérifier des règles de gestion, des droits utilisateurs, et autres… La deuxième méthode est celle qui va nous permettre d’appeler l’écran détails en passant en paramètre l’identifiant du commercial sélectionné dans le tableau de l’écran en cours. Via l’instruction « ShowCommercialsDetail(this.Commercials.SelectedItem.Id) ».

A l’exécution, lorsqu’on clique sur le bouton (crayon) :

L’écran détails s’affichera :

Le modèle d’écran de recherche (Search Data Screen)

Ici, notre objectif est de créer un écran qui va devenir notre écran d’accueil à l’ouverture de l’application. Cet écran affichera toutes les missions en cours avec le commercial, le collaborateur ainsi que le nombre de jours de chaque mission.

Pour commencer, nous allons ajouter un champ calculé qui affichera le nombre de jour en cours sur une mission. Dans la fenêtre d’édition de la table Mission, ajoutez le champ nombreJour et cochez l’option « Is Computed » puis cliquez sur le lien « Edit Method »

Dans la fenêtre suivante, on peut voir la création de la méthode « nombreJour_Compute ». C’est ici que l’on va vérifier les dates de début et de fin et préparer la valeur du champ.

Maintenant, passons aux requêtes. L’une va nous servir de source de données pour notre écran de recherche et l’autre nous sera utile plus tard.

A l’aide du menu contextuel, depuis la table Mission, ajoutez une requête :

La fenêtre de création de requête permet d’ajouter trois types d’élément :

• une condition (Filter) qui correspond à une clause Where/And en Sql
• un tri (Sort) qui correspond à un Order By
• des paramètres lorsque, dans une condition, on a besoin d’une information extérieure à la table d’origine de la requête

Notre écran aura besoin de mission en cours, donc avec la date de fin non renseignée (null) :

Profitons-en pour ajouter un tri sur la date de début, du plus récent au plus ancien :

Passons à la deuxième requête qui va nous permettre d’afficher des missions en fonction d’un client.

Cette fois-ci pour la condition on aura besoin d’une information extérieure (la saisie du nom d’un client par l’utilisateur). Donc on choisira « Parameter » :

Puis on l’ajoutera à notre requête…

… et on renseignera son nom et son type :

Une fois que notre champ calculé et nos requêtes sont créées, nous pouvons nous concentrer sur la création de l’écran de recherche. Pour ce modèle d’écran, nous sélectionnerons notre première requête comme source de données « MissionEnCours » :

Après quelques modifications dans la fenêtre d’édition, voici le résultat :

Et à l’exécution :

Nous parlerons plus en détails de la mise en place des boutons d’ajout et d’édition (à la place de « Nouvelle mission ») sur cet écran dans un prochain chapitre.

Avant de passer au chapitre suivant, nous allons modifier le menu de notre application.

Pour cela, faite un clic droit sur le projet « …DesktopClient » et choisissez « Properties ». Sélectionnez « Screen Navigation » puis apportez-y vos modifications. A savoir, sur le nom du menu, le nom de chaque sous-menu, l’ordre des sous-menus et la définition d’un sous-menu en tant que page de démarrage.

Le modèle d’écran liste détail (List and Details Screen)

Pour ce dernier modèle d’écran, nous allons utiliser la deuxième requête que nous avons créée dans le chapitre précédent. Ainsi, notre écran permettra de rechercher des missions en fonction du nom d’un client qui sera saisi par l’utilisateur.

Comme ci-dessous, on choisit la requête « MissionByClient » pour notre modèle liste et détail :

Quelques ajustements personnels dans la fenêtre d’édition :

• positionnement principal en deux colonnes
• la colonne de droite contient la zone de saisie et le tableau avec le nom du client et la date de début de mission
• la colonne de gauche contient les informations de la mission, du commercial et du collaborateur

A l’exécution :

Un même écran pour ajouter et éditer

Comme promis, nous allons nous intéresser à une personnalisation très pratique. Il est vrai que LightSwitch prend en charge la génération automatique des écrans d’ajout et d’édition. Mais il arrive parfois que l’on voudrait avoir nos propres écrans, et puis pourquoi pas le même écran, qui serviraient à la fois pour créer et pour modifier les données d’une table.

Premièrement, il faut modifier l’écran d’ajout d’une nouvelle mission que nous avons créée plus tôt.

Dans la fenêtre d’édition, cliquez sur le bouton « Add Data Item », et sélectionnez ensuite « Local Property » (on laissera le type par défaut), saisissez un nom et validez. On ne choisit pas l’option « Is Required » parce que la propriété doit pouvoir contenir une valeur à null.

En effet, il nous faut une propriété pour passer l’identifiant de la mission lors d’une édition.

Après l’avoir sélectionnée, cochez l’option « Is Parameter » dans la fenêtre des propriétés :

Dans le code de l’écran, on va ajouter le traitement pour savoir le rôle (ajout ou édition) selon le paramètre « MissionId » dans la méthode d’initialisation des données de l’écran :

Basculons dans notre écran d’accueil de mission en cours. Dans la fenêtre d’édition de l’écran, double-cliquez sur les boutons « Add » et « Edit » :

Ce qui aura pour effet de générer les méthodes ci-dessous dans le code de l’écran :

Pour le bouton « Add » de l’écran d’ajout sera appelé avec la valeur null en paramètre. Et pour le bouton « Edit », on passera la valeur de l’identifiant de la mission sélectionnée dans le tableau.

A l’exécution, ici la première ligne est sélectionnée :

Si l’on clique sur le bouton d’ajout :

Si l’on clique sur le bouton d’édition :

 

Conclusion

Comme vous avez pu le constater, MS LightSwitch permet de mettre en place rapidement des applications orientées données. Nous avons ici abordé l’aspect application de bureau, mais LightSwitch met également à notre disposition des outils techniques pour générer des applications web. Dans un prochain article, nous verrons ensemble MS LightSwitch et le monde du web.