Ce qui a changé pour les développeurs d'applications depuis la conférence //build/ (première partie)

Blog des développeurs d'applications Windows 8

Indications sur la conception d'applications de style Metro pour Windows 8, par l'équipe d'ingénierie de Windows 8

Ce qui a changé pour les développeurs d'applications depuis la conférence //build/ (première partie)

Rate This
  • Comments 0

La version Consumer Preview est maintenant disponible et nous espérons que vous avez déjà pu apprécier le travail réalisé. Notre équipe de développement a travaillé très dur depuis la conférence //build/. Nous avons pris en compte vos commentaires pour améliorer notre plateforme de développement. Parallèlement, nous avons finalisé de nombreuses fonctionnalités qui n'étaient pas disponibles jusqu'à présent.

En plus du travail directement lié à Windows, depuis la conférence //build/ nous avons également amélioré significativement nos outils Visual Studio. Diverses améliorations ont été apportées aux outils de développement d'applications de style Metro, mais aussi à d'autres scénarios de développement. Dans la suite ce ce billet, j'aborde surtout le développement des applications de style Metro, mais si vous souhaitez en savoir plus sur d'autres fonctionnalités de VS, commencez par consulter le blog de Jason Zander.

Nous savons que vous n'avez pas chômé non plus ! Ainsi, pas moins de 5 000 fils de discussion ont été ouverts sur les forums, notamment sur le forum Développement d’applications Metro, et près de 30 000 messages y ont été publiés. Nos données télémétriques révèlent également que vous avez utilisé Visual Studio pour tester notre plateforme de développement. Depuis septembre, vous avez créé des milliers de packages d'application.

C'est justement le sujet que je souhaite évoquer ici. Quelles sont les modifications que vous constaterez lorsque vous commencez à créer vos applications sur la version Consumer Preview ? Tout au long du développement de la version Consumer Preview, l'un de nos principaux objectifs était de faire de Windows une plateforme toujours plus performante pour vous, les développeurs. Nous avons simplifié l'utilisation des API et créé des contrôles standard pour l'interface utilisateur de style Metro. Nous avons amélioré les outils pour vous permettre d'accroître votre productivité et de créer des applications rapides et fluides. Nous avons en outre mis au point de toutes nouvelles fonctionnalités, qui vous permettent d'exploiter encore mieux le potentiel de Windows et la puissance du matériel.

Dans ce billet en deux parties, je vais vous présenter une partie des efforts mis en œuvre pour améliorer la plateforme et les outils, maintenant disponibles dans la version Consumer Preview. Nous avons ajouté un certain nombre de nouveautés et amélioré des fonctionnalités existantes, pour vous proposer une expérience optimisée dans le cadre du développement d'applications de style Metro. Nous sommes convaincus que vous apprécierez ces changements.

Prise en charge de DX en XAML

« Nous avons besoin d'effectuer des rendus très rapides à l'aide de DirectX et nous voulons utiliser l'interface utilisateur de style Metro : je n'ai vraiment pas envie d'écrire une interface complète dans DirectX. »
– Un développeur d'applications de style Metro

Ce sujet a été très commenté depuis la publication de la version Developer Preview. Les développeurs souhaitent associer les fonctionnalités de rendu immédiat à hautes performances de DirectX à la richesse de XAML sur le plan de l'interactivité, du modèle de contrôle et de la rapidité de conception.

Nous avons pris en compte vos remarques. Avec la version Consumer Preview, vous pouvez désormais intégrer XAML et DirectX 11 dans la même application de style Metro, afin de créer une expérience utilisateur rapide et fluide. Ainsi, vous pouvez par exemple créer un jeu DirectX et utiliser XAML pour traiter les opérations d'entrée, créer des graphismes pour les affichages en superposition et les menus, ou mettre en place une liaison avec le modèle de données de votre application.

À ce titre, nous avons ajouté trois nouveaux types XAML, afin de prendre en charge un large éventail de scénarios d'interopérabilité DirectX, chacun d'entre eux offrant des fonctionnalités différentes :

  • SurfaceImageSource permet de composer entièrement du contenu DirectX dans une application XAML. Le contenu DirectX peut ainsi être tracé directement dans l'arborescence d'éléments visuels XAML, ce qui s'avère très utile pour les effets visuels complexes et la visualisation des données, mais aussi dans d'autres scénarios de tracé en mode immédiat.
  • VirtualSurfaceImageSource estutilisé pour les contenus virtualisés à grande échelle. Il s'adresse aux applications nécessitant des mouvements de panoramique et de zoom sur des contenus volumineux (cartes, visionneuse de documents, etc.).
  • SwapChainBackgroundPanel couvre des scénarios plein écran axés autour de DirectX. Ce type XAML est idéal pour les jeux et les autres applications plein écran à faible latence possédant une superposition XAML.

