5 Grafischer Debugger

Der „Grafische Debugger“ dient als Analysewerkzeug für die mit dem UI-Framework erstellten Bedienoberflächen. Dieses Werkzeug erlaubt die Ansicht und die Modifikation aller in einem Fenster enthaltenen Elemente bzw. deren Eigenschaften.

Mithilfe des Grafischen-Debuggers lassen sich typische UI-Fehler, wie z. B. falsche Layout-Manager, verschachtelte ScrollPanes, „unsichtbare“ Elemente, fehlende DataDescriptions, etc. relativ leicht auffinden und beseitigen. Da die meisten Eigenschaften nicht nur angezeigt werden, sondern auch direkt geändert werden können, lassen sich mit dem Grafischen-Debugger auch verschiedene Konfigurationen der Elemente interaktiv testen, um so die optimalen Werte zu finden.

• Grafischer-Debugger

Der Grafische-Debugger nutzt als Visualisierung einen (nicht-modalen) Dialog. In diesem Dialog wird auf der linken Seite die Container-Hierarchie des zu untersuchenden Top-Level Containers (Hauptfenster, Dialog, Popup-Fenster) in Form eines Baumes dargestellt. Auf der rechten Seite werden jeweils die Eigenschaften der ausgewählten Elemente angezeigt und können dort auch geändert werden.

Hinweis:
Bei den angezeigten Elementen handelt es sich nicht um die Klassen aus dem Package com.cisag.pgm.gui, sondern um die Klassen aus dem Package com.cisag.pgm.dialog, also den jeweiligen Implementierungsklassen (siehe Kapitel Einführung). Das hat auch Auswirkungen auf die angezeigte Container-Hierarchie sowie die anzeigten Elementeigenschaften. Die Elemente der beiden Packages sind sich jedoch insgesamt sehr ähnlich (das Package com.cisag.pgm.dialog ist nur etwas „detaillierter“), so dass das in der Praxis kaum Nachteile bedeutet.

5.1 Aufruf

Der Grafische-Debugger kann jederzeit und direkt aus einer laufenden Anwendung gestartet werden. Voraussetzung ist, dass der Benutzer dazu berechtigt ist (siehe 5.1.1 Berechtigung).

Der Aufruf erfolgt über die Tastatur mit der Tastenkombination „Strg+Alt+G“.

Hinweis:
Der Grafische-Debugger zeigt immer die Elemente des Fensters an, aus dem er gestartet wurde. Ggf. muss zuerst der Tastaturfokus in das gewünschte Fenster (bzw. in ein Subelement davon) gesetzt werden, bevor der Grafische-Debugger gestartet wird.

5.1.1 Berechtigung

Um den Grafischen-Debugger starten zu können, benötigt man für das Framework „Software-Entwicklung“ (com.cisag.pgm.SoftwareDevelopment) die Fähigkeit „Grafischen Debugger starten“ (com.cisag.sys.kernel. webserver.StartGraphicalDebugger).

Warnung:
In einem Produktivsystem sollte diese Fähigkeit keinem Benutzer zugestanden werden. Einerseits besteht die Gefahr, dass mithilfe des Grafischen-Debuggers andere Berechtigungseinstellungen umgangen werden könnten, z. B. könnten Daten (Felder) sichtbar gemacht werden, die für den betreffenen Benutzer eigentlich verborgen bleiben sollten. Anderseits kann die Manipulation der Elementeigenschaften auch zu schwerwiegenden Fehlern in den betroffenen Anwendungen führen.

5.2 Bedienung

Im linken Teil des Debugger-Fensters (Überschrift „Elements“) wird die Container-Hierarchie des zu untersuchenden Top-Level Containers als Baum dargestellt. Der Top-Level Container bildet die Wurzel und seine Subcontainer und -elemente bilden die Knoten bzw. Blätter des Baums. Der Baum dient nicht nur zur Visualisierung der Container-Hierarchie, sondern auch zur Auswahl von den Elementen, deren Eigenschaften im rechten Teil des Debugger-Fensters angezeigt bzw. modifiziert werden sollen.

Die im rechten Teil des Debugger-Fensters (Überschrift „Properties“) angezeigten Eigenschaften sind vom jeweiligen Elementtyp (Klasse) abhängig. Es werden immer nur die Eigenschaften angezeigt, die bei allen ausgewählten Elementen vorhanden sind.

