Windows Dev Center

Verwenden von Steuerelementen in Hilo (Windows Store-Apps mit JavaScript und HTML)

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

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Steuerelemente bilden den Kernobjekte der UI der Windows-Bibliothek für JavaScript. Sie können die Datenbindung für Steuerelemente verwenden, um Daten zur Laufzeit auf der UI anzuzeigen. Hier befassen wir uns mit den Steuerelementen ListView, FlipView, AppBar und SemanticZoom aus WinJS sowie den HTML-Elementen canvas und img.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

Sie erfahren Folgendes:

  • So wird's gemacht: Verwenden von Bindungen zum deklarativen Verbinden der Benutzeroberfläche mit Daten
  • So wird's gemacht: Anwenden von Vorlagen zum bequemen Formatieren und Anzeigen mehrerer Dateninstanzen
  • So wird's gemacht: Verwenden gängiger WinJS-Steuerelemente

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

Betrifft

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

Häufig verwendete Hilo-Steuerelemente

Nachfolgend sind die in Hilo am häufigsten verwendeten Steuerelemente aufgelistet. Sie können auch auf die HTML-Dateien im Ordner "Hilo" des Microsoft Visual Studio-Projekts zurückgreifen.

Die Steuerelemente ListView, FlipView, AppBar und SemanticZoom sind WinJS-Steuerelemente. Die Steuerelemente canvas und img sind HTML-Elemente.

Tipp  Alle verfügbaren Steuerelemente finden Sie in der Liste Steuerelemente und in der Liste Steuerelemente nach Funktion. Sie können diese Seite als Lesezeichen hinzufügen, damit Sie schneller wieder dorthin zurückkehren können, wenn Sie Ihrer App weitere Features hinzufügen möchten. Sie können auch das Fenster Toolbox in Visual Studio und die Registerkarte Assets (Objekte) in Blend für Microsoft Visual Studio 2012 für Windows 8 verwenden, um nach Steuerelementen zu suchen und diese Ihren Seiten hinzuzufügen.

All diese Steuerelemente zeigen Laufzeitdaten auf der UI durch Datenbindung an. Eine Bindung stellt einen datengebundenen Eigenschaftswert bereit, der den Wert bis zur Laufzeit zurückstellt. Bindungen sind für den effizienten Einsatz von WinJS von zentraler Bedeutung. Sie ermöglichen es, eine deklarative Verbindung zwischen Ihrer Benutzeroberfläche und den Daten herzustellen. Mithilfe der Bindung können Sie die UI beim Entwerfen der App außerdem sauber von Ihren Daten trennen, da die Daten zur Laufzeit aufgelöst werden. In Hilo ist das Binden von Daten zur Laufzeit kritisch, da zur Entwurfszeit keine Informationen zu den Bildern des Benutzers vorliegen.

Um Arbeitsspeicherverluste beim Binden von Daten an die UI zu minimieren, müssen Sie die Eigenschaft optimizeBindingReferences in Ihrem Startcode auf "true" festlegen. Dies ist der Code.

Hilo\default.js


WinJS.Binding.optimizeBindingReferences = true;


Hinweis  Wenn Sie eine deklarative Bindung vornehmen, sollten Sie die optimizeBindingReferences-Eigenschaft im Startcode immer auf "true" festlegen. Andernfalls kann die Bindung zu Speicherverlust Ihrer App führen. Weitere Informationen finden Sie unter JavaScript-Projektvorlagen für Windows Store-Apps.

In Hilo werden Textinhalte normalerweise über ein span-Element an die UI gebunden. Unten ist der Code angegeben, in dem die Bindung zum Anzeigen des Seitentitels auf der Detailseite verwendet wird. Dabei besteht der Seitentitel aus dem Monat und Jahr des Fotos.

Hilo\Hilo\detail\detail.html


<span id="pageTitle" class="pagetitle" data-win-bind="innerText: title">[Month Year]</span>


