# NetBeans: Layout-Problem



## alex-t (13. Jul 2004)

_Bitte schaut euch das hier mal an:_













*erläuterung:*
diese oberfläche soll als applet laufen. das html dokument ist ansonsten leer. die masse sollen 100% x 100% lauten, damit der applet fensterfüllend ist. 
soweit so gut.

ich bin wiedereinsteiger und neu in swing. habe netbeans geladen und schon die ersten schmerzlichen verluste eingesteckt. kann ich kein java? netbeans lässt einen nicht den generierten code bearbeiten. sperrt diesen. ausserdem erzeugt er, mir unbekannten, layout code.

kann mir jemand bei meiner gui helfen? ich bitte euch sehr!

meine bisherigen versuche sehen recht bescheiden aus.

*zum bild:*
diese skizze habe ich angefertigt. hoffe sie ist einigermassen verständlich.
das layout soll sich an die fenstergrösse anpassen.

ich fange mal oben an. die toolbar die da ist, soll auch oben links bleiben und immer 100% des applet in der breite füllen. wie geht das? habe bis her immer nur mit festen grössen gearbeitet.

links unten, soll ein button mit einer grösse von ca. 25 x 400. sein. und nicht nur sein, sondern auch bleiben. und bleiben soll er immer in dieser ecke. also sich immer in diese ecke bemühen, wenn das fenster vergrössert oder verkleinert wird.
label dieses buttons ist "" und davon benutze ich lediglich das mouseEntered event.

rechts neben dieses buttons und und oben unter der toolbar soll eine textpane platzfüllend sein. d.h. die position links oben soll immer beibehalten werden und lediglich die masse sollen sich bis an den applet rand ausweiten.

und nicht zu vergessen, oben links, zwischen toobar und textpane eine tabbedpane. eine feste position, keine grössenänderung.



womit bekomme ich das am besten hin?
und wie lauten die steuerbefehle?


bei netbeans: soll ich da eine vorlage jApplet verwenden, oder alles selbst schreiben?

bitte helft mir!!!


----------



## Beni (13. Jul 2004)

Nimm Eclipse und schreib deine GUI von Hand. :wink:

Für den Button unten links würde ich eine Aufruf von JButton#setPreferredSize, und der Einsatz eines GridBagLayouts empfehlen (Für den Button kann man dann _anchor = SOUTHWEST, fill = NONE_ verwenden ).

Und sonst lohnt sich auch immer das Verschachteln von Components, und eigene kleine Implementationen von LayoutManagern. Die müssen ja nicht viel können (ausser bei einigen bekannten Components "setBounds" aufrufen).


----------



## L-ectron-X (13. Jul 2004)

Beni, das hat nix mit der IDE NetBeans zu tun. Man kann auch wunderbar und sehr komfortabel im Code-Editor unter NetBeans (von Hand) programmieren.

@alex-t: Allerdings stimmt es, dass man den von NetBeans generierten Code nicht, bzw. nicht direkt im Code-Editor beeinflussen kann. Was aber nicht heißt, dass man keine Macht über den Code hat. Bei NetBeans ist es vielleicht nicht ganz so offensichtlich, als bei anderen IDEs.
Man kann den Code der Components beeinflussen, in dem man eine Component im _Inspector_ auswählt und dann im _Properties_-Fenster auf _Code_ klickt. Dort können Dinge wie Variablenname, Zugriffsmodifikator oder auch der Code vor und nach der Component geändert werden. Über den Button bei _Custom Creation_, kann der Code einer Component direkt geändert werden. Probier's mal aus.
Wenn Du Deine GUI mit einer IDE zusammen klickst - und bei NetBeans ist der GUI-Editor sehr mächtig und komfortabel - musst Du aber vorher genau wissen, welche Components Du wie anordnen willst. Unter Umstaänden müssen noch weitere Container eingeplant werden, denen man ein anderes Layout zuweist.
Eine von Dir gewünscht Oberfläche im GUI-Editor von Netbeans zu erstellen dürfte keine besonders schwierige Aufgabe sein und kann recht schnell erledigt werden.

_*verschoben nach IDE und Tools*_


----------



## Guest (13. Jul 2004)

L-ectron-X hat gesagt.:
			
		

> Eine von Dir gewünscht Oberfläche im GUI-Editor von Netbeans zu erstellen dürfte keine besonders schwierige Aufgabe sein und kann recht schnell erledigt werden.



ich habe jetzt auch noch jbuilder installiert.
kannst du mir so ein paar überlegungen offen legen, wie ich anfangen soll. egal ob mit netbeans oder dem jbuilder.


----------



## L-ectron-X (14. Jul 2004)

