I. Introduction▲
Dans ce premier article, je trouvais important de présenter le fonctionnement interne d'un projet de type "application vide pour Windows Store" dans Visual Studio 2012. Je vais donc présenter chaque fichier, expliquer son importance et ses différents paramétrages. Cela vous permettra d'acquérir de solides connaissances pour la suite de notre série dans laquelle nous utiliserons chacun de ces fichiers.
Il existe de nombreux autres templates dans Visual Studio 2012, notamment "Application de quadrillage", "Application partagée", "Application à disposition fixe" et "Application de navigation" comme vous pouvez le voir ci-dessous. Ils sont construits pour un type spécifique d'application ou de navigation et ne correspondent généralement pas totalement à votre application. Il faut souligner que les templates sont des points de départ et non pas des solutions complètes. Dans cette série, nous utiliserons toujours le template "Application vide".
II. Architecture▲
Voici un aperçu de l'architecture d'un projet HTML 5 de type "Application Vide" dans l'explorateur de solution :
II-A. Les images▲
Commençons avec les fichiers les plus simples : les images contenues dans le dossier "images". Il y a quatre images dans chaque nouveau projet, chacune ayant un rôle spécifique. Nous avons créé plusieurs versions de cette image (ainsi qu'une additionnelle) pour qu'il soit plus simple de faire la distinction lors de l'exécution de l'application. Je vous recommande donc fortement de télécharger ces images et de remplacer les images par défaut par celles-ci, surtout lors de la phase d'apprentissage. Une fois que vous avez remplacé les images, exécutez votre projet pour voir leurs différents emplacements, comme décrit ci-dessous :
II-A-1. Logo.png▲
C'est probablement l'image la plus utilisée par votre application. C'est par défaut l'image de fond de la tuile de votre application sur le Start Screen. Elle mesure 150 pixels sur 150.
II-A-2. SmallLogo.png▲
Cette image est utilisée lorsque l'application est affichée dans une liste. Par exemple, lors de la recherche d'une application sur Windows 8 ou dans le menu de partage. Elle mesure 30 pixels sur 30. Du fait de sa petite taille, vous devez être sûr qu'elle représente quelque chose de familier à l'utilisateur. Je vous recommande fortement d'utiliser juste un logo ou une autre image facilement reconnaissable.
II-A-3. SplashScreen.png▲
C'est l'image initiale affichée lorsque votre application se lance. Il y a de nombreuses choses à faire avec, choses que nous étudierons plus tard dans notre série. Pour le moment, souvenez-vous que cette image doit toujours faire 620 pixels par 300px et sera centrée horizontalement et verticalement à l'écran.
II-A-4. StoreLogo.png▲
Pour conserver de la place dans le store, une petite icône est utilisée. Cette image mesure 50 pixels par 50, mais peut être plus importante que l'ensemble de votre application. C'est cette icône que voient les utilisateurs lorsqu'ils décident quelle application ils vont installer. Une icône de mauvaise qualité indique une application de mauvaise qualité pour la plupart des utilisateurs. Passez donc du temps à la fignoler.
II-A-5. WideLogo.png▲
C'est une image supplémentaire que j'ajoute à chacun de mes projets. Pour l'ajouter, faites un clic droit sur le dossier "images" dans l'explorateur de solution, puis dans "Ajouter", cliquez sur "Ajouter un élément existant". Cette image mesure 310 pixels sur 150 et est utilisée pour une éventuelle tuile large de votre application.
II-B. package.appxmanifest▲
Ce fichier contient toutes les configurations, paramètres et déclarations de votre application. C'est ici que vous allez définir l'ensemble des choses relatives à l'exécution de votre application sur une machine Windows 8. Par exemple, c'est dans ce fichier que vous allez définir si le contrat de recherche est activé, ou quel icône utiliser dans quelle situation. Par exemple, chaque image dont nous avons parlé au-dessus sont définies dans l'onglet "Interface utilisateur de l'application". Il permet aussi de définir la couleur de fond par défaut, les différentes orientations de votre application, les capacités dont a besoin l'application, ...
Soyez sûrs de bien connaitre ce fichier. Vous allez en avoir besoin.
II-C. default.html▲
C'est notre point d'entrée principal ou page de démarrage de votre application. Le fichier "defaut.html" peut être renommé à condition de modifier la valeur du champ "page de démarrage" du fichier package.appxmanifest. En tant que développeur web, le fichier "default.html" ressemble à n'importe quelle autre page de démarrage d'un site, notamment si vous avez utilisé HTML5.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta charset="utf-8" />
<title>Jour1</title>
<!-- Références WinJS -->
<link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
<script src="//Microsoft.WinJS.1.0/js/base.js"></script>
<script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
<!-- Références Jour1 -->
<link href="/css/default.css" rel="stylesheet" />
<script src="/js/default.js"></script>
</head>
<body>
<p>Le contenu s'affiche ici</p>
</body>
</html>
Comme n'importe quelle page html que vous avez déjà vu, vous retrouvez les références vers vos feuilles de style et vos fichiers javascript. Mais regardez avec attention les attributs href ou src des balises link et script. Remarquez l'usage de // au début de chaque chemin. C'est ainsi que l'on référence les scripts et les feuilles de style embarqués.
II-D. css/default.css▲
Comme nous utilisons le template "application vide", vous vous doutez que notre style par défaut est inexistant. Néanmoins, certains indices permettent de deviner que Microsoft souhaite que nous gérions certaines choses au minimum : les orientations et le "snapping". Dans le prochain article, nous allons découvrir ces deux notions en détails mais pour le moment, sachez juste qu'elles sont gérées à l'aide de simples media queries :
body {
}
@media screen and (-ms-view-state: fullscreen-landscape) {
}
@media screen and (-ms-view-state: filled) {
}
@media screen and (-ms-view-state: snapped) {
}
@media screen and (-ms-view-state: fullscreen-portrait) {
}
Le fichier default.css n'est pas la seule feuille de styles référencée. Nous avons aussi :
cette feuille de styles incluse dans votre application permet de définir les styles de bases comme ceux des controles. Par défaut, le thème sombre est utilisé, mais un thème clair est disponible et utilisable comme ceci :
II-E. js/default.js▲
Contrairement à notre fichier CSS par défaut, notre fichier JavaScript par défaut réalise certaines tâches dans la gestion du cycle de vie ou Process Lifecycle Management (PLM). A sa création, le template est capable de réaliser certaines actions indispensables du PLM telles que le lancement et la fermeture de l'application. Ce sont des choses que nous complèterons par la suite.
// Pour obtenir une présentation du modèle Vide, consultez la documentation suivante :
// http://go.microsoft.com/fwlink/?LinkId=232509
(function () {
"use strict";
WinJS.Binding.optimizeBindingReferences = true;
var app = WinJS.Application;
var activation = Windows.ApplicationModel.Activation;
app.onactivated = function (args) {
if (args.detail.kind === activation.ActivationKind.launch) {
if (args.detail.previousExecutionState !== activation.ApplicationExecutionState.terminated) {
// TODO: cette application vient d'être lancée. Initialisez
// votre application ici.
} else {
// TODO: cette application a été réactivée après avoir été suspendue.
// Restaurez l'état de l'application ici.
}
args.setPromise(WinJS.UI.processAll());
}
};
app.oncheckpoint = function (args) {
// TODO: cette application est sur le point d'être suspendue. Enregistrez tout état
// devant être conservé lors des suspensions ici. Vous pouvez utiliser l'objet
// WinJS.Application.sessionState, qui est automatiquement
// enregistré et restauré en cas de suspension. Si vous devez effectuer une
// opération asynchrone avant la suspension de votre application, appelez
// args.setPromise().
};
app.start();
})();
Comme pour nos CSS, d'autres librairies JavaScript sont référencées, notamment WinJS. Nous avons besoin de WinJS pour implémenter des choses relatives au PLM. Nous étudierons cette librairie plus en détails par la suite.
II-F. Jour1_TemporaryKey.pfx▲
Toute application développée pour le Windows Store est signée par un certificat. Lorsque vous créez un nouveau projet dans Visual Studio, un nouveau certificat est automatiquement créé. Dans notre cas, ce certificat est nommé Jour1_TemporaryKey.pfx où Jour1 est le nom de notre projet. Vous pouvez retrouver ce certificat dans l'onglet Packages du manifest de l'application. Vous pouvez aussi créer de nouveaux certificats si besoin est.
Une fois que vous serez prêts à soumettre votre application au store, vous devrez la lier à votre compte développeur. Vous pouvez le faire en allant dans Projet, Windows Store, Associer l'application au Windows Store. Après avoir réalisé cette étape, vous serez avertis qu'un nouveau certificat sera ajouté à votre projet et sera utilisé pour signer le package final.
Vous pouvez trouver plus d'informations sur la signature des applications et la création de packages sur MSDN.
III. Conclusion▲
Et voilà ! Nous venons seulement de commencer notre série, mais vous avez déjà obtenu de solides connaissances dans le fonctionnement d'un projet HTML de type Application vide pour Windows 8.
Dans le prochain article, nous nous focaliserons sur les notions d'orientation et de snapping, deux aspects importants dans le développement d'applications pour Windows 8. Si ce n'est déjà fait, je vous engage à télécharger les outils pour développer des applications pour Windows 8.
IV. Traduction▲
Cet article est la traduction de l'article original de Clark Sell, 31 Days of Windows 8 | Day #1: The Blank App.
