Arbeiten mit Kacheln und dem Begrüßungsbildschirm

Arbeiten mit Kacheln und dem Begrüßungsbildschirm in Hilo (Windows Store-Apps mit JavaScript und HTML)

[ Dieser Artikel richtet sich an Windows 8.x- und Windows Phone 8.x-Entwickler, die Windows-Runtime-Apps schreiben. Wenn Sie für Windows 10 entwickeln, finden Sie weitere Informationen unter neueste Dokumentation]

Aus: Umfassende Entwicklung einer Windows Store-App mit JavaScript: Hilo

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Durch eine effiziente Nutzung von Kacheln und des Begrüßungsbildschirms können Sie Benutzern einen sehr guten ersten Eindruck Ihrer Windows Store-App vermitteln.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zu dem heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Sie erfahren Folgendes:

  • Integration einer App-Kachel zum Anzeigen der Fotos des Benutzers.
  • Hinzufügung des Begrüßungsbildschirms.
  • Überlegungen hinsichtlich erforderlicher Maßnahmen für die eigene App.

Betrifft

  • Windows-Runtime für Windows 8
  • Windows-Bibliothek für JavaScript
  • JavaScript

Warum sind Kacheln wichtig?

Traditionelle Windows-Desktop-Apps verwenden Symbole. Symbole helfen, eine App oder einen Dateityp visuell mit einer bestimmten Marke oder einem bestimmten Verwendungszweck zu verknüpfen. Symbole sind statische Ressourcen. Sie können daher häufig bis zum Ende des Entwicklungszyklus warten, bis Sie diese integrieren. Kacheln sind jedoch nicht mit Symbolen vergleichbar. Kacheln bringen Lebendigkeit und Persönlichkeit ins Spiel und können eine individuelle Verbindung zwischen der App und dem Benutzer schaffen. Ziel des Einsatzes von Kacheln ist es, den Benutzer über diese individuelle Verbindung zu einer wiederholten Nutzung zu animieren.

Tipp  Im Hinblick auf Hilo war früh klar, dass die Fotos des Benutzers mithilfe einer Kachel angezeigt werden sollten. Dagegen stehen bei anderen Apps die Inhalte, die Benutzer zu einer wiederholten Nutzung animieren sollen, oftmals erst zu einem späteren Zeitpunkt fest. Wir empfehlen daher, die Unterstützung für Kachelaktualisierungen bereits beim Erstellen des Projekts hinzuzufügen, auch wenn die Inhalte, die die Kachel später anzeigen soll, dann u. U. noch nicht feststehen. Wenn später eine entsprechende Entscheidung getroffen wird, ist die erforderliche Infrastruktur dann bereits vorhanden, und die Notwendigkeit, Code für diese Zwecke umzuarbeiten, entfällt.
 

[Nach oben]

Auswählen einer Kachelstrategie

Beim Auswählen einer Kachelstrategie stehen einige Optionen zur Verfügung. Sie müssen eine quadratische Kachel bereitstellen und können optional eine breite Kachel zur Verfügung stellen. Wenn Sie eine breite Kachel bereitstellen, kann der Benutzer anstelle der breiten Kachel die quadratische Kachel anzeigen. Außerdem können Sie Signale und Benachrichtigungen auf Ihrer Kachel anzeigen.

Hinweis  Da es sich bei Hilo um eine Foto-App handelt, stand von Anfang an fest, dass die Fotos des Benutzers mithilfe der Kachel angezeigt werden sollten. Bilder können sowohl auf quadratischen als auch auf breiten Kacheln angezeigt werden. Da breite Kacheln das Anzeigen mehrerer Bilder ermöglichen, haben wir uns entschieden, beide Formate zu unterstützen. Informationen zum Auswählen der richtigen Kacheln für Ihre App finden Sie unter Wählen zwischen quadratischen oder breiten Kacheln.
 

