Modernisierte Eingabe unter Windows 8

Entwicklerblog für Windows 8-Apps

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

Modernisierte Eingabe unter Windows 8

Rate This
  • Comments 3

Eine unserer Zielsetzungen für Windows 8 war die Modernisierung der Eingabeplattform. Zum einen wollten wir die Entwicklung für die Plattform vereinfachen, andererseits sollte jedoch auch eine Grundlage geschaffen werden, die mit neuen Eingabemethoden, die während der Weiterentwicklung von Windows und Apps entstehen, wachsen und diese unterstützen kann.

Im Rahmen dieser Ziele haben wir uns auf die zentralen Grundlagen konzentriert, nach denen sich unser Design richtet. In diesem Blogbeitrag möchte ich die Bedeutung dieser Prinzipien erläutern und veranschaulichen, wie Sie die Plattform zum Erstellen großartiger Apps für Windows 8 nutzen können.

Plattformgrundlagen

Windows hat sich stets durch die Apps definiert, die auf dem Betriebssystem ausgeführt wurden. Apps stellen für viele Benutzer den Großteil der Windows-Funktionalität dar, und dies ist bei Windows 8 erst recht der Fall. Unter Windows 8 werden die meisten Funktionen des Betriebssystems durch Apps bereitgestellt. Die Apps müssen daher so interaktiv und vorhersagbar wie möglich reagieren, um das Vertrauen der Benutzer zu gewinnen. In ähnlicher Weise müssen auch der Entwicklungsprozess und die Plattform konsistent und vorhersehbar sein. Wir haben die Rolle der Hardware in den Beiträgen Windows 8-Touch-Oberfläche auf Windows 7-Hardware und Touch-Hardware und Windows 8 erörtert sowie einige Aspekte Ihres Feedbacks diskutiert. Eine erfolgreiche Plattform muss eine problemlose Entwicklung ermöglichen, konsistent und vertrauenserweckend sein und über eine große Reichweite verfügen, damit Sie Ihrer Kreativität wirklich freien Lauf lassen können. Wir richteten uns aus diesem Grund nach folgenden Prinzipien:

Große Reichweite

Ziel hierbei ist es, möglichst viele Geräte einfach einbeziehen zu können. Aus Perspektive der Eingabeplattform bedeutet dies, dass eine breite Palette an Eingabetypen (Maus, Finger, Stift, Touchpads) und Formfaktoren (Slate, All-In-One, Desktop, Laptops, Convertibles) unterstützt werden muss. Die weite Verbreitung und der Erfolg der Windows-Plattform beruhen unter anderem darauf, dass so viele Formfaktoren und Geräte unterstützt werden. Im Gegenzug sollte die Plattformbereitstellung auf diesen Geräten so einfach wie möglich umgesetzt werden können.

Konsistenz und Vertrauen

Wir möchten, dass Sie eine konsistente und vertraute Umgebung vorfinden. Als Entwickler einer App sollten Sie den Benutzern nicht neue Interaktions- oder Eingabemethoden beibringen müssen. Durch die Nutzung einer konsistenten, Windows-weiten Umgebung können Sie darauf vertrauen, dass die Benutzer bereits wissen, wie sie mit Ihrer App interagieren können. Dies stärkt nicht nur das Vertrauen der Benutzer in die Apps und das Ökosystem, sondern vereinfacht auch die Entwicklung.

Vereinfachte Entwicklung

Eine Plattform kann nicht erfolgreich sein, wenn sie übermäßig kompliziert oder inkonsistent ist oder anderweitige Schwierigkeiten bei der Entwicklung bereitet. Aus diesem Grund stellt die Einfachheit der Entwicklung eine unserer leitenden Richtlinien dar.

Vorstellung der Eingabeplattform

Die Eingabeplattform setzt sich aus Schichten zusammen. Die unterste Ebene wird durch die Eingabe-APIs der Windows-Runtime gebildet, die ein Höchstmaß an Leistung und Flexibilität bieten. Darüber sind die Gesten- und Zeigerereignisse in den HTML- und XAML-Frameworks angesiedelt, durch die häufig verwendete Gesten- und Rohdatenereignisse für Apps zur Verfügung gestellt werden. Schließlich stellen die App-Vorlagen und -Steuerelemente grundlegende Funktionalitäten für unterschiedlichste Situationen bereit.

Die oberen Schichten der Eingabeplattform sind auf Hauptszenarien fokussiert, die unteren Schichten bieten zunehmend Flexibilität und Leistungsfähigkeit.
Abbildung 1: Die Eingabeplattform. Die oberen Schichten sind auf Hauptszenarien fokussiert, die unteren Schichten bieten zunehmend Flexibilität und Leistungsfähigkeit.