Das data-win-bind-Attribut bindet eine Eigenschaft eines Elements an eine Eigenschaft einer Datenquelle (einmalige Bindung).

Hinweis  Beim Angeben eines data-win-bind-Attributs können mehrere Gruppen von Element/Datenquelle-Eigenschaftspaaren angegeben werden, indem diese per Semikolon getrennt werden.

Zum Anzeigen der in der Bindung angegebenen Daten müssen Sie die WinJS.Binding.processAll-Funktion aufrufen. Dies ist der Code.

Hilo\Hilo\controls\pages.js


function bindPageTitle(title) {
    // Bind the title based on the query's month/year.
    var pageTitleEl = document.querySelector("#pageTitle");
    WinJS.Binding.processAll(pageTitleEl, { title: title });
}


Hier sind im Aufruf der processAll-Funktion zwei Argumente angegeben. Das erste Argument stellt den rootElement-Parameter dar. Dies ist das Element, das durchsucht wird, um Elemente für die Bindung zu ermitteln. Das zweite Argument stellt den dataContext-Parameter dar. Dies ist das Objekt, das für die Datenbindung verwendet wird. Im zweiten Argument kennzeichnet die erste Verwendung von title die Eigenschaft der Datenquelle, die oben im data-win-bind-Attribut angegeben ist. Die zweite Verwendung von title stellt den Funktionsparameter dar.

Hinweis  Der rootElement-Parameter kann beim Aufrufen der processAll-Funktion weggelassen werden. In diesem Fall wird das gesamte Dokument durchsucht, um Elemente für die Bindung zu ermitteln.

Die Funktion bindet den Wert der Daten aus dem dataContext-Parameter an die Elemente, bei denen es sich um Nachfolgerelemente des rootElement-Parameters handelt, wenn für diese Nachfolgerelemente das data-win-bind-Attribut angegeben wurde. Die Funktion gibt dann eine Zusage zurück, die abgeschlossen wird, wenn alle Elemente mit Bindungsdeklarationen verarbeitet wurden.

Weitere Informationen zur Bindung finden Sie in diesem Leitfaden unter Schnellstart: Binden von Daten und Stilen, So wird's gemacht: Binden von komplexen Objekten und Verwenden eines eigenen Darstellungsmusters.

[Oben]

ListView

Mit dem ListView-Steuerelement werden Daten aus einem IListDataSource-Element in einer anpassbaren Liste bzw. einem Raster angezeigt. Elemente in einem ListView-Steuerelement können zwar andere Steuerelemente enthalten, aber sie können kein FlipView-Steuerelement oder weiteres ListView-Steuerelement enthalten. In Hilo werden die von ListView-Steuerelementen angezeigten Daten normalerweise von einer Vorlage angegeben.

WinJS-Vorlagen bieten eine bequeme Möglichkeit, mehrere Dateninstanzen zu formatieren und anzuzeigen. In Hilo werden Vorlagen zusammen mit ListView- und FlipView-Steuerelementen verwendet, um anzugeben, wie Daten in den Steuerelementen angezeigt werden.

Eine Vorlage wird im Allgemeinen deklarativ definiert, indem ein DIV-Element für die Vorlage erstellt und ein data-win-control-Attribut mit dem Wert WinJS.Binding.Template hinzugefügt wird. Dies führt dazu, dass das DIV-Element das angegebene WinJS-Steuerelement hostet. Dies ist der Code für die Vorlage, die vom ListView-Steuerelement auf der Hubseite verwendet wird.

Hilo\Hilo\hub\hub.html


<div id="hub-image-template" data-win-control="WinJS.Binding.Template">
    <div data-win-bind="style.backgroundImage: url.backgroundUrl; alt: name; className: className" class="thumbnail">
    </div>
</div>