Das Kachelverhalten sollte sich nach folgenden Regeln richten:

  • Bevor die App überhaupt gestartet wird, sollte standardmäßig eine breite Kachel mit dem Hilo-Logo angezeigt werden.
  • Immer wenn die App gestartet oder fortgesetzt wird, sollten sowohl die quadratischen als auch die breiten Kacheln gemäß den nachstehenden Regeln aktualisiert werden:
    • Bei weniger als fünf Bildern im Ordner "Bilder" des Benutzers sollte die Standardkachel mit dem Hilo-Logo angezeigt werden.
    • Andernfalls sollten 15 zufällige Bilder aus den 30 aktuellsten ausgewählt werden, und die Benachrichtigungswarteschlange sollte drei Stapel mit je fünf Bildern durchlaufen. Wenn der Benutzer sich für eine quadratische Kachel entscheidet, wird nur das erste Bild des jeweiligen Stapel angezeigt.

Informationen über die Beziehungen zwischen den verschiedenen Kachelfunktionen und den einzelnen Kachelstilen finden Sie unter Richtlinien und Prüfliste für Kacheln. Sie können Benachrichtigungen für die quadratische Kachel bereitstellen. Wir möchten jedoch auch die breite Kachel aktivieren, um mehrere Bilder anzeigen zu können.

Tipp  

Sie können auch sekundäre Kacheln für Ihre App aktivieren. Mit einer sekundären Kachel kann ein Benutzer bestimmten Inhalt oder bestimmte Erfahrungen aus einer App an die Startseite anheften, um den direkten Zugriff auf diesen Inhalt oder diese Erfahrung zu ermöglichen. Weitere Informationen über sekundäre Kacheln finden Sie unter Anheften von Sekundärkacheln.

 

[Nach oben]

Entwerfen der Logobilder

Unsere UX-Designer haben das kleine, das quadratische sowie das breite Logo unter Berücksichtigung der jeweiligen Anforderungen an die Pixelbreite gestaltet. Das vom Designer vorschlagene Design eignet sich gut für die Marke "Hilo". Die Auswahl eines kleinen Logo für Ihre App hilft Benutzern, Ihre App zu identifizieren, wenn benutzerdefinierter Inhalt von der Kachel angezeigt wird. Dies ist insbesondere von Bedeutung, wenn sich der Inhalt der Kachel häufig ändert – schließlich sollen Benutzer Ihre App in jedem Fall rasch finden und leicht erkennen können. Das kleine Hilo-Logo weist einen transparenten Hintergrund auf und eignet sich damit sehr gut für die Darstellung über einer Kachelbenachrichtigung oder vor einem anderen Hintergrund.

Das kleine, das quadratische und das breite Logobild sind im Ordner images enthalten. Weitere Informationen zum Arbeiten mit Bildressourcen finden Sie unter Schnellstart: Verwenden von Datei- oder Bildressourcen und So wird's gemacht: Benennen von Ressourcen mithilfe von Qualifizierern.

30 x 30 Pixel

150 x 150 Pixel

310 x 150 Pixel

Wichtig  Das kleine Logo wird über einer Kachelbenachrichtigung angezeigt. Beachten Sie daher, dass das Farbschema für die Vor- und für die Hintergrundfarbe entsprechend abgestimmt werden müssen. Dies stellte im Falle von Hilo eine ganz besondere Herausforderung dar, da i. d. R. nicht bekannt ist, in welchen Farben die Fotos der Benutzer angezeigt werden. Wir haben mit mehreren Vordergrundfarben experimentiert und uns dann für Weiß entschieden, da sich diese Farbe am besten für die Anzeige über den meisten Bildern zu eignen schien. Diese Entscheidung berücksichtigt auch die Tatsache, dass Weiß in den meisten Bildern nicht als dominante Farbe vorkommt.
 

[Nach oben]

Platzieren der Logos auf den Standardkacheln

