universal.adapter

In Produktionsumgebungen stehen Geräte meist nicht nur so für sich und die Datenakquise alleine in der Fabrikhalle. Auch der eine oder andere Maschinenbediener oder Werker will mal mit den Prozessen über einen Touchscreen interagieren. Und wenn er dann die Handschuhe nicht ausziehen kann, hat er ein Problem. Die für den Mauszeiger gedachten Scrollbalken verbieten jegliche Bedienung per Handschuh. Zum Glück kann man Bedienoberflächen auf Bildschirmen auch in grafischer Hinsicht speziell für solche Eingabegeräte anpassen – beispielsweise mit Flex.

Mit dem Flexbuilder kann man auch wunderbar Buttons entsprechend groß gestalten. Auch ähnliche Elemente lassen sich gut anpassen. Schwieriger wird das schon bei Elementen wie Scrollbars, die fest in anderen Elementen eingebunden sind: Man muss sie nicht extra definieren, sie erscheinen einfach, wenn zu viel Inhalt in vertikaler oder horizontaler Richtung da ist. Und die Höhe und Breite einer solchen Scrollbar ist damit erst einmal fest vorgegeben. Aber wie kommt man dann an die Scrollbar für die Anpassung heran?

Zunächst nochmal ein paar Worte zum Aufbau einer solchen Scrollbar: Nehmen wir mal eine vertikale Scrollbar, die an irgendeinem Element haftet. Sie besteht im wesentlichen aus vier grafischen Teilen: Pfeil für Bewegung nach oben (up-arrow), Pfeil für Bewegung nach unten (down-arrow), Schiebebereich (track) und Schieberegler (thumb). Zusätzlich lassen sich Grafiken für drei verschiedene Zustände festlegen (außer bei track). Das sind der Normalzustand (up-skin), der gedrückte Zustand (down-skin), der Mouseover-Zustand (over-skin) und der deaktivierte Zustand (disabled-skin).

Um eine Scrollbar nun “handschuhfreundlich” zu gestalten, muss man für jeden einzelnen Zustand und Zweck Grafiken erzeugen. Diese Grafiken können dann ganz einfach an der richtigen Stelle eingefügt werden. Die richtige Stelle ist zwischen den <mx:Style>-Tags und kann z. B. so aussehen:

<mx:Style>
.myCustomVertScroll {

up-arrow-up-skin:Embed(source="img/arrowUpIcon.png");
up-arrow-down-skin:Embed(source="img/arrowUpIcon.png");
up-arrow-over-skin:Embed(source="img/arrowUpIcon.png");
up-arrow-disabled-skin:Embed(source="img/arrowUpIcon.png");

down-arrow-up-skin:Embed(source="img/arrowDownIcon.png");
down-arrow-down-skin:Embed(source="img/arrowDownIcon.png");
down-arrow-over-skin:Embed(source="img/arrowDownIcon.png");
down-arrow-disabled-skin:Embed(source="img/arrowDownIcon.png");

track-skin:Embed(source="img/trackSkin.png");

thumb-up-skin:Embed(source="img/thumbIcon.png",
    scaleGridLeft="6", scaleGridTop="6",
    scaleGridRight="47", scaleGridBottom="85");
thumb-over-skin:Embed(source="img/thumbIcon.png",
    scaleGridLeft="6", scaleGridTop="6",
    scaleGridRight="47", scaleGridBottom="85");
thumb-down-skin:Embed(source="img/thumbIcon.png",
    scaleGridLeft="6", scaleGridTop="6",
    scaleGridRight="47", scaleGridBottom="85");
thumb-disabled-skin:Embed(source="img/thumbIcon.png",
    scaleGridLeft="6", scaleGridTop="6",
    scaleGridRight="47", scaleGridBottom="85");
}
</mx:Style>

Und da bleiben dann noch die Parameter, die für “thumb-*-skin” an Embed übergeben werden. Sie definieren, wie bei automatischer Größenveränderung des thumb die Grafik größer gezogen oder geschrumpft werden soll. scaleGridLeft=”6″ heißt dabei, daß bei der automatischen Skalierung der Bereich 6 Punkte vom linken Rand nicht skaliert (gestreckt oder gestaucht) wird. Analog verhält sich das mit über den übrigen scaleGrid* Paramtern. Die Abbildung zeigt das nochmal anschaulich.

Der letzte Schritt ist das Einfügen des eigenen Styles “.myCustomVertScroll” ins eigentliche MXML. Das geht ganz einfach mit

<mx:DataGrid ... verticalScrollBarStyleName="myCustomVertScroll">

Damit wird der vorher unter <mx:Style> definierte Stil für die ScrollBar dem DataGrid zugewiesen. Das Ergebnis kann dann z. B. so aussehen:

ScrollBar fürs Grobe

So eine Scrollbar ist dann auch in der Fertigung einfach durch einen Touchscreen zu bedienen. Und das sogar mit Handschuh.