Vous disposez là d'outils extrêmement puissants, qui vous permettent de profiter de tout le potentiel graphique de DX et de la simplicité du langage XAML. Si vous êtes aussi enthousiaste que nous à l'annonce de ces nouvelles fonctionnalités, consultez notre didacticiel consacré à DirectX et XAML sur MSDN.

Quelques exemples d'applications sont également proposés :

Blend et les concepteurs Visual Studio

XAML

Nous avons d'autres bonnes nouvelles à vous annoncer. La version bêta de Visual Studio intègre non seulement Blend pour HTML, mais aussi une version préliminaire de Blend pour XAML. Une seule instance de Blend peut désormais servir à la conception en HTML et en XAML : il vous suffit de sélectionner le type de projet souhaité. Blend pour XAML permet de créer des animations et des états visuels prêts à l'emploi pour vos applications de style Metro.

Vue plein écran du concepteur Blend pour XAML, montrant comment modifier les propriétés des boutons

Le nouveau concepteur Blend pour XAML, inclus dans les outils Visual Studio.

Dans Visual Studio, le concepteur XAML prend désormais en charge la modification des contrôles et des modèles de données, et offre une meilleure prise en charge des contrôles des applications de style Metro tels que SemanticZoom, GridView et AppBar.

Aperçu d'une disposition XAML dans Visual Studio.  La vue du concepteur constitue le principal volet d'affichage. Le code XAML correspondant est affiché dans le volet inférieur.

Vous pouvez exploiter le concepteur XAML directement dans Visual Studio.

HTML

Blend pour HTML profite de nombreuses améliorations en matière de création d'applications HTML.

Contrôle HTML ListView affiché dans le concepteur Blend pour HTML. L'interface utilisateur ListView figure dans le volet d'affichage principal. Les codes HTML et CSS utilisés pour créer le contrôle et définir son style sont affichés en dessous, dans des volets séparés.

Vous profitez des fonctionnalités étendues du concepteur Blend pour HTML.

Nous avons notamment étendu les fonctionnalités liées aux contrôles des applications de style Metro, qui permettent désormais la modification interactive des modèles de données ListView. Par ailleurs, vous pouvez désormais modifier des fragments HTML sans les déplacer, directement sur la page où vous les utilisez. Vous pouvez définir autant de niveaux d'imbrication que nécessaire. En outre, de nombreuses améliorations de productivité ont été apportées à l'inspecteur de propriétés CSS et au volet des attributs HTML. Les valeurs substituées par JavaScript sont notamment mises en évidence.

Après avoir téléchargé Visual Studio, lancez les concepteurs et découvrez par vous-même quelques-unes de ces améliorations.

Navigation dans la bibliothèque Windows pour JavaScript

La bibliothèque Windows pour JavaScript (WinJS) a également fait l'objet de nombreuses améliorations. Nous avons notamment simplifié le modèle de navigation. Les modèles VS présentés au cours de la conférence //build/ appelaient explicitement les API WinJS.UI.Fragments pour charger de façon dynamique de nouveaux fragments de code HTML dans le DOM, lors de l'exécution. Le dispositif de chargement des fragments est cependant une API de très bas niveau et il fallait par conséquent que les modèles contiennent également du code réutilisable complexe pour mener le scénario jusqu'à son terme.

Si vous avez essayé d'utiliser le code généré dans les modèles de la version Developer Preview, vous avez pu constater à quel point tout cela peut s'avérer complexe.

  • Le code était difficile à lire et à utiliser.
  • Vous étiez responsable du code qui lançait l'initialisation du fragment.
  • Vous étiez responsable de l'initialisation des contrôles WinJS sur la nouvelle page.
  • Il était très difficile de suivre l'état sur chaque page.

En réponse à vos commentaires, nous avons créé une nouvelle fonctionnalité qui devrait simplifier les choses : les contrôles de page.