Mit dem Manifest-Editor von Visual Studio können Sie die Standardkacheln relativ einfach hinzufügen. Nähere Informationen dazu finden Sie unter Schnellstart: Erstellen einer Standardkachel im Manifest-Editor von Visual Studio.

[Nach oben]

Aktualisieren von Kacheln

Die Kacheln werden mithilfe von Kachelvorlagen aktualisiert. Kachelvorlagen ermöglichen es Ihnen, auf Basis von XML die Bilder und den Text anzugeben, mit denen eine Kachel angepasst werden kann. Der Windows.UI.Notifications-Namespace stellt Klassen zum Aktualisieren der Kacheln auf dem Startbildschirm bereit. In Hilo haben wir die TileUpdateManager- und die TileUpdater-Klasse verwendet, um die Kachelvorlage abzurufen und die Benachrichtigungen in die Warteschlange zu verschieben. Hilo definiert den Hilo.Tiles-Namespace und ein TileUpdater-Objekt, um die Bilder auszuwählen, die auf der Kachel angezeigt werden sollen, und den XML-Code zu bilden, der für die Windows-Runtime bereitgestellt wird.

Breite Hilo-Kachel mit fünf zufälligen Fotos

Hinweis  Jede Kachelvorlage ermöglicht das Anzeigen von Bilder und/oder Text. Wir haben TileTemplateType.TileWideImageCollection für die breite Kachel ausgewählt, da hier die größte Anzahl an Bildern angezeigt wird. Außerdem war es in diesem Fall nicht erforderlich, weiteren Text auf der Kachel anzuzeigen. Darüber hinaus verwenden wir TileSquareImage, um das erste Bild in der Sammlung des Benutzers anzuzeigen, wenn sich dieser für die Verwendung der quadratischen Kachel entscheidet. Die vollständige Optionsliste finden Sie unter TileTemplateType.
 

Die Kachelaktualisierungen werden in der TileUpdater.update-Methode der App vorgenommen. Diese Methode wird beim Initialisieren der App in default.js aufgerufen.

Hilo\default.js