In den meisten Fällen können Sie einfach die App-Vorlagen und unsere HTML- und XAML-Steuerelemente verwenden, beispielsweise ListView oder SemanticZoom. Dadurch können Entwickler neben der grundlegenden Funktionalität auch zusätzliche Funktionen nutzen, wie die Unterstützung von häufig verwendeten Interaktionsmustern (z. B. die Fingereingabesprache), Fingereingabezielen, Barrierefreiheit, Toolintegration und vieles mehr.

Die Steuerelemente der Bildlaufansicht für HTML und XAML in Windows 8 ermöglichen insbesondere das Verschieben und Zoomen, eines der häufigsten Szenarien der Fingereingabe, sowie Verhaltensweisen wie Trägheit, Anstoßen an Inhaltsgrenzen und steuerbare Andockpunkte. Durch diese Verhaltensweisen können zudem Elemente „am Finger kleben“. Diese Funktion beruht auf einer darunter liegenden, als DirectManipulation bezeichneten Komponente. Ein Beispiel für diese Unterstützungsmöglichkeiten stellt das Startmenü von Windows 8 dar.

Angenommen, Sie entwickeln ein Spiel, ein angepasstes Steuerelement, benutzerdefinierte Visualisierungen, Gesten für 3D-Manipulation oder etwas anderes, das Rohdaten erfordert oder auf den Windows 8-Gesten aufbaut: In jedem Fall empfiehlt es sich, mit den Zeiger- und Gestenereignissen des Frameworks zu beginnen (HTML und XAML). Gesten umfassen einfache Interaktionen wie Tippen und kompliziertere wie gleichzeitiges Zoomen, Verschieben und Drehen. Die Zeiger-APIs, die wir in Kürze ausführlicher besprechen werden, stellen eine optimale Methode zur Eingabe von Maus-, Finger- und Stiftdaten in Windows 8 dar. Die Nutzung dieser Ereignisse erleichtert die Verwendung der Windows 8-Interaktionssprache in Ihrer App.

Schließlich befinden sich die Eingabe-APIs der Windows-Runtime in der untersten Schicht des Stapels. Diese APIs (GestureRecognizer, PointerPoint und PointerDevice) bieten neben vollständiger Flexibilität und Kontrolle auch kompletten Zugriff auf die Roheingabedaten und die damit verknüpften Eigenschaften, alle Gesten und die gesamte Gestenkonfiguration, Zeigergeräte-APIs und vieles mehr. Die WinRT-API-Eingabeschnittstelle umschließt alle anderen Schichten und stellt zusätzliche Funktionen und Leistung bereit. Lassen Sie Ihrer Kreativität freien Lauf!

Die der Eingabeplattform zugrundeliegenden Konzepte werden über alle Frameworks für Apps im Metro-Stil hinweg geteilt, und die API-Schnittstellen ähneln sich sehr. Der Grund hierfür ist, dass der Wissenstransfer zwischen den Frameworks vereinfacht werden sollte. Nach der Erstellung einer HTML-App im Metro-Stil wird es Ihnen leicht fallen, Eingaben in einer XAML-App im Metro-Stil zu handhaben oder direkt auf CoreWindow zu entwickeln.

In den folgenden Abschnitten konzentrieren wir uns auf die beiden unteren Schichten der Eingabeplattform. Wir stellen einige der Konzepte vor, auf denen die Plattform beruht, und erläutern, warum es wichtig war, Änderungen einzuführen.

Zeiger – Vereinheitlichen von Eingaben

Bei der Maus handelt es sich um ein einfaches Eingabegerät, vor allem im Vergleich zur Fingereingabe. Sie weist einen Positions- und einen Tastenzustand auf. Die intuitive Fingereingabe führt hingegen zu einer Komplexität, die bei einer Maus nicht vorhanden ist. Benutzer können gleichzeitig mehrere Finger verwenden, wodurch eine Differenzierung der Eingabedatenströme erforderlich wird. Bei der Maus gibt es den Status „Darauf zeigen“ („Hover“), allerdings unterstützen die meisten der derzeit erhältlichen Touch-Geräte diesen Status nicht. Die Fingereingabe beinhaltet außerdem interessante Eigenschaften für Apps, wie beispielsweise die Kontaktgeometrie von Berührungen. Ein Finger ist größer und weniger präzise als eine Maus. Bei der Betrachtung von Maus, Finger und Stift wurde deutlich, dass die vorhandenen APIs und Ansätze unzureichend waren.

