Verwenden der Fingereingabe in Hilo (Windows Store-Apps mit JavaScript und HTML)

Applies to Windows only

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

Leitfaden-Logo

Vorherige Seite | Nächste Seite

Hilo bietet Beispiele für Tipp-, Zieh-, Streif-, Zusammendrück-, Aufzieh- und Drehbewegungen. An dieser Stelle wird erläutert, wie wir die Windows 8-Sprache für die Fingereingabe auf Hilo angewendet haben, damit auf jedem Gerät eine großartige Benutzererfahrung geboten wird.

Download

Herunterladen des Hilo-Beispiels
Buch herunterladen (PDF)

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

Sie erfahren Folgendes:

  • Verwendung der Windows 8-Sprache für die Fingereingabe in Hilo

Betrifft

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

Zum Bereitstellen einer großartigen Benutzererfahrung gehört, dass die App sowohl auf einem herkömmlichen Desktopcomputer als auch auf einem kleinen Tablet barrierefrei ist und intuitiv verwendet werden kann. Für Hilo haben wir die Fingereingabe in den Vordergrund unserer UX-Planung gestellt, da sie eine komfortable Interaktion zwischen Benutzer und App ermöglicht und damit eine optimale Benutzererfahrung bietet.

Wie unter Entwerfen der UX (Hilo C++) beschrieben, ist die Fingereingabe nicht lediglich eine Alternative zur Verwendung einer Maus. Wir wollten die Fingereingabe zu einem Teil der App machen, da sie zu einer persönlichen Verbindung zwischen dem Benutzer und der App beitragen kann. Die Fingereingabe ist außerdem eine natürliche Methode, mit der Benutzer ihre Fotos zuschneiden und drehen können. Darüber hinaus zeigen wir mit semantischem Zoom, wie einfach die Navigation zwischen verschiedenen Stufen mit ähnlicher Komplexität ist. Wenn der Benutzer auf der Monatsseite die Zusammendrückbewegung verwendet, ändert sich die Ansicht in eine kalenderbasierte Ansicht. Benutzer können dann Fotos schneller durchsuchen.

In Hilo wird die Windows 8-Sprache für Fingereingaben verwendet. Wir verwenden aus den folgenden Gründen die Standard-Fingereingabegesten von Windows:

  • Die Windows-Runtime ermöglicht ein einfaches Arbeiten mit diesen Gesten.
  • Wir wollen die Benutzer nicht durch das Erstellen von benutzerdefinierten Interaktionen verwirren.
  • Wir möchten, dass Benutzer die App mit Gesten erkunden, die sie bereits kennen, und keine neuen Gesten erlernen müssen.

Hilo sollte auch für Benutzer intuitiv zu verwenden sein, die eine Maus oder ein ähnliches Zeigegerät verwenden. Die integrierten Steuerelemente lassen sich mit einer Maus oder einem anderen Zeigegerät genauso gut wie per Fingereingabe verwenden. Wenn Sie eine App für die Fingereingabe entwerfen, erhalten Sie gleichzeitig die entsprechende Funktionalität für Maus und Zeichenstift. Sie können z. B. die linke Maustaste zum Aufrufen von Befehlen verwenden. Darüber hinaus stehen für viele Befehle die entsprechenden Maus- und Tastaturfunktionen zur Verfügung. Beispielsweise können Sie mit der rechten Maustaste die App-Leiste aktivieren, und durch Drehen des Mausrads bei gedrückter STRG-TASTE wird der semantische Zoom gesteuert.)

Die Windows 8-Sprache für die Fingereingabe wird im Dokument Design für Interaktion per Fingereingabe erläutert. In den folgenden Abschnitten wird beschrieben, wie wir die Windows 8-Sprache für die Fingereingabe auf Hilo angewendet haben.

[Oben]

Tippen: Hauptaktion

Durch das Tippen auf ein Element wird dessen primäre Aktion aufgerufen. Beispielsweise tippen Sie im Zuschneidmodus auf den Zuschneidbereich, um das Bild zuzuschneiden.