Ein Vorlagenobjekt muss über ein einzelnes Stammelement verfügen, das auch als übergeordnetes Element für den Inhalt der Vorlage dienen kann. Hier legt das Stammelement das data-win-bind-Attribut fest, um den Wert der style.backgroundImage-Eigenschaft an den Wert der url.backgroundUrl-Eigenschaft zu binden (zusätzlich zu einigen weiteren Eigenschaftsbindungen). Für das class-Attribut des DIV-Element ist die Verwendung des thumbnail-Formats aus der hub.css-Datei festgelegt.

Hinweis  Vorlagen müssen vor der Verwendung definiert werden.

Das ListView-Steuerelement kann die Vorlage dann zum Anzeigen von Daten verwenden. Dies ist der Code.

Hilo\Hilo\hub\hub.html


<div id="picturesLibrary"
    data-win-control="WinJS.UI.ListView"
    data-win-options="{ 
    itemTemplate: select('#hub-image-template'), 
    selectionMode: 'single'}" />


Mithilfe der itemTemplate-Eigenschaft wird das Steuerelement ListView der vorab definierten Vorlage mit dem Namen hub-image-template zugeordnet. Die itemTemplate-Eigenschaft wird im data-win-options-Attribut festgelegt.

In der ready-Funktion des Seitensteuerelements (hub.js) wird das Steuerelement ListView mithilfe der CSS-Abfrageauswahlsyntax zurückgegeben. Instanzen der Klassen ListViewPresenter und HubViewPresenter werden initialisiert, und anschließend wird die start-Funktion der HubViewPresenter-Instanz aufgerufen. Hier ist der Code.

Hilo\Hilo\hub\hub.js


ready: function (element, options) {

    // Handle the app bar button clicks for showing and hiding the app bar.
    var appBarEl = document.querySelector("#appbar");
    var hiloAppBar = new Hilo.Controls.HiloAppBar.HiloAppBarPresenter(appBarEl, WinJS.Navigation);

    // Handle selecting and invoking (clicking) images.
    var listViewEl = document.querySelector("#picturesLibrary");
    this.listViewPresenter = new Hilo.Hub.ListViewPresenter(listViewEl, Windows.UI.ViewManagement.ApplicationView);

    // Coordinate the parts of the hub page.
    this.hubViewPresenter = new Hilo.Hub.HubViewPresenter(
        WinJS.Navigation,
        hiloAppBar,
        this.listViewPresenter,
        new Hilo.ImageQueryBuilder()
    );

    this.hubViewPresenter
        .start(knownFolders.picturesLibrary)
        .then(function () {
            WinJS.Application.addEventListener("Hilo:ContentsChanged", Hilo.navigator.reload);
        });
},


Die start-Funktion führt eine Abfrage durch, um Bilder zum Auffüllen des ListView-Steuerelements zurückzugeben. Anschließend wird die loadImages-Funktion aufgerufen, die wiederum die bindImages-Funktion aufruft. Die bindImages-Funktion ruft die setDataSource-Funktion der ListViewPresenter-Klasse auf, um das ListView-Steuerelement an die Datenquelle zu binden. Dies ist der Code für die ListViewPresenter.setDataSource-Funktion.

Hilo\Hilo\hub\listViewPresenter.js


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


Auf das ListView-Steuerelement wird über die lv-Variable verwiesen. Für die Bindung erfordert das ListView-Steuerelement eine Datenquelle, von der IListDataSource implementiert wird. Für Datenarrays im Speicher verwendet Hilo WinJS.Binding.List. Von der itemDataSource-Eigenschaft wird ein IListDataSource-Objekt verwendet. Das List-Objekt ist jedoch kein IListDataSource-Element, verfügt aber über eine dataSource-Eigenschaft, die eine IListDataSource-Version von sich selbst zurückgibt.