Wir haben schnell erkannt, dass es sinnvoll ist, Eingaben in Kategorien einzuteilen: Es gibt „Zeigeeingaben“ wie bei Maus, Finger und Stift, „Texteingaben“ per Tastatur, Handschrift oder Spracherkennung usw. Wir haben andere interessante Eingabegeräte wie Surface und Kinect in Betracht gezogen und angefangen, Gemeinsamkeiten zwischen diesen Geräten und Methoden zu erkennen. Unsere Wahl fiel auf den Ansatz, die Zeigeeingaben in einer einheitlichen API-Schnittstelle unter der Bezeichnung „Zeiger“ („Pointer“) zusammenzufassen. Für uns stellte es einen Paradigmenwechsel dar, eine kohärente, einfachere Methodik für Maus, Finger und Stift zu erstellen und an unsere Grundlagen für die Plattform anzupassen.

Betrachten wir beispielsweise eine sehr einfache App zum Zeichnen. Dort sollen Ereignisse für Bewegungen nach unten und oben sowie Verschiebungen aus verschiedenen Eingabemethoden verarbeitet werden. Wenn Sie möchten, dass die App auf Finger, Stift und Maus reagiert, würde eine Plattform ohne entsprechende Unterstützung möglicherweise erfordern, 9 verschiedene und redundante Ereignishandler zu erstellen. Im Folgenden sehen Sie, womit Sie auf dieser Plattform beginnen müssten:

// BAD! Don’t do this in your code.
class NaivePlatform
{
Dictionary<uint, Polyline> strokes = new Dictionary <uint, Polyline>();
Canvas PaintArea = new Canvas();

void OnMouseDown(MouseEventArgs e) { CommonDownHandler(e.Id, e.Position); }
void OnMouseMove(MouseEventArgs e) { CommonMoveHandler(e.Id, e.Position); }
void OnMouseUp(MouseEventArgs e) { CommonUpHandler(e.Id, e.Position); }

void OnPenDown(PenEventArgs e) { CommonDownHandler(e.Id, e.Position); }
void OnPenMove(PenEventArgs e) { CommonMoveHandler(e.Id, e.Position); }
void OnPenUp(PenEventArgs e) { CommonUpHandler(e.Id, e.Position); }

void OnTouchDown(TouchEventArgs e) { CommonDownHandler(e.Id, e.Position); }
void OnTouchMove(TouchEventArgs e) { CommonMoveHandler(e.Id, e.Position); }
void OnTouchUp(TouchEventArgs e) { CommonUpHandler(e.Id, e.Position); }

void CommonDownHandler(uint pointerId, Point position)
{
// Create a new stroke for this pointer and set its basic properties
var stroke = new Polyline();
stroke.Points.Add(position);
stroke.Stroke = new SolidColorBrush(Colors.Red);
stroke.StrokeThickness = 3;

// Add the stroke to dictionary so we can update it in CommonMoveHandler
strokes[pointerId] = stroke;

// Add the stroke to the canvas so that it is rendered
PaintArea.Children.Add(stroke);
}

void CommonMoveHandler(uint pointerId, Point position)
{
try
{
// Update the stroke associated to this pointer with the new point
strokes[pointerId].Points.Add(position);
}
catch (KeyNotFoundException)
{
// this pointer is not painting - ignore it
}
}

void CommonUpHandler(uint pointerId, Point position)
{
// This stroke is completed, so remove it from the dictionary.
// It will still be rendered because we are not removing it from the canvas.
strokes.Remove(pointerId);
}
}

Diese Art von Code ist offensichtlich unelegant und fehleranfällig beim Kopieren und Einfügen. Beachten Sie zudem, dass es sich hierbei um ein extrem vereinfachtes Beispiel handelt. Eine tatsächlichen App zum Zeichnen müsste wahrscheinlich Ereignisse zum Abbrechen und Rückgängigmachen von Strichen verarbeiten. Wenn der Druck des Stifts oder die Kontaktgeometrie der Fingereingabe die Zeichenstärke beeinflussen soll, wird die Nutzung häufig verwendeter Ereignishandler sehr viel beschwerlicher. Dies führt möglicherweise zu einer Abstraktion der Roheingabedaten – und damit würden Sie so etwas wie die Zeigerschnittstelle erstellen.

Die Zeigerversion der App zum Zeichnen verfügt stattdessen über eine einfache Reihe von Handlern für Bewegungen nach unten, nach oben und zum Verschieben:

// GOOD! Do this instead of the previous code.
void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
// Retrieve current point, in the coordinate system of the painting area
var currentPoint = e.GetCurrentPoint(PaintArea);

// Create new stroke for this pointer and set its basic properties
var stroke = new Windows.UI.Xaml.Shapes.Polyline();
stroke.Points.Add(currentPoint.Position);
stroke.Stroke = new Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.Colors.Red);
stroke.StrokeThickness = 3;

// Add the stroke to dictionary so we can update it in PointerMoved event handler
strokes[currentPoint.PointerId] = stroke;

// Add the stroke to the painting area so that it is rendered
PaintArea.Children.Add(stroke);
}

void OnPointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
// Retrieve current point, in the coordinate system of the painting area
var currentPoint = e.GetCurrentPoint(PaintArea);

try
{
// Update the stroke associated to this pointer with the new point
strokes[currentPoint.PointerId].Points.Add(currentPoint.Position);
}
catch (System.Collections.Generic.KeyNotFoundException)
{
// this pointer is not painting - ignore it
}
}

void OnPointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
// Retrieve current point, in the coordinate system of the painting area
var currentPoint = e.GetCurrentPoint(PaintArea);

// This stroke is completed, remove it from the dictionary.
// It will still be rendered because we are not removing it from PaintArea.
strokes.Remove(currentPoint.PointerId);
}

Zeigerereignisse, die Finger-, Stift- und Mauseingaben repräsentieren, weisen grundlegende allgemeine Eigenschaften auf, z. B. die Position der Eingabe, den Typ sowie eine zugeordnete ID. Zu jeder Methode gehören möglicherweise bestimmte Daten, die mit den entsprechenden Zeigerereignissen verbunden werden müssen. Beispielsweise sind bei Stiften Informationen zu Druck oder Neigung und bei Mäusen in der Regel mehrere Tastenzustände vorhanden, und ein Gerät wie Surface kann Tag- oder Sichtinformationen einbeziehen. Wir haben die Möglichkeit hinzugefügt, diese spezifischen Daten gemeinsam mit der Zeigerschnittstelle bereitzustellen. Wenn Zeigerdaten aus einer Fingereingabe vorliegen, beinhalten diese neben grundlegenden Eigenschaften wie Position und Zeiger-ID auch entsprechende zusätzliche Touch-Daten wie das Kontaktrechteck der Fingereingabe.

Diese Kombination ebnet den Weg für eine konsistentere Reihe von APIs, die den größten Teil des Zeigereingabecodes allgemein und einfach hält, während dennoch eine nach der Eingabemethode differenzierte Nutzung ermöglicht wird. Ein gutes Beispiel hierfür ist eine Notizen-App. Möglicherweise kann mit dem Stift geschrieben und per Fingereingabe verschoben und gezoomt werden, während für die Maus ein herkömmliches Auswahlmodell verwendet wird. Die Einzigartigkeit jeder Methode bleibt erhalten, der Code ist jedoch letztendlich einfach und unkompliziert.

Wenn wir für einen Augenblick das Internet in Betracht ziehen, wird die Zeigerschnittstelle sowohl für HTML-Apps im Metro-Stil als auch für den Browser (Metro-Stil und Desktop) verfügbar gemacht. Diese Umgebungen unterstützen selbstverständlich weiterhin W3C-Standards wie Mausereignisse, die im Vergleich zu Zeigern jedoch nur eingeschränkte Funktionalität bieten. Zeiger können problemlos auf zukünftige Eingabetypen ausgeweitet werden, wodurch das Hinzufügen von neuen Objekten für jede neue Eingabemethode (z. B. TouchEvent, TouchList und Touch) umgangen wird. An dieser Stelle weisen Zeiger ein besonders interessantes Potenzial auf.

Eines der wichtigsten Prinzipien bei der Entwicklung von Windows 8 war eine schnelle und flüssige Ausführung. Wenn der Eingabestapel nicht schnell und flüssig verarbeitet wird, können auch Apps nicht schnell und flüssig ausgeführt werden. Wir haben versucht, Pufferungen oder Verzögerungen bei der Fingereingabeverarbeitung zu reduzieren und die allgemeine Leistung der Fingereingabe-bezogenen Stapel zu optimieren. Ergebnis dieser Bemühungen ist eine schnelle Eingabe ohne Verzögerungen unter Windows 8. Die End-to-End-Latenz (vom Fingerkontakt mit dem Digitalisierungsgerät bis zur erkennbaren Reaktion auf dem Bildschirm) liegt auf Windows 8-Hardware bei 60 bis 70 ms. Für den Eingabestapel werden davon nur etwa 1 bis 2 ms aufgewendet.

