Ce qui a changé pour les développeurs d'applications depuis la conférence //build/ (deuxième partie) - Blog des développeurs d'applications Windows 8 - Site Home

Comme promis, voici la deuxième partie du billet décrivant les travaux importants accomplis depuis la conférence //build/. Dans la première partie de ce billet, j'ai abordé l'intégration de DirectX et XAML, les améliorations apportées aux concepteurs Blend, les animations CSS indépendantes et d'autres sujets. Néanmoins, je suis certain que vous serez ravi de découvrir les autres nouveautés que nous vous proposons.

Notifications dans les vignettes et notifications toast

Les vignettes et les toasts jouent un rôle central dans les principes de conception du style Metro. Ils permettent de voir des informations importantes d'un simple coup d'œil, même lorsque l'application n'est pas en cours d'exécution. L'expérience de développement des notifications affichées dans les vignettes et les notifications toast a fait l'objet de nombreux commentaires de votre part. La plupart de ces commentaires portaient sur la création et la mise à jour des vignettes. En réponse à vos commentaires, nous avons amélioré l'expérience de développement des vignettes de trois manières :

Nous avons introduit des API d'interrogation pour mettre à jour les vignettes. Vous pouvez utiliser la nouvelle API de notification périodique des vignettes pour interroger votre service cloud et rechercher le contenu propre à votre application. Vous disposez là d'une solution extrêmement simple pour actualiser en contenu la vignette de votre application à partir du contenu issu du Web. L'extrait JavaScript ci-dessous montre comment lancer l'interrogation pour la vignette de votre application :
```
// update the tile with a poll URL
var polledUri = new Windows.Foundation.Uri("http://www.fabrikam.com/tile.xml");
var recurrence = Windows.UI.Notifications.PeriodicUpdateRecurrence.halfHour;
var tileUpdater = Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication();
tileUpdater.startPeriodicUpdate(polledUri, recurrence);
```
Le contenu renvoyé par votre service Web doit respecter le schéma XML des vignettes. Les badges de vignette peuvent également être mis à jour par interrogation.
Pour plus d'informations sur la mise à jour de votre vignette, consultez les liens suivants sur le Centre de développement :
- Ajout de vignettes d'interrogation
- Exemple côté client de notifications de type push et de notifications périodiques
- Sélection d'un mode de distribution des notifications
Nous avons simplifié les opérations permettant de créer du contenu esthétiquement réussi pour les vignettes et les toasts. Vos commentaires signalaient également que l'utilisation de XML par le biais des API de notification était trop complexe. Pour faciliter le développement des notifications de vignette et des notifications toast, nous avons introduit un modèle objet de notification. Cette bibliothèque est fournie avec le SDK Windows. La bibliothèque ajoute des constructeurs (et IntelliSense) destinés aux modèles de notification de vignette et de notification toast. Voici un petit exemple en JavaScript :
```
// create the wide template
var tileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileWideText03();
tileContent.textHeadingWrap.text = "Hello world! My very own tile notification";

// create the square template and attach it to the wide template
var squareTileContent = NotificationsExtensions.TileContent.TileContentFactory.createTileSquareText04();
squareTileContent.textBodyWrap.text = "Hello world!";
tileContent.squareContent = squareTileContent;

// send the notification
Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileContent.createNotification());
```
Cerise sur le gâteau, ce modèle objet est structuré de telle sorte que vous puissiez l'utiliser également dans votre code côté serveur.

Pour découvrir en pratique le nouveau modèle objet et l'utiliser dans votre projet, consultez l' exemple de vignettes et de badges d'application. Examinez le projet NotificationsExtensions figurant dans cet exemple.
Nous avons mis à jour le catalogue des modèles de vignette disponibles et ajouté la possibilité de mettre à jour à la fois les représentations élargie et carrée de la vignette. Désormais, vous pouvez mettre à jour les vues réduites et agrandies de votre vignette par le biais de texte et d'images. L'exemple ci-dessous montre comment utiliser l'un de nos nouveaux modèles de vignette ((TileSquareText04). La liste complète des modèles disponibles figure dans l'article Sélection d'un modèle de vignette.

Outils JavaScript

Depuis la conférence //build/, les développeurs ont beaucoup commenté l'expérience de création d'une application de style Metro avec JavaScript. Pour Windows 8, JavaScript est un composant à part entière de la plateforme et nous souhaitons également en faire un composant à part entière de nos outils. Avec la version Consumer Preview, si vous créez une nouvelle application de style Metro à l'aide des langages HTML, CSS et JavaScript, vous remarquerez que de nombreuses améliorations ont été apportées à Visual Studio et à la bibliothèque Windows pour JavaScript (WinJS). Par exemple, les modèles d'applications de style Metro basées sur JavaScript sont plus lisibles et utilisent les nouvelles API.

Par ailleurs, nous avons amélioré les performances et la précision de JavaScript IntelliSense dans VS :