Wenn die ListViewPresenter-Instanz in der ready-Funktion des Seitensteuerelements hub.js erstellt wurde, ruft der ListViewPresenter-Konstruktor die setup-Methode auf. Dadurch wird die layout-Eigenschaft des ListView-Steuerelements auf die von der selectLayout-Methode zurückgegebenen Daten festgelegt. Die selectLayout-Methode definiert das Layout der Fotominiaturansichten auf der Hubseite. Damit wird eine neue Instanz der WinJS.UI.GridLayout-Klasse erstellt, die groupInfo-Eigenschaft der Instanz auf die in der listViewLayoutSettings-Variable enthaltenen Einstellungen festgelegt und die maxRows-Eigenschaft der Instanz auf den Wert 3 festgelegt. Anschließend wird die Instanz zurückgegeben. Hier ist der Code.

Hilo\Hilo\hub\listViewPresenter.js


selectLayout: function (viewState, lastViewState) {

    if (lastViewState === viewState) { return; }

    if (viewState === appViewState.snapped) {
        return new WinJS.UI.ListLayout();
    }
    else {
        var layout = new WinJS.UI.GridLayout();
        layout.groupInfo = function () { return listViewLayoutSettings; };
        layout.maxRows = 3;
        return layout;
    }
},


Hilo\Hilo\hub\listViewPresenter.js


var listViewLayoutSettings = {
    enableCellSpanning: true,
    cellWidth: 200,
    cellHeight: 200
};


Hinweis  Die Eigenschaftseinstellungen in der listViewLayoutSettings-Variablen müssen den Werten für Höhe und Breite entsprechen, die im CSS für die Elemente angegeben sind. Dabei muss es sich um den größten gemeinsamen Nenner der unterschiedlichen Breiten- und Höhenwerte handeln.

Im CSS für die Hubseite wird angegeben, dass jede Fotominiaturansicht eine Breite und Höhe von 200 Pixel aufweist. Nur die erste Miniaturansicht stellt eine Ausnahme dar, da sie über eine Breite und Höhe von 410 Pixel verfügt. 410 Pixel ist die doppelte Breite und Höhe einer Standardminiaturansicht plus 10 Pixel, um den Abstand zwischen den Rasterzellen zu berücksichtigen. Hier ist der Code.

Hilo\Hilo\hub\hub.css


.hub section[role=main] .thumbnail {
    width: 200px;
    height: 200px;
}

    .hub section[role=main] .thumbnail.first {
        width: 410px;
        height: 410px;
    }


Weitere Informationen zur Bindung unter Verwendung von Vorlagen finden Sie unter So wird's gemacht: Verwenden von Vorlagen zum Binden von Daten. Weitere Informationen zum ListView-Steuerelement finden Sie unter Schnellstart: Hinzufügen von ListView-Steuerelementen. Weitere Informationen zur Verwendung des ListView-Steuerelements als Unterstützung beim Navigieren zwischen Gruppen mit vielen Bildern finden Sie in diesem Leitfaden unter Verwenden von Datenquellen.

[Oben]

FlipView

Mit dem FlipView-Steuerelement wird eine Auflistung von Elementen angezeigt, z. B. als Gruppe von Fotos, und Sie können diese einzeln durchblättern. In Hilo werden die vom FlipView-Steuerelement auf der Detailseite angezeigten Daten von einer Vorlage angegeben.

WinJS-Vorlagen bieten eine bequeme Möglichkeit, mehrere Dateninstanzen zu formatieren und anzuzeigen. In Hilo werden Vorlagen zusammen mit ListView- und FlipView-Steuerelementen verwendet, um anzugeben, wie Daten in den Steuerelementen angezeigt werden.

Eine Vorlage wird im Allgemeinen deklarativ definiert, indem ein DIV-Element für die Vorlage erstellt und ein data-win-control-Attribut mit dem Wert WinJS.Binding.Template hinzugefügt wird. Dies führt dazu, dass das DIV-Element das angegebene WinJS-Steuerelement hostet. Dies ist der Code für die Vorlage, die vom FlipView-Steuerelement verwendet wird.

Hilo\Hilo\detail\detail.html


