Comment lier une application Windows 8.1 à une application Windows Phone 8.1 (Universal app)

Les applications Universelles ou Universal Apps offrent la possibilité aux développeurs de créer une application qui cible différentes plateformes, du Windows Phone 8.1 au Windows 8.1 en passant par Windows RT.

En réalité lors de la création d’un projet Universal App, Visual Studio va créer deux projets (l’app Windows 8.1 + l’app Windows Phone 8.1) et un espace de partage.

On peut intégrer dans cet espace de partage tous les fichiers susceptibles d’être communs : les vues, le code business… Dans beaucoup d’applications, l’ergonomie va être spécifique pour chaque plateforme et le partage du code d’IHM risque donc d’être très compliqué, voir impossible.

Il est maintenant possible avec Windows Phone 8.1 de développer des applications en HTML5/JS, mais il faut obligatoirement passer par le modèle Universal App.

Et voici les étapes pour lier une application W8.1 à une app WP8.1 :

Étape 1 : Le store

  1. Se connecter au backoffice du store Windows Phone : http://dev.windowsphone.com avec le même compte que celui utilisé pour le backoffice du store Windows http://dev.windows.com.
  2. Aller sur le Dashboard.
  3. Cliquer sur le bouton Submit App.
  4. Cliquer sur le chiffre 1 pour renseigner les informations de l’application.
  5. Il suffit maintenant de choisir le nom de l’application dans la liste (NB: il ne faut pas le renseigner manuellement) et de cliquer sur le bouton « Associate app ».store1store2
  6. Choisir une catégorie et enregistrer les modifications.

 

 

Étape 2 : Visual Studio

Pour transformer une application Windows 8 .1 en Universal App, il suffit de faire un clic droit sur le projet et choisir « Add Windows Phone 8.1 »

vs1

Deux nouveaux projets sont alors créés : l’application Windows Phone et le projet Shared.

vs2

Clic droit sur le nouveau projet Windows Phone, aller dans « Store » et cliquer sur « Associate App with the Store ».

vs3

 

Une fenêtre s’affiche, il faut se connecter avec le compte du store pour obtenir la liste des applications créées dans le dashboard.

vs4

On sélectionne la bonne application et on valide.

Il ne reste plus qu’à faire les développements et soumettre l’application pour la certification 🙂 !

 

Windows 8.1 Assigned Access ou comment passer en mode borne

Comme nous avons pu le voir dans de précédents articles, la mise en place d’une application Modern-UI en mode borne reste relativement complexe. Elle nécessite l’utilisation de Windows 8 Embedded qui est particulièrement obscure pour les non-habitués des systèmes embarqués.

Windows 8.1, grosse mise à jour du système d’exploitation, va être lancée mi-octobre. Elle inclura une nouvelle fonctionnalité, Assigned Access, véritable mode borne puisque permettant de verrouiller un utilisateur sur une seule application.

Mise en place

L’activation de l’Assigned Access est très simple et réalisable par le seul biais du panneau de configuration en mode Modern-UI.

Etape 1 : création de l’utilisateur

Connecté en tant qu’administrateur local, il convient tout d’abord de créer l’utilisateur qui sera destiné au mode borne.

Assigned Access - Create user

Etape 2 : ouverture de session sur le nouvel utilisateur

Il est ensuite nécessaire d’ouvrir au moins une fois la session de l’utilisateur créé. A cette occasion il est possible d’installer l’application par les moyens habituels (via le Store ou un package).

Etape 3 : activation de l’Assigned Access

De retour sur l’administrateur local, il suffit de se rendre dans la section Assigned Access de la gestion des utilisateurs, puis de sélectionner l’utilisateur et l’application.

Assigned Access - Accounts

Assigned Access

Fonctionnement

L’application est directement lancée lors de l’ouverture de session de l’utilisateur « sécurisé ». Il est impossible d’en sortir, de la réduire, et d’accéder à quoi que ce soit d’autre du système (Start Menu, Bureau, barres de charms, …).

L’application reste en revanche tout à fait utilisable, y compris ses barres supérieure et inférieure.