Diagramm der Leistungsoptimierungen bei der Fingereingabe unter Windows 8
Abbildung 2: Aufgliederung der Leistungsoptimierungen bei der Fingereingabe unter Windows 8

Zeiger sowie deren Wechselwirkung mit dem Gestensystem waren bei der Leistungsoptimierung äußerst hilfreich. Diese Konzepte stimmen mit den der Plattform zugrunde liegenden Prinzipien ganz natürlich überein. Zudem wird die Verarbeitung verschiedenster Eingaben vereinfacht, wodurch sich die Reichweite automatisch erhöht, weniger Codezeilen erforderlich sind und ein Beitrag zur einfacheren Entwicklung geleistet wird.

Gesten – Die Fingereingabesprache als Bestandteil von Apps

Jeder kennt Gesten. Die meisten Benutzer denken nicht mehr über das Verschieben im Webbrowser oder das Tippen auf eine App zum Starten nach. Für uns stellen Gesten den Ausdruck der Windows 8-Interaktionssprache dar. Gesten weisen den Benutzereingaben auf intuitive Weise App- und Systemvorgänge zu.

Die Gesteneingabe basiert, nicht überraschend, auf dem Zeiger. Die meisten Apps verwenden zahlreiche Gesten, beispielsweise Tipp-, Schwenk- und Zoombewegungen. Der Rohdatenfluss der Zeiger wird fast ausschließlich zur Gestenerkennung genutzt.

Bei einer genauen Betrachtung der Eingabeplattformschichten ist zu erkennen, dass jede Schicht eine Reihe einheitlicher Gesten unterstützt, und diese Reihe die Windows 8-Interaktionssprache widerspiegelt. In den meisten Fällen ist es daher nicht erforderlich, den Benutzern neue Konzepte zur Verwendung von Apps beizubringen.

Abbildung der Zuordnung zwischen unterstützten Gesten und der Windows 8-Interaktionssprache
Abbildung 3: Windows 8-Interaktionssprache. Hier sehen Sie, wie die unterstützten Gesten zugeordnet sind.

Die Zeigereingabe steht unter Windows 8 allen Apps standardmäßig zur Verfügung. App-Entwickler wählen selbst aus, welche Daten der Gestenerkennung übermittelt werden, wie die Gestenerkennung konfiguriert ist und was mit der Ausgabe geschehen soll. Dadurch können Sie Apps flexibel und genau nach Ihren Vorstellungen entwickeln.

Die Interaktionssprache von Windows basiert auf dem Prinzip der direkten Manipulation: Inhalte sollen „an den Fingern haften“. Mit Manipulationen ist dies möglich. Auf der Plattform stellen Gesten erkannte Interaktionen dar, für die eine Benachrichtigung erstellt wird. Manipulationen sind als eine dieser Gestenarten definiert, neben weiteren Gesten wie Drücken und Halten oder Tippen. Dabei sind Manipulationen eine Kombination von Translations-, Skalierungs- und Drehungsänderungen (d. h. 2D-affine Transformationen). Wenn Sie beispielsweise auf der neuen Startseite schwenken, steckt dahinter eine Manipulation. Wenn Sie mithilfe eines zweiten Fingers zoomen, stellt dies ebenfalls eine Manipulation dar. Darüber hinaus kann der Übergang von der Fingereingabe mit einem auf zwei Finger sowie der Wechsel von Schwenken auf Zoomen (oder eine Kombination dieser Gesten) ganz einfach ausgedrückt werden.

Die HTML- und XAML-Frameworks stellen entsprechende Gestenereignisse bereit, die in den meisten Fällen ausreichen sollten. Wenn Sie weitere Steuerelemente benötigen, z. B. für zusätzliche Konfigurationsoptionen, verwenden Sie GestureRecognizer aus der Windows-Runtime. Die ersten Konfigurationsschritte könnten folgendermaßen lauten:

C#
// C#
public GestureManager(Windows.UI.Xaml.Shapes.Rectangle target, Windows.UI.Xaml.UIElement parent)
{
// Configure gesture recognizer
gestureRecognizer = new Windows.UI.Input.GestureRecognizer();
gestureRecognizer.GestureSettings =
Windows.UI.Input.GestureSettings.Hold |
Windows.UI.Input.GestureSettings.ManipulationRotate |
Windows.UI.Input.GestureSettings.ManipulationRotateInertia |
Windows.UI.Input.GestureSettings.ManipulationScale |
Windows.UI.Input.GestureSettings.ManipulationScaleInertia |
Windows.UI.Input.GestureSettings.ManipulationTranslateInertia |
Windows.UI.Input.GestureSettings.ManipulationTranslateX |
Windows.UI.Input.GestureSettings.ManipulationTranslateY |
Windows.UI.Input.GestureSettings.RightTap |
Windows.UI.Input.GestureSettings.Tap;

// Register event handlers for gestures
gestureRecognizer.ManipulationStarted += OnManipulationStarted;
gestureRecognizer.ManipulationUpdated += OnManipulationUpdated;
gestureRecognizer.ManipulationInertiaStarting += OnManipulationInertiaStarting;
gestureRecognizer.ManipulationCompleted += OnManipulationCompleted;
gestureRecognizer.Holding += OnHolding;
gestureRecognizer.RightTapped += OnRightTapped;
gestureRecognizer.Tapped += OnTapped;
}

JavaScript
// JS
function GestureManager(target, parent) {
var gestureRecognizer = new Windows.UI.Input.GestureRecognizer;

// Configure GestureRecognizer
gestureRecognizer.gestureSettings =
Windows.UI.Input.GestureSettings.hold |
Windows.UI.Input.GestureSettings.manipulationRotate |
Windows.UI.Input.GestureSettings.manipulationRotateInertia |
Windows.UI.Input.GestureSettings.manipulationScale |
Windows.UI.Input.GestureSettings.manipulationScaleInertia |
Windows.UI.Input.GestureSettings.manipulationTranslateInertia |
Windows.UI.Input.GestureSettings.manipulationTranslateX |
Windows.UI.Input.GestureSettings.manipulationTranslateY |
Windows.UI.Input.GestureSettings.rightTap |
Windows.UI.Input.GestureSettings.tap;

// Register event handlers for gestures
gestureRecognizer.addEventListener('manipulationstarted', onManipulationStarted);
gestureRecognizer.addEventListener('manipulationupdated', onManipulationUpdated);
gestureRecognizer.addEventListener('manipulationcompleted', onManipulationCompleted);
gestureRecognizer.addEventListener('manipulationinertiastarting',
onManipulationInertiaStarting);
gestureRecognizer.addEventListener('manipulationinertiacompleted',
onManipulationInertiaCompleted);
gestureRecognizer.addEventListener('holding', onHolding);
gestureRecognizer.addEventListener('tapped', onTapped);
gestureRecognizer.addEventListener('righttapped', onRightTapped);
}

Im Zentrum der App-Interaktion stehen Gesten. Bei den meisten Apps werden zunächst die Gesten deklariert, auf die die App reagiert, anschließend werden die eingehenden Zeigerdaten von der Gestenerkennung verarbeitet, und abschließend werden die resultierenden Gesten behandelt.

Im folgenden Codeausschnitt wird gezeigt, wie alle Zeigerdaten an die Gestenerkennung übermittelt werden, ohne dabei den Eingabetyp zu prüfen oder andere typenspezifische Verfahren auszuführen:

C#

// C#
void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
var currentPoint = e.GetCurrentPoint(parent);

// Make target capture the pointer associated to this event
target.CapturePointer(e.Pointer);

// Route the event to the gesture recognizer
gestureRecognizer.ProcessDownEvent(currentPoint);
}

void OnPointerMoved(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
// Route the event to the gesture recognizer
// We pass all intermediate points that might have been coalesced
// in a single PointerMove event.
gestureRecognizer.ProcessMoveEvents(e.GetIntermediatePoints(parent));
}

void OnPointerReleased(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
var currentPoint = e.GetCurrentPoint(parent);

// Route the event to the gesture recognizer
gestureRecognizer.ProcessUpEvent(currentPoint);

// Release pointer capture on the pointer associated to this event
target.ReleasePointerCapture(e.Pointer);
}

void OnPointerWheelChanged(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
var currentPoint = e.GetCurrentPoint(parent);
bool shift = (e.KeyModifiers & Windows.System.VirtualKeyModifiers.Shift) ==
Windows.System.VirtualKeyModifiers.Shift;
bool ctrl = (e.KeyModifiers & Windows.System.VirtualKeyModifiers.Control) ==
Windows.System.VirtualKeyModifiers.Control;

// Route the event to the gesture recognizer
gestureRecognizer.ProcessMouseWheelEvent(currentPoint, shift, ctrl);
}

JavaScript

