Gérer le layout d’une WinJS.UI.ListView de facon déclarative

Gérer les états visuels dans les applications Windows 8 en html / javascript est vraiment intuitif grâce aux media-queries. D’applications en applications il reste cependant un aspect pénible lorsqu’on attaque la gestion du snap et les changements d’orientation : la ListView.
Avec Windows 8.1 ce contrôle permet maintenant (enfin) de faire des grilles horizontales ou verticales, ou de gérer l’affichage en listes.
Bien souvent on passe d’un mode de layout à l’autre selon l’orientation et/ou la résolution, et c’est une des rares chose qu’on est amené à faire en code plutôt qu’avec les media-queries. Avec Windows 8.1 et son mode snap vitaminé, on doit parfois contrôler la résolution et plus seulement les états visuels, donc encore plus de code à faire (et pas du genre passionnant).

Il serait tellement plus agréable de pouvoir déclarer des media-queries et leur associer le layout de la ListView…

Mais attendez… pourquoi on ne pourrait pas faire ca ? les media-queries peuvent être manipulées très facilement en javascript :

var mq = window.matchMedia("(orientation : portrait) and (max-width: 400px)");
if (mq.matches){
    //la media-querie est ok
}

Pas mal n’est ce pas ? il y a encore mieux, on peut déclarer une media-querie et souscrire à un abonnement qui va se déclencher lorsque celle-ci sera évaluée !

var mq = window.matchMedia("(orientation : portrait) and (max-width: 400px)");
mq.addListener(function(mq){
    if (mq.matches){
        //la media-querie est ok
    }
});

Vous voyez où je veux en venir ? il suffit de wrapper ça dans un joli contrôle WinJS et de le faire pointer sur la liste. Quelques lignes de code plus tard, on a quelque chose comme ca dans la page html :

<div id="mylistview" data-win-control="WinJS.UI.ListView" data-win-options="{
    itemTemplate: select('#listitemtemplate'),
    itemDataSource: DummyDataSource
}"></div>

<div id="listlayout" data-win-control="MCNEXT.UI.SmartListLayout" data-win-options="{
    listView: select('#mylistview'),
    layouts:{
        default : { query: '(orientation: landscape)'}, layout : WinJS.UI.GridLayout
        vert : { query: '(orientation: portrait) and (min-width: 350px)', layout : WinJS.UI.GridLayout, options: { orientation : 'vertical'}},
        snap : { query: '(orientation: portrait) and (max-width: 350px)', layout : WinJS.UI.ListLayout },
    }
}"></div>

Pour le voir de vos propres yeux, vous pouvez télécharger une appli de démo ici (pour Windows 8.1).
Pensez à renommer le fichier en .zip (WordPress ne permet pas de hoster des zip, allez savoir pourquoi…).

Si vous êtes un grand cynique, vous me direz : « Quel intérêt de mettre le code dans le html plutôt que dans le js ? ». Au dela de la « beauté » de la chose, imaginez la quantité de code javascript pour gérer proprement le cas simple ci-dessus… par ailleurs, cette approche vous permet de rester synchro entre votre code et votre css, en reposant sur les mêmes media-queries. A l’échelle d’une application, croyez moi ça change la vie.

Notez que contrairement à ce qui se passe en CSS, vous n’avez pas d’état par défaut. Il faut donc définir soigneusement ses queries pour que les évènements se déclenchent comme prévu, sans laisser de trou.

Un exemple concret sera plus parlant. Admettons qu’on déclare les queries de la facon suivante :

<div id="listlayout" data-win-control="MCNEXT.UI.SmartListLayout" data-win-options="{
    listView: select('#mylistview'),
    layouts:{
        default : { query: '(orientation: landscape)'}, layout : WinJS.UI.GridLayout
        vert : { query: '(orientation: portrait)', layout : WinJS.UI.GridLayout, options: { orientation : 'vertical'}},
        snap : { query: '(orientation: portrait) and (max-width: 350px)', layout : WinJS.UI.ListLayout },
    }
}"></div>

on a enlevé le « min-width » de la 2e querie. En css cela n’aurait pas d’impact, mais ici la 2e query ne sera pas déclenchée systématiquement lorsque vous redimensionnez l’application snappée
(faites le test…). Prenez soin que vos plages se chevauchent correctement lorsque vous prenez une approche « responsive ».

