Hoe u knoppen en tekst toevoegt aan uw JavaFX-project - dummies

Als een beginnende Java-programmeur, wilt u dingen aan uw JavaFX-project toevoegen. Wanneer u een krachtig GUI-programma maakt, begint u met het maken van een venster met knoppen en andere widgets. Vervolgens voegt u methoden toe om te reageren op toetsaanslagen, knopklikken en dergelijke.

Hier gebruikt u een XML-bestand om een ​​knop en een tekstveld te beschrijven:

1Open uw JavaFX-project.

Kijk in Eclipse's Package Explorer voor het nieuwe project.

2Expandeer de branch van het nieuwe project in Eclipse's Package Explorer.

Zoek naar de applicatietak, die zich binnen de src-tak bevindt.

3Klik met de rechtermuisknop (of op een Mac met de Control-toets) op de toepassingstak. Kies Bestand → Nieuw → Ander in het contextmenu dat verschijnt.

Het dialoogvenster Wizard selecteren wordt weergegeven.

4Vouw in de structuur van het dialoogvenster van een wizard de JavaFX-vertakking uit. Dubbelklik in de JavaFX-tak op het item New FXML-document.

Er verschijnt een dialoogvenster FXML-bestand.

5 Typ in het veld Naam van het dialoogvenster een naam voor uw nieuwe bestand en klik vervolgens op Voltooien.

Geef het bestand een naam Root .

U typt de naam Root, maar e (fx) clipse maakt een bestand waarvan de volledige naam Root is. fxml.

Deze nieuwe root. fxml-bestand beschrijft de lay-out van de knoppen, tekstvelden en andere zaken in uw nieuwe JavaFX-toepassing.

6 Klik met de rechtermuisknop (of op een Mac, klik terwijl u de muisknop ingedrukt houdt) op de nieuwe hoofdmap. fxml branch in Eclipse's Package Explorer. Selecteer Openen met SceneBuilder in het contextmenu dat verschijnt.

Het toepassingsvenster van Scene Builder wordt weergegeven.

Het Scene Builder-venster bevat verschillende gebieden:

Het midden van het Scene Builder-venster bevat het Inhoudspaneel , waar u een voorbeeld van uw nieuwe app ziet. (Momenteel is er niets in uw app te zien, dus het inhoudspaneel is een grote lege ruimte.)

Het gedeelte linksboven van het venster bevat een Bibliotheekpaneel , waarin een sectie Containers is ondergebracht, een sectie Besturing en verschillende andere secties.

In de GUI-wereld worden zaken zoals knoppen, tekstvelden, labels en selectievakjes besturingselementen genoemd. Het gedeelte Besturingselementen van het deelvenster Bibliotheek vormt een palet. Als u een GUI-venster wilt maken, sleept u de besturingselementen uit het palet en zet u ze neer in het deelvenster Inhoud.

Het gedeelte linksonder van het venster bevat een documentpaneel , dat een sectie Hiërarchie en een gedeelte Controller bevat. De sectie Hiërarchie bevat een item AnchorPane.

De sectie Hiërarchie bevat een structuur waarin wordt weergegeven welke elementen van uw venster zich binnen die andere elementen bevinden.Met de sectie Controller kunt u het venster dat u ontwerpt koppelen aan de Java-code van de toepassing.

Het rechtergedeelte van het venster bevat een Inspecteurspaneel , dat een sectie Eigenschappen, een sectie Lay-out en een gedeelte Code bevat.

In het gedeelte Eigenschappen beschrijft u de kenmerken van de elementen in uw venster. In de sectie Code geeft u de Java-methoden op die aan elementen in uw venster zijn gekoppeld.

Uw kilometerstand kan variëren! Deze instructies werken aan een voorbeeldversie van Scene Builder 2. 0. Als u een andere versie van Scene Builder heeft, zijn uw stappen misschien iets anders.

7Selecteer het AnchorPane-item in de sectie Hiërarchie.

Er verschijnt een markering in het midden van het deelvenster Inhoud van de Scene Builder.

8Sleep de markering in het deelvenster Inhoud om het AnchorPane te vergroten.

Het AnchorPane vergroot.

9 Zoek het TextField-item in het gedeelte Besturingselementen van het deelvenster Bibliotheek

Sleep vervolgens een TextField-besturingselement naar de AnchorPage in het deelvenster Inhoud.

10Zoek het item Button in het gedeelte Controls van het deelvenster Bibliotheek.

Sleep een Button-besturingselement naar de AnchorPage in het deelvenster Inhoud.

11Selecteer Bestand → Opslaan in het hoofdmenu.

Hiermee slaat u uw nieuwe FXML-bestand op.

12Sluit de Scene Builder-toepassing.

Wanneer u terugkeert naar de Eclipse-workbench, ziet u de nieuwe code in uw root. fxml-bestand.

Dubbelklik op de hoofdmap. fxml branch in de Package Explorer om de code van het bestand te zien. Als u de woorden Tekstveld en Knop in de code niet ziet, klikt u met de muis in het bewerkingsvenster. (Als u op uw muis klikt, wordt de editor bijgewerkt om wijzigingen weer te geven die zijn gemaakt door Scene Builder.) Als de code in de editor niet correct lijkt te zijn ingedrukt, klikt u met de muis op een leeg gebied in de editor en drukt u op Ctrl-Shift-F.

Telkens wanneer u de code wilt opmaken in de editor van Eclipse (zodat de code leesbaarder en gemakkelijker te begrijpen is), drukt u op Ctrl-Shift-F.

13 Bewerk de hoofdtekst van het project. java-bestand.

Geef commentaar op de BorderPane-hoofdinstructie en voeg een bovenliggende hoofdinstructie toe, zoals vetgedrukt weergegeven in listing 20-3.

De bewerkingen in listing 20-3 verbinden de applicatie met uw nieuw ontworpen root. fxml-indeling.

14Run het project.

Wanneer u dat doet, ziet u een run van uw project met behulp van de root. fxml-bestand.