5.2.1 Suchen von Elementen

Um ein bestimmtes Element in der Container-Hierarchie schnell zu finden, verfügt der Grafische-Debugger über eine Suche:

• Suche nach Elementen

Der in das Feld „Search for“ eingegebene (Teil-)Text wird in der gewählten Richtung („up“/„down“) und ggf. unter Berücksichtigung von Groß-/Kleinschreibung („case sensitive“) in der Container-Hierarchie gesucht. Bei der Suche werden folgende Eigenschaften der Elemente berücksichtigt:

• „id“ (Alle Elemente)
• „text“ (Label)
• „label“ (alle Felder)

Wenn ein Element gefunden wurde, bei dem der eingegebene Text in einer der genannten Eigenschaften enthalten ist (vollständige Übereinstimmung ist nicht erforderlich), so wird das betreffende Element in dem Baum selektiert und seine Eigenschaften auf der rechten Seite („Properties“) aufgelistet. Bei einer erneuten Suche wird dann nach dem nächstem Element (in „up“ bzw. „down“ Richtung) gesucht.

Hinweis:
Die Beschreibungstexte von Feldern (Label) enthalten in der Regel auch das Steuerzeichen „&“ zur Kennzeichnung des „Access Keys“.

5.2.1.1 Element-IDs

Jedes Element im Package com.cisag.pgm.dialog hat eine eindeutige ID^[1]. Diese ID dient primär der Kommunikation zwischen Client und Server. Im Zusammenhang mit dem Grafischen-Debugger kann sie auch sehr nützlich sein, wenn es darum geht ein bestimmtes Element zu finden. So lassen sich z. B. auch solche Elemente finden, die über keinen bzw. keinen eindeutigen Text verfügen.

Voraussetzung für die Suche über die Element-ID ist natürlich, dass man die ID des gewünschten Elements kennt. Um in einer laufenden Anwendung die ID eines bestimmten Elements herauszufinden, gibt es folgende Möglichkeiten:

• Wenn das Element (z. B. Feld) aktuell den Tastaturfokus hat, kann man sich durch Drücken der Tastenkombination „Strg+Umschalt+F“ ein kleines Popup-Fenster anzeigen lassen, welches die ID des fokussierten Elements ausgibt^[2].
• Element-ID des fokussierten Elements
• Das Element mit der Maus anklicken und dabei die Tasten „Strg+Umschalt“ gedrückt halten. In diesem Fall wird die ID des angeklickten Elements in der Statuszeile des Browsers angezeigt. Es kann jedoch sein, dass diese Anzeige sehr schnell durch andere Statusmeldungen überschrieben wird und daher nicht leicht zu erfassen ist. Im HTA-Modus ist diese Methode nicht nutzbar (es gibt keine Statuszeile). Bei fokussierbaren Elementen sollte man daher besser die erste Möglichkeit wählen.
• Eine weitere Alternative besteht darin, statt dem gewünschten Element einfach ein (fokusierbares) Element in dessen unmittelbarer Nähe zu wählen und in der Baumansicht dann das richtige Element auszuwählen.

Die Element-IDs sind immer nach dem Muster „idn“ aufgebaut, wobei „n“ eine Zahl ist. Falls nach der Zahl noch weitere Zeichen folgen sollten, so handelt es sich nicht um eine Element-ID. In diesem Fall sollte der oben beschriebenen Vorgang noch einmal wiederholt werden.

Da der Grafische-Debugger als nicht-modaler Dialog realisiert ist, können auf diese Weise auch mehrere Elemente nacheinander gesucht werden, ohne den Dialog des Grafische-Debuggers schließen zu müssen.

5.2.2 Eigenschaften ansehen und ändern

Abhängig von dem Typ (Subklasse) des ausgewählten Elements, erscheinen auf der rechten Seite ein oder mehrere Gruppen von Eigenschaften. Wenn mehrere Elemente ausgewählt wurden, so erscheinen nur die Eigenschaftsgruppen, die für alle ausgewählten Elemente gültig (anwendbar) sind. Die Gruppierung der Eigenschaften erfolgt anhand der Subklassen von VisualElement (com.cisag.pgm.dialog), so sind z. B. die Eigenschaften von VisualElement (com.cisag.pgm.dialog) in einer Gruppe zusammengefasst und die (zusätzlichen) Eigenschaften von Field (com.cisag.pgm.dialog) in einer anderen. Jede vorhandene Gruppe von Eigenschaften (implementierte Subklasse) wird durch ein eigenes Shelf visualisiert.