Ich will es an Hand von NetBeans IDE versuchen zu erklären.
Zunächst musst Du ein neues Projekt erzeugen, u.U. auch ein (neues) Filesystem mounten.
Zum Erzeugen eines neuen Projektes gehst Du wie folgt vor:
Im Dateimenü auf _File_ -> _New_.
Im sich öffnenden Wizard gehst Du auf _Java GUI Forms_ und wählst dort den Eintrag _JApplet_. Klicke dann auf _Next_. Im bereits markierten Textfeld gibst Du den Namen Deiner Applet-Klasse ein und wählst, wenn nötig, auch noch einen Zielort (Target Location), also ein Verzeichnis für Deine Klasse.
Klicke dann auf _Finish_. OK, das Applet haben wir nun im "Rohbau" angelegt. Der Form-Editor zeigt bereits eine Ansicht des Applets an.

Damit das Applet sich immer an den ihm zur Verfügung gestellten Platz anpassen kann (100%) weisen wir ihm erst mal das passende Layout zu. Dazu Rechtsklick auf die Applet-Fläche und im sich öffnenden Kontextmenü wählst Du unter _Set Layout_ das _BorderLayout_.
Aus der Komponenten-Palette suchst Du nun unter _Swing_ die JToolbar. Dazu führst Du den Mauszeiger für eine Sekunde über das Icon jeder Komponente, bis Dir der ToolTip sagt, um welche Komponente es sich handelt. Wenn Du die JToolBar gefunden hast, klickst Du drauf. Führe nun die Maus unter den oberen Rand Deines Applets und klicke erneut. Nun ist eine vertikale dicke dunkelblaue Linie zu sehen, die die eingefügte leere JToolbar symbolisiert.
Der JToolBar können nun auf die gleiche Art und Weise Buttons hinzugefügt werden.

Leider hast Du nicht verraten, was Du mit der JTabbedPane vor hast, da sie in Deiner Beschreibung ohne Funktion zu sein scheint. Daher ging ich davon aus, dass die JTabbedPane die JTextPane anzeigen soll.
Dazu gehst Du wieder in die Komponenten-Palette und wählst Dort die JTabbedPane und setzt sie mit Klick auf die Mitte des Applets ein. Damit man in der JTextPane auch scrollen kann brauchen wir jetzt noch eine JScrollPane, die Du analog zum vorigen Schritt einsetzt. Zum Schluss auf gleiche Art und Weise dann die JTextPane. Den Titel das Tabs der JTabbedPane für die JTextPane kann in den _Properties_ der zuerst diesem Tab hinzugefügten Komponente (JScrollPane) geändert werden. Dazu klickst Du auf _Inspector_ neben der Komponenten-Palette und klickst dort mit der rechten Maustaste auf den Eintrag der JScrollPane. Im sich öffnenden Kontextmenü suchst Du nun unter _Layout_ nach _Tab Title_. Den vermerkten Eintrag kannst Du nun nach belieben modifizieren.

Fehlt nur noch der "blinde" JButton auf der linken Seite. Ich wusste nun auch nicht, ob der Button _unten_ links Position beziehen _muss_. Denn wenn das der Fall wäre, müsste im linken Bereich des BorderLayouts (WEST) ein weiterer Container mit passendem Layout eingefügt werden. Also ein weiteres JPanel mit einem GridBagLayout z.B.
Der Einfachheit halber habe ich es deshalb beim BorderLayout belassen. Du fügst also nun den JButton noch am linken Rand ein. Da die gesamte Fläche nun schon von der JTabbedPane bzw. der JTextPane ausgefüllt wird gestaltet sich das Einfügen des Buttons etwas schwieriger, weil der WEST-Bereich des BorderLayouts verdeckt ist und das Auge nun keine optische Führung mehr beim Einfügen hat.
Lass den JButton einfach an einer beliebigen Stelle auf der Applet-Oberfläche fallen und wechsle zum _Inspector_
Die eben eingefügte Komponente wird im Komponenten-Baum markiert dargestellt. Per Drag'n Drop verschiebst Du nun den JButton innerhalb des Baumes und lässt ihn direkt auf _JApplet_ fallen. Der JButton wird nun von NetBeans auf eine freie Layout-Position (SOUTH, EAST oder WEST) verschoben und somit auf der Applet-Oberfläche im Form-Editor sichtbar. Um in auf die WEST-Position zu verlegen, klickst Du mit der rechten Maustaste auf den JButton im Form-Editor und wählst im sich öffnenden Kontextmenü den Eintrag _Properties_. Im Properties-Fenster scrollst Du nach unten zum Bereich _Layout_ und kannst dort den Eintrag für die _Direction_ auf _West_ ändern.
Das war's im Schnelldurchgang. Wenn man erst mal hinter die die Funktionen der einzelnen Werkzeuge von NetBeans gekommen ist, sind selbst komplexe GUIs kein Problem mehr.