Le fait que les charms soient inaccessibles est nécessaire pour le verrouillage mais peut contraindre à modifier légèrement l’application (par exemple en y intégrant le champ de recherche, puisque le charm de recherche ne sera pas disponible).

Le seul moyen de sortir de la session et retourner sur le choix de l’utilisateur est d’appuyer cinq fois de suite sur la touche Windows.

Assigned Access - Result

Informations complémentaires

  • Assigned Access sera disponible sur toutes les versions de Windows 8.1 (RT, Pro, Enterprise)
  • La fonctionnalité est intégrée à 8.1 RTM mais pas aux autres versions anticipées
  • Pour une application hors Store, le sideloading est toujours nécessaire
  • En mode Assigned Access, la configuration réseau n’est pas accessible mais la connexion automatique a bien lieu

Assigned Access s’avère donc efficace et simple à mettre en place, pour bénéficier d’une application Modern-UI en mode borne.

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

[Blend] Convertir des objets en Path et les manipuler

Blend est un outil pleins de possibilités. Aujourd’hui je vais vous présenter une fonctionnalité assez méconnue et pourtant très pratique.

Pour ceux qui ne connaitrait pas, un Path est un objet XAML permettant décrivant un forme arbitraire. On peut s’en servir pour dessiner un rectangle, une croix ou même une théière, bref tout ce que l’on veux.  Ce Path peut servir de différentes manières. En WPF on peut s’en servir pour générer des Brush. On peut aussi s’en servir pour faire du clipping avec les PathGeometry. Dans WinRT 8.1 on peut les utiliser pour dessiner les formes des boutons des AppBarButton grâce aux PathIcon. Je vous renvoie à la MSDN pour plus d’informations sur les Path.

Mise en pratique

Supposons que comme moi le design n’est pas votre fort mais vous avez quand même cependant besoin d’un Path dans votre application.

Blend vous offre la possibilité d’en créer à partir de la plupart des objets XAML y compris des TextBlock.

Nous allons donc nous servir d’un TextBlock pour générer un joli Path en forme de X. Pour cela on va glisser un TextBlock sur la surface de travail et changer quelques-unes de ses propriétés pour le rendre plus jolie. Ici j’ai changé la police d’écriture, la taille de la police.

BlendConvertToPath1

Pour convertir ce TextBlock en Path il faut aller dans le menu Object, et sélectionner Convert To Path dans le sous-menu Path.

BlendConvertToPath2

Un Path est maintenant généré et remplace notre TextBlock dans le XAML.

En poussant le concept un peu plus loin on peut écrire un texte en Windings et le convertir en Path et avoir une jolie cloche comme dans l’image ci-dessous.

BlendConvertToPath3

Une fois que l’on dispose d’un Path on peut profiter d’une autre fonctionnalité de Blend, les combinaisons de formes.

Commençons par glisser un Rectangle sous notre Path.

BlendConvertToPath4

Dans la partie Object and Timeline sélectionner le Rectangle et le Path (en utilisant la combinaison Shift + Click) en commençant par le Path puisque l’ordre de sélection peut-avoir une influence sur le résultat des opérations.

BlendConvertToPath5

Dans le menu Object on va cette fois aller dans le sous-menu Combine et sélectionner une opération. Ici j’ai choisi Exclude Overlap qui va grosso-modo retirer la forme du Path dans le Rectangle.

BlendConvertToPath6

On se retrouve à présent avec un seul Path représentant le résultat de l’opération. Vous noterez la perte de certains styles comme la couleur.

BlendConvertToPath7

Et si on met justement un peu de couleur de fond et de couleur de bordure on remarque qui la forme de la cloche a bien été « creusée » dans le rectangle.

BlendConvertToPath8

Conclusion

Ces opérations sont très puissantes et les possibilités de création très importantes.

A vous maintenant d’essayer un peu tout cela en testant les diverses opérations pour créer des formes compliquées sans forcément pour cela avoir besoin de talents de graphistes.

How to Use Point-of-Sale Devices in Your App (3-029)

