Erstellen eines schnellen und flüssigen Startvorgangs

Entwicklerblog für Windows 8-Apps

Ein Einblick in die Entwicklung von Apps im Metro-Stil – präsentiert vom Windows 8-Entwicklerteam

Erstellen eines schnellen und flüssigen Startvorgangs

  • Comments 3

Das Starten von Apps ist ein grundlegender Bestandteil eines schnellen und flüssigen Windows 8-Systems. Daher sollten Sie die Benutzeroberfläche für das Starten Ihrer Apps vorrangig behandeln. Mit einem ansprechenden und benutzerfreundlichen Startvorgang verbessern Sie den ersten Eindruck, den Ihre App hinterlässt. In diesem Beitrag möchte ich erläutern, wie Sie einen sinnvoll entworfenen und reaktionsschnellen Startvorgang für Apps entwickeln können. Zudem gehe auf darauf ein, warum der App-Start wichtig ist, um bei den Benutzern einen guten Eindruck zu machen. Ich stelle hierfür vier Entwurfsmuster für den App-Start vor, die Sie in Ihren Apps übernehmen können. Zudem spreche ich auf einige wichtige Aspekte an, die Sie bei der weiteren Entwicklung Ihrer Apps im Metro-Stil beachten sollten.

Übersicht zum Starten von Apps

Wenn Sie den Beitrag Lebenszyklusverwaltung und dynamische Apps bereits gelesen haben, sind Ihnen die Lebenszyklusstatus+ bekannt. Dieser Beitrag zielt auf den App-Start oder den Übergang vom Status „Nicht ausgeführt“ in den Status „Ausgeführt“ ab.

Diagramm, das den App-Status im gesamten Lebenszyklus von Apps im Metro-Stil einordnet: Der App-Start ist der Übergang vom Status „Nicht ausgeführt“ in den Status „Ausgeführt“.
  Lebenszyklusstatus: Der App-Start ist der Übergang vom Status „Nicht ausgeführt“ in den Status „Ausgeführt“.

Da der App-Start für den Benutzer relativ im Vordergrund steht, sollten Sie diesen Übergang gründlich planen. Der Übergang stellt nicht nur eine wichtige Komponente dar, sondern wird zudem von Benutzern häufig ausgeführt. Je mehr Verträge (siehe früheren Beitrag: Aktivierung von Windows 8-Verträgen in Apps) Sie implementieren, desto mehr Gründe haben Benutzer zum Starten Ihrer App. Ob Sie dabei einen positiven oder negativen ersten Eindruck hinterlassen ist davon abhängig, wie Sie diesen Übergang entworfen haben. Dies kann auch entscheidend dafür sein, ob Benutzer regelmäßig zu Ihrer App zurückkehren.

Bevor ich einige Methoden für den App-Start empfehle, sollten Sie möglicherweise die Abfolge der Vorgänge im Rahmen dieses Übergang rekapitulieren.

Wenn ein Benutzer auf die App-Kachel klickt, werden die App aktiviert und der Begrüßungsbildschirm angezeigt. Nach Abschluss der Startanimation wird der Begrüßungsbildschirm im Vollbildmodus angezeigt, bis die App als Fenster dargestellt wird. An diesem Punkt geht der Begrüßungsbildschirm in die erste Ansicht der App über.  Die Abfolge der Vorgänge beim App-Start.

