GUI Design ohne GUIDesigner

[Nookie]

Hallo zusammen

Ich bin nun schon eine weile in der Java-Welt und wage mich langsam an GUI's.
Es gibt ja für Eclipse und Netbeans solche netten GUI Designer, ich würde aber gerne ohne solche GUI's designen. Oder ist so was ein ding der Unmöglichkeit?

Als bsp soll mal diese GUI dienen:


Was ist nun "best practies" ein solches GUI zu bauen?
Auf der ersten "Linie" wären ja mal Ein JLabel, JTextField und zwei JButtons.
Diese in ein pane und dem pane ein FlowLayout zuweisen welches dann auf das JFrame kommt?
Aber dann wie weiter? zB Wie definiere ich die breite eines JTextFields?
Und wie sage ich dem nächsten pane das es nicht das erste überschreiben soll?

Grüsse

 

[javampir]

Hi,
Solche Eigenschaften legst du hauptsächlich über den verschachtelten Einsatz verschiedener LayoutManager fest.
Galileo Computing :: Java ist auch eine Insel – 19.11 Alles Auslegungssache: die Layoutmanager unter LayoutManager
javampir

 

[Thallius]

Das gezeigt GUI ist schon eine ziemliche Herausforderung. Da wirst Du am Anfang dran verzweifeln. Ich selber arbeite am liebsten mit dem BoxLayout und zerlege meine UI in immer kleinere Panel-Teile bis nur noch ein Element überbleibt.

An Deinem Beispiel hätte ich zunächst ein JPanel das über das gesammte Frame geht und Zeilenorientiert ist (PAGE_AXIS). In dieses Panel kommt dann ein Box.Filler für den Abstand zum oberen Rand. Dann kommt ein JPanel für die Searchbar mit den zwei Buttens, dann kommt wieder ein Filler für den Abstand zur nächsten Box, dann ein JPanel für das Listview (Oder was auch immer das da ist), dann wieder ein Filler, dann ein JPanel für das Textview, ein Filler, ein Jpanel für die Buttons unten und ein Filler für den Abstand zum unteren Rand.

Jetzt habe ich mein UI in 4 kleine Panels unterteilt. Das erste Panel bekommt nun ein BoxLayout mit Spaltenformat (LINE_AXIS). Dort setze ich dann die Elemente rein. Ersst wieder ein Filler für den linken Rand, dann das Label für "Highlight", ein Filler für den ABstand, dann das Textview, Filler, Button, Filler, Button.

Gruß

Claus

 

[Gucky]

Ich würde dir zum GroupLayout raten. Das ist mein Lieblingslayout aber ohne GUI Designer ist es sehr kompliziert. Aber dann könntest du das obige GUI nachbauen, ohne verschachtelung von JPanels.

Warum möchtest du diese Tools denn nicht benutzen? Schließlich gibt es sie.

 

[JavaMeister]

Warum möchtest du diese Tools denn nicht benutzen? Schließlich gibt es sie.

Dieses Vorgehen ist mehr als sinnvoll. Man sollte zunächst die Grundlagen kennen und dann andere die Basics machen lassen.

 

[dzim]

In JavaFX wäre eine Variante:
VBox (root, spacing von 5)
- HBox (searchbar, spacing von 5)
-- Label, Text (vgrow=ALWAYS), Button, Button
- Da ich nicht weiss, was auf der grossen Fläche stehen soll: AnchorPane, ... (aber mit vgrow=ALWAYS)
- TextArea (minHeight/maxHeight setzen)
- HBox (untere Leiste, spacing von... rate mal)
-- Label, ComboBox, Button, Spinner, Label (ohne Inhalt, hgrow=ALWAYS), Button Button

Nicht so fancy...

 

[Harry Kane]

Ich verwende seit Jahren praktisch nur MigLayout.
Dieser Code:

public class MigNestedPanel {
    
