Arbeiten mit Datenquellen

Verwenden von Datenquellen 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

Die Seiten in Hilo verwenden eine speicherinterne Datenquelle, um Daten an das ListView-Steuerelement der Windows-Bibliothek für JavaScript zu binden. Beim Entwickeln der Monatsseite für Hilo wurde stattdessen zuerst eine benutzerdefinierte Datenquelle implementiert. Später wurde dies für die Implementierung jedoch in eine speicherinterne Datenquelle geändert, weil sich die Anforderungen der UX (User Experience) geändert haben.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Anweisungen zum heruntergeladenen Code finden Sie unter Erste Schritte mit Hilo.

Sie erfahren Folgendes:

  • Tipps zur Auswahl des Datenquellentyps für die Implementierung in der App
  • So wird's gemacht: Verwalten der Gruppierung sowohl in einer speicherinternen Datenquelle (WinJS.Binding.List) als auch in einer benutzerdefinierten Datenquelle
  • So wird's gemacht: Implementieren einer speicherinternen Datenquelle und einer benutzerdefinierten Datenquelle

Betrifft

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

Datenbindung auf der Monatsseite

In diesem Thema wird das ListView-Steuerelement der Monatsseite als Beispiel für die Datenbindung mit unterschiedlichen Arten von Datenquellen behandelt. Weitere Informationen zur deklarativen Bindung für andere Steuerelemente, die in Hilo verwendet werden, und zu Nicht-Arraydatenquellen finden Sie unter Verwenden von Steuerelementen. Weitere Informationen zur Bindung finden Sie unter Schnellstart: Binden von Daten und Stilen. Zum Erfüllen von UX-Anforderungen für die Monatsseite wurde eine flexible Methode benötigt, um eine sehr große Datengruppe, die aus den Bildern in den lokalen Bildern besteht, gruppieren und anzeigen zu können. Auf der im folgenden Screenshot dargestellten Monatsseite werden Bilder in Monats- und Jahresgruppen angezeigt.

Monatsseite

Das ListView-Steuerelement ermöglicht die Flexibilität, die wir zum Gruppieren und Anzeigen von Daten benötigen. Es wurde auch überlegt, ob die Implementierung eines eigenen benutzerdefinierten Steuerelements sinnvoll ist. Das ListView-Steuerelement hat sich jedoch als beste Wahl erwiesen, weil es über das einheitliche Aussehen und Verhalten von Windows Store-Apps, integrierte Unterstützung für die Querwischen-Geste und eine Leistungsoptimierung verfügt. Mit dem ListView-Element wird beispielsweise die UI-Virtualisierung durchgeführt. Dabei werden Elemente wiederverwendet, wenn sie nicht mehr Teil des aktiven Ansichtsbereichs sind, ohne dass Objekte zerstört werden.

Die Monatsseite enthält ein ListView-Steuerelement, das für die Hauptansicht verwendet wird. Das zweite data-win-control-Element wird für die verkleinerte Ansicht (mit mehr angezeigten Monaten) genutzt, die vom SemanticZoom-Steuerelement bereitgestellt wird.

Hilo\Hilo\month\month.html


<div class="semanticZoomContainer" data-win-control="WinJS.UI.SemanticZoom">

    <div id="monthgroup" data-win-control="WinJS.UI.ListView" data-win-options="{ 
        layout: {type: WinJS.UI.GridLayout},
        selectionMode: 'single'}">
    </div>

    <div id="yeargroup" data-win-control="Hilo.month.YearList">
    </div>

</div>


WinJS-Vorlagen werden verwendet, um mehrere Dateninstanzen zu formatieren und anzuzeigen. Für die Monatsseite werden mehrere Vorlagen verwendet: drei für normale und angedockte Ansichten (id="month*") und zwei für die verkleinerte Ansicht (id="year*"), die vom SemanticZoom-Steuerelement bereitgestellt wird. (Weitere Informationen zur Datenbindung und zu WinJS-Vorlagen, die in Hilo-Steuerelementen verwendet werden, finden Sie unter Verwenden von Steuerelementen.) Für die Monatsseite wird das ListView-Steuerelement den Vorlagen programmgesteuert im JavaScript-Code zugeordnet. Weitere Informationen zum Binden der Datenquelle an diese Eigenschaften finden Sie unter Implementieren der Gruppenunterstützung mit der speicherinternen Datenquelle.