Wenn Benutzer eine App starten, wird umgehend der Begrüßungsbildschirm angezeigt. Alle Apps im Metro-Stil verfügen über einen Begrüßungsbildschirm, der aus einem Bild im Format 620 x 300 und einem einfarbigen Hintergrund besteht. (Siehe Quickstart: Adding a splash screen, um zu erfahren, wie Sie Begrüßungsbildschirme anpassen können.) Der Begrüßungsbildschirm wird von Windows dargestellt, um die Benutzer zu begrüßen, während Ihre App aktiviert wird. Alle Apps erhalten beim Starten das activated-Ereignis, sodass diese die erste Benutzeroberfläche initalisieren kann. Dazu kann gehören, die Grundeinstellungen zu lesen, die Seite zu ermitteln, zu der navigiert werden soll und/oder zu identifizieren, ob die App für einen der verschiedenen Verträge aktiviert wurde. Wenn die App nach Abschluss der Initialisierung bereit ist, den Begrüßungsbildschirm auszublenden, muss das erste Fenster angezeigt werden. Bei JavaScript-Apps ist hierfür keine Arbeit erforderlich, da dieser Schritt beim Zurückgeben des Aktivierungs-Callbacks automatisch erfolgt. In C#-Apps muss dies jedoch ausdrücklich erfolgen, indem Window.Current.Activate aufgerufen wird. Achten Sie darauf, diesen Vorgang nicht zu verzögern, da Ihre App beendet wird, wenn innerhalb eines angemessenen Zeitraums (ca. 15 Sekunden) kein Fenster angezeigt wird. Zudem sollte das Fenster so schnell wie möglich angezeigt werden, da eine zu lange Anzeige des Begrüßungsfensters eine negative Wirkung auf den Benutzer haben kann. Es wird empfohlen, das Fenster innerhalb von zwei bis drei Sekunden anzuzeigen, um sicherzustellen, dass Ihre App auch auf weniger leistungsstarker Hardware stets wie erwartet startet.

Wenn der Begrüßungsbildschirm ausgeblendet und das Fenster der App angezeigt wird, übernehmen die Apps die weiteren Schritte. Sie müssen festlegen, wie auf Benutzer die Inhalte Ihrer Apps zugreifen können. Abhängig von der App eignen sich möglicherweise verschiedene Übergänge. In den nächsten Abschnitten möchte ich vier Entwurfsmuster für den App-Start empfehlen, die Sie ja nach den Anforderungen Ihrer Apps übernehmen können:

  • Standard-App-Start

Für Apps, die keinen zusätzlichen Ladevorgang erfordern und sofort verwendet werden können.

Beispiel: Eine Wörterbuch-App, mit der Benutzer verschiedene Begriffe nachschlagen oder übersetzen können. Die Startseite besteht lediglich aus einem Textfeld für die Benutzereingabe.

  • Skelett-App-Start

Gut geeignet für Apps, bei denen die Startseite beim Starten inkrementell aufgefüllt wird.

Beispiel: Eine Lese-App, die die Bücher, Magazine und Zeitungen des Benutzers nachverfolgt. Beim Starten wird die Bibliothek des Benutzers von der App inkrementell gefüllt.

  • Erweiterter App-Start

Für Apps mit längeren Ladevorgängen vor der Anzeige der Benutzeroberfläche. Diese können Netzwerkaufrufe oder umfassende Datei-E/A beinhalten.

Beispiel: Eine Sport-App für die Anzeige aktueller Ergebnisse und Highlights. Die App verwendet REST-APIs, um diese Informationen über das Netzwerk abzurufen, und zeigt auf der Startseite Echtzeitdaten an.

  • Verzögerter App-Start

Hilfreich für Apps, die beim Start grundlegende asynchrone Aufgaben wie z. B. das Abfragen und Prüfen von App-Einstellungen beim ersten Ausführen abschließen müssen.

Beispiel: Ein Spiel, bei dem ermittelt werden muss, ob der Benutzer bereits ein Konto erstellt hat. Diese Information ist erforderlich, um zu ermitteln, welche Seite dem Benutzer angezeigt werden soll.

Standard-App-Start

Für viele Anwendungen ist der Standard-App-Start optimal geeignet. Hierbei werden die Anzeige und das Ausblenden der App-Begrüßungsbildschirme von Windows übernommen. Der Begrüßungsbildschirm wird angezeigt, bis die Aktivierung abgeschlossen ist. Anschließend wird ein Fenster angezeigt, das einen animierten Übergang zur Startseite der App auslöst. Verwenden Sie den Standardstartvorgang, wenn Sie über eine statische Startseite verfügen, die nicht von zusätzlichen Ladevorgängen abhängig ist. Wenn Ihre Inhalte umgehend bereit sind, müssen Sie den App-Start nicht künstlich verzögern. Sie sollten dies letztlich auch nicht tun!

