TIPPS + TRICKS: Seitenwechsel im User-Interface

[Anonymous]

Tipps + Tricks: User Interface

Teil 1: Seitenwechsel im User Interface

Standardmäßig ist zum Seitenwechsel innerhalb mehrerer Seiten des UserInterfaces der Befehl
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">UI_BUTTON UI_NEXT .... (eine Seite vor)
UI_BUTTON UI_PREV .... (eine Seite zurück)vorgesehen.
Wenn man bei 6 UI-Seiten von Seite 1 auf Seite 6 gelangen will, sind 5 Mausklicks erforderlich, was nicht sehr anwenderfreundlich ist.
3 Seiten mit dieser Methode sehen so aus:

<img src="http://www.download.b-prisma.de/objekte/UI_1turn.gif" alt=" - " />

Da GDL jedoch eine sehr flexible Sprache ist, gibt es noch andere Methoden, einen Seitenwechsel durchzuführen.
Die 3 mir bekannten weiteren Varianten möchte ich im folgenden erläutern.
1. Eingabe der Seitenzahl per Auswahlliste (Pulldownmenü)
Vorgehen:
- Erzeugen eines Parameters vom Typ Ganzzahl (z.B: "seite")
- Erzeugen einer VALUES-Liste im Parameter-Script
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;"> VALUES "seite" 1,2,3,4- Script im Interface-Script:
mit IF-Bedingung die Seitenauswahl bestimmen:
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">UI_dialog "Seitewnwechsel, Variante 2" , 310 , 266

UI_STYLE 2,1

UI_OUTFIELD "Seite", 10,20, 40,20
UI_INFIELD "seite", 60,20,40,20

IF seite=1 THEN
UI_outFIELD "Dies ist die ERSTE Seite" , 15, 100, 150, 20
!Hier steht das UI_Script dieser Seite
ENDIF usw. usw. bei den folgenden Seiten
Bei dieser Methode sind je 2 Mausklicks erforderlich, um von einer beliebigen Seite zu einer anderen beliebigen Seite zu gelangen.
Die ersten 3 Seiten sehen dann so aus:

<img src="http://www.download.b-prisma.de/objekte/UI_2turn.gif" alt=" - " />

Man kann auch anstelle der Zahlen Text verwenden, der etwas über den Inhalt der Seiten aussagt, z.B. steht dann im Parameter-Script:
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">VALUES "st" "Abmessungen","Material","Funktion","2D"
im Masterscript muss die VALUES-Liste ausgewertet werden:
IF st="Abmessungen" THEN seite=1
IF st="Material" THEN seite=2
IF st="Funktion" THEN seite=3
IF st="2D" THEN seite=4Das Interface-Script kann unverändert bleiben (ggf. muss die Breite des INPUT-Feldes vergrößert werden, damit der Text komplett sichtbar ist).

2. Verwendung einer Bildauswahlliste
Hierzu ist ebenfalls das Erzeugen eines Seitenparameters und einer VALUES-Liste im Parameter-Script erforderlich:
z.B. </font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">VALUES "turnpage" "2D","3D","Farbe","info" Im Interface-Script wird eine Bildauswahlliste definiert mit soviel Feldern, wie man Interface-Seiten hat.
Man kann die Bildauswahlliste mit Pixelbildern in Form von Symbolen oder Schrift oder ohne Pixelbilder einfach nur mit Text (siehe Beispiel) füllen.
Hierbei wird jeweils die Bezeichnung bzw. das Symbol als Schaltfläche für den Seitenwechsel verwendet.
Hier ein Beispiel:

<img src="http://www.download.b-prisma.de/objekte/UI_3turn.gif" alt=" - " />
Bei dieser Methode ist jeweils nur 1 Mausklick zum Wechseln von einer beliebigen Seite zu einer anderen erforderlich.
Einziger Nachteil: die nicht zu beseitigende Bildlaufleiste (2 Pfeile) am rechten Rand der Bildauswahlliste.