Dies ist der HTML-Code für die WinJS-Vorlagen, die in der normalen Ansicht für Gruppenelemente und Gruppenköpfe verwendet wird.

Hilo\Hilo\month\month.html


<div id="monthItemTemplate" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="style.backgroundImage: url.backgroundUrl; className: className"></div>
</div>

<div id="monthGroupHeaderTemplate" data-win-control="WinJS.Binding.Template">
    <a class="monthLink" href="#"><span data-win-bind="innerHTML: title"></span>&nbsp;(<span data-win-bind="innerText: count"></span>)</a>
</div>

<div id="monthSnappedTemplate" data-win-control="WinJS.Binding.Template">
    <span data-win-bind="innerHTML: title"></span>&nbsp;(<span data-win-bind="innerText: count"></span>)
    <div data-win-bind="style.backgroundImage: backgroundUrl;" class="thumbnail"></div>
</div>


Im obigen Code wird mit den data-win-bind-Attributwerten die deklarative Bindung für DOM-Eigenschaften angegeben, z. B. backgroundImage (URL) für das DIV-Element, title für den Gruppenkopfnamen (Monatsname) und count für die Anzahl der Elemente in der Gruppe.

Tipp  Sie können das data-win-options-Attribut, speziell die Eigenschaften itemTemplate und groupHeaderTemplate, auch verwenden, um das ListView-Steuerelement deklarativ einer bestimmten WinJS-Vorlage zuzuordnen.
 

[Oben]

Auswählen einer Datenquelle für eine Seite

Für die Seiten in Hilo wird ein WinJS.Binding.List-Element zum Binden von Daten an das ListView- oder FlipView-Steuerelement verwendet.

Für die meisten Seiten ist das WinJS.Binding.List-Element für die Anforderungen ausreichend und die einzige Datenquelle, die implementiert wurde. Mit dem WinJS.Binding.List-Element wird ein Mechanismus zum Erstellen von Gruppen für die primären Daten bereitgestellt. Die größte Einschränkung besteht darin, dass es sich um eine synchrone Datenquelle handelt, also eine speicherinterne Datenquelle (ein Array), bei der alle Daten für die Anzeige verfügbar sein müssen. Auf den meisten Hilo-Seiten wird eine eingeschränkte Dateigruppe angezeigt. (Auf der Detailseite wird eine Gruppe von Dateien bereitgestellt, die z. B. zu einem einzelnen Monat gehören, und auf der Hubseite werden nur insgesamt sechs Bilder bereitgestellt.)

Für die Monatsseite wird ein ListView-Steuerelement verwendet, um Bilder für alle Monate in den Bildern anzuzeigen. Für die Monatsseite sollte sichergestellt werden, dass für eine sehr große Datengruppe eine hohe Leistung erzielt wird. Daher wurde zuerst eine benutzerdefinierte Datenquelle implementiert. Mithilfe einer benutzerdefinierten Datenquelle konnten wir Daten für das ListView-Steuerelement Seite für Seite abrufen. Später haben sich die UX-Anforderungen für die Monatsseite dann geändert, da eine Anpassung an die Anforderungen der C++-Version von Hilo erzielt werden sollte. In Hilo C++ werden auf der Monatsseite nur acht Bilder pro Monat angezeigt. Von der ListView-Schnittstelle für die benutzerdefinierte Datenquelle wurden zusammenhängende Daten erwartet, um Gruppen unterstützen zu können. Daher wurde entschieden, zu einer WinJS.Binding.List-Implementierung zu wechseln. Aufgrund dieser UX-Änderung war es auch nicht erforderlich, eine sehr große Datengruppe zu unterstützen, was die Entscheidung erleichterte. Weitere Informationen zum Verwenden einer benutzerdefinierten Datenquelle finden Sie unter Weitere Aspekte: Benutzerdefinierte Datenquellen.