Session animée par Mike Hall

Cette session doit montrer comment utiliser des périphériques comme un lecteur de carte ou un scanner de code à barre dans une app Windows Store avec les nouvelles API 8.1.

On commence par une démo d’une app par InnerFence.

Il existe une norme Unified POS.

Il existe déjà une librairie POS.NET pour les apps Desktop.

Avec 8.1, on a maintenant une librairie POS.RT pour les apps Modern UI (sur tous les processeurs).

Cette librairie propose une abstraction de la partie hardware.

Elle peut aussi s’utiliser dans une app Desktop.

Elle supporte les devices connectés par USB HID.

On peut toujours utiliser les classes USB HID Keyboard qui vont remplir des champs texte, mais on aura beaucoup plus de contrôle avec POS.RT.

On nous explique ensuite comment démarrer une session d’utilisation d’un périphérique.

Notes :

  • Il faut ajouter des capacités dans les manifeste de l’app : print, pointofservice…
  • Il y a une notion de Claim pour pouvoir utiliser le device, notamment s’il y plusieurs apps POS snapped en même temps. On a une 1ère démo de ce point.

2ème démo : coder une app avec un lecteur de code à barre et un lecteur de carte magnétique

Une démo tout simple, mais complète ! Une fois sur la Surface, une fois sur la mini tablette Acer

Assigned Access : ça permet de bloquer un utilisateur sur une app, et donc notre app POS !

3ème démo : Royal Gate qui développe des solutions de POS au Japon (PayGate : lecteur bluetooth, imprimante bluetooth)

Session intéressante qui ouvre plein de nouveau scénario d’utilisation des devices Windows 8.1 !

Pierre-Yves Hemery

The Future of C++ (2-306)

Session animée par Herb Sutter

La session commence par l’annonce qu’une roadmap est prévue pour que VC++ devienne conforme a la norme ISO. Enfin Herb Sutter met entre guillemet le mot « conforme » 😉

On apprend ensuite que les fonctionnalités de C++ 14 ont été définies il y a à peine deux mois.
S’ensuit un rappel de l’historique de C++.

Herb Sutter annonce ensuite que Microsoft veux se conformer à la fois à C++ 11 et C++ 14.

Annonce qu’à chaque prochaine version de Visual Studio (RTM et CPT) on aura l’arrivée de nouvelles fonctionnalités de VC++.

Dans VC++ 2013 Preview on a :

  • Explicit conversion operators
  • Raw strings loterals
  • Function template default arguments
  • Delegating constructors
  • Unifor, initialization and initliazer_lists
  • Variadic templates
  • Compilation plus rapide
  • Support de la STL y compris vector<int>{1, 2, 3, 4}

Nouvelles fonctionnalités :

  • Initialisation des membres non statiques.
  • = default permet d’éviter d’écrire une fonction par défaut (exemple constructeur)
  • = delete permet de supprimer une définition d’une fonction (voir explication dans la vidéo pour mieux comprendre)
  • Aliases permet d’éviter les arguments d’un templates à l’utilisation
  • Ajout de quelques fonctionnalités de C99 afin de pouvoir utiliser des librairies C comme FFMPEG

Fonctionnalités en chantier

  • __func_ (par le même qu’en C), extended sizeof
  • Implicit move generation
  • Ref-qualifiers: & et && pour *this
  • Lambda return type deduction
  • Function return type deduction
  • Capture généralisée des lambda
  • Generic lambdas

On peut ensuite voir un tableau complet des fonctionnalités prévues dans C++ 14 et VC++ 14.

Et on a une emphase particulière sur l’implémentation de async/await dans C++ avec un exemple très amusant sur le code illisible qu’il faut écrire dans certains cas en C++ avec la manière actuelle de faire de faire de l’asynchrone (C++ promises).

Annonce de la prochaine conférence GoingNative à Redmond entre le 4 et le 6 septembre 2013.

Une session intéressante mais qui va nécessiter quelques approfondissements pour comprendre toutes les nouvelles fonctionnalités.

John Thiriet