3. Seitenwechsel per Boolescher Auswahl
Diese Methode wurde von Roberto Corona (www.archradar.com) entwickelt. Hierbei wird die Globale Variable GLOB_MODPAR_NAME verwendet, die dafür sorgt, dass bei Auswahl eines Ankreuzfeldes die anderen automatisch deaktiviert werden.
Vorgehen:
- Erzeugen von je 1 neuen Parameter je UI-Seite vom Typ "Boolesche Operation"
Eingeben foilgender Zeilen im Parameterscript (nach Corona):
</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Code:</font><hr /><pre style="font-size:x-small; font-family: monospace;">IF GLOB_MODPAR_NAME = "Seite1" THEN
PARAMETERS Seite1=1,Seite2=0,Seite3=0,Seite4=0
ENDIF
IF GLOB_MODPAR_NAME = "Seite2" THEN
PARAMETERS Seite1=0,Seite2=1,Seite3=0,Seite4=0
ENDIF
IF GLOB_MODPAR_NAME = "Seite3" THEN
PARAMETERS Seite1=0,Seite2=0,Seite3=1,Seite4=0
ENDIF
IF GLOB_MODPAR_NAME = "Seite4" THEN
PARAMETERS Seite1=0,Seite2=0,Seite3=0,Seite4=1
ENDIFDas Interface-Script kann man sich in der Beispieldatei anschauen, es ist etwas umfangreicher, aber einfach (auch wegen der Kommentare) nachzuvollziehen.
Man kann neben oder über den Ankreuzfeldern Erläuterungen zu den Seiten eingeben, damit der Anwender weiß, was er auf welcher Seite findet.
Bei dieser Methode ist, wie bei der letzten, nur je 1 Mausklick für einen Seitenwechsel erforderlich.
Hier das Beispiel-Interface:

<img src="http://www.download.b-prisma.de/objekte/UI_4turn.gif" alt=" - " />
Diese Methode ist vom Script her am aufwendigsten, aber auch am flexibelsten.
Eine weitere von Roberto Corona entwickelte Variante findet man auf der Datei "pixieland.gsm" (auf www.archradar.com/gdl kostenloser Download). Hierbei wird die gezeigte Methode mit einer Art Registerkarte kombiniert; eine UI-Seite hiervon sieht wie folgt aus:

<img src="http://www.download.b-prisma.de/objekte/pixieland.gif" alt=" - " />
Bei GDL-Technology sieht das ganze wie folgt aus:

<img src="http://www.download.b-prisma.de/objekte/gdlt.gif" alt=" - " />
Hierbei werden die Ankreuzfelder von einer Pixelgrafik abgedeckt. Die Ankreuzfelder funktionieren aber trotzdem; sie sollten in Ihren Abmessungen im Script auf die Größe der Karteikartenreiter gebracht werden.

Und meine Idee, bei der der man sich verändernde Schaltflächensymbole als Pixelgrafiken über die Booleschen Ankreuzfelder legt, sieht so aus:

<img src="http://www.download.b-prisma.de/objekte/suehlo.gif" alt=" - " /> -- <img src="http://www.download.b-prisma.de/objekte/suehlo2.gif" alt=" - " />
Ich persönlich finde meine Variante am schicksten, weil die Schaltflächen an die vorhandene grafische Benutzeroberfläche der Bibliothekselemente angepasst sind.
Die Varienten mit den Pixelgrafiken über den Ankreuzfeldern haben 2 Nachteile:
1. Die Booleschen Ankreuzfelder werden nur kaschiert, d.h. jedesmal wenn man auf ein Schaltflächensymbol klickt, scheint das Ankreuzfeld durch die Pixelgrafik hindurch, was ein bißchen unprofessionel aussieht.
2. Die Herstelung der Pixelgrafiken für die Schaltflächen ist sehr aufwendig (es geht mit einem Icon-Editor wie Michelangelo oder IconEdit oder auch mit Photoshop mit eingeschaltetem 1-Pixel-Raster).
Man muss für jede Seite 2 Grafiken erzeugen, eine vorstehende und eine heruntergedrückte. <br>Wenn man Symbole verwendet, die allgemeingültig sind, kann man ggf. die Grafiken bei mehreren Bibliothekselementen verwenden. Bei Text in den Schaltflächen (siehe mein erstes Beispiel) ist sie Anzahl der Schaltflächen nebeneinander begrenzt. Es sei denn, man nimmt Zahlen (1,2,3,...),
dann schafft man ca. 20 Seitenschaltflächen.

