Tag Archive for 'Tips'

Page 4 of 11

Next Generation User Interfaces How-To: Tastatureingabe

Eine der gängigsten Interaktionsmöglichkeiten ist die Tastatureingabe. In einem kleinen Überblick möglicher Formen der Mensch-Maschine-Interaktion darf diese darum nicht fehlen. Zumal die Tastatureingabe für mehr als nur das Ausfüllen von Textfeldern dienen kann. Tastatureingaben sind beispielsweise zum Aufruf eines Kommandos nützlich, etwas für Spiele oder als Abkürzung für gängige Operationen in Programmen wie Apfel/Strg+Z zum Rückgängigmachen. Mehr dazu und weitere ungewöhnlichen Interaktiosmöglichketen mit der Tastatureingabe gibt es in einem späteren Text zum Thema “Komandozeile”.

focusVeränderungen an dem HTML-Rahmen müssen im Flex- oder Flash-Builder in der index.template.html-Datei vorgenommen werden. Die fertige HTML-Seite wird dann daraus generiert.

Doch auch bei der Tastatureingabe gibt es kleinere Gemeinheiten wie etwa den Fokus. Denn normalerweise erhält nur diejenige Anwendung mit dem aktuellen Fokus Kenntnis über einen Tastendruck (und auch nur dann, wenn der Browser diese Tastenkombination nicht vorbelegt hat und abfängt). Bei Webanwendungen kann man dies durch die folgende JavaScript-Anweisung erzwingen: document.getElementById(“FlashContentID“).focus(); Für Flex-Anwendungen kann diese Angabe beispielsweise in der index.template.html-Datei erfolgen, die als Vorlage für den erzeugten HTML-Rahmen und die darin dann eingebettete SWF-Datei dient. Dank dem Platzhalter ${application} lässt sich die Bezeichnung der Flash-Player-Instanz leicht ermitteln und dann zum Beispiel nach erfolgreichem Laden des HTML-Dokumentes der Fokus darauf setzen. Innerhalb von Flex gelingt das Setzen des Fokus wie in der Abbildung auf einem TextInput-Steuerelement durch die Methode setFocus – nur dass dieser Fokus abgesehen vom Erscheinungsbild leider nichts nützt, wenn eben der Flash Player selbst keinen Fokus hat.

flashkeyUm Tastatureingaben in Flash über das Menü „Steuerung -> Film testen“ ausprobieren zu können, sollten im Testplayer über das Menü „Steuerung“ Tastenkürzel deaktiviert werden.

In Flash und Flex mit ActionScript 3 benachrichtigt das Ereignis KeyboardEvent.KEY_DOWN beim Drücken bzw. KeyboardEvent.KEY_UP beim Loslassen einer Taste. Das funktioniert aber auch hier nur, wenn der Fokus gesetzt ist; In der Abbildung ist deshalb die Bühne (stage) als Objekt gewählt. Das Drücken wiederholt sich jedoch auch ohne zwischenzeitliches Loslassen wenn die Taste nur lange genug gedrückt bleibt (die Wiederholrate findet sich unter Windows 7 in der Systemsteuerung unter „Tastatur -> Geschwindigkeit“). Außerdem muss man unterscheiden, ob das eigegebene Zeichen (charCode) oder die gedrückte Taste (keyCode) auf der Tastatur wichtig ist, also ob auch die Großundkleinschreibung interessiert:

1
2
3
4
5
6
7
8
9
10
11
12
13
// Die notwendigen Klassen sind in Flash CS4 und CS5 automatisch bekannt.
// Im Flex/Flash Builder müssen die Klassen importiert werden.
 
// Abonniere Ereignis, um das Drücken der Tasten zu erfahren
stage.addEventListener(KeyboardEvent.KEY_DOWN, application_keyDownHandler);
 
// Ereignismethode, um das Drücken der Tasten zu verarbeiten
function application_keyDownHandler(event:KeyboardEvent):void {
	trace("Taste gedrückt/wiederholt");
	trace("Tastencode: " + event.keyCode);
	trace("Zeichencode: " + event.charCode);
	trace("Zeichen: " + String.fromCharCode(event.charCode));
}

