Field Tabbing (09/2001, Dir 8)

In diesem Bereich befinden sich Artikel und Tutorials zum Thema Director.

Moderatoren: Bär, Admin

Antworten
Admin
Site Admin
Beiträge: 41344
Registriert: 07.02.2006, 2006 16:09
Wohnort: München
Kontaktdaten:

Field Tabbing (09/2001, Dir 8)

Beitrag von Admin » 11.02.2006, 2006 17:28

Field Tabbing

Userdialoge und Eingabemasken werden mittlerweile in fast jeder Applikation in der ein oder anderen Form benötigt. Ob nun in Form von Feld- oder Textdarstellern, die Eingabe von z.B. einem Spielernamen oder sogar den gesamten Adressdaten wird immer häufiger verlangt.

Director stellt verschiedene Formelemente für die Entwicklung von Eingabemasken zur Verfügung. Zur Eingabe von Text gibt es einerseits die mittlerweile in die Jahre gekommenen Felddarsteller und andererseits die immer wieder neu überarbeiteten Textdarsteller. Während Felddarsteller eine gute Performance und Features wie Schatten des Feldes oder der Schrift bieten, glänzen Textdarsteller mit Anti-Aliasing und Hypertext Fähigkeiten, jedoch mit mäßiger (vor allem beim Scrolling) Performance. Beide Darstellertypen haben also ihre Vor- und Nachteile, und es kommt auf die jeweilige Applikation an, welcher Typ besser geeignet ist.

In den Einstellungen beider Darstellertypen, lässt sich unter anderem auch festlegen, ob mit der Tabulator Taste zum nächsten (in jeweiligen Frame nächst höhergelegenen Text- oder Felddarsteller Sprite) Eingabefeld gesprungen werden kann. Dies simuliert die gewohnte Eingabemechanik, wie man sie von HTML-Formularen kennt. Um dem Benutzer die Eingabe jedoch noch etwas mehr zu erleichtern, und auch um Director's Fähigkeiten mal wieder ein bisschen herauszufordern, lässt sich diese Eingabemechanik mit einem einfachen Behavior noch ein wenig erweitern.

Konkret geht es dabei um zwei Funktionalitäten.

Zum einen wäre es praktisch, wenn der Benutzer nicht nur durch die Tabulator Taste, sondern auch durch Drücken der Eingabe / Enter bzw. Return Taste den Cursor in der nächste Eingabefeld schicken könnte. Dies ist in vielen Fällen praktischer und wie sich gezeigt hat auch intuitiver, denn viele Computer-Neulinge drücken zuerst die Enter-Taste nach einer Eingabe.

Zum anderen könnte man dem Benutzer die Möglichkeit geben über eine Tastenkombination, z.B. durch Drücken der Tabulator Taste bei gehaltener Shift Taste (Shift+TAB) zum jeweils vorhergehenden Eingabefeld zu springen. Durch eine solche Funktion kann während des gesamten Ausfüllen eines Formulars vollständig auf die Verwendung der Maus verzichtet werden. Das ist in vielen Fällen eine echte Arbeitserleichterung, da nicht immer zwischen Maus und Tastatur hin- und her gewechselt werden muss.


Das Behavior

Die gesamte Funktionalität wird im Prinzip nur über eine einzige Anweisung, das Setzen der Systemeigenschaft the keyboardFocusSprite, erreicht. Diese ermöglicht seit Director 8 das Abfragen und Setzen des Text- oder Felddarsteller Sprite, in dem sich der Cursor augenblicklich befindet.

Das Behavior kann einfach auf alle entsprechenden Sprites gezogen werden, ohne irgendwelche Angaben machen zu müssen, denn eigene Properties werden nicht benötigt.

Code: Alles auswählen

-- -----------------------------
-- Field Tabbing - Behavior
-- -----------------------------

-- deactivate auto tabbing
on beginSprite (me)
  sprite(me.spritenum).member.autoTab = FALSE
end beginSprite
Beim Antreffen des Sprite wird zunächst sichergestellt, dass die autoTab Eigenschaft deaktiviert ist, da sonst die Funktion des Behaviors von Director umgangen wird.