<div id="image-template" data-win-control="WinJS.Binding.Template">
    <div class="flipViewBackground">
        <div class="flipViewImage" data-win-bind="backgroundImage: src Hilo.Picture.bindToImageSrc">
        </div>
    </div>
</div>


Ein Vorlagenobjekt muss über ein einzelnes Stammelement (flipViewBackground) verfügen, das als übergeordnetes Element für den Inhalt der Vorlage dient. Hier enthält das übergeordnete Element nur ein untergeordnetes Element, nämlich flipViewImage. Das data-win-bind-Attribut dieses Elements bindet die backgroundImage -Eigenschaft an die src-Eigenschaft. Die src-Eigenschaft wird von der Hilo.Picture.bindToImageSrc-Funktion festgelegt.

Das FlipView-Steuerelement kann die Vorlage dann zum Anzeigen von Daten verwenden. Dies ist der Code.

Hilo\Hilo\detail\detail.html


<div id="flipview"
    data-win-control="WinJS.UI.FlipView"
    data-win-options="{ 
        itemTemplate: select('#image-template')}">
</div>


Die im data-win-options-Attribut festgelegte itemTemplate-Eigenschaft ordnet das FlipView-Steuerelement der vorher definierten Vorlage mit dem Namen image-template zu.

Hinweis  Die Höhe des FlipView-Steuerelements wird nicht automatisch an die jeweiligen Inhalte angepasst. Damit ein FlipView-Steuerelement gerendert wird, müssen Sie einen absoluten Wert für die Höhe angeben.

In der ready-Funktion des Seitensteuerelements (detail.js) wird das Steuerelement FlipView mithilfe der CSS-Abfrageauswahlsyntax zurückgegeben. Eine Instanz der DetailPresenter-Klasse wird initialisiert, und anschließend wird die start-Funktion der DetailPresenter-Instanz aufgerufen. Hier ist der Code.

Hilo\Hilo\detail\detail.js


ready: function (element, options) {

    var query = options.query;
    var queryDate = query.settings.monthAndYear;
    var pageTitle = Hilo.dateFormatter.getMonthFrom(queryDate) + " " + Hilo.dateFormatter.getYearFrom(queryDate);
    this.bindPageTitle(pageTitle);

    var hiloAppBarEl = document.querySelector("#appbar");
    var hiloAppBar = new Hilo.Controls.HiloAppBar.HiloAppBarPresenter(hiloAppBarEl, WinJS.Navigation, query);

    var filmstripEl = document.querySelector("#filmstrip");
    var flipviewEl = document.querySelector("#flipview");

    var flipviewPresenter = new Hilo.Detail.FlipviewPresenter(flipviewEl);
    var filmstripPresenter = new Hilo.Detail.FilmstripPresenter(filmstripEl);


    var detailPresenter = new Hilo.Detail.DetailPresenter(filmstripPresenter, flipviewPresenter, hiloAppBar, WinJS.Navigation);
    detailPresenter.addEventListener("pageSelected", function (args) {
        var itemIndex = args.detail.itemIndex;
        options.itemIndex = itemIndex;
    });

    detailPresenter
        .start(options)
        .then(function () {
            WinJS.Application.addEventListener("Hilo:ContentsChanged", Hilo.navigator.reload);
        });
},


Die start-Funktion führt eine Abfrage durch, um Bilder zum Auffüllen des FlipView-Steuerelements zurückzugeben. Anschließend wird die DetailPresenter.bindImages-Funktion aufgerufen, um eine neue Instanz der FlipviewPresenter-Klasse zu erstellen. Vom FlipviewPresenter-Konstruktor wird wiederum die FlipviewPresenter.bindImages-Funktion aufgerufen, um das FlipView-Steuerelement an die Datenquelle zu binden. Dies ist der Code für die FlipviewPresenter.bindImages-Funktion.

Hilo\Hilo\detail\flipviewPresenter.js


