Rapidité et fluidité du lancement d'une application

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

Rapidité et fluidité du lancement d'une application

  • Comments 0

Le lancement d'une application est une composante essentielle de la rapidité et de la fluidité de Windows 8. Il est par conséquent important de donner la priorité à l'UX de lancement de votre application. Il est certain qu'un flux de lancement soigné améliore la perception initiale d'une application. Dans ce billet, je vais expliquer comment concevoir un lancement d'application réactif et soigné et en quoi ce moment est décisif pour faire une bonne impression sur les utilisateurs. Je vais présenter quatre modèles de conception de lancement pouvant s'appliquer à vos applications et vais indiquer quelques points essentiels à garder à l'esprit lors de la conception d'applications de style Metro.

Présentation du lancement d'une application

Si vous avez déjà lu le billet Gestion du cycle de vie pour que vos applications soient « toujours réactives », vous devez connaître les états du cycle de vie des applications. Ce billet porte sur le lancement d'une application ou sur la transition entre l'état « Pas en cours d'exécution » et l'état « En cours d'exécution ».

Diagramme précisant où le lancement d'une application se place par rapport au cycle de vie global d'une application de style Metro : le lancement d'une application correspond à la transition de l'état « Pas en cours d'exécution » à l'état « En cours d'exécution ».
  États du cycle de vie : le lancement d'une application correspond à la transition de l'état « Pas en cours d'exécution » à l'état « En cours d'exécution ».

Comme le lancement d'une application est très visible, il est important de bien planifier cette transition. Non seulement la transition occupe une place centrale, mais elle apparaît aux utilisateurs de façon répétée. Plus vous implémentez de contrats (consultez le billet précédent : Activation des contrats Windows 8 dans votre application), plus les utilisateurs auront de motifs pour lancer votre application. La première impression positive ou négative que vous ferez dépendra de la façon dont vous avez conçu cette transition. Elle peut également déterminer si les utilisateurs retourneront régulièrement dans votre application ou non.

Avant de recommander quelques méthodes concernant le lancement d'une application, il n'est peut-être pas inutile de passer en revue la séquence des opérations qui constituent cette transition.

Lorsqu'un utilisateur clique sur la vignette d'une application, cette dernière s'active et l'écran de démarrage apparaît. Une fois l'animation de lancement terminée, l'écran de démarrage occupe tout l'écran jusqu'à ce que l'application présente une fenêtre. À ce stade, l'écran de démarrage s'efface pour faire apparaître la première vue de l'application.  Séquence des opérations pendant le lancement d'une application.

Lorsque les utilisateurs lancent une application, ils sont immédiatement accueillis par l'écran de démarrage. Chaque application de style Metro dispose d'un écran de démarrage, qui se compose d'une image 620x300 et d'une couleur d'arrière-plan unie. (Consultez Prise en main : ajout d'un écran de démarrage pour savoir comment personnaliser votre écran de démarrage.) Windows présente l'écran de démarrage en votre nom afin d'accueillir les utilisateurs pendant l'activation de votre application. L'événement d'activation est reçu par toutes les applications au cours de leur lancement. Il permet à votre application d'effectuer les tâches d'initialisation requises pour présenter son interface utilisateur initiale. Ces tâches peuvent consister à lire les paramètres de base, à définir la page vers laquelle naviguer et/ou à identifier si l'application a été activée pour un des différents contrats. Une fois l'initialisation terminée et votre application prête à faire disparaître l'écran de démarrage, elle doit présenter sa première fenêtre. Aucune action n'est requise pour les applications JavaScript, car cela se fait automatiquement lorsque le rappel d'activation est renvoyé. Les applications C# en revanche doivent effectuer cette étape de façon explicite en appelant Window.Current.Activate. Soyez attentif à ne pas retarder cette opération, car votre application s'arrêtera si aucune fenêtre n'apparaît dans un délai raisonnable (environ 15 secondes). Il est en outre préférable de présenter une fenêtre aussi rapidement que possible, car conserver inutilement l'écran de démarrage à l'écran risque de dégrader l'expérience utilisateur. Nous conseillons de présenter une fenêtre dans les 2 à 3 secondes pour vous assurer que votre application se lancera toujours comme prévu, même sur un matériel d'entrée de gamme.