Beim Tastendruck (keyDown) wird dann jeweils die eingegebene Taste überprüft und festgestellt, ob es sich um die Tabulator, Enter oder Return Taste handelt, und ob gegebenenfalls die Shift Taste zusätzlich gedrückt ist. Entsprechend wird dann entweder die dafür vorgesehen Funktion bzw. der eigene Handler aufgerufen, oder (bei allen anderen Tasten) die Nachricht über den pass Befehl zum Eingabefeld durchgelassen, so dass der jeweils eingegeben Buchstabe etc. auch im Feld erscheint.

Code: Alles auswählen

-- check the key
on keyDown (me)
  case the key of
    TAB:
      if the shiftDown then
        -- backward TAB
        me.previousField()
      else
        -- forward TAB
        me.nextField()
      end if
    ENTER, RETURN:
      -- forward TAB
      me.nextField()
  otherwise
    pass
  end case
end keyDown

Tabbing

Je nachdem ob der Cursor in das nächste oder das vorherige Eingabefeld gesetzt werden soll, wird eine entsprechende Nachricht an alle Sprites versandt.

In einer Liste als Container, wird dabei die jeweilige Spritenummer des Sprite in dem sich der Cursor momentan befindet übergeben. Dies ist wichtig für die anderen Sprites, damit die entsprechend nächst höhere oder nächst niedrigerer Spritenummer gewählt werden kann.

Code: Alles auswählen

-- TAB to previous field
on previousField (me)
  sendAllSprites(#setPrevField, [me.spritenum])
end previousField

-- TAB to next field
on nextField (me)
  sendAllSprites(#setNextField, [me.spritenum])
end nextField
Der Handler für das Setzen des Cursors in das vorherige Eingabefeld überprüft zunächst, ob es sich bei dem ersten in der Liste eingetragenen Sprite um die gleiche Spritenummer handelt. Ist dies nicht der Fall, so hängt der Sprite einfach seine eigene Spritenummer an die Liste an.

Im anderen Fall würde das bedeuten, der jeweilige Sprite ist der Absender der Nachricht, also das Eingabefeld in dem sich der Cursor augenblicklich befindet.

Daraufhin wird die Systemeigenschaft the keyboardFocusSprite auf den vorhergehenden Sprite in der Liste gesetzt und die erste Position in der Liste mit einer hohen Zahl gefüllt, damit nachfolgende Sprites den Cursor nicht mehr für sich beanspruchen können.

Code: Alles auswählen

-- check if same and set previous
on setPrevField (me, container)
  if container[1] = me.spritenum then
    -- I am the sender, set to previous
    prevSprite = container.count()
    the keyboardFocusSprite = container[prevSprite]
    container[1] = the maxInteger
  else
    container.append(me.spritenum)
    return container
  end if
end setPrevField
Bei der Funktion zum Setzen des Cursors in das jeweils nächste Eingabefeld, wird überprüft ob der erste Eintrag in der Liste, also die erste Spritenummer kleiner ist, als die eigene Spritenummer.

Ist dies der Fall, so wird der Cursor in das jeweilige Eingabefeld des Sprite gesetzt und, wie schon im vorherigen Handler, der erste Eintrag der Liste mit dem maxInteger gefüllt um die weitere Überprüfung zu deaktivieren.

Code: Alles auswählen

-- check if same and set next
on setNextField (me, container)
  if container[1] < me.spritenum then 
    the keyboardFocusSprite = me.spritenum
    container[1] = the maxInteger
  end if
end setNextField

Fazit

Es zeigt sich schon bei solch einfachen Beispielen, dass sich mit Director hinsichtlich des Komforts der Benutzung einer Applikation bzw. der Nutzerfreundlichkeit (sofern man davon sprechen kann, dass ein Programm freundlich zu einem Benutzer ist) vieles verbessern lässt.

Einige dieser Funktionalitäten sind leider nicht, oder vielleicht auch noch nicht in Director vorgesehen und lassen sich nur mit etwas eigener Phantasie und ein bisschen Lingo verwirklichen.

Das vorgestellte Behavior arbeitet mit Feld- und Textdarstellern, und lässt sich sehr einfach auch für andere Zwecke erweitern. Denkbar sind z.B. Überprüfungen der Eingabe nach bestimmten Kriterien oder Filter für bestimmte Zeichen (z.B. nur 5 Zahlen bei der Eingabe einer Postleitzahl). Die Möglichkeiten sind wie stets dank Lingo vielfältig.

Beispielfilm als Download: upload/field_tabbing.zip


Autor: Martin Kloss

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 0 Gäste