Résultats améliorés dans les listes de saisie semi-automatique, la définition goto et les paramètres.
Meilleure précision d'IntelliSense, grâce à une représentation plus complète du DOM, pour vous permettre de compléter les instructions en fonction de ce dernier.
L'éditeur JavaScript prend désormais en charge le style d'indentation « intelligent », qui sélectionne de façon plus intelligente la position du caret sur les nouvelles lignes, en fonction du contexte.
Enfin, nous avons amélioré les possibilités d'extension de JavaScript IntelliSense dans VS, ce qui facilite l'extension d'IntelliSense pour toutes les bibliothèques JavaScript, par exemple jQuery.

Nous avons amélioré en profondeur nos outils de diagnostic et de débogage JavaScript :

Grâce à la fenêtre de styles de l'explorateur DOM, vous pouvez copier et ajouter de nouvelles règles et propriétés de règles pour tester l'incidence des modifications de style sur les applications en cours d'exécution. Vous pouvez également lier le fichier CSS d'origine directement à partir de la règle.
Par ailleurs, l'explorateur DOM possède un nouvel onglet Events (Événements), qui permet de trouver l'emplacement source des gestionnaires d'événements associés aux éléments DOM.
VS peut désormais afficher les portées, les prototypes, les regroupements de fonctions et les exceptions dans les fenêtres Espion et Local.
Nous avons ajouté la prise en charge des exceptions de première chance pour JavaScript.

Liaison de données C++

Dans l'univers des applications connectées, la liaison de données est indispensable. Au vu de vos commentaires, nous devions faciliter ces liaisons de données en C++. Pour implémenter une liaison de données, vous deviez écrire de nombreuses interfaces et générer beaucoup de code réutilisable pour C++/XAML. Dans la version Consumer Preview, nous avons résolu ce problème et il vous suffit désormais d'ajouter un attribut [Windows::UI::Xaml::Data::Bindable] à la classe à laquelle les données doivent être liées. En XAML, le principe est identique. Voici un exemple montrant la modification :

En-tête C++

namespace SimpleBlogReader
{
   //To be bindable, a class must be defined within a namespace.
   [Windows::UI::Xaml::Data::Bindable]
   public ref class FeedItem sealed
   {
   public:
      FeedItem(void){}
      ~FeedItem(void){}
      property Platform::String^ Title;
      property Platform::String^ Author;
      property Platform::String^ Content;
      property Windows::Foundation::DateTime PubDate; 
   };
}

XAML

<TextBlock x:Name="TitleText" Text="{Binding Path=Title}" 
           VerticalAlignment="Center" FontSize="48" Margin="56,0,0,0"/>

Contrôles HTML/JavaScript

Dans la version Consumer Preview, nous avons simplifié les contrôles courants, utilisés par la quasi-totalité des applications. Ces contrôles jouent un rôle essentiel dans la conception du style Metro. Ils permettent à votre application d'être cohérente avec le reste du système et à vos utilisateurs de basculer facilement de leurs applications à Windows, et inversement. Les contrôles ListView et AppBar HTML/JS ont fait l'objet d'améliorations importantes.

Contrôle ListView

En réponse aux commentaires relatifs à la version Developer Preview, nous avons amélioré le contrôle ListView WinJS pour simplifier et rendre plus flexibles le chargement d'éléments et la création de modèles.

Nous avons créé une source de données simple et puissante appelée Binding.List, conçue spécialement pour les données chargées en mémoire.

Binding.List présente une API qui reprend exactement l'objet JavaScript Array, à une exception près : vous devez appeler getAt et setAt pour lire et écrire des éléments, car JavaScript ne prend pas en charge la substitution d'opérateurs. Binding.List facilite la gestion des données chargées en mémoire, comme le montre cet exemple:
```
var data = [10, 20, 12, 7];
var ds = new WinJS.Binding.List(data);
ds.push(3);
ds.splice(2, 1);

var sorted = ds.createSorted(function (a, b) { return (a - b) });
ds.push("1");
console.log("original: " + ds.join(",") + "; sorted: " + sorted.join(","));
```
Résultat : “original: 10,20,7,3,1; sorted: 1,3,7,10,20”
Nous avons étendu le contrôle ListView de façon à prendre en charge les fonctions de création de modèles à plusieurs phases. Vous pouvez désormais écrire une fonction de création de modèles présentant les données des éléments en plusieurs phases : les éléments de données les plus rapides (texte, par exemple) s'affichent instantanément et les données plus lentes (images, par exemple) sont présentées dès qu'elles sont disponibles. Ces améliorations permettent un chargement de données plus progressif pour les utilisateurs de vos applications.

Contrôle AppBar

Après la conférence //build/, nous avons reçu de nombreux commentaires signalant qu'il était difficile d'utiliser les contrôles AppBar. Nous avons donc écouté vos commentaires et réimaginé le contrôle AppBar HTML pour en faciliter l'utilisation. Au final, vous profitez d'une expérience de développement simplifiée. Examinez l'extrait de code suivant pour mieux comprendre :

<div class="win-left">
    <button onclick="doClickPlay" class="win-command" role=’MenuItem’>
            <span class="win-commandicon win-large">&#xE112;</span>
            <span class="win-label">Play</span>                   
    </button>