Une fois la fenêtre de l'application affichée et l'écran de démarrage disparu, c'est au tour de l'application de jouer son rôle. À vous de déterminer comment présenter le contenu de votre application aux utilisateurs. Selon l'application, différentes transitions peuvent convenir. Au cours des sections suivantes, je vais recommander quatre modèles de conception de lancement d'une application pouvant s'appliquer selon les besoins de votre application :

  • Lancement par défaut d'une application

Pour les applications qui ne nécessitent pas de chargement supplémentaire et qui sont immédiatement prêtes à l'emploi.

Exemple : une application de type dictionnaire qui permet aux utilisateurs de rechercher ou de traduire différents termes. La page d'arrivée se compose uniquement d'une zone de texte pour la saisie de l'utilisateur.

  • Lancement squelette d'une application

Idéal pour les applications qui remplissent la page d'arrivée de façon incrémentielle au lancement.

Exemple : une application de lecture qui effectue le suivi des livres, magazines et journaux de l'utilisateur. Au lancement, l'application remplit de façon incrémentielle la bibliothèque de l'utilisateur.

  • Lancement étendu d'une application

Pour les applications qui effectuent de longues opérations de chargement avant de présenter l'interface utilisateur. Cela peut inclure les appels réseau ou les E/S de fichiers importants.

Exemple : une application sportive qui affiche les derniers scores et moments forts. L'application utilise des API REST pour récupérer ces informations sur le réseau et affiche les données en temps réel sur la page d'arrivée.

  • Lancement différé d'une application

Utile pour les applications devant exécuter des tâches de base asynchrones au lancement, par exemple interroger les paramètres d'application pour rechercher ceux qui doivent être utilisés en premier.

Exemple : un jeu devant déterminer si l'utilisateur a déjà créé un compte. Cette information est nécessaire pour savoir quelle page présenter à l'utilisateur.

Lancement par défaut d'une application

Pour de nombreuses applications, le flux du lancement par défaut d'une application est optimal. Dans ce flux, Windows gère l'affichage et le retrait de l'écran de démarrage de chaque application. L'écran de démarrage s'affiche jusqu'à la fin de l'activation et une fenêtre apparaît, déclenchant un fondu enchaîné animé sur la page d'arrivée de l'application. Utilisez le lancement par défaut si votre page d'arrivée est statique et ne dépend pas d'opérations de chargement supplémentaires. Si votre contenu est prêt immédiatement, il n'est pas nécessaire de retarder artificiellement l'utilisateur. De fait, vous ne le devez pas !

Vous trouverez ci-dessous un exemple de flux du lancement par défaut avec Internet Explorer 10 de la version Consumer Preview. Lorsque l'application est lancée, l'écran de démarrage apparaît immédiatement pour l'utilisateur. L'écran de démarrage reste visible à l'écran jusqu'à ce que l'application soit activée. À ce stade, l'écran de démarrage disparaît pour faire place à la page d'arrivée. Dans ce cas, la page d'arrivée présente la dernière page consultée par l'utilisateur, qui est facilement accessible car elle a été enregistrée au cours de la session précédente.

Voici le processus présenté dans l'image suivante :

  1. L'utilisateur clique sur la vignette de l'application.
  2. L'écran de démarrage apparaît.
  3. La page d'arrivée de l'application apparaît.

Lorsque l'utilisateur clique sur la vignette, l'écran de démarrage apparaît. Ensuite, lorsque la première vue de l'application est prête, l'écran de démarrage disparaît pour faire place à la page d'arrivée de l'application. 
Flux du lancement par défaut d'une application.

Pour implémenter le flux du lancement par défaut, aucune tâche supplémentaire n'est requise. Spécifiez simplement l'image de votre écran de démarrage 620x300 dans le manifeste de votre application, puis concevez la page d'arrivée à l'aide d'un contenu statique. Une fois l'activation terminée, l'écran de démarrage laisse la place à la page d'arrivée et votre application est prête à être utilisée.

Lancement squelette d'une application

