byannick

Débuter en visual studio lightswitch

Une fois visual studio lightswitch téléchargé et installer, nous serons pas surpris de voir l’interface qui nous est proposé dans les autres éditeur visual studio édition 2010:

Comme nous pouvons le constater, l’éditeur est actuellement qu’en anglais, mais ceci ne nous empêcheras pas de démarrer un nouveau projet :-).
Cliquons donc sur « new project ». La fenêtre pour démarrer un nouveau projet ressemble, bien entendu, aux autres versions des éditeurs. Choisissez votre language .NET favoris entre VB.NET et c#.NET. Pour ma part, C#, mais ceci, n’a que peu d’importance, et ce, pour un sacré moment ;-).

Donnez un nom à l’application puis valider comme le montre l’image suivante:

.

Un petit tour dans l’éditeur:

Commençons par expliquer un peu ce qui s’y passe:

Dans la zone principal de l’éditeur, nous avons 2 choix, le premier est de créer une table, le second d’en importé une d’un projet existant. Pour mieux comprendre, nous y reviendrons, car c’est le sujet principal
Dans l’explorateur de solutions, nous y voyons sans surprise une zone des propriétés, et 2 dossiers: Data Source et Screens.
Le premier, Data Source, est le dossier qui stockera nos bases de données, le second Screens, l’affichage de ces données.

Soit, créons en une nouvelle, pour ce faire, 2 possibilités « visible » s’offre à vous. La première, vous cliquez sur « Create new table » dans la zone principale, la seconde, un clic droit puis sélectionnez « add table » sur le dossier Data Source. Lorsque c’est fais, vous devriez voir l’écran suivant s’afficher:

Dans la zone de titre, là ou il y a écrit « Table1Item » mettez-y un titre, exemple: « Employe » (pour ne pas être original sur la doc officiel ;-))
Et enfin, dans la grille de donnée, rajoutons « Nom », « prénom », ayant un type « String » et étant obligatoire (required coché) :

Bien, enregistrons le projet (Ctrl+s), puis portons notre attention sur une chose apparu en même temps que notre éditeur de base de donnée, sa toolbar:

Actuellement, seul le bouton « Screen » nous intéresse. Sa fonctionnalité est aussi accessible via la table « employe » dans l’explorateur de solution, par un clic-droit, ou sur un clic-droit sur le dossier screen, lui aussi dans l’explorateur de solution.

Lorsque nous créons dessus, une fenêtre s’ouvre nous proposons différent mode d’affichage selon nos désires: nouvelle donnée, rechercher une donnée, détail de donnée, grille éditable des données, et une liste ayant un détail de nos données. Actuellement, sélectionnez, la nouvelle liste de donnée, ou « new Data Screen », à droite, ne toucher pas au nom dans la texteBox pour changer le nom, sélectionner, simplement, juste en dessous d’elle, la source de donnée pour l’affichage, soit, la seule table que nous ayons: employe

.

A ce stade, en validant, nous allons créer notre premier screen. La zone principale de visual studio lighswitch change alors en:

N’hésitez pas à visiter l’architecture qui s’y présente, et y mettre des mots français, en sélectionnant par exemple, dans l’architecture: « two rows> Screen Command Bar > Shell Button – Save », dans sa propriété « Display Name », « sauvegarder » par exemple. Par ailleurs, si vous cliquez sur « two rows | CreateNewEmploye », vous pouvez éditer son nom d’affichage (displayName) en « Créer un nouvel employé ».

Il est venu l’heure d’exécuter votre première application visual studio lighswitch. Comme pour les autres éditeur, la flèche verte dans la toolbar, « Debug > Start Debugging » dans la liste déroulante des menus, ou, leurs raccourcis: F5.

Comme vous pouvez le constater, par défault (voir mon premier poste, « informations générales sur visual studio lighswitch »), l’éditeur vous lance un logiciel:

.

N’hésitez pas à déjà y inscrire des données

Vous serez peut être surpris, lorsque vous ferez un click-droit sur votre application, de voir que tourne derrière silverlight ;-).

Bon, pour l’heure, nous sommes à l’air moderne ou les applications logiciel vont peut être être remplacer par les applications web, nous allons suivre le mouvement.

