[Techdays 2013] Session “Introduction au développement Windows 8 avec XAML et .NET 4.5”

download

Le 12 février dernier Eric Vernié et Benjamin Baldacci ont animé cette session sur le développement pour Windows 8. Cette introduction, portant sur le framework 4.5 et sur XAML, fait un tour d’horizon sur ce qui est attendu de ces applications et des outils mis à notre disposition.

L’expérience Windows 8

Lorsqu’on parle du nouveau système d’exploitation de Microsoft, on en vient rapidement à l’aspect esthétique et au concept de Fast & Fluid. En effet, tout est fait pour que les applications soient rapides, notamment avec la contrainte d’un temps de démarrage inférieur à 5 secondes pour pouvoir être dans le Store, et fluides de par les animations et les nouveaux modes d’interaction.

Eric Vernié et Benjamin Baldacci insistent sur le fait qu’on recherchera avant tout une expérience immersive et en plein écran, utilisable aussi bien au clavier et à la souris qu’en tactile. Enfin, l’utilisation du Cloud, sans être un pré-requis, est quasiment inévitable.

La plateforme Windows 8

Aujourd’hui Windows est plus qu’un simple système d’exploitation, c’est un écosystème composé par :

VS2012Logo

  • Base Windows Core Services
  • Desktop Apps
  • Windows Store Apps (XAML/HTML et  WinRT API)

Pour développer ces applications, on dispose d’outils maintenant bien connus :

  • Visual Studio 2012  (Express, Pro et Ultimate)
  • Blend pour Visual Studio

Le développement pour Windows 8

Avec une démonstration, Eric et Benjamin sont repassés sur différents aspects du développement pour Windows 8.

Il existe trois templates de base pour les projets Windows 8 :

  • Vide : Projet vide
  • Grid App : Projet destiné à montrer les informations sous forme de grille
  • Split App : Projet destiné à montrer les informations sous forme de Master/Details

Le fichier Manifest est un fichier de configuration où l’on pourra :

  • Définir le nom, la description, la langue, l’orientations de base
  • Définir les logos qui sont obligatoires (store, raccourcis, etc…) sous peine de ne pas pouvoir être dans le Store
  • Définir le SplashScreen et la couleur de fond

Benjamin a fait une démonstration d’une application de Quizz musical qui utilise un contrôle ExtendedSplashScreen qui permet de récupérer le splashscreen pour le remplacer par autre chose (ici une animation) qui indique à l’utilisateur que le chargement est en cours.

Les contrôles

Nous avons eu droit à une démonstration du SemanticZoom. Ce contrôle permet de naviguer rapidement dans une liste possédant de nombreux items en les regroupant selon certains critères. Voici un exemple de SemanticZoom en XAML :

<SemanticZoom>
  <SemanticZoom.ZommedInView>
    <GridView />
  </SemanticZoom.ZoomedInView>
  <SemanticZoom.ZoomedOutView>
    <ListView />
  </SemanticZoom.ZommedOutView>
</SemanticZoom>

Petite astuce : on évitera les deux types de scroll dans une même page. En mode paysage, on privilégiera le scrolling horizontal.

Transitions et Animations

WinRT est développé à 95% en asynchrone pour assurer le Fast. Le Fluid est quant à lui assuré par les transitions et animations, qu’on gardera relativement discrètes pour offrir un effet de transition assez léger donnant cette sensation subtile de l’application.

Tous les contrôles ont un comportement d’affichage par défaut, qui est modifiable via les propriétés Transitions. Par exemple dans le cas d’une GridView, on modifiera la propriété GridView.Transitions.
Eric a insisté sur le fait qu’il est préférable que les transitions soient courtes et rapides.

Actions et Navigation

En contraste avec les applications “classiques”, nous allons désormais éviter de polluer l’écran avec des actions, des boutons, des commandes, etc… L’objectif est de favoriser l’immersion de l’utilisateur dans l’interface graphique. Pour cela on va utiliser des barres de commandes qui apparaîtront sur demande de l’utilisateur, via des clics droit ou en se positionnant dans certains endroits de l’écran.