Les contrôles de page sont construits par-dessus le dispositif de chargement des fragments et viennent ajouter les éléments de haut niveau nécessaires pour simplifier la navigation page par page :

  • Cycle de vie de création défini de façon précise
  • Périmètre de données défini de façon précise
  • Activation automatique des contrôles WinJS au moment opportun
  • Parentage automatique du contenu dans le DOM
  • API plus simple à lire et à utiliser

Dans ce cadre, les modèles de projet VS génèrent également un nouveau fichier, navigator.js, qui encapsule la navigation de haut niveau de votre application. Il est créé sous la forme d'un contrôle WinJSControl personnalisé, appelé PageControlNavigator. Le code de navigation dans ce fichier est bien plus simple que le code de navigation figurant dans les modèles de la version Developer Preview.

Pour plus d'informations sur le nouveau modèle de navigation, consultez les ressources suivantes :

Prise en charge des DRM

Jusqu'ici, le développement d'une application prenant en charge des contenus protégés par DRM pouvait être une mission délicate. En tant que développeur, vous deviez comprendre parfaitement les technologies DRM utilisées pour protéger vos contenus. En outre, votre application devait passer par un programme de certification très rigide pour vérifier qu'elle respectait les exigences requises pour la prise en charge des DRM.

Avec la publication de Silverlight, Microsoft a simplifié l'ensemble de ce processus. Avec Windows 8, ce modèle simplifié s'applique également aux applications de style Metro. Si vous disposez déjà d'un service de licences capable de fournir des licences PlayReady, vous pouvez ajouter la prise en charge du contenu protégé par DRM PlayReady dans votre application plus rapidement qu'auparavant et avec un temps de traitement réduit. Vous pouvez inclure cette prise en charge à l'aide des langages HTML ou XAML et C++, C# et JavaScript. La création d'expériences riches intégrant des contenus protégés sous Windows n'a jamais été aussi simple.

Pour vous aider, nous avons introduit une nouvelle surface d'API Metro PlayReady dans la version Consumer Preview. Vous pouvez utiliser ces API pour implémenter rapidement la prise en charge de la lecture des DRM PlayReady dans votre application. Pour poursuivre vos efforts de développement, vous pouvez ensuite vous concentrer sur la création de fonctionnalités toujours plus utiles et d'une expérience utilisateur que vos clients apprécieront. Pour les applications de style Metro, le SDK est gratuit et vous n'avez pas besoin d'envoyer votre application à PlayReady pour tester la conformité DRM. Ainsi, vous pouvez vous concentrer sur la création d'expériences utilisateur toujours plus impressionnantes.

Voici un extrait de code montrant une demande de service d'individualisation (JS) :

var indivSr = new Microsoft.Media.PlayReadyClient.PlayReadyIndividualizationServiceRequest();
indivSr.beginServiceRequest().then(indivSrOnComplete, indivSrOnError);

Pour en savoir plus sur la prise en charge de contenu DRM PlayReady dans votre application, consultez cet exemple sur MSDN.

Animations indépendantes

Dans la version Developer Preview, nous vous avons proposé un ensemble d'animations CSS riches que vous pouvez utiliser pour créer de magnifiques transitions dans votre application de style Metro écrite en HTML/CSS/JS. À l'occasion de la version Consumer Preview, nous avons amélioré de façon significative ces animations, en nous appuyant sur notre savoir-faire lié à l'accélération matérielle dans IE. Désormais, les animations principales peuvent être exécutées entièrement sur le processeur graphique, indépendamment du thread de l'interface utilisateur. Nous appelons ces animations des animations indépendantes. Elles permettent de créer plus facilement que jamais des interfaces de style Metro rapides et fluides.

La bibliothèque d'animations de Windows 8 a été conçue pour exploiter pleinement les animations indépendantes. Si vous créez des animations personnalisées, je vous recommande d'utiliser des animations indépendantes en utilisant des animations/transitions CSS reposant uniquement sur les transformations et l'opacité. 

Habituellement, les animations JavaScript s'exécutent sur le thread de l'interface utilisateur. Vous modifiez alors les coordonnées de votre objet dans le DOM pour le redessiner. Si cette méthode est relativement simple, elle bloque votre thread d'interface utilisateur et accroît la charge de travail du processeur, ce qui est très coûteux en termes de ressources ! Voici à quoi ressemble alors le code :

<script type="text/javascript">
function doAnimation() {
foo.style.left = parseInt(foo.style.left) + 1 + 'px';
if (foo.style.left != '100px')
{ setTimeout(doMove, 20); }
}