[Oben]

Abfragen des Dateisystems

Für die Monatsseite werden Abfragen für die zugrunde liegende Datenquelle von Hilo (das Dateisystem) ausgeführt, um in den Bildern Ordner und Dateien abzurufen. Weitere Informationen zum Abfrage-Generator, der zum Ausführen von Abfragen verwendet wird, finden Sie unter Verwenden des Abfrage-Generator-Musters.

Um in einer Gruppe enthaltene Bilder abzurufen, wird für die Monatsseite derselbe Abfrage-Generator wie für andere Seiten in Hilo verwendet. Um Gruppen für die Monatsseite zu generieren, verwendet Hilo anstelle einer Dateisystemabfrage jedoch eine Ordnerabfrage und übergibt einen Parameter (groupByMonth) an das Windows.Storage.Search.QueryOptions-Objekt. Bei dieser Abfrage werden virtuelle Ordner basierend auf den Monaten erstellt, die jeweils aus der System.ItemDate-Eigenschaft der einzelnen Elemente ausgelesen werden. In diesem Code enthält folder einen Verweis auf Windows.Storage.KnownFolders.picturesLibrary.

Hilo\Hilo\month\monthPresenter.js


_getMonthFoldersFor: function (folder) {
    var queryOptions = new search.QueryOptions(commonFolderQuery.groupByMonth);
    var query = folder.createFolderQueryWithOptions(queryOptions);
    return query.getFoldersAsync(0);
},


In MonthPresenter verwenden wir die zurückgegebenen StorageFolder-Objekte, um Dateiabfragen für die einzelnen Monate zu erstellen (nicht dargestellt).

[Oben]

Implementieren der Gruppenunterstützung mit der speicherinternen Datenquelle

Für nicht gruppierte Daten ist die Verwendung des WinJS.Binding.List-Elements recht einfach. Nach der Rückgabe von StorageFile-Objekten aus einer Dateiabfrage müssen Sie das Array mit Elementen an eine neue Instanz der Liste übergeben und die dataSource-Eigenschaft der ListView itemDataSource-Eigenschaft zuweisen.

Hilo\Hilo\hub\listViewPresenter.js


setDataSource: function (items) {
    this.lv.itemDataSource = new WinJS.Binding.List(items).dataSource;
},


Zum Verwenden gruppierter Daten (nach Monaten gruppierte Bilder) müssen Sie die Daten mithilfe von itemDataSource dem ListView -Steuerelement zuweisen, aber vorher sind noch einige andere Schritte erforderlich. Für jedes Bild, das von der Dateiabfrage der Monatsseite zurückgegeben wird, legen wir eine groupKey-Eigenschaft fest. Diese wird vom WinJS.Binding.List-Element zum internen Gruppieren von Daten verwendet. Auf der Monatsseite wird das groupKey-Element auf einen eindeutigen Wert festgelegt, indem eine numerische Darstellung des Jahrs mit angehängtem Monat verwendet wird. Dies wird im folgenden Code veranschaulicht. Mit diesem Wert wird die für List erforderliche Implementierung der Sortierung und das Sortieren der Elemente in der richtigen Reihenfolge ermöglicht.

Hilo\Hilo\month\monthPresenter.js