bindImages: function (images) {
    this.bindingList = new WinJS.Binding.List(images);
    this.winControl.itemDataSource = this.bindingList.dataSource;
},


Sie verweisen über die winControl-Variable auf das FlipView-Steuerelement. Für die Bindung erfordert das FlipView-Steuerelement eine Datenquelle, von der IListDataSource implementiert wird. Für Datenarrays im Speicher verwendet Hilo WinJS.Binding.List. Von der itemDataSource-Eigenschaft wird ein IListDataSource-Objekt verwendet. Das List-Objekt ist keine IListDataSource, verfügt aber über eine dataSource-Eigenschaft, die eine IListDataSource-Version von sich selbst zurückgibt.

Weitere Informationen zur Bindung mithilfe von Vorlagen finden Sie in diesem Leitfaden unter So wird's gemacht: Verwenden von Vorlagen zum Binden von Daten und Verwenden von Datenquellen. Weitere Informationen zum FlipView-Steuerelement finden Sie unter Schnellstart: Hinzufügen eines FlipView-Steuerelements.

[Oben]

AppBar

Das AppBar-Steuerelement ist eine Symbolleiste zum Anzeigen App-spezifischer Befehle. Hilo zeigt unten auf jeder Seite eine App-Leiste an. Außerdem wird auf der Bildbetrachtungsseite eine Navigationsleiste mit einem Bildstreifen für den aktuellen Monat angezeigt.

Die Schaltflächen auf der unteren App-Leiste der Bildbetrachtungsseite werden wie folgt dargestellt.

App-Leistenschaltflächen zum Drehen und Zuschneiden

Fügen Sie einer Seite Schaltflächen für die Navigation oder wichtige Funktionen für eine App hinzu. Platzieren Sie Schaltflächen auf der der App-Leiste, die nicht für die Navigation oder die Verwendung der App benötigt werden. Beispielsweise kann der Benutzer auf der Seite mit der Monatsansicht auf den Text eines bestimmten Monats klicken, um alle Fotos für diese Monat anzuzeigen. Nach unserem Dafürhalten wird die Navigation dadurch wesentlich erleichtert. Die Befehle zum Drehen und Zuschneiden wurden dagegen der App-Leiste hinzugefügt. Sie stellen sekundäre Befehle dar, und eine Ablenkung des Benutzers sollte vermieden werden.

Die Position der App-Leiste auf einer Seite wird durch die zugehörige placement-Eigenschaft gesteuert. Hilo verfügt über ein Steuerelement für die Bildnavigation, über das eine wiederverwendbare Implementierung der unteren App-Leiste bereitgestellt wird. Dieses Steuerelement kann zum Navigieren auf die Seiten für die Bilddrehung und den Bildzuschnitt verwendet werden. Dies ist der HTML-Code für die untere App-Leiste auf der Bildbetrachtungsseite.

Hilo\Hilo\detail\detail.html


<section id="image-nav" data-win-control="WinJS.UI.HtmlControl" data-win-options="{uri: '/Hilo/controls/HiloAppBar/hiloAppBar.html'}"></section>


Laut UI-Richtlinien für App-Leisten blendet die App-Leiste automatisch Beschriftungen aus und passt den Abstand an, wenn sie angedockt ist oder das Hochformat aktiv ist. Weitere Informationen zu App-Leisten finden Sie unter Schnellstart: Hinzufügen von App-Leisten mit Befehlen und Richtlinien und Prüfliste für App-Leisten. Weitere Informationen zur Verwendung des Steuerelements AppBar in Hilo finden Sie in diesem Leitfaden unter Vom Rand aus streifen: App-Befehle.

[Oben]

SemanticZoom

Ein SemanticZoom-Steuerelement, ermöglicht dem Benutzer, zwischen zwei Ansichten einer Sammlung zu zoomen. Weitere Informationen zur Verwendung dieses Steuerelements für die Navigation zwischen großen Bildersammlungen finden Sie in diesem Leitfaden unter Zusammendrücken/Aufziehen: Zoom