Pour une majorité d'applications, le lancement par défaut est idéal. Une fois l'écran de démarrage disparu, l'application s'exécute et est prête à interagir avec l'utilisateur. Il arrive toutefois que certaines applications ne soient pas prêtes à ce stade. Ces applications doivent charger du contenu dynamiquement après leur lancement. Pour cette classe d'applications, le modèle du lancement squelette d'une application est parfait pour fournir aux utilisateurs des informations utiles sur le chargement, tout en leur amenant l'application aussi rapidement que possible. Dans ce modèle, l'écran de démarrage disparaît pour faire place à une page d'arrivée squelette (la page d'arrivée sans contenu), tandis que le contenu est récupéré. En ajoutant une barre de progression à la page, vous pouvez indiquer que l'application est toujours en cours de chargement. L'image suivante montre un exemple de flux du lancement squelette avec l'application Musique de la version Consumer Preview. Ici, la page d'arrivée squelette s'affiche tandis que le contenu musical le plus récent est récupéré.

Voici le processus présenté dans l'image suivante :

  1. L'utilisateur clique sur la vignette de l'application.
  2. L'écran de démarrage apparaît.
  3. La page d'arrivée squelette apparaît. Notez la barre de progression affichée en haut de la vue.
  4. La page d'arrivée de l'application apparaît.

Lorsque l'utilisateur clique sur la vignette, l'écran de démarrage apparaît. Ensuite, l'application présente une page d'arrivée squelette comme première vue. La page d'arrivée squelette est la page d'arrivée sans aucun contenu. Lorsque l'écran de démarrage laisse la place à la page d'arrivée squelette, l'application commence à remplir la page de façon incrémentielle.  Flux du lancement squelette d'une application.

Pour implémenter le flux du lancement squelette d'une application, créez une vue squelette statique de la page d'arrivée de votre application et affichez-la comme page d'accueil. Ensuite, au cours de l'activation, commencez à exécuter les tâches de chargement requises pour remplir la page de contenu. Comme la plupart des opérations sont asynchrones, l'écran de démarrage peut être arrêté pendant l'exécution de ces tâches. Vos utilisateurs verront par conséquent la page d'arrivée se remplir de façon incrémentielle.

Si vous souhaitez savoir quand l'écran de démarrage a disparu, vous pouvez utiliser l'API de l'écran de démarrage. L'API comprend l'événement SplashScreen.Dismissed, qui indique à quel moment a eu lieu la transition entre l'écran de démarrage et la page d'accueil de l'application. Cela peut être utile si vous souhaitez savoir quand votre page d'arrivée squelette est affichée.

JavaScript

Comme vous le verrez dans l'exemple suivant, votre application peut commencer à exécuter des opérations pour remplir la page d'arrivée au sein du rappel de l'événement d'activation. Pour savoir à quel moment l'écran de démarrage disparaît, utilisez les arguments de l'événement d'activation pour obtenir l'objet écran de démarrage. À l'aide de cet objet, inscrivez-vous à l'événement « dismissed » pour être averti de la disparition de l'écran de démarrage.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);
...
}
};

function performSetupTasks() {
// Begin additional loading tasks here…
...
}

function onSplashScreenDismissed() {
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

C#

L'implémentation n'est pas différente dans C#. Commencez les opérations nécessaires au remplissage de la page d'arrivée au cours de l'activation. Vous pouvez ensuite obtenir l'objet écran de démarrage à partir des arguments de l'événement d'activation et vous inscrire pour être averti de la disparition de l'écran de démarrage.

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...
}

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has dismissed and the skeleton landing page is now in view.
...
}

Lancement étendu d'une application

Pour les applications qui effectuent des tâches de chargement supplémentaires après le lancement, le lancement squelette d'une application est une bonne solution. Cela étant dit, ce lancement présente un inconvénient : comme les utilisateurs sont amenés directement à la page « squelette », le flux de chargement collectif peut sembler disjoint. La transition de l'écran de démarrage à la page d'arrivée squelette peut donner l'impression aux utilisateurs qu'il existe deux opérations de chargement indépendantes. Lorsque cela n'est pas souhaitable, le modèle du lancement étendu d'une application est une bonne alternative.