Im Folgenden finden Sie ein Beispiel des Standardstartvorgangs mit Internet Explorer 10 in der Consumer Preview. Beim Starten der App wird umgehend der Begrüßungsbildschirm angezeigt. Der Begrüßungsbildschirm wird solange angezeigt, bis die App aktiviert ist. Nun geht der Begrüßungsbildschirm in die Startseite über. In diesem Fall wird als Startseite die letzte vom Benutzer besuchte Seite angezeigt. Diese ist direkt verfügbar, da sie bei der letzten Sitzung gespeichert wurde.

Im Folgenden wird dieser Vorgang dargestellt:

  1. Klick auf die App-Kachel
  2. Anzeige des Begrüßungsbildschirms
  3. Anzeige der App-Startseite

Beim Klicken auf die Kachel wird der Begrüßungsbildschirm angezeigt. Sobald die erste Ansicht der App bereit ist, geht der Begrüßungsbildschirm in die Startseite der App über. 
Der Standard-App-Start.

Für das Implementieren des Standardstarts ist keine zusätzliche Arbeit erforderlich. Geben Sie im App-Manifest einfach das Begrüßungsbildschirmbild im Format 620 x 300 an, und entwerfen Sie die Startseite mithilfe statischer Inhalte. Nach Abschluss der Aktivierung geht der Begrüßungsbildschirm in die Startseite über, und die App kann verwendet werden.

Skelett-App-Start

Für die Mehrzahl der Apps eignet sich der Standardstartvorgang ideal. Im Anschluss an das Ausblenden des Begrüßungsbildschirms wird die App ausgeführt und kann verwendet werden. Einige Apps jedoch sind an diesem Punkt möglicherweise noch nicht vollständig bereit, da nach dem Starten Inhalte dynamisch geladen werden müssen. Für diese App-Klasse können mit dem Muster des Skelett-App-Starts sinnvolle Ladeinformationen bereitgestellt und in der App so schnell wie möglich angezeigt werden. Bei diesem Muster geht der Begrüßungsbildschirm in eine Skelett-Startseite (die Startseite, wie sie ohne Inhalte dargestellt würde) über, während die Inhalte abgerufen werden. Indem Sie der Seite eine Statusanzeige hinzufügen, wird verdeutlicht, dass die App nach wie vor geladen wird. Im folgenden Bild wird eine Beispiel des Skelettstartvorgangs anhand der Musik-App der Consumer Preview dargestellt. Hier wird die Skelettstartseite angezeigt, während die aktuellen Musiktitel abgerufen werden.

Im Folgenden wird dieser Vorgang dargestellt:

  1. Klick auf die App-Kachel
  2. Anzeige des Begrüßungsbildschirms
  3. Anzeige der Skelettstartseite (Beachten Sie oben auf der Seite die Statusanzeige.)
  4. Anzeige der App-Startseite

Beim Klicken auf die Kachel wird der Begrüßungsbildschirm angezeigt. Anschließend wird als erste Ansicht eine Skelettstartseite der App angezeigt. Bei der Skelettstartseite handelt es sich um die Startseite ohne Inhalte. Wenn der Begrüßungsbildschirm in die Skelettstartseite übergeht, beginnt die App mit dem inkrementellen Auffüllen der Seite.  Der Skelett-Anwendungsstart.

Erstellen Sie zum Implementieren des Skelettstartvorgangs eine statische Skelettansicht der App-Startseite, die als Startseite angezeigt wird. Mit der Aktivierung sollten die für das Auffüllen der Seite mit Inhalten erforderlichen Ladeaufgaben durchgeführt werden. Da die meisten Vorgänge asynchron verlaufen, wird der Begrüßungsbildschirm möglicherweise bereits während der Durchführung dieser Aufgaben ausgeblendet. Daher wird den Benutzern eine Startseite angezeigt, die inkrementell aufgefüllt wird.