    public static void main(String[] args){
        JFrame frame = new JFrame("Nested components");
        frame.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
        JPanel panel = new JPanel(new MigLayout("fill","[]","[][grow][grow][]"));
        panel.add(new JLabel("Highlight:"), "sg label, split, span");
        panel.add(new JTextField(10), "growx");
        panel.add(new JButton("..."));
        panel.add(new JButton("Show next"), "wrap");
        panel.add(new JScrollPane(new JTextArea()),"split, span, wrap, grow");
        panel.add(new JScrollPane(new JTextArea()),"split, span, wrap, grow");
        panel.add(new JLabel("Volume:"), "sg label, split, span");
        panel.add(new JComboBox(new String[]{"A:\\", "C:\\", "D:\\"}));
        panel.add(new JButton("Refresh"));
        panel.add(new JLabel("Zoom"));
        panel.add(new JSpinner());
        panel.add(new JButton("Export..."), "gap push");
        panel.add(new JButton("Quit"));
        frame.setContentPane(panel);
        frame.pack();
        frame.setVisible(true);
    }
    
}

ergibt nach vergrößern des JFrames dieses Bild:

 

[dzim]

BTW: Ich habe UIs erst mit dem Designer erstellen lassen und dann begonnen, sie wirklich zu verstehen...

 

[Ruzmanz]

Was ist nun "best practies" ein solches GUI zu bauen?

Swing hat einen großen Verbereitungsgrad und deshalb gibt es viele Bibliotheken und spezielle Elemente. JavaFX ist zwar nicht so weit entwickelt, aber im Großen und Ganzen deutlich überlegen. Dort hast du die Möglichkeit deine GUI-Edinition in (F)XML zu beschreiben, was mMn wesentlich lesbarer und einfacher ist, als in Swing. Für Swing gibt es auch diverse Libraries, welche diese Funktionalität bieten, aber der Verbreitungsgrad ist nicht so hoch. Der UIManager in Swing ist sehr speziell und nicht so einfach zu handhaben, wie z.B. CSS ...

Zu deiner Eigentlichen Frage. Sofern du ein bisschen mit HTML vertraut bist, kannst du dich an diese Vorgehensweise orientieren:

1. Schritt: Der Frame hat alle Elemente auf einem Panel.

<Frame>
  <Panel>
  </Panel>
</Frame>

2. Schritt: Die Elemente auf dem Panel sind vertikal angeordnet:
(Top, GraueTextArea, WeißeTextArea und Bottom)

<Frame>
  <Panel Layout="Vertikal">
    <Panel id="Top"></Panel>
    <Panel id="GraueTextArea"></Panel>
    <Panel id="WeißeTextArea "></Panel>
    <Panel id="Bottom"></Panel>
  </Panel>
</Frame>

... Dann kannst du die einzelnen Panels immer detailierer definieren. Oft ist ein Verschachteln nicht nötig. In diesem Fall bietet sich auch ein Gridbag an oder hier im Forum hat jemand mal das TOnion-Layout vorgestellt. Das könnte auch ganz gut passen.

PS: An den Antworten sieht man schon, dass es nicht "die Lösung" gibt. Kommt sehr oft auch auf die Rahmenbedingungen an. Bei 2 Masken mit vielen Änderungen, würde ich immer einen Editor nehmen.

 

[kaoZ]

Ich bin zwar nicht Zuhause, aber ich liebe es gui's von Hand zu programmieren (haltet mich ruhig für bescheuert), ich sehe auf Anhieb das BorderLayout, und mehrere panel mit verschiedenen Komponenten, wenn ich nachher dazu komm,e könnte ich dir nen kleines bsp. Posten im welchem du erkennen kannst wie man sowas einteilen und untergliedern kann

 

[kaoZ]

Falls es dich noch interessieren sollte :

Ich hab es mal einfach unterteilt,

Angenommen du hast ein JFrame mit standardmäßigem Borderlayout:

Dann könnte man dein Layout einfach in diesem Gliedern :

JMenuBar und im Headbereich einfach ein panel mit Flowlayout und deinen Komponenten :


Im Center bereich des JFrames einfach eine JTextArea / oder einen JTree, je nachdem was du darstellen willst :



und im Bottom bereich des BorderLayouts ein JPanel welches wiederrum in 2 JPanel unterteilt ist, und ggf ein Box Oder GridBagLayout erhält:



nur um eine weitere Möglichkeit aufzuzeigen, die komponenten sind hier auch relativ offensichtlich , Buttons, JTextField, JTextArea, Combobox usw. usw. , am besten du beginnst und tastest dich Stück für Stück heran indem du ersmtal versuchst die einzelnen JPanel zu definieren und zum schluss alles zu einem fertigen Layout per Composite Pattern zusammenzusetzen.

Quasi ala Divide and Conquer.