Zuschneidmodus in Hilo

Für die Implementierung der Zuschneidung wurde eine canvas verwendet. Das click-Ereignis der canvas initiiert die Zuschneidung. Das Ereignis wird für Zeigegeräte und Fingereingabe ausgelöst. In der ready-Funktion der Seitensteuerung (crop.js) wird die setupImageView-Funktion aufgerufen. Mit dieser Funktion wird eine Instanz der ImageView-Klasse erstellt. Dies ist der Code.

Hilo\Hilo\crop\setupImageView.js


this.imageView = new Hilo.Crop.ImageView(image, this.cropSelection, canvasEl, imageEl);


Wir haben einen Listener im ImageView-Konstruktor hinzugefügt. Der Listener gibt die Funktion an, die beim Klicken auf die Canvas ausgeführt wird. Mit WinJS.Class.mix wird die ImageView-Klasse definiert. Der eventMixin-Mixin wird verwendet.

Hilo\Hilo\crop\imageView.js


canvasEl.addEventListener("click", this.click.bind(this));


Von der click-Funktion wird einfach das Vorschauereignis ausgelöst.

Hilo\Hilo\crop\imageView.js


this.dispatchEvent("preview", {});


Wir haben einen Listener in der start-Funktion in der CropPresenter-Klasse hinzugefügt. Dieser Listener gibt die Funktion an, die ausgeführt wird, wenn das Vorschauereignis von der ImageView-Klasse empfangen wird.

Hilo\Hilo\crop\cropPresenter.js


this.imageView.addEventListener("preview", this.cropImage.bind(this));


Von der cropImage-Funktion wird die cropImage-Funktion der ImageView-Klasse aufgerufen. Mit der Funktion wird die Canvas-basierte Zuschneideauswahl abgerufen. Anschließend wird der ausgewählte Bereich des Originalbilds berechnet. Bei dieser Berechnung wird die Canvas-basierte Auswahl auf die Abmessungen des Originalbilds skaliert. Das Bild auf dem Bildschirm wird dann zugeschnitten, um darzustellen, welches Zuschneideergebnis sich nach dem Speichern der Datei ergibt. Um mehrere Zuschneidevorgänge zu unterstützen, speichern wir einen Versatz, mit dem die Startposition der Zuschneidung im Originalbild anstatt relativ zur Canvasgröße dargestellt wird. Hier sehen Sie den 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();
},


[Oben]

Ziehen: Verschiebung

In Hilo erfolgt die Verschiebung unter Bildern in einer Sammlung mithilfe der Ziehbewegung. Beim Anzeigen eines Bilds beispielsweise können Sie außerdem mithilfe des FlipView-Steuerelements oder des Bildstreifens, der beim Aktivieren der App-Leiste eingeblendet wird, schnell zu einem Bild in der aktuellen Auflistung schwenken. Zum Implementieren des Bildstreifens verwendeten wir das ListView-Steuerelement.

Bildstreifen mit einem ListView-Steuerelement

Die Verwendung des ListView-Objekts bietet den Vorteil, dass es über integrierte Fingereingabefunktionen verfügt, sodass kein zusätzlicher Code benötigt wird.

[Oben]

Streifen: Auswählen, Befehle und Schieben

Bei der Streifbewegung ziehen Sie den Finger im rechten Winkel zur Schwenkrichtung, um Objekte auszuwählen. Wenn in Hilo eine Seite mehrere Bilder enthält, können Sie mit dieser Bewegung ein Bild auswählen. Wenn die App-Leiste angezeigt wird, gelten die angezeigten Befehle für das ausgewählte Bild. ListView und weitere Steuerelemente bieten integrierte Unterstützung für die Auswahl. Mit der selection-Eigenschaft können Sie das ausgewählte Element abrufen.

Ausgewähltes Element mit zwei unterstützten Steuerelementen auf der App-Leiste

[Oben]

Zusammendrücken/Aufziehen: Zoom

