[GUI] Konzept vorhanden aber auch umsetzbar?

[#basTi]

Hallo zusammen,

ich arbeite gerade an einem Konzept für ein Programm. Die Funktionen und Anforderungen sind bereits alle bekannt und die Logik des Programms ist relativ simpel.
Das einzige Problem welches ich habe ist, dass ich nicht weiß ob und wie ich das GUI Konzept umsetzen kann.

Um das GUI Konzept zu verstehen erstmal eine Erklärung, was das Programm macht:

Erklärung des Programms:
Es ist ein Programm, mit welchem Tests erstellt werden.
Ein Test besteht aus einer Reihe von Befehlen, die seriell abgearbeitet werden.
Befehle haben eine gewisse Anzahl von Parameter.
Es gibt vier "Grundparameter" welche bei jedem Befehl vorkommen können.
Es gibt aber auch (seltene) Spezialbefehle, welche darüber hinaus noch viele weitere Parameter erwarten.
Der Test kann anschließend als Excel Datei Exportiert werden.

Vorhandene Informationen:
Ich kenne alle Befehle und welcher Befehl welche Parameter haben kann.
Ich kenne pro Befehl Standardwerte für benötigte Parameter.

So jetzt mal zu den Mockup Bildern des GUIs (zweites Bild mit ein paar Erklärungen):


Hauptfunktionen des GUIs:

• Man kann Befehle in die Befehlsspalte eingeben (inkl Autocomplete).
  Bei korrekter Eingabe (oder Auswahl durch Autocomplete) werden die Parameterspalten automatisch gefüllt (oder deaktiviert).
  Beispiel: Der Befehle "Schalte_Licht_ein" erwartet keinen String oder Number Parameter. Bei Eingabe dieses Befehls werden diese zwei Parameterspalten für diesen Befehl deaktiviert. Die anderen zwei Parameter bekommen Standardwerte (für diesen Befehl) eingetragen.
  
• (Nicht deaktivierte) Parameterfelder können folgende Inhalte haben: Texteingabe (inkl Dropdown), Dropdown, Checkbox
  
• Es können Ordner erstellt werden (auch Unterordner). Ordner haben die Option die Befehle die in ihnen liegen kompakt darzustellen. D.h. ein Befehl nimmt nicht mehr die gesamte Zeile ein sondern "floated" nach links um mehrere Befehle pro Zeile anzeigen zu können. Diese Ansicht kann man aber wechseln. D.h. man kann zwischen kompakt und normal umschalten.
  
• Befehle / Ordner können verschoben oder gelöscht werden.
  
• Die ganzen Infos möglichst übersichtlich darstellen

Nun zu meiner Frage:
Ist es möglich dieses Konzept in gängigen Programmiersprachen umzusetzen (ich tendiere im Moment zu JAVA, da ich hier schon viel Programmiererfahrung habe aber keine in Bezug auf GUIs )
Falls ja: Habt ihr hilfreiche Tipps, wie man ein solches Konzept gut Umsetzen kann?

 

[Mumpitzelchen]

Kann jedes Swing Programm. SWT auch.

 

[Rossie]

Was die Umsetzung anlangt, wäre es einfacher die Befehle nicht im Baum darzustellen. Würde meines Erachtens auch zur Übersichtlichkeit beitragen. Links der Baum mit der hierarchischen Gliederung der Befehle. Rechts daneben die Detail-Darstellung. Würde bei sehr vielen Befehlen auch besser skalieren.

 

[#basTi]

@soares:
Also eine Übersicht ist sowieso geplant. Habe sie hier nur nicht eingefügt, da es mir hier nur um die Umsetzung des "Hauptfensters" ging.

Hier mal ein Bild des gesamten Programms inkl Übersicht:


Die Übersicht dient hier als Navigation fürs Hauptfenster. D.h. an die Stelle in der man in der Übersicht klickt springt das "Hauptfenster".

Ich hatte auch die Idee, im Hauptfenster die Struktur flach zu haben (keine Hierarchie) aber ich denke, dass das verwirrt.
Zudem ist mir auch keine Idee gekommen wie ich in einer flachen Struktur die Ordner abbilden sollte.
Ein weiterer Punkt ist die "kompakt" Ansicht, welche mir sehr wichtig ist. Da für die meisten Befehle nur der "Number" Parameter interessant ist, kann man dadurch auf kleinen Platz mehrere Befehle zusammenfassen und den Rest nur auf Wunsch einblenden.
Für jeden Befehl eine eigene Zeile wäre Platzverschwendung und wieder nicht mehr übersichtlich denke ich.

Falls du aber trotztdem dafür eine Idee hast, die nur mit flacher Struktur funktioniert gerne her damit ... dies wäre ja dann simpel mit einer JTable umzusetzen denke ich

@Mumpitzelchen:
Nur wie wäre dies einfach machbar? Ich bräuchte ne Mischung aus JTable und JTree und soweit ich bis jetzt gegoogelt habe ist so etwas nicht standardmäßig vorhanden. Zudem kommen die "kompakten Ordner" hinzu, welche das normale gefüge einer Tabelle durcheinander bringen.

 

[dcobra]

Etwas OT, könntest du mir sagen, mit welchem Tool du den GUI Prototypen oben abgebildet hast? Dieser sketch. Danke

 

[#basTi]

Für sowas sind doch PN da
Aber bitte: Balsamiq Mockups

 

[Rossie]

Die Übersicht dient hier als Navigation fürs Hauptfenster. D.h. an die Stelle in der man in der Übersicht klickt springt das "Hauptfenster".

Ich hatte auch die Idee, im Hauptfenster die Struktur flach zu haben (keine Hierarchie) aber ich denke, dass das verwirrt.

Sehe ich nicht so. Allerdings kann man im Mockup die Übersicht ausblenden. Wenn der Workflow bzw. der Platz das nicht unabdingbar macht, würde ich diese immer anzeigen. Dann sollte es keine Verwirrung hinsichtlich der Navigation geben. Diese wäre dann nur einmal vorhanden. Im Mockup dient die Übersicht dazu, die Navigation bei Bedarf zu erleichtern.

Nur um das noch mal klar zu stellen: Im Hauptfenster würde bei meinem Ansatz nur das im Baum selektierte Element angezeigt. Du hast dann wesentlich weniger Informationen auf einmal angezeigt und springst zwischen den einzelnen Elementen hin und her, in dem diese im Baum ausgewählt werden.

Zudem ist mir auch keine Idee gekommen wie ich in einer flachen Struktur die Ordner abbilden sollte.

Naja, Du kannst diese immer genau so wie auch im Hauptfenster anzeigen. Du verlagerst die Anzeige ja lediglich. Wenn es notwendig ist, wird eben auch im Detailfenster ein Baum (oder was auch immer) angezeigt. Das wäre ein Ausschnitt aus der Darstellung, die momentan geplant ist. Vorteil wäre, so wie ich das momentan sehe, dass immer nur die gerade relevanten Informationen dargestellt werden. Navigieren (mittels Tastatur) könnte man trotzdem aus dem Hauptfenster heraus.

Ein weiterer Punkt ist die "kompakt" Ansicht, welche mir sehr wichtig ist. Da für die meisten Befehle nur der "Number" Parameter interessant ist, kann man dadurch auf kleinen Platz mehrere Befehle zusammenfassen und den Rest nur auf Wunsch einblenden.

Wie gesagt, wie Du die Details darstellst, ändert sich nicht zwangsläufig. Alles was Du an Details im Hauptfenster darstellen wolltest, kannst Du 1:1 auch in einer Detailansicht unterbringen (mit Swing wäre es sogar der gleiche Code und Du kannst leicht testen, was besser ist).

Nur wenn man mehrere Befehle auf einen Blick einsehen und ändern können muss, bleibt Dir wohl nichts anderes übrig, als alles im Hauptfenster anzuzeigen. Wobei man ev. für die Navigationsansicht auch eine leicht erweitere Darstellung auswählen könnte, die auch manche Befehle mit Parametern anzeigt.

Für jeden Befehl eine eigene Zeile wäre Platzverschwendung und wieder nicht mehr übersichtlich denke ich.

Was meinst Du mit eigene Zeile? Angezeigt werden würden nur jeweils die Elemente eines Knotenpunktes. Wenn ein Ordner angewählt ist, stellst Du dessen Befehle dar. Wenn ein Befehl angezeigt ist, dessen Parameter. Du verlagerst ja lediglich den Ort der Darstellung.

Falls du aber trotztdem dafür eine Idee hast, die nur mit flacher Struktur funktioniert gerne her damit ... dies wäre ja dann simpel mit einer JTable umzusetzen denke ich

Kann man machen. Eine Tabelle würde ich vermutlich nur nehmen, wenn abzusehen ist, dass man bei den Parametern viel ändern muss. In dem Fall wäre der Aufwand dafür geringer.

Nur wie wäre dies einfach machbar? Ich bräuchte ne Mischung aus JTable und JTree und soweit ich bis jetzt gegoogelt habe ist so etwas nicht standardmäßig vorhanden.

Es gibt eine TreeTable-Implementierung von Sun, die sehr oft Verwendung findet und es auch in SwingX geschafft hat. NetBeans bietet mit der Outline-Klasse eine ev. bessere Implementierung. Damit fängst Du Dir aber einige Abhängigkeiten ein. Ich habe noch nicht damit gearbeitet und würde bei einem neuen Projekt ohnehin nicht mehr auf Swing setzen.

Man könnte das ev. auch mit einem JTree und verschiedenen Renderern umsetzen.

 

[#basTi]

Sehe ich nicht so. Allerdings kann man im Mockup die Übersicht ausblenden. Wenn der Workflow bzw. der Platz das nicht unabdingbar macht, würde ich diese immer anzeigen. Dann sollte es keine Verwirrung hinsichtlich der Navigation geben. Diese wäre dann nur einmal vorhanden. Im Mockup dient die Übersicht dazu, die Navigation bei Bedarf zu erleichtern.

Stimmt ... die Übersicht sollte wirklich immer sichtbar sein. Wurde geändert

Nur um das noch mal klar zu stellen: Im Hauptfenster würde bei meinem Ansatz nur das im Baum selektierte Element angezeigt. Du hast dann wesentlich weniger Informationen auf einmal angezeigt und springst zwischen den einzelnen Elementen hin und her, in dem diese im Baum ausgewählt werden.

Daraus ergeben sich aber auch Probleme. Wie bearbeite ich zB Befehle, die auf oberster Ebene sind ( also in keinem Ordner ). Das würde in dem Fall ja nicht wirklich komfortabel sein, wenn ich den Befehl in der Übersicht auswählen muss um ihn in dem Hauptfenster bearbeiten zu können. Alle Befehle auf oberster Ebene anzeigen würde mMn auch Probleme mit sich ziehen.
Ein weiteres problem bei der Lösung ist, dass man nicht einfach den gesamten Test anschauen kann (zB zum überprüfen von Parametern). Man wäre ständig gezwungen in der navigation zum nächsten Abschnitt zu springen anstatt einfach "durchzuscrollen".

Wie gesagt, wie Du die Details darstellst, ändert sich nicht zwangsläufig. Alles was Du an Details im Hauptfenster darstellen wolltest, kannst Du 1:1 auch in einer Detailansicht unterbringen (mit Swing wäre es sogar der gleiche Code und Du kannst leicht testen, was besser ist).

Versteh ich nicht ganz. Für mich ist das Hauptfenster und die Detailansicht dasselbe.

Nur wenn man mehrere Befehle auf einen Blick einsehen und ändern können muss, bleibt Dir wohl nichts anderes übrig, als alles im Hauptfenster anzuzeigen. Wobei man ev. für die Navigationsansicht auch eine leicht erweitere Darstellung auswählen könnte, die auch manche Befehle mit Parametern anzeigt.

Wie ein bisschen weiter oben schon erwähnt ist das durchaus ein Anwendungsfall.
Zum anderen Punkt: Ich will ungern Übersicht und Hauptfenster vermischen von der Logik. Falls ich nämlich Parameter in der Übersicht anzeige sollten sie dort auch änderbar sein. Damit hätte ich mir im Prinzip ein zweites Hauptfenster geschaffen.

Was meinst Du mit eigene Zeile? Angezeigt werden würden nur jeweils die Elemente eines Knotenpunktes. Wenn ein Ordner angewählt ist, stellst Du dessen Befehle dar. Wenn ein Befehl angezeigt ist, dessen Parameter. Du verlagerst ja lediglich den Ort der Darstellung.

Mit eigener Zeile meine ich eine Flache Struktur die wie folgt aussieht:
Befehl1, Param1, Param2, Stringparam, Num param
Befehl2, Param1, Param2, Stringparam, Num param
... usw
Das war auch nicht auf deine Lösung bezogen. Dies bezog sich auf die Kompaktansicht, bei welcher die Befehle ja links floaten mit nur einem (ausgewählten) Parameterfeld

Kann man machen. Eine Tabelle würde ich vermutlich nur nehmen, wenn abzusehen ist, dass man bei den Parametern viel ändern muss. In dem Fall wäre der Aufwand dafür geringer.

Wie würdest du / ihr denn dieses GUI umsetzen? Wie gesagt ich hab mit JAVA noch nie GUIs gemacht. Wäre über jede Hilfe dankbar

Noch ein kurzer Screen mit der Übersicht dauerhaft Links eingeblendet:

 

[Rossie]

Stimmt ... die Übersicht sollte wirklich immer sichtbar sein. Wurde geändert

Bei Deinem Design mit einem Hauptfenster in dem alle Tests hierarchisch dargestellt werden, erscheint mir das nicht zwingend. Dort ist das dann einfach eine alternative Darstellung, die für bessere Übersicht sorgen soll.

Ich würde dann allerdings auch das Suchfeld fest in die Übersicht integrieren. Ev. kann man die Optionen in einen Dialog auslagern und die Reiter rechts ganz entfernen.

Daraus ergeben sich aber auch Probleme. Wie bearbeite ich zB Befehle, die auf oberster Ebene sind ( also in keinem Ordner ). Das würde in dem Fall ja nicht wirklich komfortabel sein, wenn ich den Befehl in der Übersicht auswählen muss um ihn in dem Hauptfenster bearbeiten zu können.

Ob ich den Befehl in der Hierarchie des Hauptfensters auswählen muss, oder im Übersichtsfenster, macht für mich keinen riesen Unterschied.

Man könnte eine Navigationsmöglichkeit einbauen, die die Hierarchie mit den Strg+Pfeiltasten durchläuft, ohne dass der Fokus im Übersichtsfenster ist. Erscheint mir gut genug.

Will ich schnell sehr weit springen, muss ich die Maus bemühen, aber das ist mit Deinem Design auch so. Ev. muss man dann sogar im Hauptfenster scrollen, weil nicht die komplette Hierarchie angezeigt werden kann. Oder eben doch über die Übersicht navigieren

Alle Befehle auf oberster Ebene anzeigen würde mMn auch Probleme mit sich ziehen.

Inwiefern?

Ein weiteres problem bei der Lösung ist, dass man nicht einfach den gesamten Test anschauen kann (zB zum überprüfen von Parametern). Man wäre ständig gezwungen in der navigation zum nächsten Abschnitt zu springen anstatt einfach "durchzuscrollen".

Wenn die Elemente nicht isoliert zu betrachten sind, sondern einen Workflow darstellen, dann macht die hierarchische Ansicht sicherlich Sinn. Das wurde bisher nicht deutlich.

Versteh ich nicht ganz. Für mich ist das Hauptfenster und die Detailansicht dasselbe.

Dein Mockup für das Hauptfenster enthält alle Elemente. Mein "Detailansicht" Hauptfenster würde jeweils nur die in der Übersicht ausgewählten Elemente enthalten.

Zum anderen Punkt: Ich will ungern Übersicht und Hauptfenster vermischen von der Logik. Falls ich nämlich Parameter in der Übersicht anzeige sollten sie dort auch änderbar sein. Damit hätte ich mir im Prinzip ein zweites Hauptfenster geschaffen.

Ich würde vermutlich keine Parameter in der Übersicht anzeigen. Und wenn einen Reiter mit einer erweiterten Übersicht anbieten. Oder eine Filtermöglichkeit anbieten, damit man die erweiterte Ansicht je nach Bedarf an- oder abschalten kann.

Wie würdest du / ihr denn dieses GUI umsetzen? Wie gesagt ich hab mit JAVA noch nie GUIs gemacht. Wäre über jede Hilfe dankbar

Das ist schon ein veritables Unterfangen. Wenn Du noch nie mit Java GUI Toolkits gearbeitet hast und das alleine umsetzen wolltest, bist Du einige Zeit beschäftigt.

Fängt schon damit an, welches Toolkit genommen werden soll. Swing ist aus Entwicklersicht toll, damit ist man extrem flexibel. Einzig die miese Schriftdarstellung ist mir ein ständiger Graus. Unter Windows ist das mittlerweile aber wohl kein Problem mehr.

Die Zukunft gehört JavaFX. Da fehlen aber noch einige Widgets, wie z.B. ein TreeTable. Wie flexibel SWT im Bezug auf dessen TreeTable ist, vermag ich nicht zu sagen.

Schon mal über das NetBeans RCP-Framework nachgedacht?

 

[#basTi]

Da ich noch nicht wirklich mit dem Konzept zufrieden bin, hab ich mich mal schnell an ein weiteres gemacht, dass (hoffentlich) etwas übersichtlicher ist. Deshalb werd ich jetzt nicht mehr einzeln auf deine Punkte eingehen, da dies jetzt ja wieder eine neue Diskussionsgrundlage ist:

-

Wie man sieht einmal mit der Ordnerbeschriftung vertikal und einmal Horizontal. Wobei ich zur vertikalen Variante tendiere.

Das ist schon ein veritables Unterfangen. Wenn Du noch nie mit Java GUI Toolkits gearbeitet hast und das alleine umsetzen wolltest, bist Du einige Zeit beschäftigt.

Also ich weiß, dass es nicht "einfach" werden wird für mich als GUI Anfänger aber ich hab maximal 4 Monate dafür Zeit (Vollzeit). ich denke das sollte reichen.

Fängt schon damit an, welches Toolkit genommen werden soll. Swing ist aus
Entwicklersicht toll, damit ist man extrem flexibel. Einzig die miese
Schriftdarstellung ist mir ein ständiger Graus. Unter Windows ist das
mittlerweile aber wohl kein Problem mehr.

Die Zukunft gehört JavaFX. Da fehlen aber noch einige Widgets, wie z.B. ein TreeTable. Wie flexibel SWT im Bezug auf dessen TreeTable ist, vermag ich nicht zu sagen.

Schon mal über das NetBeans RCP-Framework nachgedacht?

Da ich wie gesagt wenig mit GUIs zu tun hatte bisher (abgesehen von ActionScript was aber nicht wirklich zählt ) kann ich dazu nichts sagen. Bin in dem Bereich ein unbeschriebenes Blatt. Also ich weiss noch nicht, welches Toolkit dafür am besten ist noch weiß ich was JAVAFX oder das RCP Framework ist.