Notre contrôle utilise des évènements sur les media queries. Pour éviter les problèmes désagréables comme les zombies (des éléments du DOM morts mais tenus vivants par ces évènements), et les fuites mémoire, il est préférable de libérer ces évènements lorsqu’on quitte la page.
Sous Windows 8.1, la destruction est gérée automatiquement car WinJS introduit un modèle de libération de mémoire. Les éléments à libérer sont marqués de la classe « win-disposable ». Lors du « unload » de la page, les éléments marqués vont être libérés automatiquement (enfin le code est dans Navigator.js…) en appelant la méthode dispose du contrôle.
Le contrôle est parfaitement utilisable sous Windows 8, la seule petite subtilité est qu’il vous faudra appeler manuellement la méthode « dispose » dans l’évènement unload de votre page.

Happy ListView

[Blend] Opérations sur les Path

Dans un précédent article je vous avais présenté comment convertir un objet en Path. Dans cet article nous allons voir comment combiner plusieurs objets en un seul Path.

Nous partirons d’une page contenant un canvas et 3 rectangles.

Etat initial

Etat initial

Dans l’onglet « Objects and Timeline » nous allons sélectionner chacun des rectangles en utilisant la combinaison Ctrl + Clic gauche. On commence par le vert, puis le rouge et enfin le bleu. L’ordre de sélectionner a en effet un impact sur le résultat de l’opération suivante.

Sélection des rectangles

Sélection des rectangles

Lorsque chacun des rectangles a été sélectionné on va les fusionner. Pour cela il faut naviguer dans le menu « Object » et dans le sous-menu « Combine » on sélectionne « Unite ».

Sélection de l'opération d'union

Sélection de l’opération d’union

Le résultat est un Path qui représente l’union des trois rectangles. On remarque que la couleur et le nom de l’élément choisis par Blend correspond au dernier rectangle sélectionné. Ici c’est donc le bleu qui l’emporte.

Résultat de l'union

Résultat de l’union

Vous avez sans doute remarqué d’autres opérations disponibles dans le menu Combine. Voici donc un description de chaque opération. Le résultat, en sélectionnant toujours le rectangle rouge en dernier, est quant à lui visible dans le diaporama en dessous.

Substract

La soustraction va retirer du dernier rectangle sélectionné l’union des deux autres.

Intersect

L’intersection va conserver la forme correspondant à la zone où tous les rectangles se superposent.

Divide

La division va découper la forme résultant de l’union des rectangles avec les bords de chaque rectangle laissant ainsi l’aspect général intact mais fournissant plus de bords.

Exclude Overlap

Cette opération va conserver à l’écran toutes les zones qui ne se superposent pas dans sélection.

Pour mieux comprendre le résultat vous pouvez d’abord effectuer l’opération sur bleu et vert, puis sur la forme résultant et rouge.

Manipulation des Path

Certaines opérations sur les Path sont disponibles dans le menu « Object » et le sous-menu « Path ». Une opération intéressante est « Release Compound Path ». Cette opération va générer autant de Path que possible en suivant les divisions d’une forme.

Diaporama des résultats


Conclusion

Blend dispose de capacités de manipulations d’objets très puissantes et qui sont malheureusement assez peu connues.
Maintenant c’est à vous de tester tout cela et de créer des interfaces toujours plus riches.

Liens utiles :

http://msdn.microsoft.com/en-us/library/vstudio/jj171064.aspx

Windows Embedded 8 « Application launcher »

Windows Embedded 8 intègre une nouvelle fonctionnalité appelée “Windows 8 Application Launcher”. Elle permet de verrouiller un poste sur une seule application Modern UI et peut donc s’avérer intéressante pour la mise en place de bornes (services, commerces) ou d’autres systèmes interactifs. Concrètement, l’application est lancée automatiquement à l’ouverture de session et, après quelques réglages, il n’est pas possible pour l’utilisateur d’en sortir.

L’application launcher doit être activé à l’avance via ICE que nous présentions précédemment. Après l’avoir ajouté depuis la catégorie Branding, quatre paramètres sont configurables.