Die Zusammendrück- und Aufziehbewegung dienen nicht nur zum Vergrößern oder zum Ausführen von optischem Zoom. In Hilo wird semantischer Zoom zum Navigieren zwischen großen Gruppen von Bildern verwendet. Mit semantischem Zoom können Sie zwischen zwei verschiedenen Ansichten des gleichen Inhalts umschalten. In der Regel gibt es eine Hauptansicht des Inhalts und eine zweite Ansicht, die Benutzern die schnelle Navigation im Inhalt ermöglicht. (Weitere Informationen zum semantischen Zoom finden Sie unter Schnellstart: Hinzufügen eines semantischen Zooms.)

Wenn Sie auf der Monatsseite die Ansicht verkleinern, ändert sich die Ansicht in eine kalenderbasierte Ansicht. In der Kalenderansicht werden die Monate hervorgehoben, die Fotos enthalten. Sie können dann die Ansicht wieder vergrößern, um die bildbasierte Monatsansicht anzuzeigen. Das folgende Diagramm zeigt die beiden Ansichten, zwischen denen der semantische Zoom wechselt.

Kalenderbasierte Bildansicht

Zum Implementieren von semantischem Zoom haben wir das SemanticZoom-Objekt verwendet. Anschließend haben wir Steuerelemente für die vergrößerte und die verkleinerte Ansicht bereitgestellt. Die IZoomableView-Schnittstelle muss von den Steuerelementen implementiert werden. In Hilo wird das ListView-Steuerelement zum Implementieren des semantischen Zooms verwendet.

Hinweis  Von WinJS wird ein Steuerelement bereitgestellt, mit dem IZoomableView implementiert wird. Dies ist das ListView-Steuerelement. Sie können auch eigene benutzerdefinierte Steuerelemente erstellen, mit denen IZoomableView implementiert wird, oder ein vorhandenes Steuerelement erweitern, um IZoomableView zu unterstützen, damit Sie sie mit dem SemanticZoom verwenden können.

Für die vergrößerte Ansicht wird ein ListView-Steuerelement angezeigt, das an Miniaturansichten von Fotos gebunden wird, die nach Monat gruppiert sind. In der ListView wird außerdem für jede Gruppe eine Kachel (der Monat und das Jahr) angezeigt. Weitere Informationen zur Implementierung der vergrößerten Ansicht finden Sie unter Verwenden von Datenquellen.

Für die verkleinerte Ansicht wird ein ListView-Steuerelement angezeigt, das an Miniaturansichten von Fotos gebunden wird, die nach Jahr gruppiert sind. Dies ist der HTML-Code für die verkleinerte Ansicht:

Hilo\Hilo\month\month.html


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


Mit dem DIV-Element wird ein data-win-control-Attribut angegeben, das den Wert Hilo.month.YearList aufweist. Damit wird das DIV-Element als Host für das YearList-Steuerelement festgelegt. Die YearList-Klasse, von der das Steuerelement implementiert wird, erstellt und initialisiert ein neues ListView-Objekt. Dies ist der Code.

Hilo\Hilo\month\yearList.js


var listViewEl = document.createElement("div");

element.appendChild(listViewEl);

var listView = new WinJS.UI.ListView(listViewEl, {
    layout: { type: WinJS.UI.GridLayout },
    selectionMode: "none",
    tapBehavior: "none"
});

this.listView = listView;
listView.layout.maxRows = 3;


Mit der YearList-Klasse wird auch eine Vorlage zum Formatieren und Anzeigen der einzelnen Dateninstanzen in der Jahresgruppe erstellt. Wir erstellen diese Vorlage, indem wir die itemTemplate-Eigenschaft der ListView auf eine Funktion festlegen, mit der DOM-Elemente für die einzelnen Elemente der Jahresgruppe generiert werden.

Weitere Informationen zum Einrichten einer Datenquelle finden Sie unter Verwenden von Datenquellen.

Weitere Informationen zum semantischen Zoom finden Sie unter Schnellstart: Hinzufügen eines semantischen Zooms und Richtlinien für semantischen Zoom.

[Oben]

Drehen