[Oben]

Canvas

Das HTML-Element canvas stellt ein Objekt bereit, das zum Zeichnen, Rendern und Ändern von Bildern und Grafiken in einem Dokument verwendet werden kann. Dieses Element wurde zum visuellen Zuschneiden des Fotos verwendet, um darzustellen, welches Zuschneideergebnis sich nach dem Speichern der Datei ergibt.

Dies ist der HTML-Code für canvas.

Hilo\Hilo\crop\crop.html


<div class="canvas-wrapper">
    <canvas id="cropSurface"></canvas>
</div>


Nachfolgend finden Sie eine Darstellung der Zuschneidefunktion von Hilo.

Zugeschnittenes Bild auf der Canvas

Die Änderung des canvas-Elements wird in JavaScript vorgenommen. Mit dem Code wird die canvas-basierte Zuschneideauswahl abgerufen. Anschließend wird der ausgewählte Bereich des Originalbilds berechnet, indem die canvas-basierte Auswahl auf die Abmessungen des Originalbilds skaliert wird. Das Bild auf dem Bildschirm wird dann zugeschnitten, um darzustellen, welches Zuschneideergebnis sich nach dem Speichern der Datei ergibt. Mehrere Zuschneidevorgänge werden unterstützt, indem ein Versatz für die Startposition der Zuschneidung im Originalbild anstatt relativ zur Canvasgröße gespeichert wird. Dies ist der Code.

Hilo\Hilo\crop\imageView.js


cropImage: function () {
    var selectionRectScaledToImage = this.getScaledSelectionRectangle();
    // Reset image scale so that it reflects the difference between
    // the current canvas size (the crop selection) and the original 
    // image size, then re-draw everything at that new scale.
    this.imageToScreenScale = this.calculateScaleToScreen(selectionRectScaledToImage);
    this.drawImageSelectionToScale(selectionRectScaledToImage, this.imageToScreenScale);

    // Remember the starting location of the crop on the original image
    // and not relative to the canvas size, so that cropping multiple times
    // will correctly crop to what has been visually selected.
    this.image.updateOffset({ x: selectionRectScaledToImage.startX, y: selectionRectScaledToImage.startY });

    return this.canvasEl.toDataURL();
},


Weitere Informationen zum Zuschneiden von Elementen finden Sie in diesem Leitfaden unter Verwenden von Fingereingaben.

[Oben]

Img

Wir verwenden das HTML-Element img zum Anzeigen von Fotos auf den Seiten für die Bilddrehung und den Bildzuschnitt der App.

In einem IMG-Element angezeigtes Bild

Dies ist der HTML-Code für das img-Element auf der Seite für die Bilddrehung.

Hilo\Hilo\rotate\rotate.html


<img src="#" id="rotate-image" />


In der ready-Funktion des Seitensteuerelements (rotate.js) wird das img-Element mithilfe der CSS-Abfrageauswahlsyntax zurückgegeben. Eine Instanz der RotatePresenter-Klasse wird initialisiert, und anschließend wird die start-Funktion der RotatePresenter-Instanz aufgerufen. Hier ist der Code.

Hilo\Hilo\rotate\rotate.js


var imgEl = document.querySelector("#rotate-image");
this.presenter = new Hilo.Rotate.RotatePresenter(imgEl, this.appBarPresenter, fileLoader, expectedName, touchProvider);
this.presenter.start();


Die start-Funktion ruft wiederum die interne _loadAndShowImage-Funktion auf. Diese Funktion verwendet das Abfrageergebnis aus der Bildabfrage und zeigt das geladene Bild im img-Element an. Dies ist der Code für die _loadAndShowImage-Funktion.

Hilo\Hilo\rotate\rotatePresenter.js