Ce flux se base sur le concept d'un écran de démarrage étendu pour produire une expérience de chargement transparente. Lorsque l'écran de démarrage classique disparaît, l'application affiche un écran de démarrage étendu à la place de la page d'arrivée. L'écran de démarrage étendu est la propriété entière de l'application et est formaté à l'aide de l'API de l'écran de démarrage. L'API fournit les informations de positionnement qui assurent que l'apparence de l'écran de démarrage étendu est visuellement identique à celle de l'écran de démarrage classique (à part l'affichage d'un anneau de progression ou d'informations de chargement), ce qui unifie les opérations de chargement en apparence indépendantes. Lorsque l'écran de démarrage étendu est à l'écran, l'application peut continuer à exécuter les tâches requises pour afficher la page d'arrivée. Ensuite, à la fin du chargement, vous pouvez passer de l'écran de démarrage étendu à la page d'arrivée.

Le flux du lancement étendu est particulièrement adapté si l'initialisation risque d'être longue (la connectivité réseau par exemple est imprévisible). Si vous souhaitez réaliser des tâches plus difficiles lors du lancement, l'écran de démarrage étendu est le choix idéal. Il est également parfait si vous souhaitez vous assurer que votre page d'arrivée a été entièrement mise à jour avant de l'afficher (si vous choisissez de ne pas afficher les données mises en cache).

L'exemple suivant montre le flux du lancement étendu avec l'application Météo de la version Windows 8 Consumer Preview. Une application météo est un parfait exemple d'application pouvant implémenter le modèle du lancement étendu, car l'écran de démarrage étendu peut s'afficher pendant que les dernières données météorologiques sont demandées auprès du réseau (il n'est pas tellement intéressant de montrer à l'utilisateur les données météorologiques mises en cache).

Voici le processus présenté dans l'image suivante :

  1. L'utilisateur clique sur la vignette de l'application.
  2. L'écran de démarrage apparaît.
  3. L'écran de démarrage étendu apparaît (avec l'anneau de progression).
  4. La page d'arrivée de l'application apparaît.

Lorsque l'utilisateur clique sur la vignette, l'écran de démarrage apparaît. Ensuite, l'application présente un écran de démarrage étendu comme première vue. L'écran de démarrage étendu est visuellement identique à l'écran de démarrage classique, mais constitue la propriété de l'application. Ainsi, l'application peut commencer les opérations de chargement et afficher la page d'arrivée réelle lorsqu'elle est prête. 
Flux du lancement étendu d'une application.

Pour implémenter le flux du lancement étendu, l'API de l'écran de démarrage doit être utilisée. Avec SplashScreen.ImageLocation, les applications peuvent obtenir les coordonnées de l'image de l'écran de démarrage classique. C'est important, car l'image doit être positionnée exactement au même endroit dans l'écran de démarrage étendu pour que l'utilisateur ait une impression de continuité dans la transition. Comme indiqué dans la section précédente, l'API présente également un événement SplashScreen.Dismissed, qui vous avertit que la transition de l'écran de démarrage classique à l'écran de démarrage étendu a lieu.

Comme avant, vous pouvez déclencher des tâches supplémentaires lors de l'activation. Nous allons ci-dessous examiner l'implémentation d'un écran de démarrage étendu (avec un anneau de progression facultatif) à la fois en JavaScript et en C#.

Remarque : lors de l'implémentation d'un écran de démarrage étendu, il est important de gérer l'ancrage, l'annulation de l'ancrage, la rotation, etc. Ces détails ne sont pas abordés dans ce billet pour des raisons de concision. Pour en savoir plus, consultez l'exemple d'écran de démarrage.

JavaScript

D'abord, ajoutez un balisage HTML pour l'écran de démarrage étendu (avec anneau de progression) sur votre page d'accueil.

<div id="extendedSplashScreen" class="extendedSplashScreen hidden">
<img id="extendedSplashImage" src="/images/splash.png" style="position: absolute;" />
<progress id="extendedSplashProgress" style="color: white;" class="win-medium win-ring"></progress>
</div>
 

Ensuite, ajoutez des styles CSS pour l'écran de démarrage étendu.

.extendedSplashScreen {
position: absolute;
text-align: center;
background-color: #000000;
height: 100%;
width: 100%;
top: 0px;
left: 0px;
}
.extendedSplashScreen.hidden {
display: none;
}