In der Ansicht zum Drehen von Bildern können Sie das Bild mithilfe von zwei Fingern drehen. Wenn Sie die Finger vom Bild lösen, wird das Bild im nächsten 90-Grad-Winkel fixiert.

Drehen eines Bilds um 90 Grad

Mit der ready-Funktion der Seitensteuerungsklasse für die Seite für die Bilddrehung (rotate.js) wird eine neue Instanz der TouchProvider-Klasse erstellt. Dies ist der Code.

Hilo\Hilo\rotate\rotate.js


var touchProvider = new Hilo.Rotate.TouchProvider(element);


Die TouchProvider-Klasse stellt Logik zum Darstellen der Fotodrehung bereit, wenn die Drehbewegung angewendet wird. Mit dem Konstruktor wird eine Instanz der GestureRecognizer-Klasse erstellt, die alle Zeiger- und Gestikereignisse überwacht und verarbeitet. Die Gestikerkennung ist so konfiguriert, dass nur die Drehbewegung verarbeitet wird. Anschließend werden Ereignislistener für die DOM-Zeigerereignisse MSPointerDown, MSPointerMove und MSPointerUp sowie die Ereignisse manipulationupdated und manipulationcompleted registriert. Für diese DOM-Zeigerereignisse werden Funktionen registriert, mit denen das empfangene PointerPoint-Element lediglich an die Gestikerkennung übergeben wird.

Hilo\Hilo\rotate\TouchProvider.js


function TouchProviderConstructor(inputElement) {

    var recognizer = new Windows.UI.Input.GestureRecognizer();
    recognizer.gestureSettings = Windows.UI.Input.GestureSettings.manipulationRotate;

    this._manipulationUpdated = this._manipulationUpdated.bind(this);
    this._manipulationCompleted = this._manipulationCompleted.bind(this);

    inputElement.addEventListener("MSPointerDown", function (evt) {
        var pp = evt.currentPoint;
        if (pp.pointerDevice.pointerDeviceType === pointerDeviceType.touch) {
            recognizer.processDownEvent(pp);
        }
    }, false);

    inputElement.addEventListener("MSPointerMove", function (evt) {
        var pps = evt.intermediatePoints;
        if (pps[0] && pps[0].pointerDevice.pointerDeviceType === pointerDeviceType.touch) {
            recognizer.processMoveEvents(pps);
        }
    }, false);

    inputElement.addEventListener("MSPointerUp", function (evt) {
        var pp = evt.currentPoint;
        if (pp.pointerDevice.pointerDeviceType === pointerDeviceType.touch) {
            recognizer.processUpEvent(pp);
        }
    }, false);

    recognizer.addEventListener("manipulationupdated", this._manipulationUpdated);
    recognizer.addEventListener("manipulationcompleted", this._manipulationCompleted);

    this.displayRotation = 0;
},


Die Ereignisse manipulationupdated und manipulationcompleted werden zum Behandeln von Drehungsereignissen verwendet. Die _manipulationUpdated-Methode aktualisiert den Drehwinkel, und die _manipulationCompleted-Methode fixiert die Drehung am nächsten 90-Grad-Wert. Hier ist der Code.

Hilo\Hilo\rotate\TouchProvider.js


_manipulationUpdated: function (args) {
    this.setRotation(args.cumulative.rotation);
},

_manipulationCompleted: function (args) {
    var degrees = args.cumulative.rotation;
    var adjustment = Math.round(degrees / 90) * 90;
    this.animateRotation(adjustment);
}


Achtung  Diese Ereignishandler sind für die gesamte Seite definiert. Wenn die Seite mehrere Elemente enthält, benötigen Sie zusätzliche Logik, um das zu bearbeitende Objekt zu bestimmen.

Die Seitensteuerungsklasse für die Seite für die Bilddrehung (rotate.js) übergibt die Instanz der TouchProvider-Klasse an die RotatePresenter-Klasse, in der die Methoden setRotation und animateRotation der TouchProvider-Klasse auf interne Methoden der RotatePresenter-Klasse festgelegt werden.