Aktuell werden von dem Grafischen-Debugger folgende Subklassen unterstützt^[3]:

• cisag.pgm.dialog.VisualElement
• cisag.pgm.dialog.VisualElementContainer
• cisag.pgm.dialog.Field
• cisag.pgm.dialog.DecimalField
• cisag.pgm.dialog.QuantityField
• cisag.pgm.dialog.ValueSetField
• cisag.pgm.dialog.Label
• cisag.pgm.dialog.ListView
• cisag.pgm.dialog.Scrollable
• cisag.pgm.dialog.SmartButton

Je nach Eigenschaft werden für die Darstellung/Bearbeitung einfache Textfelder, CheckBoxen, ComboBoxen oder zusätzliche Popup-Fenster bzw. Dialoge verwendet.

Bei komplexen (Objekt-wertigen) Eigenschaften wird das Vorhandensein bzw. die Notwendigkeit eines Bearbeitungsdialogs bzw. Popup-Fensters (Semiramis-typisch) durch einen Rauten- bzw. Dialog-Button kenntlich gemacht. Die aktuelle Implementierung ist jedoch noch auf folgende Eigenschaften bzw. Objekttypen beschränkt:

• Border
• Font
• DataDescription
• Color („background“, „foreground“, „selectionBackground“, „selectionForeground“, „controlBackground“, „controlForeground“).

5.2.2.1 Änderung von Eigenschaften

Die Eigenschaften lassen sich je nach Datentyp z. B. durch Anklicken (CheckBox) oder Texteingabe (Textfelder) ändern. Die Übernahme des neuen Wertes erfolgt bei Textfeldern jedoch erst bei Feldwechsel (Fokuswechsel) oder bei „Enter“. Bei Dialogen ist „OK“ bzw. „Apply“ zu drücken.

Warnung:
Das Ändern von Elementeigenschaften kann zu schweren Fehlern in der zugehörigen Anwendung führen.

Hinweis:
Nicht alle Änderungen sind umkehrbar, d. h. man kann zwar den Wert ändern, aber man kann den alten (Default) Wert nicht wiederherstellen.

5.2.2.2 Verhalten bei Mehrfachselektion

Einige Eigenschaften, insbesondere boolesche Werte, unterstützen die gleichzeitige Bearbeitung von mehreren Elementen. Bei einer Mehrfachselektion wird bei diesen Elementen nur dann ein konkreter Wert angezeigt, wenn er bei allen selektierten Elementen identisch ist. Ist das nicht der Fall, so wird „undefiniert“ angezeigt. Wenn der Wert geändert wird (das gilt gleichermaßen für einen konkreten Wert als auch für „undefiniert“), dann wird die Eigenschaft bei allen selektierten Elementen geändert.

Eigenschaften, die dieses Verhalten nicht unterstützen, werden bei einer Mehrfachselektion als „disabled“ dargestellt.

5.2.3 Layout debuggen

Um Fehler in dem Layout von Anwendungen zu untersuchen, stellt der Grafische-Debugger verschiedene Hilfsmittel zur Verfügung.

5.2.3.1 Elementgrenzen überprüfen

Die Größe und die (relative) Position eines Elements kann man direkt in den „VisualElement“-Eigenschaften („offset X“, „offset Y“, „offset width“ und „offset height“) ablesen. Meistens ist es jedoch anschaulicher, die Eigenschaft „background color“ zu nutzen, um das Element und damit auch seine Grenzen hervorzuheben. Hiermit läßt sich sehr schnell erkennen, ob ein Element tatsächlich die Größe bekommen hat, die man erwarten würde (z. B. ob ein Container den gesamten Bereich ausfüllt).

• Auffällge Hintergrundfarbe setzen

Hinweis:
Die Hintergrundfarbe vieler Elemente, insbeondere von einfachen Containern wie View, ist „transparent“. Wenn man diese Farbe wiederherstellen möchte, muss man in der Farbauswahl die Farbe „cyan“ wählen.

• Farbe „transparent“ wählen

5.2.3.2 Hinweise für den Layout-Manager ändern