_loadAndShowImage: function (queryResult) {
    var self = this;

    if (queryResult.length === 0) {
        this.navigation.back();

    } else {

        var storageFile = queryResult[0].storageFile;

        if (storageFile.name !== this.expectedFileName) {
            this.navigation.back();

        } else {

            this.hiloPicture = new Hilo.Picture(storageFile);
            this.el.src = this.hiloPicture.src.url;

            return storageFile.properties
                .getImagePropertiesAsync()
                .then(function (props) {
                    self.imageProperties = props;
                    self.adjustImageSize();
                });
        }
    }
},


Auf das img-Element wird über die el-Variable verwiesen. Daher legt der Code die src-Eigenschaft des img-Elements auf die URL des anzuzeigenden Bilds fest.

Hinweis  Das img-Element zeigt Fotos auf den Seiten für die Bilddrehung und den Bildzuschnitt der App an. Auf den anderen Seiten werden Fotos mithilfe der CSS-Eigenschaft backgroundImage eines DIV-Elements angezeigt.

Weitere Informationen zu Bildern finden Sie unter Anzeigen von Bildern, Grafiken und Miniaturansichten.

[Oben]

Formatieren von Steuerelementen

Die Darstellung von Hilo wurde durch das Formatieren der Steuerelemente in der App angepasst. Zum Anpassen der Darstellung der Steuerelemente verwenden Sie CSS. Eine Windows Store-App mit JavaScript unterstützt auch einige erweiterte Formatierungsfeatures für Steuerelemente. WinJS bietet einen Satz von Stilen, mit denen Sie Ihre App an das Erscheinungsbild von Windows 8 anpassen können.

Weitere Informationen finden Sie unter Hinzufügen und Formatieren von Steuerelementen und Schnellstart: Formatieren von Steuerelementen.

[Oben]

Fingereingaben und Gesten

Die WinJS-Laufzeit weist eine integrierte Unterstützung für Fingereingaben auf. Die Laufzeit verwendet für zahlreiche Interaktionen ein gängiges Ereignissystem. Sie können daher automatische Unterstützung für Maus-, Stift- und andere zeigerbasierte Eingaben abrufen. Die Seite für die Bilddrehung stellt eine Ausnahme dar. Sie verwendet die GestureRecognizer-Klasse zum Überwachen und Behandeln von Zeiger- und Gestikereignissen, mit denen Benutzer das angezeigte Foto drehen können.

Tipp  Entwerfen Sie Ihre App für Fingereingaben. Die Unterstützung von Maus- und Stifteingaben gibt es kostenlos dazu.

Weitere Informationen über die Verwendung von Fingereingaben in Hilo finden Sie unter Verwenden von Fingereingaben.

[Oben]

Testen von Steuerelementen

Achten Sie beim Testen Ihrer App darauf, dass die einzelnen Steuerelemente in unterschiedlichen Konfigurationen und Ausrichtungen das gewünschte Verhalten aufweisen. Beim Verwenden eines Steuerelements zum Hinzufügen einer neuen Funktion zur App wurde sichergestellt, dass das Steuerelement in angedockten und gefüllten Ansichten sowie sowohl im Querformat als auch im Hochformat das richtige Verhalten aufweist.

Wenn Ihr Monitor keine Fingereingaben unterstützt, können Sie mithilfe des Simulators das Zusammenziehen und Auseinanderrücken, das Zoomen, das Drehen und andere Gesten emulieren. Darüber hinaus können Sie mit unterschiedlichen Bildschirmauflösungen arbeiten. Weitere Informationen finden Sie unter Ausführen von Apps im Simulator.

Sie können Ihre App auf einem Computer testen, der nicht über Visual Studio, jedoch über die erforderliche Hardware verfügt. Weitere Informationen finden Sie unter Ausführen von Apps auf einem Remotecomputer.

Weitere Informationen zum Testen von Hilo finden Sie unter Testen und Bereitstellen von Apps.

[Oben]

 

 

Anzeigen:
© 2015 Microsoft