Là encore, commencez les tâches supplémentaires pendant l'activation et utilisez les arguments de l'événement d'activation pour obtenir l'objet écran de démarrage. Cette fois, l'objet écran de démarrage sera utilisé à la fois pour l'inscription à l'événement « dismissed » et pour la configuration de l'écran de démarrage. Interrogez l'écran de démarrage pour connaître la position de son image et organisez la disposition en fonction.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
// Begin executing setup operations.
performSetupTasks();

// Retrieve splash screen object.
var splash = eventArgs.detail.splashScreen;

// Register an event handler to be executed when the regular splash screen has been dismissed.
splash.addEventListener("dismissed", onSplashScreenDismissed, false);

// Display the extended splash screen.
displayExtendedSplash(splash);

WinJS.UI.processAll();
}
};

function displayExtendedSplash(splash) {
// Position the extended splash screen image in the same location as the system splash screen image.
var extendedSplashImage = document.getElementById("extendedSplashImage");
extendedSplashImage.style.top = splash.imageLocation.y + "px";
extendedSplashImage.style.left = splash.imageLocation.x + "px";
extendedSplashImage.style.height = splash.imageLocation.height + "px";
extendedSplashImage.style.width = splash.imageLocation.width + "px";

// Position the extended splash screen's progress ring.
var extendedSplashProgress = document.getElementById("extendedSplashProgress");
extendedSplashProgress.style.marginTop = splash.imageLocation.y + splash.imageLocation.height + 32 + "px";

// After the extended splash screen is set up,
// apply the CSS style that will make the extended splash screen visible.
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.removeClass(extendedSplashScreen, "hidden");
}

Spécifiez les tâches de chargement à effectuer pendant que l'écran de démarrage étendu est à l'écran. Une fois le chargement terminé, arrêtez l'écran de démarrage. Pensez à bien gérer les cas d'erreurs : si le chargement des tâches connaît un délai d'expiration ou échoue, présentez à l'utilisateur une page expliquant ce qui s'est passé.

function performSetupTasks() {
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
removeExtendedSplash();
}