</div>
<div class="win-right">
    <button onclick="doClickAdd" class="win-command" role=’MenuItem’>
            <span class="win-commandicon win-large">&#xE112;</span>
            <span class="win-label">Add</span>                   
    </button>
</div>

Boutons AppBar HTML dans la version Consumer Preview :

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
play',label:'Play',icon:'play',onclick:doClickPlay,section:'selection',tooltip: 'Play'}">
/button>

<button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{
id:'add',label:'Add',icon:'add',onclick:doClickAdd,tooltip: 'Add'}">
/button>

Comme vous pouvez le constater, vous pouvez désormais créer les boutons à partir d'un jeu d'options plutôt qu'à partir d'éléments HTML. La création des boutons, de leurs styles, des icônes, du texte et des autres éléments est réalisée pour vous. Le contrôle AppBar est mis à l'échelle en mode ancré ou en mode portrait. Vos boutons sont retracés automatiquement à la position correcte.

Nous avons apporté bien d'autres améliorations au contrôle AppBar HTML/CSS/JS et je n'ai malheureusement pas le temps de les évoquer toutes dans ce billet. N'hésitez pas à consulter le Centre de développement pour découvrir un exemple de code AppBar complet et la documentation correspondante.

Outils d'interopérabilité multilangage

Au cours de la conférence //build/, nous avons montré qu'il est possible de créer des applications de style Metro hybrides en utilisant une combinaison de langages, dont JavaScript, C++, C# et Visual Basic. Avec cette version, vous pouvez créer directement ces types d'applications dans Visual Studio. Vous pouvez par exemple créer une application JavaScript communiquant avec une bibliothèque de classes C# ou une application C# exploitant un composant C++. Ainsi, vous pouvez profiter des avantages propres à chaque langage, réutiliser les ressources existantes et permettre aux membres de vos équipes possédant des compétences diverses de collaborer sur un même projet.

JavaScript

var customers = new CSClassLib.CustomerRepository();
var filtered = customers.getCustomersByState("WA");

C#

public IEnumerable<Customer> GetCustomersByState(string state)
{
    return from c in this.Customers
           where c.State == state
           select c;
}

Si vous développez en C++, vous constaterez par vous-même une partie des améliorations notables, en particulier celles qui concernent DirectX et XAML. DirectX est idéal pour manipuler directement les pixels. XAML est quant à lui idéal pour créer des interactions utilisateur (menus, affichages en superposition, etc.). Comme je l'ai décrit dans la première partie de ce billet, les applications XAML peuvent désormais utiliser DX. Cette fonctionnalité ne serait pas complète sans les outils adéquats. En réponse à vos commentaires, la version bêta de Visual Studio prend désormais en charge l'interopérabilité entre C++/XAML et DirectX.

Pour résumer...

Au cours des deux derniers billets, je vous ai montré quelques exemples des évolutions que vous constaterez dans la version Consumer Preview. De nombreuses optimisations, améliorations et nouveautés ont été intégrées. L'expérience de développement d'applications de style Metro sous Windows 8 a été encore améliorée depuis la version Developer Preview.

Pour plus d'informations sur l'ensemble de ces améliorations, consultez le Centre de développement sur MSDN, qui a été entièrement remanié. Si vous avez cliqué sur les liens publiés dans ces billets, vous aurez sans doute déjà remarqué que le Centre de développement a été amélioré.

Voici comment nous avons amélioré notre documentation :

La section de référence consacrée à Windows Runtime a été complétée (toutes les API disposent désormais d'une description)
Plus de trente exemples ont été ajoutés dans plusieurs langues
La documentation relative aux exemples a été améliorée
Les pages WinRT contenant des extraits de code sont plus nombreuses
L'aide relative à UX a été améliorée de façon significative : des lignes rouges, des modèles filaires et d'autres ressources réutilisables ont été ajoutés
Navigation améliorée et meilleure pertinence des résultats de recherche
Ajout d'une nouvelle barre latérale contenant des liens vers les principales API ainsi qu'une synthèse des concepts
Les didacticiels Mise en route et Démarrage rapide sont plus utiles que jamais et disponibles dans toutes les langues prises en charge

Pour découvrir plus en détail les améliorations apportées aux outils, consultez le billet de blog de Jason Zander. Vous disposez d'un certain nombre de nouvelles fonctionnalités de langage en C# et Visual Basic pour le développement d'applications de style Metro.

Si ce n'est déjà fait, téléchargez la version Consumer Preview, installez la nouvelle version bêta de Visual Studio, téléchargez quelques exemples et documents auprès du Centre de développement, et commencez à créer des applications plus formidables les unes que les autres. Nous continuerons à publier des billets sur ce blog, afin de vous proposer une expérience de développement plus simple que jamais.

-- Jake Sabulsky, chef de projet, Windows

Ce billet a été rédigé en équipe ; merci à Kevin Woley, Jonathan Aneja, Jonathan Garrigues, Jon Gordner, Ryan Demopoulos, Keith Boyd et Ian LeGrow.