Wenn Sie wissen möchten, zu welchem Zeitpunkt der Begrüßungsbildschirm ausgeblendet wurde, können Sie die Begrüßungsbildschirm-API verwenden. Die API beinhaltet das SplashScreen.Dismissed-Ereignis, das angibt, wann der Übergang vom Begrüßungsbildschirm zur App-Startseite aufgetreten ist. Dies kann hilfreich sein, wenn Sie wissen möchten, zu welchem Zeitpunkt Ihre Skelettstartseite angezeigt wird.

JavaScript

Wie Sie im folgenden Beispiel sehen, kann Ihre App mit dem Ausführen der Vorgänge zum Auffüllen der Startseite innerhalb des Aktivierungs-Callbacks beginnen. Um zusätzlich zu erfahren, zu welchem Zeitpunkt der Begrüßungsbildschirm ausgeblendet wird, verwenden Sie die aktivierten eventArgs, um das splash screen-Objekt abzurufen. Mithilfe dieses Objekts kann das „dismissed“-Ereignis registriert werden, damit Sie über das Ausblenden des Begrüßungsbildschirms benachrichtigt werden.

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#

Die Implementierung ist in C# identisch. Starten Sie bei der Aktivierung die zum Auffüllen der Startseite erforderlichen Vorgänge. Rufen Sie anschließend optional das „splash screen“-Objekt von den aktivierten eventArgs ab, und registrieren Sie, um über das Ausblenden des Begrüßungsbildschirms benachrichtigt zu werden.

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.
...
}

Erweiterter App-Start

Für Apps, die nach dem Starten weitere Ladevorgänge durchführen müssen, stellt der Skelett-App-Start eine hervorragende Möglichkeit dar. Dies hat jedoch einen Nachteil: Da die Benutzer direkt zur Skelettstartseite gelangen, kann der Gesamtladevorgang etwas unzusammenhängend wirken. Der Übergang vom Begrüßungsbildschirm zur Skelettstartseite kann bei den Benutzern den Eindruck hinterlassen, dass zwei unabhängige Ladevorgänge vorhanden sind. Wenn dies vermieden werden soll, stellt der erweiterte App-Start eine optimale Alternative dar.

Bei diesem Verfahren wird das Konzept eines erweiterten Begrüßungsbildschirms verwendet, um einen nahtlosen Ladevorgang zu erhalten. Wenn der eigentliche Begrüßungsbildschirm ausgeblendet wird, zeigt die App anstelle der Startseite einen erweiterten Begrüßungsbildschirm an. Der erweiterte Begrüßungsbildschirm gehört vollständig zur App und wird mit der Begrüßungsbildschirm-API formatiert. Die API beinhaltet Positionierungsinformationen, die sicherstellen, dass das Erscheinungsbild des erweiterten Begrüßungsbildschirms optisch mit dem des eigentlichen Begrüßungsbildschirms identisch ist (mit Ausnahme einer Statusanzeige oder von Ladedetails). Auf diese Weise werden die unabhängig wirkenden Ladevorgänge vereinheitlicht. Während der Anzeige des erweiterten Begrüßungsbildschirms kann die App weiter die Aufgaben zur Fertigstellung der Startseite durchführen. Nach Abschluss des Ladevorgangs erfolgt der Übergang vom erweiterten Begrüßungsbildschirm zur Startseite.

Der erweiterte Startvorgang eignet sich insbesondere dann, wenn die Initialisierung länger dauern kann (z. B. bei Unvorhersagbarkeiten bei der Netzwerkverbindung). Wenn während des Startvorgangs „Schwerarbeit“ verrichtet werden muss, ist der erweiterte Begrüßungsbildschirm die ideale Wahl. Zudem eignet er sich hervorragend, um sicherzustellen, dass die Startseite vor dem Übergang vollständig aktualisiert wurde (wenn keine zwischengespeicherten Daten angezeigt werden sollen).

Im folgenden Beispiel wird der erweiterte Startvorgang anhand der Wetter-App aus der Windows 8 Consumer Preview dargestellt. Eine Wetter-App ist ein gutes Beispiel für die Implementierung des erweiterten Startmusters, da der erweiterte Begrüßungsbildschirm angezeigt werden kann, während die aktuellen Wetterdaten aus dem Netzwerk abgerufen werden (es ist wenig sinnvoll, dem Benutzer zwischengespeicherte Wetterdaten anzuzeigen).