function init() {
foo = document.getElementById('fooObject');
foo.style.left = '0px';
doAnimation();
}
</script>

Lorsque vous utilisez des animations indépendantes, elles sont composées séparément du thread de l'interface utilisateur et la charge de travail s'appuie de façon native sur le matériel.

<style>

.doAnimation{
-ms-transition-property: -ms-transform;
-ms-transition-duration: 2s;
-ms-transform: translateX(100px);
}
</style>

En utilisant ces animations, vous créez des expériences utilisateur fluides et sans accroc, car elles ne sont pas affectées par les scripts exécutés sur le thread d'interface utilisateur. Vous n'avez aucun travail ni codage supplémentaire à réaliser. Il vous suffit de continuer à utiliser les animations CSS adéquates : Windows s'occupe du reste !

Pour plus d'informations sur ces animations CSS, consultez les ressources suivantes :

Améliorations en matière de débogage

Nous savons qu'il est indispensable de disposer d'outils de débogage de grande qualité pour les applications de style Metro. Ainsi, nous avons mis en place différentes améliorations pour vous faciliter la tâche.

Des améliorations importantes ont été apportées aux différents objets C++ que vous pouvez inspecter dans les fenêtres Espion. Au lieu de voir simplement un objet COM, vous pouvez le développer pour afficher la plupart des propriétés et des champs correspondants. Pour profiter de fonctionnalités de débogage améliorées pour C++, téléchargez les symboles de débogage sur le serveur de symboles Windows. Des modifications incrémentielles ont également été apportées aux fonctions d'inspection des objets Visual Basic et C#.

Gros plan sur la fenêtre Espion d'un projet C++, contenant un exemple d'objet COM ainsi que des champs et des propriétés développés dans la fenêtre Espion.

Vous pouvez inspecter plus d'objets qu'auparavant dans les fenêtres Espion.

Nous avons également amélioré le débogage des méthodes asynchrones en Visual Basic et C#. Plus précisément, le débogueur traite désormais les exceptions issues de méthodes void asynchrones comme étant non gérées par l'utilisateur, ce qui lui permet d'accéder directement à la méthode void asynchrone. En outre, en C++, vous pouvez désormais afficher des informations plus complètes sur les erreurs lorsque vous trouvez une exception WinRT, comme en Visual Basic, C# et JavaScript.

Nous avons également travaillé sur l'interface utilisateur permettant de déclencher des événements de suspension, de reprise et d'arrêt à partir de la barre d'outils Emplacement de débogage. Vous pouvez désormais sélectionner le processus sur lequel vous souhaitez déclencher l'événement.

Gros plan sur les boutons Suspendre, Reprendre et Arrêter dans Visual Studio. À gauche des boutons se trouve une liste déroulante dans laquelle vous pouvez choisir à quel processus envoyer les messages.

Interface permettant de déclencher des événements de durée de vie.

Depuis la conférence //build/, nous avons ajouté un certain nombre de fonctionnalités au simulateur. En voici quelques-unes :

  • Apparence visuelle améliorée, présentant un « chrome » plus fin et prenant moins de place à l'écran
  • Simulation de position, qui vous permet d'entrer la latitude, la longitude, l'altitude et le rayon d'erreur, afin de simuler les changements de position de l'appareil
  • Rotation plus rapide et émulation tactile améliorée
  • Prise en charge de la résolution 1024 x 768 pixels
  • Possibilité de prendre des captures d'écran de l'application en cours d'exécution et de les enregistrer dans le presse-papiers ou dans un fichier


Simulateur affichant l'écran Démarrer de Windows 8, ainsi qu'une fine ligne de boutons sur le côté droit.

Nouvelle interface utilisateur du simulateur, présentant un chrome plus fin

À suivre...

Nous avons pris en compte vos commentaires et nous espérons que vous apprécierez les efforts réalisés. Cependant, les améliorations sont trop nombreuses pour être détaillées dans un seul billet. Dans la deuxième partie de ce billet, je présenterai d'autres modifications réalisées, notamment les améliorations liées à la gestion des vignettes et des notifications, aux contrôles HTML/JavaScript, à la création d'applications hybrides, etc.

-- Jake Sabulsky, chef de projet, Windows

Ce billet a été rédigé en équipe. Remerciements à Jesse Bishop, Jonathan Aneja, Chris Tavares, Eric Salerno, Angelina Gambo et LeGrow.

  • Loading...
Leave a Comment
  • Please add 5 and 1 and type the answer here:
  • Post