On aura également une barre de navigation afin de se déplacer dans les différentes sections de l’application. Cette barre ne doit pas nécessairement être visible continuellement et peut, comme les barres de commandes, apparaître et disparaître.

Paramètres

L’un des principes fondamentaux du développement pour Windows 8 est la connexion au Cloud. Il faut savoir que lorsqu’on va se connecter avec une machine Windows, on va également se connecter avec un compte Windows et on pourra sauvegarder un certain nombre de paramètres qui nous serviront à les maintenir entre devices.

Ces paramètres peuvent être sauvés en Roaming (accessible à l’ensemble des devices) ou en LocalFolder (accessible seulement sur la machine). Le Roaming a une taille maximum de 300 Ko. Sauver ces paramètres évitera les phases de configuration des applications.

Bien que n’étant pas une nécessité, on utilisera la barre de navigation sur la droite pour accéder aux paramètres de l’application. Sachez qu’il existe des paramètres obligatoires, dont celui de confidentialité de l’application, sous peine de ne pas être éligible pour le Store.

Les paramètres sont créés via des SettingCommand qui appellent les contrôles popup, de simples pages de l’application.

Les contrats

Eric est revenu sur la définition des contrats dans les applications Windows 8. Ce sont des accords entre l’application et le système d’exploitation. Il en existe plusieurs types :

Le contrat de partage

Cela concerne tous les types de partages, que ce soit de données (data, html, texte, images…) ou social (Facebook, Twitter…). On utilisera l’objet DataRequest pour interpréter l’information.

Le contrat de recherche

C’est ce qui permet la recherche au sein de l’application d’un certain nombre d’informations. Pour la mettre en place on utilisera les évènements de recherche :

  • QuerySubmitted
  • QueryChanged

Orientation

Il est très important de penser le design pour les différents types d’orientation,  portrait ou paysage. Selon l’orientation, les interactions pourront, ou parfois devront, être différentes.

Au niveau du XAML, le VisualStateManager va gérer les états visuels, et donc les orientations. On pourra avoir des parties du XAML dédiées selon l’orientation, comme l’a montré Benjamin.

Globalisation

On peut être amené à avoir une application multilingue, ce qui est relativement simple à mettre en place. Pour cela, il suffit d’avoir un dossier Strings et un dossier par langue (en, fr, etc…) où se trouveront des fichiers ressources avec les libellés.

Par exemple on aura deux libéllés LABEL_SAVE.Header, LABEL_SAVE.Content, qui partagent le même nom mais ont une propriété associée. En mettant l’attribut x:Uid=”LABEL_SAVE” à un contrôle, on peut ainsi lui assigner le style et définir différentes propriétés.

Windows App Certification Kit

Windows-StoreCet outil va charger plusieurs fois l’application pour tester un certain nombre de critères tels que :

  • Le chargement se passe bien
  • Le chargement est inférieur à 5 secondes
  • La colorimétrie

Après ces tests, l’outil générera un rapport qui devra être soumis au Store. Dans le cas d’un résultat “Rejected”, il indiquera pourquoi afin de faciliter d’éventuelles modifications.

Conclusion

Directement dans le thème de Windows 8 et des Techdays, cette session a profité de démonstrations simples et efficaces pour montrer la facilité avec laquelle on peut mettre en place les fonctions de partage, de recherche ou encore une navigation réellement immersive en quelques lignes de code. Un grand merci à Eric et Benjamin.

Pour aller plus loin :

Nombre de vue : 19

COMMENTAIRES 1 commentaire

  1. […] David est donc revenu sur les composants de Windows 8 qui laissent le choix de plusieurs langages pour l’implémentation d’applications. Cette session s’intéressait à la brique de langages “Web”. Microsoft n’a pas non plus oublié ses développeurs historiques : en parallèle se déroulait une autre session pure “dotnet” que je vous encourage à lire : http://blog-rec.soat.fr/2013/02/techdays-2013-session-introduction-au-developpement-windows-8-avec-xaml-… […]

AJOUTER UN COMMENTAIRE