Im Folgenden wird dieser Vorgang dargestellt:

  1. Klick auf die App-Kachel
  2. Anzeige des Begrüßungsbildschirms
  3. Anzeige des erweiterten Begrüßungsbildschirms (mit Statusanzeige)
  4. Anzeige der App-Startseite

Beim Klicken auf die Kachel wird der Begrüßungsbildschirm angezeigt. Anschließend wird von der App als erste Ansicht ein erweiterter Begrüßungsbildschirm angezeigt. Der erweiterte Begrüßungsbildschirm ist optisch mit dem eigentlichen Begrüßungsbildschirm identisch, er gehört jedoch zur App. Auf diese Weise kann die App Ladevorgänge starten und zur eigentlichen Startseite übergehen, sobald diese abgeschlossen sind. 
Der erweiterte App-Start.

Zum Implementieren des erweiterten App-Start wird die Begrüßungsbildschirm-API verwendet. Mithilfe von SplashScreen.ImageLocation können Anwendungen die Bildkoordinaten für das Begrüßungsbildschirmbild abrufen. Dies ist wichtig, da das Bild des erweiterten Begrüßungsbildschirms an genau derselben Stelle angezeigt werden muss, damit der Benutzer den Eindruck eines nahtlosen Übergangs gewinnt. Wie im vorherigen Abschnitt angedeutet, gibt die API auch das SplashScreen.Dismissed-Ereignis aus, das Sie über den Übergang vom eigentlichen Begrüßungsbildschirm zu Ihrem erweiterten Begrüßungsbildschirm benachrichtigt.

Wie oben beschrieben können Sie bei der Aktivierung weitere Aufgaben auslösen. Im Folgenden gehen wir die Implementierung eines erweiterten Begrüßungsbildschirms (mit optionaler Statusanzeige) sowohl in JavaScript als auch C# durch.

Hinweis: Beim Implementieren eines erweiterten Begrüßungsbildschirms müssen auch das An- und Abdocken, Drehungen usw. beachtet werden. Diese Details werden in diesem Beitrag der Kürze halber ausgelassen. Weitere Beispiele finden Sie im Begrüßungsbildschirmbeispiel.

JavaScript

Fügen Sie Ihrer Startseite zunächst HTML-Markup für den erweiterten Begrüßungsbildschirm (mit Statusanzeige) hinzu.

<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>
 

Fügen Sie anschließend CSS-Formatvorlagen für den erweiterten Begrüßungsbildschirm hinzu.

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

Fügen Sie auch hier zusätzliche Aufgaben während der Aktivierung hinzu, und verwenden Sie die aktivierten „eventArgs“ zum Abrufen des „splash screen“-Objekts. An dieser Stelle wird das „splash screen“-Objekt sowohl für die Registrierung des „dismissed“-Ereignisses als auch für das Einrichten des erweiterten Begrüßungsbildschirms verwendet. Fragen Sie das „splash screen“-Objekt nach der Position des Begrüßungsbildschirmbilds ab, und richten Sie das Layout entsprechend aus.

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");
}

Geben Sie die während der Anzeige des erweiterten Begrüßungsbildschirms abzuschließenden Ladeaufgaben an. Blenden Sie nach Abschluss des Ladevorgangs den erweiterten Begrüßungsbildschirm aus. Stellen Sie sicher, dass Fehler angemessen behandelt werden. Wenn bei Ladeaufgaben eine Zeitüberschreitung oder ein Fehler auftritt, muss dem Benutzer eine Seite mit einer entsprechenden Erklärung angezeigt werden.

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#

Wie in JavaScript muss für den erweiterten Begrüßungsbildschirm und die Statusanzeige Markup hinzugefügt werden. Hier jedoch verwenden wir 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>

Auch hier werden Ladeaufgaben bei der Aktivierung gestartet. Anschließend rufen wir das „splash screen“-Objekt aus den aktivierten „eventArgs“ ab, um den erweiterten Begrüßungsbildschirm anzuzeigen.

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);
}