ICE AppLauncher

  • AppUserModelId : Ce code identifie l’application à lancer. Il est récupérable en installant l’application en question sur un poste puis en cherchant « AppUserModelId » dans sa base de registre. Il suffit ensuite de copier la valeur correspondante au bon package.

Registry AppLauncher

  • DefaultReturnCodeAction : Cet entier indique quelle action doit être entreprise par le système si l’utilisateur ferme l’application
    • 0 : Redémarre l’application
    • 1 : Redémarre le système
    • 2 : Arrête le système
    • 3 : Ferme l’application launcher et retourne sur le Start Screen
    • 4 : Ferme la session
  • CustomReturnCodeAction : Permet de choisir une action différente à entreprendre suivant le code de retour de l’application (en cas d’erreur etc.).
  • UserSettings : Permet de spécifier les trois paramètres précédent pour un utilisateur donné.

L’application launcher seul ne suffit pas à réaliser une borne sécurisée. Il n’empêche pas l’utilisateur de retourner sur le Start Screen et d’utiliser le système d’exploitation comme bon lui semble. Il est donc intéressant de le coupler avec d’autres fonctionnalités de Windows Embedded 8.

  • Le Gesture Filter permet de verrouiller les « bords » de l’écran, autrement dit les barres de Charms et la fermeture d’une application par le haut. Son paramètre DisabledEdges est un entier qui doit être composé suivant les gestures que l’on souhaite désactiver. Un coup d’oeil à l’aide permet de déterminer qu’il faut entrer 247 pour verrouiller tout sauf la barre du bas (qui peut être utile à l’application).

GestureFilter

  • Le Keyboard Filter permet quant-à lui de désactiver certaines touches ou combinaisons de touches qui permettraient autrement à l’utilisateur de sortir de l’application.

Une fois le système installé, il faut tout d’abord créer un nouvel utilisateur. L’Application Launcher sera en effet désactivé sur le premier compte administrateur. Il suffit ensuite d’installer l’application (voir l’article traitant du sideloading) et de rouvrir la session pour se retrouver en mode borne.

En couplant les trois fonctionnalités sus-nommées, et en y ajoutant eventuellement des GPO (stratégies de groupe), il est donc possible de réaliser une borne verrouillée sur une application Modern UI. L’Application Launcher lance l’application à l’ouverture de la session Windows, tandis que les deux autres sécurisent la machine.

Une vidéo de démonstration de l’Application Launcher est disponible sur MCNEXT TV.

MCNEXT intègre le Microsoft Apps Circle

Hier a eu lieu le lancement du Microsoft Apps Circle : http://www.microsoft.com/france/partenaires/appscircle.

MCNEXT a été sélectionné par Microsoft France pour faire partie de ce cercle restreint de partenaires reconnus pour leurs compétences sur :

  • La réalisation d’applications Windows 8
  • La réalisation d’applications Windows Phone
  • Et également sur l’ergonomie et le design des applications « Modern UI »

Les logos de compétences Apps Circle

 

Vous souhaitez vous lancer sur la plateforme Windows 8, venez concrétiser vos idées avec MCNEXT !

L’application Windows 8 Meltour par MCNEXT

Après son site internet http://www.meltour.com, MCNEXT a réalisé une application Windows 8 pour consulter le catalogue de propositions de voyage : par thématique, par destination, en choisissant sur une carte…

Nous nous étions fixés 2 objectifs principaux :

  • Utiliser notre StarterKit Ecommerce « MCNStore », sur lequel le site Meltour est basé, comme back-office pour une application Windows 8
  • Proposer un design original tout en respectant les guidelines d’ergonomie Windows 8

L'application Windows 8 Meltour par MCNEXT

Le résultat est déjà disponible dans le Windows Store : http://apps.microsoft.com/webpdp/fr-FR/app/meltour/75fb7727-4eec-4ec5-960d-83022089d66c !

Publier une application Metro dans le Windows Store

Dans cette série sur la réalisation de l’application Metro « Parle moi de… » en HTML et Javascript, nous avons vu :

Le meilleur moyen de déployer votre application Metro reste le magasin d’applications Windows ou Windows Store. Dans ce webcast, nous allons aborder les différentes étapes de la publication d’une application, comme la création d’un compte dans le store, la validation de votre application avec les outils du SDK, et le processus de certification.