Ich habe das Project Management von NetBeans absichtlich außen vor gelassen, um nich unnötig zu irritieren. Es geht auch ohne.

Vielleicht kommst Du ja schon mit dieser kleinen Anleitung Deinem Ziel ein Stück näher.
Es hilft schon viel, wenn man genau weiß, wie das GUI einmal aussehen soll und welche LayoutManager zur Anordnung von Komponenten im einzelnen Fall am besten geeignet sind.


----------



## alex-t (14. Jul 2004)

@L-ectron-X: 1000 mal danke!

super, das ist einfach klasse. genau so habe ich es mir auch vorgestellt. selbst die scroll funktion ist automatisiert. da habe ich noch einiges nachzuholen in sachen java und swing.

jetzt weiss ich nicht, ob ich im richtigen forum bin für zwei weitere fragen: 

man kann meiner skizze hoffentlich auch die "sidebar" entnehmen. diese habe ich in flash mx 2004 folgend realisiert:
der button an der linken seite wird als 'listener' für eine geste misbraucht (rollover). in java wäre das ja ein mouseentered event. und dieser sollte ein "fenster" in der linken unteren ecke sichtbar machen. so weit ich das bis jetzt erkundet habe, würde dafür ein jinternalframe eignen. dieser müsste natürlich alles andere überlagern, was das ganze wahrscheinlich erschwert, oder?
in diesem fenster würde dann ein jtabbedpane komponente zum einsatz kommen, aber jetzt weiss ich ja wie das geht.

und wie man dialoge, z.b. zum einstellen von optionen innerhalb des applets aufruft, muss ich noch recherchieren, falls das aber in sehr kurzer zeit zu erklären ist, bitte ich euch darum herzlich.


----------



## L-ectron-X (14. Jul 2004)

alex-t hat gesagt.:
			
		

> so weit ich das bis jetzt erkundet habe, würde dafür ein jinternalframe eignen. dieser müsste natürlich alles andere überlagern, was das ganze wahrscheinlich erschwert, oder?
> in diesem fenster würde dann ein jtabbedpane komponente zum einsatz kommen, aber jetzt weiss ich ja wie das geht.


Sorry, da muss ich Dich leider enttäuschen. Der JInternalFrame wird normalerweise nur einer JDesktopPane hinzugefügt. Aber auch in einem JPanel, JFrame und einem JDialog klappt das meines Wissens ganz gut.
Allerdings braucht er dann den gesamten Platz im JPanel, man kann ihn also nicht über andere Komponenten "drüber blenden" bzw. darüber legen.
Du wirst hier wohl ein Objekt von JDialog verwenden müssen.



			
				alex-t hat gesagt.:
			
		

> und wie man dialoge, z.b. zum einstellen von optionen innerhalb des applets aufruft, muss ich noch recherchieren, falls das aber in sehr kurzer zeit zu erklären ist, bitte ich euch darum herzlich.


Was willst Du hier genau wissen?


----------



## alex-t (14. Jul 2004)

jdialog, na gut, klingt und sieht logischer aus. googele gleich, um diese klasse besser kennen zu lernen.



			
				L-ectron-X hat gesagt.:
			
		

> Was willst Du hier genau wissen?


es sind denke ich mal zwei sachen.
1. man kann in meiner skizze das rote halddurchsichtige rechteck in der linken unteren ecke erkennen. dieses soll eine sidebar darstellen. um die funktion zu beschreiben: wenn man mit dem mauszeiger über den darunterliegenden butten kommt, wird diese sichtbar, und nach dem verlassen der sidebar(jdialog), soll diese ausgeblendet werden(, allerdings nicht gelöscht, lediglich unsichtbar, da in der sidebar mehrere datenobjektgestützte objekte vorhanden sind und deren einstellung und status nicht gefährdet werden dürfen.)
ich hoffe man kann es einigermassen verstehen. im grunde ist es wie ein mouse-over-menü in dhtml oä. 

2. wie definiere ich neue dialoge? muss ich dazu etwas neues einfügen? kann mir das jemand anhand von jbuilder ober netbeans erklären? 
beispiel: ein dialog, zum einfügen von texten, oder zur auswahl der farbe, oä. weiter, nach dem betätigen eines buttons in der toolbar, wird dieser dialog angezeigt. und wie kann ich aus diesem dialog etwas zurückgeben, bzw. auf die textpane zugreifen?


----------



## L-ectron-X (15. Jul 2004)

Ich will Dir wieder an Hand der NetBeans IDE versuchen zu erklären, wie man einen JDialog erzeugt:

Wenn Du ein Filesystem gemountet hast, markierst Du es zunächst mit einem Klick mit der Maus. Das Filesystem ist im Prinzip das Arbeits- bzw. Projektverzeichnis. Also musst Du hier das Verzeichnis anklicken, in dem auch schon der Rest unseres vorgestrigen Versuches zu finden ist. Das Filesystem findest Du im linken Bereich (oben) im NetBeans-Fenster.

Als nächstes erzeugen wir wieder ein GUI-Objekt im "Rohbau" für einen JDialog. Folgendermaßen:
Klicke auf _File_ -> _New_ -> _Java GUI Forms_ -> _JDialog Form_.
Dann klickst Du auf _Next_ und gibst Deiner Klasse einen passenden Namen. Klicke dann auf _Finish_. Achte darauf, dass in diesem Wizard das Zielverzeichnis (Filesystem) stimmt, sonst suchst Du später die Klasse, ob wohl sie angelegt wurde. Nur eben in einem anderen Verzeichnis.

Damit sehen wir nun schon eine Ansicht des JDialogs im Form-Editor. Noch ist nichts drin, aber das kannst Du ja nun ändern. Wie man mit Komponenten umgeht, sie einfügt, verändert und manipuliert, habe ich bereits oben schon grob beschrieben. Die Vorgehensweise unterscheidet sich kaum. Der JDialog lässt sich bereits jetzt schon über das kleine "x" in der rechten oberen Ecke schließen, allerdings sind die Daten im Dialog nicht sicher, da standardmäßig die _DefaultCloseOperation_ auf _DISPOSE_ON_CLOSE_ steht. Das lässt sich aber in den Properties Deiner JDIalog-Klasse problemlos und schnell ändern. Dazu benutzt Du den Inspector und öffnest die Properties von _[JDialog]_. Das ist oben auch schon kurz beschrieben. Wenn Du möchtest, dass sich der Dialog schließt, wenn die Maus seine Fläche verlässt, musst Du zusätzlich noch ein _MouseExited-Event_ am Dialog registrieren (Dazu weiter unten mehr). Im Code-Editor schreibst Du dann an der Stelle:

```
setVisible(false);
```
Wichtig beim Erstellen von GUIs ist immer der Einsatz des passenden LayoutManagers. Man sollte also schon vorher ein genaues Bild davon haben, wie der Dialog einmal aussehen soll. Natürlich kannst Du auch alle LayoutManager abschalten und die Komponenten fest auf dem GUI verankern (hard codieren).

Um den Dialog nun sichtbar zu machen, wenn Du mit der Maus über den Button fährst, musst Du im Code des Applets den Button (wie oben schon angekündigt) auf ein Event vom Typ MouseEvent hören lassen. Dazu wechselst Du im Form-Editor zur Form-Ansicht des Applets und klickst mit der rechten Maustaste auf den Button. Im sich daraufhin öffnenden Kontextmenü wählst Du den Eintrag _Events_ -> _MouseEvents_ -> _MouseEntered_. Es öffnet sich automatisch die entsprechende Codestelle des Applets im Code-Editor. Dort erzeugst Du eine neue Instanz des JDialogs und zeigst ihn an.
z.B.:

```
new SideBarDialog(this, "SideBar", true).setVisible(true);
```
Fertig. Der Konstruktor von SideBarDialog muss natürlich stimmen. Das wars auch schon.


----------



## alex-t (15. Jul 2004)

ich habe das mal getestet. es wird auch ein dialog erstellt, nur diese sidebar sollte möglichst beim starten des applets erstellt und versteckt werden. und da weiss ich leider nicht weiter. ich denke aber, dass ich die deklaration an der stelle eintragen muss, wo auch die anderen komponenten deklariert werden. gleiches mit der initialisierung der sidebar (mit dem setVisible(false)). ist das richtig?
dann brauche ich doch beim mouse entered event nur das setvisible(true) aufzurufen.

und zum layout: gibt es denn überhaupt eine möglichkeit die sidebar modal aufzurufen, und das auch noch so, dass die anderen komponenten zwar teils verdeckt werden, aber die sidebar sich IM applet befindet? momentan kann ich diese aus dem applet rausziehen.


----------



## L-ectron-X (15. Jul 2004)

Zum ersten Teil Deiner Frage: Ja, das kannst Du so machen. Lege im Konstruktor des Applets eine Instanz vom Dialog an, die Du dann im Bedarfsfall einfach nur noch sichtbar machst. 

Zum zweiten Teil: Hm stimmt, ein Dialog ist "beweglich", man kann ihn also verschieben.
Das wird schwierig, ich habe erst mal keine "gute" Lösung.


----------



## alex-t (15. Jul 2004)

na, es würde eigentlich schon reichen, wenn es innerhalb des applets bleiben würde. 
würde dann bei jedem mouse entered des sidebar buttons die position neu setzen.
geht das denn irgendwie unkompliziert?


----------