Führen Sie während der Anzeige des erweiterten Begrüßungsbildschirms die erforderlichen Ladeaufgaben aus, und navigieren Sie anschließend zur Startseite.

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();
}

Verzögerter App-Start

Als letztes Startmuster beschäftigen wir uns mit dem verzögerten App-Start. Der verzögerte Start ähnelt dem erweiterten, da auch hier die Startseite vor dem Ausblenden des Begrüßungsbildschirms vorbereitet wird. Anstatt jedoch einen „erweiterten“ Begrüßungsbildschirm anzuzeigen, verzögert die App die Anzeige des eigentlichen Begrüßungsbildschirms, bis alle asynchronen Aufgaben abgeschlossen wurden. Da den Apps für diese Verzögerung nur ein begrenzter Zeitraum zur Verfügung steht, sollte das Verzögerungsmuster nur sparsam und hauptsächlich dann verwendet werden, wenn einfache asynchrone Vorgänge wie z. B. das Lesen von App-Einstellungen vor der Anzeige der App abgeschlossen werden sollen. Wenn während dieses Zeitraums Fehler oder Ausnahmen nicht entsprechend behandelt werden, kann es zudem zu einem Abbruch des Startvorgangs kommen. Daher sollte für Apps, die Netzwerkaufrufe tätigen oder große Datenmengen verarbeiten müssen, stattdessen das Skelett- oder das erweiterte App-Startmuster verwendet werden.

Im Folgenden finden Sie ein Beispiel für einen verzögerten Start für die Fotos-App aus der Consumer Preview. Beim Öffnen einer JPG-Datei auf dem Desktop wird die Fotos-App als Standardhandler für diesen Dateityp geöffnet. Die Fotos-App verwendet beim Laden der Miniaturansicht des Bilds ein verzögertes Ausblenden des Begrüßungsbildschirms. Diese Verzögerung ist zulässig, da das Abrufen der Miniaturansicht relativ schnell abgeschlossen werden kann. Anschließend kann in der App das höher aufgelöste Bild asynchron abgerufen werden, um die Miniaturansicht zu ersetzen. Mit diesem Verfahren wird sichergestellt, dass bereits beim Übergang des Benutzers zur App die Miniaturansicht angezeigt wird.

Im Folgenden wird dieser Vorgang dargestellt:

  1. Klick auf das JPG-Bild (die Fotos-App ist der Standardhandler für JPG-Dateien)
  2. Anzeige des Begrüßungsbildschirms
  3. Verzögerte Aktivierung, während die Miniaturansicht abgerufen wird
  4. Anzeige der App mit Miniaturansicht

Beim Klicken auf eine JPG-Datei auf dem Desktop wird der Begrüßungsbildschirm für den JPG-Dateihandler angezeigt. Anschließend verzögert die App die Aktivierung, sodass der Begrüßungsbildschirm solange angezeigt wird, bis die JPG-Datei von der App verarbeitet wurde. Im Anschluss an die Verarbeitung der JPG-Datei beendet die App die Verzögerung und zeigt zunächst die Miniaturansicht der JPG-Datei an. 
Der verzögerte App-Start.

Für die Implementierung des verzögerten App-Starts muss in JavaScript eine Aktivierungsverzögerung verwendet werden. Mithilfe der Verzögerung können die Apps den Aktivierungsabschluss verzögern, bis die asynchronen Vorgänge abgeschlossen sind. Andernfalls wird die Aktivierung mit der Rückgabe des Callbacks abgeschlossen. Da die meisten Windows-Runtime-APIs asynchron sind, ist dieses Muster für Apps geeignet, bei denen vor der Anzeige der Benutzeroberfläche der ersten Ansicht alle Vorgänge abgeschlossen sein sollen. In C# kann die Verzögerung implementiert werden, indem der Aufruf von Window.Current.Activate verzögert wird. Im Folgenden werden beide Ansätze dargestellt.

JavaScript

Die Aktivierungsverzögerung kann in JavaScript je nach Aktivierungsmethode der App auf zwei Weisen implementiert werden.