if (currentState.kind === activation.ActivationKind.launch) {

    if (currentState.previousExecutionState !== activation.ApplicationExecutionState.terminated) {

        // When the app is started, we want to update its tile
        // on the start screen. Since this API is not accessible 
        // inside of Blend, we only invoke it when we are not in
        // design mode.
        if (!Windows.ApplicationModel.DesignMode.designModeEnabled) {
            var tileUpdater = new Hilo.Tiles.TileUpdater();
            tileUpdater.update();
        }


Hinweis  Zunächst sollten die Kacheln aktualisiert werden, wenn die App angehalten wird, und nicht, wenn sie initialisiert wird. Dadurch sollte die Aktualisierungshäufigkeit verbessert werden. Dem entgegen stand jedoch die Anforderung an jede Windows Store-App, so schnell wie möglich angehalten werden zu können. Zusätzlicher Aufwand beim Anhalten der App war also nach dieser Prämisse zu vermeiden. Weitere Informationen finden Sie unter Optimieren des App-Lebenszyklus.
 

Die TileUpdater.update-Methode führt folgende Schritte aus, um die Kachel im Hintergrund zu aktualisieren:

  • Erstellung eines lokalen Ordners, um eine Kopie der Miniaturbilder zu speichern, die auf der Kachel angezeigt werden (createTileFriendlyImages-Funktion).
  • Bei 30 oder mehr Fotos in der Sammlung des Benutzers:
    • Generierung von Miniaturbildern für die 30 Fotos im lokalen App-Ordner. (Dies wird in der createTileFriendlyImages-Funktion implementiert.)
    • Zufällige Auswahl von 15 der 30 letzten Fotos. (Dies wird in der createTileUpdates-Funktion implementiert.)
    • Erstellen von drei Stapeln mit je fünf Fotos. (Dies wird in der createTileUpdates-Funktion implementiert.)
  • Erstellung der Benachrichtigung und Aktualisierung der Kachel. (Dies wird in den Funktionen createTileUpdates und queueTileUpdates implementiert.)

Unter Überprüfen der URLs wird beschrieben, wie Sie auf die Bilder in Ihrer Kachelbeschreibung verweisen können. Für Hilo verwenden wir ms-appdata:///local/, da hier Miniaturbilder in einen lokalen App-Ordner kopiert werden.

Hinweis  Miniaturbilder nehmen nur wenige Bytes in Anspruch. Auch bei Auswahl sehr großer Bild für eine Kachel nimmt das Kopieren der Miniaturbilder daher nur wenig Zeit und Speicherplatz in Anspruch.
 

Fotos werden aus zwei Gründen in einen lokalen App-Ordner kopiert. Erstens sollten Miniaturversionen der Bilder nicht im persönlichen Ordner des Benutzers gespeichert werden. Zweitens sollte nicht direkt auf den persönlichen Ordner des Benutzers verwiesen werden, falls der Benutzer ein Bild löschen möchte, das auf der Kachel angezeigt wird.

Im folgenden Beispiel wird die TileUpdater.update-Methode veranschaulicht. Mit diesem Code wird der Vorgang zum Erstellen des Ordners für Miniaturbilder gesteuert, die Bilder werden ausgewählt, und die Kachel wird aktualisiert. Es wird eine Kette von Aufgaben erstellt, mit denen die Aktualisierungsvorgänge durchgeführt werden. Einige der Aufgaben hier werden synchron ausgeführt. Wir verwenden jedoch das asynchrone Programmiermodell, eine Zusagenkette. Wir verwenden diese, weil wir auch Aufrufe von asynchronen Funktionen der Windows-Runtime, z. B. getThumbnailAsync, eingebettet haben. Die Windows-Runtime umschließt alle APIs in einem zugesagten Objekt, um asynchrone Methodenaufrufe zu unterstützen. Deshalb wird das asynchrone Modell verwendet. Der Code wird dadurch einheitlicher und besser lesbar.

Hilo\Hilo\Tiles\TileUpdater.js


update: function () {
    // Bind the function to a context, so that `this` will be resolved
    // when it is invoked in the promise.
    var queueTileUpdates = this.queueTileUpdates.bind(this);

    // Build a query to get the number of images needed for the tiles.
    var queryBuilder = new Hilo.ImageQueryBuilder();
    queryBuilder.count(numberOfImagesToRetrieve);

    // What follows is a chain of promises. These outline a number of 
    // asychronous operations that are executed in order. For more 
    // information on how promises work, see the readme.txt in the 
    // root of this project.
    var whenImagesForTileRetrieved = queryBuilder.build(picturesLibrary).execute();
    whenImagesForTileRetrieved
        .then(Hilo.Tiles.createTileFriendlyImages)
        .then(this.getLocalImagePaths)
        .then(Hilo.Tiles.createTileUpdates)
        .then(queueTileUpdates);
}


Weitere Informationen zur hier verwendeten Zusagenkette finden Sie unter Muster und Tipps für die asynchrone Programmierung.

Hinweis  Wir haben mehrere Optionen für das Auswählen der Bilder geprüft. Dazu gehören u. a. das Auswählen der aktuellsten Bilder oder das Überlassen der Auswahl für den Benutzer. Schließlich haben wir uns für die Auswahl von 15 der 30 aktuellsten Bilder entschieden. Dies stellt einen guten Kompromiss zwischen Vielfalt und Aktualität dar. Die Auswahl der Bilder durch den Benutzer erschien uns zu aufwändig. Ferner bestand dabei die Gefahr, dass Benutzer später nicht mehr zur App zurückkehren.
 

Die erste in der Zusagenkette der Kachelaktualisierung aufgerufene Funktion (createTileFriendlyImages) wird von createTileFriendlyImages.js exportiert. Mit dieser Funktion legen wir den lokalen Ordner fest, in den die Bilder kopiert werden. Mithilfe von createFolderAsync wird im lokalen Ordner ein Unterordner zum Speichern der Kachelbilder erstellt, und anschließend wird die copyFilesToFolder-Funktion aufgerufen. In diesem Code wird die bind-Funktion von JavaScript zum Erstellen von teilweise angewendeten Funktionen verwendet. Weitere Informationen zur Verwendung von bind und teilweise angewendeten Funktionen in Hilo finden Sie unter Muster und Tipps für die asynchrone Programmierung.

Hilo\Hilo\Tiles\createTileFriendlyImages.js


function createTileFriendlyImages(files) {
    var localFolder = applicationData.current.localFolder;

    // We utilize the concept of [Partial Application][1], specifically
    // using the [`bind`][2] method available on functions in JavaScript.
    // `bind` allows us to take an existing function and to create a new 
    // one with arguments that been already been supplied (or rather
    // "applied") ahead of time.
    //
    // [1]: http://en.wikipedia.org/wiki/Partial_application 
    // [2]: http://msdn.microsoft.com/en-us/library/windows/apps/ff841995

    // Partially apply `copyFilesToFolder` to carry the files parameter with it,
    // allowing it to be used as a promise/callback that only needs to have
    // the `targetFolder` parameter supplied.
    var copyThumbnailsToFolder = copyFilesToFolder.bind(null, files);

    // Promise to build the thumbnails and return the list of local file paths.
    var whenFolderCreated = localFolder.createFolderAsync(thumbnailFolderName, creationCollisionOption.replaceExisting);

    return whenFolderCreated
        .then(copyThumbnailsToFolder);
}


Das Generieren der eigentlichen Miniaturbilder wird der Windows-Runtime überlassen. Von der Windows-Runtime werden die Miniaturbilder je nach Bedarf skaliert, um sie an die Kachel anzupassen.

Um das Miniaturbild von der Windows-Runtime zu erhalten, muss ThumbnailMode für das FileProperties-Objekt festgelegt und anschließend getThumbnailAsync zum Abrufen der eigentlichen Miniaturbilder aufgerufen werden.

createTileFriendlyImages.js


thumbnailMode = Windows.Storage.FileProperties.ThumbnailMode
// . . .
var whenThumbailIsReady = fileInfo.getThumbnailAsync(thumbnailMode.singleItem);


getThumbnailAsync wird in der writeThumbnailToFile-Funktion abgerufen. Im writeThumbnailToFile-Element wird mithilfe von WinJS.Promise.join sichergestellt, dass die Zieldateien geöffnet und Miniaturbilder verfügbar sind. Nachdem die gemeinsame Zusage abgeschlossen ist, wird eine Zusagenkette erstellt, mit der das getInputStreamAt-Element aufgerufen wird. Mit diesem Element wird ein Dateistrom geöffnet, die Dateien werden mithilfe von copyAsync in einen RandomAccessStream-Dateistrom kopiert, und dann werden alle Vorgänge beendet.

Hilo\Hilo\Tiles\createTileFriendlyImages.js


function writeThumbnailToFile(sourceFile, targetFile) {
    var whenFileIsOpen = targetFile.openAsync(fileAccessMode.readWrite);
    var whenThumbailIsReady = sourceFile.getThumbnailAsync(thumbnailMode.singleItem);
    var whenEverythingIsReady = WinJS.Promise.join({ opened: whenFileIsOpen, ready: whenThumbailIsReady });

    var inputStream,
        outputStream;

    whenEverythingIsReady.then(function (args) {
        // `args` contains the output from both `whenFileIsOpen` and `whenThumbailIsReady`.
        // We can identify them by the order they were in when we joined them.
        outputStream = args.opened;
        var thumbnail = args.ready;
        inputStream = thumbnail.getInputStreamAt(0);
        return randomAccessStream.copyAsync(inputStream, outputStream);

    }).then(function () {
        return outputStream.flushAsync();

    }).done(function () {
        inputStream.close();
        outputStream.close();
    });
}


Beim Erstellen des TileUpdater-Objekts verwendet dessen Konstruktorfunktion die Windows.UI.Notification.TileUpdateManager-Klasse, um ein TileUpdater-Objekt zu erstellen. Aufgabe der TileUpdater-Klasse ist es, den Inhalt der App-Kachel zu aktualisieren. Verwenden Sie die TileUpdater.enableNotificationQueue-Methode, um Benachrichtigungen in die Warteschlange zu verschieben, wenn mehr als ein Bild verfügbar ist.

Hilo\Hilo\Tiles\TileUpdater.js


function TileUpdaterConstructor() {
    this.tileUpdater = tileUpdateManager.createTileUpdaterForApplication();
    this.tileUpdater.clear();
    this.tileUpdater.enableNotificationQueue(true);
},


Wir haben den Aufruf von TileUpdater.clear für den Fall hinzugefügt, dass der Benutzer alle Elemente in der Bibliothek gelöscht hat. Mit dieser Methode werden die Kachelbilder gelöscht.

Nachdem die App die Miniaturbilder erstellt und an den richtigen Speicherort kopiert hat (createTileFriendlyImages), ruft die update-Methode in TileUpdater.js das createTileUpdates-Element auf, um die Live-Kachelbenachrichtigungen zu erstellen. Diese Aufgabe umfasst auch das Formatieren des XML-Codes für die Kachelvorlagen, indem eine bestimmte XML-Vorlage für rechteckige und breite Kacheln ausgewählt wird. In der ausgeführten App werden standardmäßig breite Kacheln verwendet, weil das Hilo-Paketmanifest ein Bild für eine breite Kachel enthält. Mit der buildTileNotification-Funktion werden die Pfade für die Miniaturbilder an populateTemplateFor.wideTile übergeben.

Hilo\Hilo\Tiles\createTileUpdates.js


function buildTileNotification(thumbnailPaths) {
    // The square tile will just display the first image used for wide tile.
    var squareTileFile = thumbnailPaths[0];

    var squareTile = populateTemplateFor.squareTile(squareTileFile);
    var wideTile = populateTemplateFor.wideTile(thumbnailPaths);

    var compositeTile = buildCompositeTile(wideTile, squareTile);
    var notification = new Windows.UI.Notifications.TileNotification(compositeTile);

    return notification;
}


Die buildWideTile-Funktion formatiert den XML-Code für das Kachelupdate unter Verwendung von tileWideImageCollection als Kachelvorlagentyp. Diese Vorlage gibt XML für fünf Bilder auf der Kachel an. Hierbei wird die TileWideImageCollection-Kachelvorlage erweitert, indem die bereitgestellte Miniaturbildliste in die XML-Inhaltsvorlage eingefügt wird, um ein TileNotification-Objekt zu erhalten.

Hilo\Hilo\Tiles\populateTemplate.js


function buildWideTile(thumbnailFilePaths) {

    // For more information about the `TileWideImageCollection` template, see:
    // http://msdn.microsoft.com/en-us/library/windows/apps/hh761491.aspx#TileWideImageCollection
    var template = templates.tileWideImageCollection;

    var xml = tileUpdateManager.getTemplateContent(template);
    var images = xml.getElementsByTagName("image");

    thumbnailFilePaths.forEach(function (thumbnailFilePath, index) {
        images[index].setAttribute("src", thumbnailFilePath);
    });

    return xml;
}


Nachdem die Benachrichtigungen erstellt wurden, ruft die update-Methode in TileUpdater.js das queueTileUpdates-Element auf, um die Kachel zu aktualisieren. Für jede Benachrichtigung wird von queueTileUpdates das TileUpdater.update-Element aufgerufen, um das Update der Kacheln für die UI durchzuführen.

Hilo\Hilo\Tiles\TileUpdater.js


queueTileUpdates: function (notifications) {
    var self = this;
    notifications.forEach(function (notification) {
        self.tileUpdater.update(notification);
    });
},


Das XML für eine typische Kachelbenachrichtigung, die Sie beim Entwickeln von Apps normalerweise nicht sehen, sieht ungefähr so aus:


<tile>
  <visual>
    <binding template="TileWideImageCollection">
      <image id="1" src="ms-appdata:///local/thumbnails/thumbImage_0.jpg"/>
      <image id="2" src="ms-appdata:///local/thumbnails/thumbImage_1.jpg"/>
      <image id="3" src="ms-appdata:///local/thumbnails/thumbImage_2.jpg"/>
      <image id="4" src="ms-appdata:///local/thumbnails/thumbImage_3.jpg"/>
      <image id="5" src="ms-appdata:///local/thumbnails/thumbImage_4.jpg"/>
    </binding>
  <binding template="TileSquareImage">
      <image id="1" src="ms-appdata:///local/thumbnails/thumbImage_0.jpg"/>
    </binding>
  </visual>
</tile>


Hinweis  Die Vorlage für eine breite Kachel enthält auch eine Vorlage für die quadratische Kachel. Dadurch können breite und quadratische Kacheln über eine einzige Vorlage abgedeckt werden.
 

Wenn Sie Text oder Bilder für Ihre Kachel verwenden, die möglicherweise an unterschiedliche Sprachen und Kulturen angepasst werden müssen, können Sie sich unter Globalisieren von Kachel- und Popupbenachrichtigungen mit den Anforderungen an die Globalisierung von Kachelbenachrichtigungen vertraut machen.

Mithilfe der folgenden Ressourcen können Sie sich noch besser mit Kachelvorlagen vertraut machen:

[Nach oben]

Hinzufügen des Begrüßungsbildschirms

Sämtliche Windows Store-Apps müssen einen Begrüßungsbildschirm aufweisen, der sich aus einem Begrüßungsbildschirmbild und einer Hintergrundfarbe zusammensetzt. Beide können angepasst werden. Der Begrüßungsbildschirm wird beim Laden Ihrer App angezeigt. Das Bild für den Begrüßungsbildschirm wurde analog zu den Kacheln von unserem Designer entwickelt. Wir haben uns für ein Bild entschieden, das den Standardkachellogos ähnelt und gut für die Marke "Hilo" geeignet ist. Das Hinzufügen des Begrüßungsbildschirms zur App war unproblematisch. Nähere Informationen dazu finden Sie unter Schnellstart: Hinzufügen eines Begrüßungsbildschirms.

Begrüßungsbildschirm

Wenn Ihre App mehr Zeit zum Laden benötigt, können Sie den Begrüßungsbildschirm auch länger anzeigen, etwa um Benutzern Ladeinformationen in Echtzeit anzuzeigen. Erstellen Sie dazu eine Seite, die den Begrüßungsbildschirm nachahmt, indem sie ein Bild mit dem Begrüßungsbildschirm und weiteren Informationen anzeigt. In Hilo wurde überlegt, einen erweiterten Begrüßungsbildschirm zu verwenden. Diese Überlegung wurde jedoch wieder verworfen, da das Laden der Hubseite durch die App sehr wenig Zeit in Anspruch nimmt. Weitere Informationen zum Verlängern der Anzeigedauer des Begrüßungsbildschirms finden Sie unter Erweitern des Begrüßungsbildschirms.

Mithilfe der folgenden Ressourcen können Sie sich noch besser mit dem Begrüßungsbildschirm vertraut machen:

[Nach oben]

 

 

Anzeigen:
© 2017 Microsoft