Durch Ändern der Eigenschaften „maximum width“ bzw. „maximum height“ können verschiedene Layout-Manager (insbesondere BoxLayout) in ihrem Verhalten beeinflußt werden (siehe 2.1.2 Layout-Management). Interessant sind hier vorallem die Werte:

• „0“

Mit „0“ wird festgelegt, dass das Element nicht über seine bevorzugte Breite/Höhe vergrößert werden soll.

• „32767“ (MAX_ VALUE)

Mit „32767“ (Short.MAX_VALUE) wird festgelegt, dass das Element beliebig vergrößert werden darf.

• „-1“

Mit „-1“ kann der ursprüngliche (Default) Wert wiederhergestellt werden.

Ähnliche Möglichkeiten bestehen auch für die Eigenschaften „minimum width“ bzw. „minimum height“.

5.2.3.3 Elemente ausblenden

Eine weitere Möglichkeit die Arbeitsweise des Layout-Managers zu prüfen, besteht darin, einzelne Elemente über die Eigenschaft „visible“ ein- oder auszublenden. Einige Layout-Manager stellen dann den freien Platz den anderen Elementen zur Verfügung.

5.2.3.4 Führungslinien anzeigen

Wenn es bei mehrspaltigen Layouts Probleme mit den Fluchtlinien gibt, dann liegt es häufig an der falschen (mehrfachen) Verwendung von Führungslinien (Guides). Führungslinien sollten immer nur einmal und bezogen auf die Container-Hierarchie, „möglichst weit oben“, definiert werden. Die mehrfache Definition von Führungslinien ist nur sinnvoll, wenn z. B. ein zwei-spaltiges Layout für den Abfragebereich und ein n-spaltiges Layout für die Ergebnisliste benötigt wird.

Hinweis:
Im Package com.cisag.pgm.gui können Führungslinien implizit durch die Verwendung der nicht-leeren Konstruktoren von com.cisag.pgm.gui.StandardLayout definiert werden. Von dieser Möglichkeit sollte jedoch kein Gebrauch gemacht werden. Stattdessen sollten die Führungslinien bei dem höchstmöglichen Container mithilfe einer der setGuides Methoden definiert werden.

Um zu prüfen, welche Führungslinien ein Container (bzw. sein „StandardLayout“ Layout-Manager) benutzt, lassen sich die Führungslinien mit der CheckBox „paint guides“ einblenden. Ausgehend von dem aktuell selektierten Element, wird in der Container-Hierarchie soweit „nach oben“ gesucht, bis ein Element mit einer Definition für die Führungslinien gefunden wurde. In diesem Element werden dann die Führungslinien eingeblendet.

• Einblenden der Führungslinien

Für jede Spalte werden bis zu sechs Führungslinien verwendet, wo bei einige Linien zusammenfallen können:

• Start der Spalte (hellrot)
• Start des Labels (dunkelrot)
• Ende des Labels (dunkelrot)
• Start des Feldes (dunkelrot)
• Ende des Feldes (dunkelrot)
• Ende der Spalte (hellrot)

Das nachfolgende Beispiel zeigt, wie es nicht sein sollte: In einem View liegt ein Subshelf. Sowohl View als auch Subshelf verwenden als Layout-Manager „StandardLayout“. Wie man in der Abbildung sehen kann, sind die Führungslinien nicht identisch, sondern werden in dem Shelf neu definiert^[4].

• Mehrfach definierte Führungslinien

5.2.4 Fokussteuerung überprüfen

Mit dem Button „request focus“ kann einem Element der Tastaturfokus zugewiesen werden. Das kann z. B. dann nützlich sein, wenn man bei einem Container prüfen möchte, welches seiner Subelemente dann den Tastaturfokus bekommt.

5.2.5 Entfernen von Elementen

Mit dem Button „remove element“ ist auch das Enfernen von Elementen ist möglich.

Warnung:
Das Entfernen von Elementen kann zu schweren Fehlern in der zugehörigen Anwendung führen.

^[1]Diese ID ist ein „Instanzzähler“ auf Sessionebene und unterscheidet sich somit von der GUID in com.cisag.pgm.gui.VisualElement.

^[2]Das Popup-Fenster zeigt außer der ID noch andere Angaben, diese sind für den Grafischen-Debugger jedoch irrelevant.

^[3]Nicht immer werden alle Eigenschaften unterstützt.

^[4]Bei der Erzeugung des StandardLayouts für das Subshelf wurde ein nicht-leerer Konstruktor benutzt.