// JS
function onPointerDown(evt) {
// Make target capture the pointer associated to this event
target.msSetPointerCapture(evt.pointerId);

// Route the event to the gesture recognizer
gestureRecognizer.processDownEvent(evt.getCurrentPoint(parent));
}

function onPointerMove(evt) {
// Route the event to the gesture recognizer
// We pass all intermediate points that might have been coalesced
// in a single PointerMove event.
gestureRecognizer.processMoveEvents(evt.getIntermediatePoints(parent));
}

function onPointerUp(evt) {
// Route the event to the gesture recognizer
gestureRecognizer.processUpEvent(evt.getCurrentPoint(parent));
}

function onWheel(evt) {
// Route the event to the gesture recognizer
gestureRecognizer.processMouseWheelEvent(evt.getCurrentPoint(parent), evt.shiftKey,
evt.ctrlKey);
}

Bei Apps zum Anzeigen von Dokumenten, z. B. Word, steht Schwenken und Zoomen im Vordergrund. Die Gestenerkennung kann für diese beiden Manipulationskomponenten konfiguriert werden (ohne Drehung). Wenn Zeigerdaten von der Hauptansicht übermittelt werden, leitet die App die Daten an die Gestenerkennung weiter. Die Gestenerkennung gibt Ereignisse zurück, die auf den Beginn, die Fortdauer (inklusive eines möglichen Übergangs in einen Trägheitszustand) oder das Ende der Manipulation verweisen.

Codieren für eine große Reichweite bei unterschiedlichen Methoden und Formfaktoren

Das Zeigerkonzept hat zu einem Umdenken in der Eingabeprogrammierung geführt. Zeiger tragen durch weniger Codezeilen zu einer vereinfachten App-Entwicklung bei, Apps können schneller im Store bereitgestellt sowie die Reichweite durch die problemlose Implementierung auf verschiedenen Eingabegeräten vergrößert werden. Zudem wird die Eingabeverarbeitung wesentlich vereinfacht. Wir bezeichnen dies auch als „Code für die Fingereingabe, das System kümmert sich um den Rest“.

Code für die Fingereingabe („Code For Touch“, CFT) ist das Ergebnis unserer neuen Betrachtungsweise der Eingabemethoden und wurde zu einer unserer leitenden Richtlinien. Der Ausdruck „Code für Zeiger, das System kümmert sich um Fingereingabe und standardmäßiges Maus- und Stiftverhalten“ ist vielleicht zutreffender. Mit CFT können Sie einfachen Code zur Verarbeitung von einheitlichen Zeigerereignissen schreiben, ohne sich Gedanken darüber machen zu müssen, redundante Handler für die drei wesentlichen Zeigereingaben zu schreiben. Wenn Ihre App eingabespezifische Verhaltensweisen aufweist, können Sie auch weitere, vom Betriebssystem nicht standardmäßig bereitgestellte Funktionalität umsetzen.

Jeder der oben erläuterten Zeigerereignishandler ist ein Beispiel für funktionstüchtigen CFT. Alle Gestenzeigerhandler sind nicht von der Eingabemethode abhängig. Sie nehmen üblicherweise die Zeigerdaten auf, legen die Erfassung fest, führen Treffertests und andere Zustandsverwaltungsaufgaben durch und übermitteln die Zeigerdaten anschließend an die Gestenerkennung.

C#

// C#
void OnPointerPressed(object sender, Windows.UI.Xaml.Input.PointerRoutedEventArgs e)
{
var currentPoint = e.GetCurrentPoint(parent);

// Make target capture the pointer associated to this event
target.CapturePointer(e.Pointer);

// Route the event to the gesture recognizer
gestureRecognizer.ProcessDownEvent(currentPoint);
}

JavaScript

// JS
function onPointerDown(evt) {
// Make target capture the pointer associated to this event
target.msSetPointerCapture(evt.pointerId);

// Route the event to the gesture recognizer
gestureRecognizer.processDownEvent(evt.getCurrentPoint(parent));
}

CFT bedeutet jedoch nicht nur große Reichweite und vereinfachte Entwicklung. Das Konzept steht auch in direktem Bezug zu Konsistenz und Vertrauen. Sie können beispielsweise eine Gestenerkennung für Tippen konfigurieren, die Tippvorgänge über alle drei Eingabemethoden ermöglicht. Die SecondaryTap-Konfiguration weist „Rechtsklick-ähnliche Gesten“ von der Maus (Rechtsklick), der Fingereingabe (Drücken und Halten) sowie der Stifteingabe (Drücken und Halten sowie Tippen mit der Drucktaste) einem einheitlichen Ereignis zu.

