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 ]

[Anonymous]

Hier die Dateien zum vorigen Beitrag:

1. Standardseitenwechsel
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/UI_PAGETURN_1.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/UI_PAGETURN_1.gsm' GdlListTxt=''></OBJECT>

2. Seitenwechsel mit VALUES
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/UI_PAGETURN_2.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/UI_PAGETURN_2.gsm' GdlListTxt=''></OBJECT>

3. Seitenwechsel mit Bildauswahlliste
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/UI_PAGETURN_3.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/UI_PAGETURN_3.gsm' GdlListTxt=''></OBJECT>

4. Seitenwechsel mit GLOB_MODPAR_NAME
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/UI_PAGETURN_4.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/UI_PAGETURN_4.gsm' GdlListTxt=''></OBJECT>

5. Seitenwechsel mit Schaltflächen
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/Buttoms.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/Buttoms.gsm' GdlListTxt=''></OBJECT>

6. Der Schaltflächen-Erzeuger
<OBJECT ID="GDLCtl" codebase="http://www.gdlcentral.com/bin/files/GDLCtl.cab#version=1,2,5,178" WIDTH="200" HEIGHT="200" CLASSID="CLSID:64D9B72C-E42A-490e-9181-221E1E035A14"><PARAM NAME="GdllistTxt" VALUE=""><PARAM NAME="SRC" VALUE="http://download.b-prisma.de/objekte/Dropdown_Maker.gsm"><embed name='GDLCtl' width='200' height='200' Src='http://download.b-prisma.de/objekte/Dropdown_Maker.gsm' GdlListTxt=''></OBJECT>

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

[andreaszeike]

Hi Jochen!!

Danke für die geniale Lektion!! :yeah:

leider ist ein Bild im Text nicht ganz ´raufgekommen und es fehlt eine Bilddatei im für das UI_PAGETURN_3.gsm. Kannst Du die vielleicht noch nachliefern?

ich habe mir das pixiland.gsm mal runtergeladen. kommst Du auf die engl. Seite mit der Lektion 1?
leider kann ich kein italienisch!!!

Gruß aus B, Andreas

[Hmooslechner]

Schöne Dinge - LOB!

[Anonymous]

So Andreas, jetzt ist alles in Ordnung.
Die Fehlende Lektion 1 bei Archiradar habe ich bei Roberto moniert.

[David Kehr]

janz großes lob!!!!

geniale idee!

moffett

[Anonymous]

Noch eine Ergänzung zum Seitenwechsel im User Interface.
Meine inzwischen favorisierte Methode sieht folgendermaßen aus:
<img src="http://www.download.b-prisma.de/objekte/UI_5turn.gif" alt=" - " />

Das Script hierfür wie folgt:
Parameter definieren: "ui_seite" als Ganzzahl

Parameter-Script: VALUES "ui_seite" 1,2,3,4,5,6,7,8,9,10,11,12

User-Interface-Script:

UI_INFIELD "ui_seite", dm,dy, 12*35+21, 1*25+3,
1,"ui_plan_turn_mac",12,1, !Flag,Bildname,Anzahl,Zeilen
35,25, 35,25, !Zelle/Bild
1,"1", 2,"2", 3,"3", 4,"4", 5,"5",6, "6", 7, "7", 8, "8",9,"9",10,"10",11,"11",12,"12"

GOSUB 1000 + ui_seite:

END:

Anschließend folgen die Subroutinen.

Das Prinzip ist folgendes: Wird eine bestimmte Seite in der Bildauswahlliste ausgewählt, wird der Wert des Parameters "ui_seite" auf einen anderen Wert gesetzt. Dadurch wird im User Interface auf die entsprechende Subroutine gesprungen (z.B. 1005, wenn ui_seite=5) und es wird nur das im Interface angezeigt, was sich im Script vor der END-Anweisung und innerhalb der entsprechenden Subroutine befindet.

Die Schaltflächen wurden in Photoshop erstellt und bestehen aus einer einzigen Grafik, was nicht ganz so aufwändig ist wie frühere Methoden.

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

[Frank Beister]

Hallo Jochen,

das ist IMHO prinzipiell auch die schönste Lösung. Wie du weißt mache ich das ja bei meinen Objekten auch so, doch hat das unter MacOS X einen ausgesprochen unschönen Effekt: Die Rollbalken werden vom System her nicht skaliert erzeugt. Sie haben eine feste Größe. Dadurch stehen die, wenn auch nicht nötigen, aber vorhandenen Rollbalken mitunter störend deutlich über, wenn das Schalflächenbild zu niedrig ist. Das ist bei den Bildern aber in der Regel.

Außerdem muß im UI-Skript geprüft werden auf welcher Platform AC gerade läuft, denn die Größenvorgaben des UI_OUTFIELD-Befehls sind Mac/Win unterschiedlich. Blöderweise auch noch MacOS 9/ MacOS X - verschieden.

Ich bin auf AC 10 gespannt, ob GS das beheben wird. Mitgeteilt habe ich das schon beim Beta 9.

[zzyzx]

grosse klasse & dickes lob!
(find' ich auch prima, dass du ein update mit neuen erkenntnissen postest)
ich hab' bisher das ui ziemlich vernachlässigt, ist für den eigenbedarf auch nicht unbedingt nötig. wenn die objekte aber komplexer werden und eine menge parameter und varianten hinzukommen, dann ist es unverzichtbar.

nimmst du die anpassung an win/mac in jeweils einem separaten objekt vor, oder packst du alles in eins?
- vorteil bei separaten objekten für win und mac wäre ja ein übersichtlicheres skript, individuell ans betzriebssystem angepasste schaltflächen usw, kein prüfen des systems durch eine gdl routine nötig
- vorteil bei einem objekt: weniger aufwand beim ändern, sieht bei wechsel des betriebssystems oder weitergabe auch optimal aus.


:winken:

[Anonymous]

Ab AC8 machen UI-Skripte richtig Sinn, denn dann kannst du Arrays aus der blöden Tabelleneingabe rauslösen. Außerdem ist eine Mehrsprachigkeit direkt lösbar. Ist zwar bei komplexen Objekten sehr aufwändig, geht aber 'on the fly'. Und man pflegt nur 1 Objekt.
Die Platformabhägigkeit löse ich auch innerhalb eines Objektes. Ist aber sehr knifflig! Andere machen das durch Uservorgabe als 1 Parameter. Geht auch ganz gut so.

[ 06. Juli 2005, 13:33: Beitrag editiert von: Ove Bodj ]