Hilo\Hilo\rotate\rotatePresenter.js


touchProvider.setRotation = this._rotateImageWithoutTransition;
touchProvider.animateRotation = this._rotateImage;


Von Aufrufen der Methoden setRotation und animateRotation in der TouchProvider-Klasse werden die internen Methoden _rotateImageWithoutTransition und _rotateImage der RotatePresenter-Klasse aufgerufen. So wird das Bild auf dem Bildschirm gedreht angezeigt, indem die CSS-Drehung des Bildelements festgelegt wird.

Weitere Informationen finden Sie unter Schnellstart: Zeiger, Schnellstart: DOM-Gesten und -Manipulationen, Schnellstart: Statische Gesten und Richtlinien für Drehung.

[Oben]

Vom Rand aus streifen: App-Befehle

Wenn relevante Befehle anzuzeigen sind und der Benutzer eine Streifbewegung vom unteren oder oberen Bildschirmrand ausführt, wird in Hilo die App-Leiste angezeigt.

Für jede Seite können eine Navigationsleiste, eine untere App-Leiste oder beide Leisten definiert sein. Beispielsweise werden in Hilo beide App-Leisten angezeigt, wenn Sie ein Bild anzeigen und die App-Leiste aktivieren.

Im Folgenden ist die Navigationsleiste dargestellt.

Obere App-Leiste

Dies ist die untere App-Leiste für das gleiche Foto.

Untere App-Leiste

Die Position der App-Leiste auf einer Seite wird durch die zugehörige placement-Eigenschaft gesteuert.

Von Hilo wird ein Steuerelement für die Bildnavigation implementiert, über das eine wiederverwendbare Implementierung der unteren App-Leiste bereitgestellt wird. Diese kann zum Navigieren auf die Seiten für die Bilddrehung und den Bildzuschnitt verwendet werden. Dieses Steuerelement beinhaltet zwei Teile:

  • Die Datei "hiloAppBar.html", die in alle Seiten eingebunden werden kann, die die App-Leiste für die Navigation benötigen.
  • Die Datei "hiloAppBarPresenter.js". Dies ist der Controller, mit dem die Funktionalität der App-Leiste bereitgestellt wird.

Dieses Steuerelement wird auf der Hub-, der Monats- und der Detailseite verwendet. Zum Hinzufügen des Steuerelements fügen wir im Markup der Seite und der Seitensteuerungsdatei einen Verweis darauf hinzu. Dies ist der Code zum Hinzufügen zum Markup der Seite.

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>


In der Seitensteuerungsdatei erfordert das HiloAppBarPresenter-Element einen Verweis auf das HTML-Element, mit dem das Steuerelement auf dem Bildschirm angeordnet wird. Hier sehen Sie den Code:

Hilo\Hilo\detail\detail.js


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


Achtung  In der Regel sollte eine App-Leiste nicht programmatisch angezeigt werden, wenn keine relevanten Befehle zum Anzeigen vorhanden sind. Auf der Hubhauptseite wird die App-Leiste beispielsweise angezeigt, wenn ein Foto durch Aufrufen der HiloAppBarPresenter.setNavigationOptions-Methode ausgewählt wird. Durch Aufrufen der HiloAppBarPresenter.clearNavigationOptions-Methode wird die App-Leiste ausgeblendet.

Weitere Informationen zu App-Leisten finden Sie unter Hinzufügen von App-Leisten.

[Oben]

Vom Rand aus streifen: Systembefehle

Da die Interaktion per Fingereingabe unter Umständen weniger genau ist als mit anderen Zeigegeräten, z. B. einer Maus, wurde zwischen den Steuerelementen und den Bildschirmrändern ausreichend Abstand gelassen. Da wir diesen Abstand eingehalten haben, kann der Benutzer problemlos eine Streifbewegung vom Bildschirmrand ausführen, um die App-Leisten, Charms oder zuvor verwendete Apps anzuzeigen. Weitere Informationen finden Sie unter Gestalten einer App-Seite.

[Oben]

 

 

Anzeigen:
© 2014 Microsoft