Wenn für die App-Aktivierung WinJS verwendet wird (Standard für VS-Projektvorlagen), verwenden Sie den folgenden Code. Durch Aufrufen von „setPromise“ der „eventArgs“ für die Aktivierung wird der Aktivierungsabschluss verzögert, bis beide asynchronen Aufrufe (WinJS.UI.processAll und asyncOperation) abgeschlossen wurden.

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

Wenn Sie die Verarbeitung des „activated“-Ereignisses manuell registrieren, kann die Methode ActivatedOperation.getDeferral verwendet werden. Im Folgenden wird bei der Aktivierung ein „deferral“-Objekt abgerufen. Zudem wird nach Abschluss aller asynchronen Aufgaben complete aufgerufen.

Hinweis: „Complete“ muss unabhängig davon aufgerufen werden, ob der asynchrone Aufruf erfolgreich war. Wenn „complete“ nicht aufgerufen wird, kehrt die App nicht mehr aus der Aktivierung zurück, und eine Zeitüberschreitung tritt auf. Dies ist ein häufiger Nachteil dieses Musters. Es ist wichtig, dass die Anwendung alle Fehler behandelt.

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#

Um die Verzögerung in C# zu implementieren, schieben Sie einfach den Aufruf von Window.Current.Activate auf, bis die Ladevorgänge abgeschlossen wurden. Denken Sie daran, dass dieser Aufruf wie in JavaScript nur kurz verzögert werden darf, um einfache Vorgänge abzuschließen. Wenn das Fenster der App nicht innerhalb eines angemessenen Zeitraums erfolgreich aktiviert wurde, tritt beim Start eine Zeitüberschreitung auf. Zudem wirken sich längere Verzögerungen negativ auf die wahrgenommene Leistung Ihrer App und somit auch auf die Benutzerfreundlichkeit aus.

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();
}

Fazit

In diesem Beitrag wurden einige Techniken für das Erstellen eines eleganten Startvorgangs erläutert. Um das Erscheinungsbild Ihrer App abzuheben, haben wir vier Entwurfsmuster für Apps im Metro-Stil betrachtet. Denken Sie beim Erstellen Ihrer Apps daran, den App-Start vorrangig zu behandeln, und die in diesem Beitrag vorgestellten Muster zu verwenden. Letzten Endes handelt es sich um Ihre erste Chance, einen bleibenden Eindruck bei den Benutzern zu hinterlassen.

Weitere Informationen zur Aktivierung, zu den Begrüßungsbildschirmen oder zum App-Lebenszyklus finden Sie in den folgenden Ressourcen:

Link

Typ

Highlights

Adding a splash screen

Dokumentationen

Ausführlicher Abschnitt mit Erläuterungen zum Begrüßungsbildschirm und zum erweiterten Begrüßungsbildschirm. Hier finden Sie zudem hilfreiche Entwurfsrichtlinien.

Begrüßungsbildschirmbeispiel

Beispiel

SDK-Beispiel für das erweiterte App-Startmuster in JavaScript, C#, C++ und VB.NET.

„SplashScreen“-Klasse

API-Referenz

API-Dokumentation für die Begrüßungsbildschirmklasse.

How to activate an app – VB/C#/C++ und XAML

Schnellstart

Anleitung zum Aktivieren von Apps im Metro-Stil in C#, C++ oder VB.NET.

How to activate an app – JavaScript und HTML

Schnellstart

Anleitung zum Aktivieren von Apps im Metro-Stil in JavaScript.

App activation and suspension sample

Beispiel

SDK-Beispiel für das Aktivieren und Verzögern von Apps im Metro-Stil in JavaScript.

„Windows.ApplicationModel.Activation“-Namespace

API-Referenz

API-Dokumentation für den Aktivierungsnamespace.

„WebUIApplication.activated“-Ereignis

API-Referenz

API-Dokumentation für das „activated“-Ereignis.

Application lifecycle

Artikel

Artikel über den Lebenszyklus von Apps im Metro-Stil.

--Justin Cooperman, Programmmanager, Windows User Experience

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