var buildViewModels = foldersWithImages.map(function (folder) {
    promise = promise.then(function () {
        return folder.query
        .getFilesAsync(0, maxImagesPerGroup)
        .then(function (files) {
            filesInFolder = files;
            // Since we filtered for zero count, we 
            // can assume that we have at least one file.

            return files.getAt(0).properties.retrievePropertiesAsync([itemDateProperty]);
        })
        .then(function (retrieved) {
            var date = retrieved[itemDateProperty];
            var groupKey = (date.getFullYear() * 100) + (date.getMonth());
            var firstImage;

            filesInFolder.forEach(function (file, index) {
                var image = new Hilo.Picture(file);
                image.groupKey = groupKey;
                self.displayedImages.push(image);

                if (index === 0) {
                    firstImage = image;
                }
            });


Vor dem Festlegen des Gruppenschlüssels wird außerdem jedes StorageFile-Element mit einem Hilo.Picture-Objekt umschlossen, um das Binden an das ListView-Steuerelement zu ermöglichen. (Diese sind nicht bindbar, da Windows-Runtime-Objekte wie StorageFile nicht geändert werden können.) Weitere Informationen finden Sie unter Verwenden des Abfrage-Generator-Musters.

Zum Implementieren von Gruppen mit dem WinJS.Binding.List-Element wird eine neue Instanz des List-Elements erstellt und die createGrouped-Methode aufgerufen. Damit die Gruppierung ordnungsgemäß funktioniert, werden an createGrouped drei Funktionen übergeben:

  • groupKey, um für jedes Bild den Gruppenschlüssel abzurufen.
  • groupData, um für jedes Bild ein Array mit Gruppendaten abzurufen.
  • groupSort, um die Sortierung der Daten zu implementieren.

In diesem Code ist die Implementierung dieser Funktionen, die Erstellung des List-Objekts und der Aufruf von createGrouped dargestellt.

Hilo\Hilo\month\monthPresenter.js


_createDataSources: function (monthGroups) {
    var self = this;

    function groupKey(item) {
        return item.groupKey;
    }

    function groupData(item) {
        return self.groupsByKey[item.groupKey];
    }

    function groupSort(left, right) {
        return right - left;
    }

    var imageList = new WinJS.Binding.List(this.displayedImages).createGrouped(groupKey, groupData, groupSort);


Im obigen Code ruft das groupData-Element die groupsByKey-Funktion des Presenters auf, um die für das List-Element erforderlichen Gruppeninformationen abzurufen. Die Gruppeninformationen wurden bereits der groupsByKey-Eigenschaft des Monatsseiten-Presenters zugewiesen. Dies ist der Code, in dem die Gruppeninformationen-Eigenschaften festgelegt und demgroupsByKey-Element zugewiesen werden. (Dieser Code wird einmal pro Dateiabfrage jedes Monats ausgeführt, bevor das List-Element erstellt wird.)

Hilo\Hilo\month\monthPresenter.js


var monthGroupViewModel = {
    itemDate: date,
    name: firstImage.name,
    backgroundUrl: firstImage.src.backgroundUrl,
    title: folder.groupKey,
    sortOrder: groupKey,
    count: folder.count,
    firstItemIndexHint: firstItemIndexHint,
    groupKey: date.getFullYear().toString()
};

firstItemIndexHint += filesInFolder.size;
self.groupsByKey[groupKey] = monthGroupViewModel;
groups.push(monthGroupViewModel);


Wenn Sie die createSorted-Funktion des List-Elements im Code nicht aufrufen, sortiert das List-Element die Daten, indem die groupKey-Werte an die Implementierung der groupSort-Funktion übergeben werden. (Siehe obigen Code.) In Hilo bedeutet dies, dass der numerische Monat/Jahr-Wert zum Sortieren der Daten genutzt wird.

Beachten Sie auch, dass das firstItemIndexHint-Element verwendet wird, um den Rohindex für das erste Element jeder Monatsgruppe anzugeben. Dieser Wert wird beim Auswählen eines Bilds (nicht dargestellt) zum Erstellen einer spezifischen Abfrage für einen Monat verwendet, die für die App die Navigation auf die Detailseite bewirkt.

[Oben]

Weitere Aspekte: Verwenden einer benutzerdefinierten Datenquelle

Dieser Abschnitt enthält Details zur funktionierenden Implementierung einer benutzerdefinierten Datenquelle, die zuerst für Hilo erstellt wurde. Hilo-Quellcode, mit dem die benutzerdefinierte Datenquelle implementiert wird, finden Sie in dieser Hilo-Version.

In diesem Abschnitt wird Folgendes beschrieben:

[Oben]

Auswählen einer benutzerdefinierten Datenquelle

Wenn die Anforderungen der Hilo C++-UX nicht hätten erfüllt werden müssen (nur acht Bilder pro Monat auf der Monatsseite), hätten wir in Hilo eine benutzerdefinierte Datenquelle verwendet. (Von der ListView-Schnittstelle für die benutzerdefinierte Datenquelle werden für die Unterstützung von Gruppen zusammenhängende Daten erwartet. Daher wurde entschieden, zu einer WinJS.Binding.List-Implementierung zu wechseln, bei der ein speicherinternes Array mit Daten verwendet wird.) Eine benutzerdefinierte Datenquelle hätte eine Datenvirtualisierung ermöglicht, wobei Bilder seitenweise angezeigt und Verzögerungen aufgrund der Verwendung von WinJS.Binding.List vermieden werden können.

Für andere Datenquellen als die speicherinterne Liste kann z. B. ein StorageDataSource-Objekt oder eine benutzerdefinierte Datenquelle ausgewählt werden. Ein StorageDataSource-Element verfügt über integrierte Unterstützung für das Windows-Dateisystem, aber das Gruppieren von Elementen wird nicht unterstützt. Daher wurde die Implementierung einer benutzerdefinierten Datenquelle gewählt.

Für gruppierte Daten sind zwei Datenquellen erforderlich: eine für die Gruppen und eine für die Elemente.

Eine benutzerdefinierte Datenquelle muss die IListDataAdapter-Schnittstelle implementieren. Für beide Datenquellen auf der Monatsseite wurden Datenadapter verwendet, von denen diese Schnittstelle implementiert wurde. Wenn Sie die Schnittstelle implementieren, können von der ListView-Infrastruktur zur Laufzeit Elementanforderungen durchgeführt werden, und der Datenadapter reagiert, indem die angeforderten Informationen zurückgegeben oder in einem Cache gespeicherte Informationen bereitgestellt werden. Wenn noch keine Bilder geladen wurden, werden vom ListView-Steuerelement Platzhalterbilder angezeigt (in "month.css" angegeben).

Weitere Informationen zum ListView-Steuerelement und zu den Datenquellen finden Sie unter Verwenden des ListView-Steuerelements. Weitere Informationen zu benutzerdefinierten Datenquellen und ein Beispiel, in dem eine webbasierte Datenquelle verwendet wird, finden Sie unter So wird's gemacht: Erstellen einer benutzerdefinierten Datenquelle.

[Oben]

Implementieren eines Datenadapters für eine benutzerdefinierte Datenquelle

Eine benutzerdefinierte Datenquelle muss die IListDataAdapter-Schnittstelle implementieren. In Hilo wird IListDataAdapter von der DataAdapter-Klasse implementiert. Die größten Herausforderungen haben sich bei der Implementierung einer benutzerdefinierten Datenquelle daraus ergeben, dass die Datenquelle auf dem Dateisystem basieren sollte. Besonders das Erstellen von Gruppen mit ausschließlicher Ausrichtung auf Bilddateien war eine Herausforderung. Die vom Dateisystem zurückgegebenen Objekte – StorageFolder und StorageFile – liegen nicht in einem Format vor, das eine Bindung an das ListView-Steuerelement ermöglicht. Es sind also Schritte erforderlich, um nutzbare Daten zu generieren. Für die auf der Monatsseite erforderlichen Gruppen und Elemente mussten Daten in speziellen Formaten bereitgestellt werden, die für die IListDataAdapter-Schnittstelle erforderlich sind.

Wichtig  Von der endgültigen Version von Hilo wurde keine benutzerdefinierte Datenquelle implementiert. Hilo-Code, mit dem die benutzerdefinierte Datenquelle implementiert wird, finden Sie in dieser Hilo-Version.
 

Für alle Seiten in Hilo werden zurückgegebene Bilder außerdem mit Hilo.Picture-Objekten umschlossen, die in "Picture.js" implementiert sind. Weitere Informationen finden Sie unter Verwenden des Abfrage-Generator-Musters.

Zu den Hauptanforderungen der Implementierung des IListDataAdapter-Elements gehört das Hinzufügen von Implementierungen für getCount, itemsFromIndex und itemsFromKey.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    var DataAdapter = WinJS.Class.define(function (queryBuilder, folder, getMonthYearFrom) {
        // . . .
        };

    }, {

        itemsFromIndex: function (requestIndex, countBefore, countAfter) {
        // . . .
        },

        getCount: function () {
        // . . .
        },

        itemsFromKey: function (key, countBefore, countAfter) {
        // . . .
        },


Die getCount-Methode gibt die Gesamtzahl aller Elemente zurück, die derzeit in der Datenquelle vorhanden sind. Diese Anzahl muss entweder korrekt sein oder null zurückgeben. Andernfalls funktioniert das ListView-Steuerelement möglicherweise nicht richtig, und es wird ggf. kein Grund für den Fehler angegeben.

Während der Testphase waren wir der Auffassung, dass die Implementierung eines itemsFromKey-Elements optional ist. Zur Laufzeit erforderte die ListView-Infrastruktur jedoch ein internes Objekt, das von der itemsFromKey-Implementierung abgeleitet ist. Daher wurde dem Gruppendatenadapter eine einfache Implementierung des itemsFromKey-Elements hinzugefügt.

Wichtig  Ein ähnlicher Datenadapter für Elemente ist in der Datei "members.js" implementiert. Da der Datenadapter für Elemente einfacher zu implementieren war und zum Gruppieren der Daten keinen zusätzlichen Code erfordert, konzentrieren wir uns in diesem Thema auf die Gruppen. Der Datenadapter für Elemente hat ebenfalls keine Implementierung des itemsFromKey-Elements erfordert.
 

Wenn das ListView-Steuerelement zur Laufzeit eine Gruppe mit Elementen (hier: Gruppen) zum Auffüllen des ListView-Elements benötigt, ruft es itemsFromIndex auf. Dabei werden eine Anforderung für einen bestimmten Gruppenindexwert und vor und nach dem angeforderten Indexwert vorgeschlagene Werte für die Anzahl der zurückzugebenden Gruppen übergeben.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


   itemsFromIndex: function (requestIndex, countBefore, countAfter) {
        var start = Math.max(0, requestIndex - countBefore),
            count = 1 + countBefore + countAfter,
            offset = requestIndex - start;

        // Check cache for group info. If not complete, 
        // get new groups (call fetch).

        // . . . 

        var buildResult = this.buildResult.bind(this, offset, start);

        return collectGroups.then(buildResult);
    },


Der Rückgabewert für itemsFromIndex muss ein Objekt sein, von dem die IFetchResult-Schnittstelle implementiert wird. In Hilo wird ein Objekt mit den folgenden Eigenschaften erstellt, um die Schnittstellenanforderungen zu erfüllen:

  • items, wobei es sich um ein Array mit Elementen (Gruppen) handeln muss, über die die IItems-Schnittstelle implementiert wird.
  • offset, wobei der Index für die angeforderte Gruppe relativ zum Array mit Elementen gespeichert wird.
  • absoluteIndex, wobei der Index der angeforderten Gruppe relativ zur benutzerdefinierten Datenquelle gespeichert wird.
  • totalCount, womit die Gesamtzahl von Gruppen im Array mit Elementen gespeichert wird.

Zum Abrufen dieser Werte werden die Werte offset und absoluteIndex mithilfe von requestIndex, countBefore und countAfter berechnet. Dies sind die angeforderten Werte, die vom ListView-Steuerelement übergeben werden. (Siehe obigen Code.) Das totalCount-Element wird aus dem zwischengespeicherten Wert des Datenadapters abgerufen.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    buildResult: function (offset, absoluteIndex, items) {
        // Package the data in a format that the consuming 
        // control (a list view) can process.
        var result = {
            items: items,
            offset: offset,
            absoluteIndex: absoluteIndex
        };

        if (this.totalCount) {
            result.totalCount = this.totalCount;
        }

        return WinJS.Promise.as(result);
    },


Zum Abrufen des Arrays mit den angeforderten Gruppen (items-Eigenschaft) werden Dateisystemabfragen durchgeführt, indem Funktionen wie getFoldersAsync aufgerufen werden, womit ein Array mit StorageFolder-Objekten zurückgegeben wird. getFoldersAsync wird in der fetch-Funktion aufgerufen (Aufruf über itemsFromIndex). Anschließend wird die JavaScript-Arrayzuordnungsfunktion zum Konvertieren der StorageFolder-Objekte in nutzbare Daten verwendet.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    return this.query
        .getFoldersAsync(start, count)
        .then(function (folders) {
            return WinJS.Promise.join(folders.map(convert));
        })


In convert, der Rückruffunktion zur Arrayzuordnung, werden zusätzliche Dateisystemabfragen durchgeführt. Dafür wird das übergebene StorageFolder-Objekt verwendet, und anschließend werden die Abfrageergebnisse in einer verknüpften Zusage an buildMonthGroupResult übergeben.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    var query = this.queryBuilder.build(folder);

    var getCount = query.fileQuery.getItemCountAsync();

    var getFirstFileItemDate = query.fileQuery
        .getFilesAsync(0, 1)
        .then(retrieveFirstItemDate);

    return WinJS.Promise
        .join([getCount, getFirstFileItemDate])
        .then(this.builldMonthGroupResult.bind(this));


In buildMonthGroupResult wird ein Gruppenobjekt erstellt, von dem die IItems-Schnittstelle implementiert wird und das als items-Eigenschaftswert von IFetchResult festgelegt werden kann. Zum Implementieren der IItems-Schnittstelle werden die Abfrageergebnisse verwendet, um Gruppeneigenschaften wie groupKey, data, index und key festzulegen. Die Abfrageergebnisse von getFilesAsync(0,1) werden beispielsweise verwendet, um Gruppeneigenschaften basierend auf dem Elementdatum der ersten Datei in der Gruppe festzulegen.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    builldMonthGroupResult: function (values) {

        var count = values[0],
                    firstItemDate = values[1];

        var monthYear = this.getMonthYearFrom(firstItemDate);

        var result = {
            key: monthYear,
            firstItemIndexHint: null, // We need to set this later.
            data: {
                title: count ? monthYear : 'invalid files',
                count: count
            },
            groupKey: count ?  monthYear.split(' ')[1] : 'invalid files'
        };

        return result;
    }


Wichtig  Die key-Eigenschaft muss eindeutig sein. Andernfalls tritt für das ListView-Steuerelement möglicherweise ein Fehler auf, ohne dass eine Fehlermeldung angegeben wird.
 

Die Dateneigenschaften, title und count, sind in der WinJS-Vorlage für den in "month.html" definierten Gruppenkopf deklarativ an die UI gebunden.

Wichtig  Mit dieser Funktion werden auch Eigenschaften wie firstItemIndexHint erstellt, mit der der erste Indexwert jeder Gruppe angegeben wird. Der Wert wird später festgelegt.
 

Weitere Informationen zur Verwendung von Zusagen in Hilo finden Sie unter Muster und Tipps für die asynchrone Programmierung.

[Oben]

Binden des ListView-Elements an eine benutzerdefinierte Datenquelle

Nach dem Laden der Monatsseite wird die ready-Funktion für die Seitensteuerung so aufgerufen, wie dies auch für andere Hilo-Seiten erfolgt. In der ready-Funktion werden zwei IListDataAdapter-Objekte erstellt:

  • Ein Datenadapterobjekt zum Darstellen der Gruppen, das per Aufruf von Hilo.month.Groups instanziiert wird.
  • Ein Datenadapter zum Darstellen der Elemente, der per Aufruf von Hilo.month.Items instanziiert wird.

In beiden Fällen wird der Abfrage-Generator zusammen mit mehreren anderen Parametern an das IListDataAdapter-Element übergeben.

Wichtig  Von der endgültigen Version von Hilo wurde keine benutzerdefinierte Datenquelle implementiert. Hilo-Code, mit dem die benutzerdefinierte Datenquelle implementiert wird, finden Sie in dieser Hilo-Version.
 

Hilo\Hilo\month\month.js (Hilo-Version mit benutzerdefinierter Datenquelle)


    ready: function (element, options) {

        // I18N resource binding for this page.
        WinJS.Resources.processAll();

        this.queryBuilder = new Hilo.ImageQueryBuilder();

        // First, set up the various data adapters needed.
        this.monthGroups = new Hilo.month.Groups(this.queryBuilder, this.targetFolder,
            this.getMonthYearFrom);
        this.monthGroupMembers = new Hilo.month.Members(this.queryBuilder, 
            this.targetFolder, this.getMonthYearFrom);

        var yearGroupMembers = this._setYearGroupDataAdapter(this.monthGroups);
        var yearGroups = yearGroupMembers.groups;

        // Then provide the adapters to the list view controls.
        this._setupMonthGroupListView(this.monthGroups, this.monthGroupMembers);
        this._setupYearGroupListView(yearGroups, yearGroupMembers);
    },


Alle Datenquellen, die eine Bindung an ein ListView-Steuerelement durchführen, einschließlich WinJS.Binding.List, müssen IListDataSource implementieren. Um mithilfe einer benutzerdefinierten Datenquelle eine Bindung an ein ListView-Steuerelement (oder FlipView-Steuerelement) durchzuführen, muss die von Ihnen erstellte Datenquelle vom VirtualizedDataSource-Element abgeleitet sein, von dem IListDataSource implementiert wird. VirtualizedDataSource ist die Basisklasse für ein IListDataAdapter-Element.

Die DataAdapter-Klasse implementiert IListDataAdapter. In diesem Code, der über die ready-Funktion aufgerufen wird, wird der Gruppendatenadapter – ein von VirtualizedDataSource abgeleitetes Objekt – erstellt. Außerdem wird ein neues DataAdapter-Objekt für die neu abgeleitete Klasse an den Konstruktor übergeben. Zum richtigen Instanziieren des neuen Objekts muss außerdem das DataAdapter-Objekt an _baseDataSourceConstructor übergeben werden. Dies ist der Basisklassenkonstruktor für ein VirtualizedDataSource-Element.

Hilo\Hilo\month\groups.js (Hilo-Version mit benutzerdefinierter Datenquelle)



    var Groups = WinJS.Class.derive(WinJS.UI.VirtualizedDataSource, 
        function (queryBuilder, folder, getMonthYearFrom) {
        this.adapter = new DataAdapter(queryBuilder, folder, getMonthYearFrom);
        this._baseDataSourceConstructor(this.adapter);
    }, {
        getFirstIndexForGroup: function (groupKey) {
            var groupIndex = this.adapter.cache.byKey[groupKey];
            var group = this.adapter.cache.byIndex[groupIndex];
            return group.firstItemIndexHint;
        }
    });


Nach der Erstellung der Datenadapter für Gruppen und Member werden Daten nach Anforderung durch das ListView-Element asynchron aus dem Dateisystem zurückgegeben. Weitere Informationen finden Sie unter Implementieren eines Datenadapters für eine benutzerdefinierte Datenquelle.

Im obigen Code wird mit der ready-Funktion _setupMonthGroupListView und _setupYearGroupListView aufgerufen, um die Datenquellen an das ListView-Steuerelement zu binden. Im folgenden Code wird das in "month.html" deklarierte monthgroupListView-Steuerelement abgerufen. Anschließend werden die Eigenschaften groupDataSource und itemDataSource verwendet, um die Gruppen und Member aus den Hilo-Datenadaptern an das ListView-Steuerelement zu binden.

Hilo\Hilo\month\month.js (Hilo-Version mit benutzerdefinierter Datenquelle)



    _setupMonthGroupListView: function (groups, members) {
        var listview = document.querySelector("#monthgroup").winControl;
        listview.groupDataSource = groups;
        listview.itemDataSource = members;
        listview.addEventListener("iteminvoked", this._imageInvoked.bind(this));
    },


[Oben]

 

 

Anzeigen:
© 2017 Microsoft