Um die Herstellung der Pixelgrafiken zu vereinfachen, kam mir die Idee, diese einfach mit einem parametrischen GDL-Objekt zu erzeugen.
Man gibt die Schaltflächengröße bei diesem Objekt in Pixel ein, GDL rechnet es dann in Meter um, wobei die Bildschirmauflösung (meist 72 dpi) anzugeben ist.
Leider sind die fertigen Bildchen nicht pixelgenau. Irgendwie scheint es Anti-Aliasing-Beechnungen bei der Darstellung zu geben. Wenn man die 1 Pixel breiten Schattenkanten vergrößert, sehen Sie exakt aus.
Aber auch eine Vergrößerung, Abspeicherung und anschließende Größenreduzierung bringt keine optimalen Ergebnisse. Vielleicht hat ein Grafikspezialist eine Idee?
um Abspeichern der Schaltflächen setzt man sie in den Grundriss, geht auf 100% Darstellungsgrösse und dann auf Ablage, speichern unter und wählt ein Pixellformat aus.
Oder man markiert das Objekt und fügt es über die Zwischenablage in ein Pixelprogramm ein; merkwüdigerweise muss man in diesem Fall eine andere Auflösung einstellen (96 dpi), damit die Bildgrösse hinterher stimmt.
Bei den Varianten mit den Pixelgrafiken über den Ankreuzfeldern ist folgendes zu beachten: Man muss die Endung der Pixelgrafiken im Befehl UI_PICT weglassen, sonst funktioniert das ganze merkwürdigerweise nicht.

Weiteres
Bei sehr umfangreichen UI-Seiten kann man auch mehrere Methoden kombinieren. Um von einer "Hauptseite" auf eine "Unterseite" zu gelangen, kann man durchaus die UI_Next-Schaltflächen verwenden.

Resümme
Es gibt in GDL vielfältige Möglichkeiten, um Seitenwechsel durchzuführen. Es wäre allerdings schön, wenn man nicht auf Tricks und Workarounds zurückgreifen müsste, um ansehnliche und nutzerfreundliche Schaltflächen hierfür zu erstellen.
Ich möchte hiermit anregen, eine Wunschliste für GDL-Verbesserungen für neue ArchiCAD-Versionen (after eight)
anzulegen. Mein erster Wunsch wäre so eine "hauseigene" Seitenschaltfläche.

Dateien zu diesem Beitrag im folgenden Beitrag

[ 02. Juli 2005, 19:16: Beitrag editiert von: Jochen Suehlo ]

[zzyzx]

gibt es eigentlich seitens graphisoft irgendeine vernünftige doku über die unterschiede der darsellung bei mac und win? oder haben das anwender und gdl programmierer, die es nutzen, jeweils selbst ausgetüftelt?
vielleicht gibts auch beispielobjekte, die das veranschaulichen?

unter dem link, den kurt battisti in einem anderen beitrag gepostet hatte ( Library Parts ) kann man übrigens beispielobjekte herunterladen, die typische einsatzbereiche von parametern an richtigen objekten illustrieren. sieht brauchbar aus, ist aber nicht abwärtskompatibel
:winken:

[Frank Beister]

</font><blockquote><font size="1" face="Verdana, Helvetica, sans-serif">Zitat:</font><hr /><font size="2" face="Verdana, Helvetica, sans-serif">oder haben das anwender und gdl programmierer, die es nutzen, jeweils selbst ausgetüftelt? Was denkst du wohl? Du hast doch das GDL-Handbuch. 😉