Arréter le débuging (majuscule-F5 dans l’éditeur), faites un clic-droit sur votre projet dans l’explorateur de solution, sélectionner propriété, tout en bas. Dans les propriétés, aller dans l’onglet « Application Type » et sélectionnez le second ou troisième et dernier choix, qui propose de faire tourner l’application dans une page web:

.

Sauvegarder (CTrl+s) et relancé le débug (F5), l’application devrait se lancer dans votre navigateur par défault, et, en silverlight ! ->

Bien, maintenant, arrêtons le débug et intéressons nous à 2 nouveautés, ou presque !

Dans un premier temps, créons une nouvelle table que l’on va nommé « fonctions » et qui contient un unique champs de type string nommé « fonction »:

.

Chose faites, retournons dans notre db « Employe » et ajoutons-y une propriété « Image » (qui, celà dit, n’a rien à avoir avec la table fonction que nous venons de créer), le type de l’image est « Image » et elle n’est pas obligatoire.

Bien, maintenant, dans la toolbar présenté un peu plus haut, cliquons sur le premier bouton: « RelationShip », remplissez les donnes comme suit:

Vous remarquez ici, qu’avoir une petite connaissance dans la manipulation des bases de données est un plus, mais pas obligatoire grâce aux petites indications, actuellement en anglaise, dans la fenêtre de mise en relation des tables.

Votre table « Employe » doit désormais ressembler à ceci:

pour conclure cette introduction, nous allons créer les vues manquantes, faite un clic-droit sur « Screen » sélectionner « add Screen », Prenez le choix « New Data Screen », pour les fonctions (laissez le tout par défault),

Répéter l’opération, cette fois, avec une grille éditable (« Editable Grid Screen »), toujours pour les fonctions, et enfin une dernière, cette fois-ci, une liste de détail, à votre guise, sélectionnez « Search Screen », ou « List and details Screen », vous pouvez très bien créer les 2 vues pour voir à quoi celà va ressembler. Pour ma part, je vais prendre la première, « Search Screen » à laquelle nous allons attribuer la table « Employe ». Dans cette dernière, nous devons changer un petit détail, en rapport avec l’image. En effet, par défault c’est une édition d’image, nous allons y mettre un affichage de l’image:

Comme nous pouvons le voir, si nous exécutons notre application, nous pouvons désormais créer des fonctions, créer des employés. Mais, petit soucis, nous ne pouvons pas joindre de fonctions préalablement créés à nos employés.

La raison est que notre Screen de création d’employé vu créé avant la création de fonction, il est donc logique qu’il ne connaisse pas cette possibilité. Pas de panique, nous allons simplement l’ajouter, double cliquez sur « createNewEmploye », dans l’explorateur de solution, sélectionnez dans la zone principale « (Top Row) Vertical Stack | EmployeProperty ». Le bouton d’ajout d’objet apparaît. Cliquez sur ce dernier et ajouter « Image » et « Fonction ».

Editer votre « Search Screen », dans la section « datagrid Row | Employe », juste en dessous de « Command Bar », vous avez un type « summary ». Sélectionnez-le, puis modifier le en « Picture and text », afin qu’il ressemble à ceci:

Vous l’aurez peut être remarquez, en exécutant votre programme et créant un personnage, qu’actuellement, l’ajout de fonction à l’employé est fort peu utile. modifions donc le screen d’ajout d’employé, pour que la section soit plus pratique a utilisé, par exemple, en utilisant une liste déroulante. Puis réexécutons notre programme.

L’application se termine donc sur la note finale de:

Conclusion:

Le développement d’application devient simple et rapide, sans avoir rien écris en terme de ligne de code, nous voyons là que nous pouvons déjà y développé des applications métier relativement complexe.

L’éditeur visual studio lighswitch est simple et intuitif

Remarquons quand même qu’il est mieux, bien que pas obligatoire d’avoir quelques connaissances en terme de base de donnée, conception et gestion, ainsi que les types de bases de donnée de l’informatique (string, int, bool, etc.).
Nous pouvons aussi y reprocher la lenteur du chargement de l’application aux début, ainsi que le non-rafraichissement automatique lorsque nous basculons dans l’affichage de nos données. (bien que ceci soit possible, car nous pouvons écrire du code, ceci sera l’objet d’un futur tutoriel)

D’une manière générale: Vive lightswitch pour les gros geek et simple utilisateur !