Das folgende Beispiel zeigt einen Ausschnitt der Gestenhandler Tap und RightTap:

C#

// C#
void OnTapped(Windows.UI.Input.GestureRecognizer sender, Windows.UI.Input.TappedEventArgs
args)
{
byte[] rgb = new byte[3];

// Randomly change the color of target
randomGenerator.NextBytes(rgb);
target.Fill = new
Windows.UI.Xaml.Media.SolidColorBrush(Windows.UI.ColorHelper.FromArgb(255,
rgb[0], rgb[1], rgb[2]));
}

void OnRightTapped(Windows.UI.Input.GestureRecognizer sender,
Windows.UI.Input.RightTappedEventArgs args)
{
// Restore original values
target.Fill = initialBrush;
InitManipulationTransforms();
}

JavaScript

// JS
function onTapped(evt) {
target.style.backgroundColor = getNextColorFromColor(target.style.backgroundColor);
}

function onRightTapped(evt) {
// Reset target to its initial state (transform, color)
target.style.backgroundColor = target.initialColor;
target.style.msTransform = target.initialTransform;
}

In keinem der aufgeführten Ereignishandler wird die Zeigermethode überprüft. Zusätzlicher Code für die entsprechenden Eingaben von den unterschiedlichen Zeigermethoden ist nicht erforderlich.

Zusammenfassung

Wir möchten, dass gewünschte Inhalte auf der Plattform einfach und schnell gefunden werden können. Die Eingabe wurde so entwickelt, dass die einheitliche Windows-Benutzeroberfläche den einfachsten Weg zur Bereitstellung einer App darstellt.

Die Eingabeplattform wurde mit dem Ansatz entworfen, die App-Entwicklung zu vereinfachen, Konsistenz und Vertrauen aufzubauen sowie eine große Reichweite zu ermöglichen. Die Konzepte Zeiger und CFT ersparen Zeit und Codezeilen. Dank der Gestenerkennung können Sie die Windows 8-Interaktionssprache problemlos in Ihren Apps verwenden und Benutzern eine konsistente, vertraut wirkende Umgebung bereitstellen. Ähnliche, über Plattformen und Frameworks hinweg einheitliche Konzepte bieten Konsistenz für Entwickler. CFT sowie die entsprechenden Zeiger- und Gesten-APIs stellen eine hervorragende Möglichkeit dar, viele Geräte zu erreichen.

Wir sind stolz auf Windows 8 und freuen uns darauf, dass auch Sie es bald genießen können!

Weitere Informationen über die Eingabeplattform finden Sie in unserer Dokumentation. Laden Sie unsere Beispiele herunter, und stellen Sie ggf. Fragen in unseren Foren.

Vielen Dank!

– Reed Townsend, Lead Program Manager, Windows

Zusätzliche Ressourcen

Link

Typ

Highlights

Schnellstart: Fingereingabe

Schnellstart

Übersicht über die Verarbeitung von Fingereingaben und Gesten in Apps

Eingabe: Beispiel für DOM-Zeiger- und Gestenereignisse

Beispiel

HTML-Unterstützung für Zeiger, verwendet HTML5-Canvas-Elemente, implementiert Zeichenfunktionen, verarbeitet Zeigerereignisse

Beispiel für XAML-Benutzereingabeereignisse

Beispiel

XAML-Unterstützung für Zeiger und Gesten, implementiert Zeichenfunktionen, Zeigerereignisse und -erfassung, Gestenereignisse, Manipulationen

Eingabe: Manipulationen und Gesten mit C++

Beispiel

Verwendet die Windows-Runtime-Klassen GestureRecognizer, PointerPointer und PointerDevice, beruht auf CoreWindow

Eingabe: Manipulationen und Gesten mit JavaScript

Beispiel

Verwendet die Windows-Runtime-Klassen GestureRecognizer und PointerPoint in einem einfachen HTML-Spiel

Zeiger- und Gestenereignisse im HTML-Framework

Dokumentationen

Ereignisse wie onmspointerdown, onmsgesturetap, onmsgesturestart, onmsgestureend

Zeiger- und Gestenereignisse im XAML-Framework

Dokumentationen

Ereignisse wie PointerPressed, Tapped, ManipulationStarted

GestureRecognizer-, PointerPoint- und PointerDevice-Klassen

Dokumentationen

Vollständige Dokumentation der Windows-Runtime-Klassen für Zeiger und Gesten

  • Loading...
Leave a Comment
  • Please add 4 and 3 and type the answer here:
  • Post