Archives de la catégorie MVVM

JsConsole.Net– Console javascript déportée pour le déboggage

J’ai développé cette petite application Windows pour me permettre lors du débogage d’applications web, de visualiser la console JavaScript de manière déportée. Sur certains devices, comme la plupart des consoles de jeux, il n’est pas possible d’accéder à cette console de débogage.

L’application a été développée en C# et WPF  pour l’interface utilisateur et utilise le pattern MVVM indispensable au découpage fonctionnel du code.
Concernant les fonctionnalités un serveur web Owin permet l’auto hébergement des applications web au sein du répertoire « /Web » qui se trouve a la racine de l’application. Par contre, Owin nécessite une élévation de privilège pour ouvrir des sockets réseaux au niveau d’une IP externe, l’application lors de l’exécution vous demandera donc une autorisation plus élevée lors du lancement.
Il est possible aussi d’écrire des bouts de codes « snippet » en créant des fichiers avec l’extension js dans le répertoire « /snippet » ceux-ci pourront être directement inséré dans la console d’exécution des scripts.
Le but de cette application était aussi  pour moi, de mettre en pratique certains frameworks comme l’association entre AngularJs et SignalR.
Par la suite, j’ai inclus une fonctionnalité d’intelliSence lorsque l’on tape du code JavaScript, ce qui m’a semblé bien pratique pour un développeur. Pour cela, la bibliothèque la plus aboutie est AvalonEdit, malheureusement celle-ci n’est pas compatible avec MVVM. Il faut donc faire un peu de code dans la partie code behind, je n’aime pas trop, mais je pense que dans une prochaine version j’essayerai de la rendre compatible MVVM, soit en créant une classe qui hérite des classes d’avalonEdit ou un behavior ou encore avec une attached propertie.

Ce projet a été développé avec les librairies suivantes
–    AvalonEdit
–    MahApps
–    Owin
–    Mvvm Light Toolkit
–    AngularJS
–    SignalR
–    Bootstrap

Voiçi une vidéo, pour comprendre l’utilisation de l’application :

Le code est disponible ici : https://github.com/auriou/JsConsole.Net

, , ,

Poster un commentaire

Grouper vos fichiers dans visual studio 2012

Dans un projet WPF, Silverlight ou Window Store (WinRT), si l’on utilise le patron de conception MVVM (Model / Vue / VueModel) nous regrouperons les vues dans un répertoire, le plus souvent nommé Views, elles mêmes composées d’un fichier XAML et d’un fichier CS pour le code behind. Pour chacune de ces vues correspond une classe manipulant le model métier, ces fichiers sont placés dans un autre répertoire appelé ViewModels.

Dans un gros projet, cela devient vite compliqué de jongler dans l’explorateur de solution entre la Vue Xaml et le ViewModel.

Il existe une autre possibilitée pour organiser son code, qui est utilisé dans les exemples du framework PRISM. Ce framework permet d’implémenter le pattern MVVM (Command/Message), simplifie le développement d’applications composites, et prend en charge la navigation. Dans les exemples fournis, le choix a été de placer les vues et les vues-modèles dans des répertoires communs par thème fonctionnel.

Je trouve cette pratique plus intuitive, étant donné que Vue et vues-modèles sont complètement liées. Pour aller plus loin dans ce raisonnement, il serait intéressant de regrouper le vue-modèl sous la vue comme c’est déjà le cas pour le code-behind du fichier XAML.

Une extension de visual studio permet de faire cela très simplement, il s’agit de  VSCommand

  • Résultat des regroupements sous chacune des vues

resultat

  1. Installer l’extension VSCommand
    Extension
  2. Sélectionner les fichiers à regrouper > menu contextuel > choisir le menu Group Items

    MenuGroup
  3. Valider la fenêtre suivante
    WindowSelect
  4. Voila les fichiers groupés sous la vue
    ResultatJoin

Poster un commentaire

%d blogueurs aiment cette page :