function onSplashScreenDismissed() {
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

function removeExtendedSplash() {
var extendedSplashScreen = document.getElementById("extendedSplashScreen");
WinJS.Utilities.addClass(extendedSplashScreen, "hidden");
}

C#

Comme dans JavaScript, nous devons ajouter un balisage pour l'écran de démarrage étendu avec anneau de progression. Cette fois, nous utiliserons XAML.

<!-- This snippet represents the ExtendedSplash class -->
<Canvas Grid.Row="0">
<Image x:Name="extendedSplashImage" Source="images/splash.png" />
<ProgressRing x:Name="ProgressRing" Foreground="White"
HorizontalAlignment="Center" IsActive="True"
MaxHeight="30" MinHeight="30" MaxWidth="30"
MinWidth="30"></ProgressRing>
</Canvas>

Là encore, nous allons commencer par démarrer les tâches de chargement pendant l'activation. Nous obtiendrons ensuite l'objet écran de démarrage à partir des arguments de l'événement d'activation et afficherons l'écran de démarrage étendu.

async protected override void OnLaunched(LaunchActivatedEventArgs args)
{
// Begin executing setup operations.
PerformSetupTasks();

// Retrieve splash screen object.
SplashScreen splashScreen = args.SplashScreen;

ExtendedSplash eSplash = new ExtendedSplash(splashScreen);

// Register an event handler to be executed when the splash screen has been dismissed.
splashScreen.Dismissed += new TypedEventHandler<SplashScreen, object>(eSplash.onSplashScreenDismissed);
...

Window.Current.Content = eSplash;
Window.Current.Activate();
}

public ExtendedSplash(SplashScreen splash)
{
InitializeComponent();

// Position the extended splash screen image in the same location as the splash screen image.
this.extendedSplashImage.SetValue(Canvas.LeftProperty, splash.ImageLocation.X);
this.extendedSplashImage.SetValue(Canvas.TopProperty, splash.ImageLocation.Y);
this.extendedSplashImage.Height = splash.ImageLocation.Height;
this.extendedSplashImage.Width = splash.ImageLocation.Width;

// Position the extended splash screen's progress ring.
this.ProgressRing.SetValue(Canvas.TopProperty, splash.ImageLocation.Y + splash.ImageLocation.Height + 32);
this.ProgressRing.SetValue(Canvas.LeftProperty,
splash.ImageLocation.X +
(splash.ImageLocation.Width / 2) - 15);
}

Effectuez les tâches de chargement nécessaires pendant que l'écran de démarrage étendu est à l'écran, puis accédez à la page d'arrivée.

internal void PerformSetupTasks()
{
// Begin additional loading tasks here…
...

// Tear down the extended splash screen after all operations are complete.
RemoveExtendedSplash();
}

internal void onSplashScreenDismissed(Windows.ApplicationModel.Activation.SplashScreen sender, object e)
{
// The splash screen has been dismissed and the extended splash screen is now in view.
...
}

void RemoveExtendedSplash()
{
Window.Current.Content = new LandingPage();
}

Lancement différé d'une application

Le dernier modèle de lancement dont je vais parler est le lancement différé d'une application. Le lancement différé est similaire au lancement étendu, en cela qu'il permet de préparer la page d'arrivée avant de s'éloigner de l'écran de démarrage. Au lieu d'afficher un écran de démarrage « étendu » toutefois, l'application diffère la disparition de l'écran de démarrage classique jusqu'à ce que les tâches asynchrones aient été exécutées. Comme les applications ont un temps limité pour différer cette disparition, il est conseillé d'utiliser le modèle du lancement différé avec une grande parcimonie et d'effectuer principalement des opérations asynchrones simples, telles que la lecture des paramètres de base de l'application avant son lancement. En outre, si vous ne parvenez pas à gérer correctement les erreurs/exceptions durant ce délai, il est possible que le lancement s'arrête. Par conséquent, si votre application doit effectuer des appels réseau ou traiter de grands volumes de données, le modèle du lancement étendu d'une application convient mieux.

Vous trouverez ci-dessous un exemple de lancement différé avec l'application Photos de la version Consumer Preview. Lorsqu'un fichier .jpg est ouvert sur le Bureau, l'application Photos est lancée comme gestionnaire par défaut pour ce type de fichier. L'application Photos utilise le report pour charger la miniature de l'image avant la disparition de l'écran de démarrage. Cette utilisation du report est acceptable, car l'opération de récupération de la miniature peut s'effectuer relativement rapidement. Ensuite, lorsque l'utilisateur est dans l'application, l'image de résolution supérieure peut être acquise de manière asynchrone pour remplacer la miniature. Ce flux permet de s'assurer que lorsque l'utilisateur passe à l'application, la miniature est déjà à l'écran.

Voici le processus présenté dans l'image suivante :

  1. L'utilisateur clique sur l'image .jpg (Photos est le gestionnaire par défaut des fichiers .jpg).
  2. L'écran de démarrage apparaît.
  3. L'activation est différée pendant que la miniature est récupérée.
  4. L'application s'affiche avec la miniature dans la vue.

Lorsque l'utilisateur clique sur un fichier .jpg sur le Bureau, l'écran de démarrage du gestionnaire de fichiers .jpg apparaît. Ensuite, l'application diffère l'activation de sorte que l'écran de démarrage reste à l'écran jusqu'à ce que l'application ait traité le fichier .jpg. Une fois le fichier .jpg traité, l'application termine le report et présente la première vue avec la miniature .jpg. 
Flux du lancement différé d'une application.

Pour implémenter le flux du lancement différé dans JavaScript, le report d'activation doit être utilisé. Le report permet de différer la fin de l'activation jusqu'à ce que les opérations asynchrones soient terminées. Sinon, l'activation est terminée lorsque le rappel est renvoyé. Comme la plupart des API Windows Runtime sont asynchrones, cela est utile pour les applications qui veulent s'assurer que les opérations sont effectuées avant l'affichage de leur interface utilisateur initiale. En C#, les applications peuvent implémenter le report en retardant l'appel à Window.Current.Activate. Vous trouverez ci-dessous une démonstration des deux approches.

JavaScript

Le report d'activation peut être implémenté de deux façons dans JavaScript, selon la manière dont votre application gère l'activation.

Si votre application utilise WinJS pour gérer l'activation (paramètre par défaut pour les modèles de projet VS), utilisez le code suivant. Le fait d'appeler setPromise sur les arguments de l'événement d'activation retarde la fin de l'activation jusqu'à ce que les deux appels asynchrones (WinJS.UI.processAll et asyncOperation) soient terminés.

app.onactivated = function (eventArgs) {
if (eventArgs.detail.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
eventArgs.setPromise(WinJS.UI.processAll().then(function() {
return asyncOperation().done(function () { });
}));
}
};

Si vous procédez manuellement à l'inscription pour gérer l'événement d'activation, la méthode ActivatedOperation.getDeferral peut être utilisée. Ci-dessous, un objet de report est obtenu pendant l'activation et la méthode complete est appelée une fois toutes les tâches asynchrones effectuées.

Remarque : complete doit être appelée, que l'appel asynchrone ait réussi ou non. Si la méthode complete n'est pas appelée, l'application ne reviendra jamais de l'activation et le lancement de l'application connaîtra un délai d'expiration. Ce piège est courant lorsqu'on utilise ce modèle. Il est crucial que votre application gère tous les cas d'erreurs.

Windows.UI.WebUI.WebUIApplication.addEventListener("activated", onActivated, false);
function onActivated(eventArgs) {
if (eventArgs.kind === Windows.ApplicationModel.Activation.ActivationKind.launch) {
var deferral = eventArgs.activatedOperation.getDeferral();
asyncOperation().done(function () {
deferral.complete();
}, function (error) {
deferral.complete();
});
}
}

C#

Pour implémenter le report en C#, retardez simplement l'appel à Window.Current.Activate jusqu'à ce que vos opérations de chargement soient terminées. N'oubliez pas, tout comme dans JavaScript, vous ne devez retarder cet appel que brièvement pour réaliser des opérations simples. Si votre application ne parvient pas à activer sa fenêtre dans un délai raisonnable, le lancement connaît un délai d'expiration. En outre, les retards trop longs auront un impact négatif sur la perception des performances de votre application, ce qui ne vous attirera pas la faveur des utilisateurs.

protected override async void OnLaunched(LaunchActivatedEventArgs args)
{
// Create a frame to act navigation context and navigate to the first page.
var rootFrame = new Frame();
rootFrame.Navigate(typeof(BlankPage));

// Place the frame in the current Window and ensure that it is active.
Window.Current.Content = rootFrame;

// Use “await” to execute an async operation prior to activating a window.
// Remember, avoid lengthy operations here.
await asyncOperation();

Window.Current.Activate();
}

Conclusion

Dans ce billet, nous avons abordé quelques techniques visant à produire des lancements élégants. Pour distinguer l'apparence de votre application, nous avons examiné quatre modèles de conception spécifiques pouvant s'appliquer aux applications de style Metro. Au cours de la conception de vos applications, n'oubliez pas de donner la priorité au lancement des applications et d'utiliser les modèles décrits dans ce billet. Après tout, c'est votre première chance de donner une impression mémorable aux utilisateurs.

Pour plus d'informations sur l'activation, les écrans de démarrage ou le cycle de vie des applications, consultez les documents suivants :

Lien

Type

Points forts

Ajout d'un écran de démarrage

Documents

Section complète qui décrit à la fois l'écran de démarrage classique et l'écran de démarrage étendu. Vous y trouverez en outre des conseils utiles sur la conception.

Exemple d'écran de démarrage

Exemple

Exemple SDK montrant le modèle du lancement étendu d'une application en JavaScript, C#, C++ et VB.NET.

Classe SplashScreen

Référence API

Documentation API sur la classe SplashScreen.

Comment activer une application – VB/C#/C++ et XAML

Démarrage rapide

Didacticiel consacré à l'activation d'une application de style Metro en C#, C++ ou VB.NET.

Comment activer une application – JavaScript et HTML

Démarrage rapide

Didacticiel consacré à l'activation d'une application de style Metro en JavaScript.

Exemple d'activation et de suspension d'une application

Exemple

Exemple SDK montrant l'activation et la suspension d'une application de style Metro en JavaScript.

Espace de noms Windows.ApplicationModel.Activation

Référence API

Documentation API sur l'espace de noms d'activation.

Événement WebUIApplication.activated

Référence API

Documentation API sur l'événement d'activation.

Cycle de vie des applications

Article

Article expliquant le cycle de vie des applications de style Metro.

--Justin Cooperman, Chef de projet, Expérience utilisateur Windows

  • Loading...
Leave a Comment
  • Please add 6 and 7 and type the answer here:
  • Post