image Barcode-Scanner wie hier der Symbol LS1203 machen sich übrigens meist auch die Tastatur zu nutze. Ein gescannter Barcode erscheint dann – angereichert um ein paar Steuerzeichen – als Tastatureingabe in der Anwendung. Barcode-Scanner sind somit oft nur eine benutzerfreundliche Variante der manuellen Eingabe: Der Zugbegleiter kann Tickets so schneller verarbeiten und der Schlosser muss seine Handschuhe nicht erst ausziehen.

Next Generation User Interfaces How-To

Kommandozeile und grafische Benutzeroberflächen waren gestern: Jetzt geht es um möglichst natürliche Schnittstellen. Egal ob für den Desktop oder das Web, beinahe jede Art der Kommunikation zwischen Nutzer und System ist denkbar. Interaktionsformen auf der Basis von AIR, Flash und Silverlight reichen von der normalen Tastatureingabe bis hin zur Lego Mindstorms Sensorik.

Der möglichst natürlichen Nutzung von Benutzungsschnittstellen (Natural User Interfaces) wird dank Apple und Microsoft wieder verstärkte Aufmerksamkeit geschenkt. Dabei sind viele der Ideen alles andere als neu: Ein Multi-Touch-Display ist beispielsweise bereits 1982 durch Nimish Mehta an der Universität Toronto entwickelt worden, auch wenn es erst im Februar 2006 durch Jefferson Han auf der TED-Konferenz populär gemacht wurde.

Auch wird oft vergessen, dass das Benutzererlebnis und die Ergonomie nicht nur von der Natürlichkeit sondern auch vom Kontext abhängen. Das iPhone beispielsweise versagt im Winter, da es sich nicht mit Handschuhen bedienen lässt. Desshalb nutzen Koreaner ein Würstchen zur Eingabe, wie der südkoreanische Nachrichtendienst inews24.com meldet.

Eine weitere Herausforderung: Anwendungen müssen heutzutage oft auf unterschiedlichen und uneinheitlichen Geräten laufen. Teilweise stehen Interaktionsformen bereits zur Verfügung, etwa Multi-Touch. Aber wenn die Abspielumgebung das einmal nicht hergibt, dann muss eben nachgeholfen werden. Dank zahlreicher Schnittstellen zur Außenwelt ist das mit modernen Technologien kein größeres Problem.

Fast jede Form der Mensch-Maschine-Interaktion ist, genügend Kreativität vorausgesetzt, umsetzbar. Plattformen wie AIR, Flash und Silverlight erlauben viele Interaktionsformen bereits nativ. Und sollten dann doch einmal Beschränkungen existieren, kommt entweder eine Technologie mit Hardwarezugriff wie z. B. WPF zum Einsatz oder es wird eben mit einem Hilfsprogramm beispielsweise über eine Socket-Verbindung kommuniziert. Aber gehen tut es schlussendlich so gut wie immer. Ob es dann auch sinnvoll ist, das ist eine andere Frage…

Demnächst möchte ich hier Beispiele für ungewöhnliche Interaktionsformen oder für gewöhnliche Interaktionsformen in ungewöhnlichen Szenarien anhand kleiner Code-Snippets vorstellen. Dazu zählen Themen wie:

Im Rahmen meines Vortrags “Next Generation User Interfaces How-To” sind bereits Beispiele entstanden, die es hier für Flash und hier für Silverlight als ZIP zum Download gibt. Über weitere Anregungen für neue Beispiele freue ich mich sehr, nur her damit!

Metro styled Silverlight Applications

People seem to like the new Windows Phone 7 Metro Design (as I do). Unfortunately you cannot use this design in regular Silverlight Applications by default. Therefore I extracted the styles and templates, changed a few settings (e. g. some “HitTests” are disabled which we need for mouse users) and packed everything together in a single ResourceDictionary. To make usage easier I added implicit styles for Button, ToggleButton, CheckBox, RadioButton, PasswordBox, ProgressBar, TextBox, TextBlock, Slider, ScrollViewer and ListBox. There are still some things to do, but I hope it will make it easier for you, to use the Metro Design in regular Silverlight Applications. You can Download a Visual Studio 2010/Expression Blend 4 Solution as ZIP here. Use this project as starting point or just copy the ResourceDictionary MetroDesignResourceDictionary.xaml to your project. For the latter you need to make sure to correctly include the fonts referred by the ResourceDictionary (Segeo WP, Segeo WP Light, Segeo WP Semibold and Segeo WP Semilight).