JavaFX GUI-ontwikkeling: Stage, Scene en Node

In deze handleiding laat ik je stap voor stap zien hoe je met JavaFX je eerste venster maakt. Dit praktische deel van de cursus helpt je een basisbegrip te krijgen van de essentiële componenten van GUI-ontwikkeling. We concentreren ons hierbij op de drie centrale concepten: Stage, Scene en Node. Laten we meteen beginnen!

Belangrijkste inzichten

• De Stage is het hoofdvenster van je applicatie.
• De Scene bevat de visuele elementen (Nodes) die je in je venster wilt weergeven.
• Nodes zijn de afzonderlijke elementen zoals knoppen, tekstvelden enzovoort, die je op de Scene plaatst.

Stap 1: Een nieuw JavaFX-project maken

Eerst moet je een nieuw project in je ontwikkelomgeving aanmaken. Ga hiervoor naar "Nieuw project" en kies "JavaFX-project". Klik op "Volgende" en geef je project een naam, zoals "stageSceneNode". Zorg ervoor dat je de Java-versie (bijvoorbeeld Java SE 1.8) laat staan voordat je op "Klaar" klikt.

Stap 2: Projectstructuur begrijpen

Nu moet je de structuur van het nieuw aangemaakte project bekijken. Hier vind je een source-map waarin zich je pakket met de standaardnaam "application" bevindt. Binnen dit pakket ligt de Main-klasse, die het instappunt van je applicatie vertegenwoordigt.

Stap 3: Main-klasse aanpassen

Open het Main-Java-bestand en raak gewend aan de basisimporters die je het werken met JavaFX mogelijk maken. Deze importen omvatten onder andere application.Application, Stage, Scene en BorderPane.

Stap 4: Het venster en de scène instellen

Nu kun je je programma starten om een leeg venster te zien dat 400 x 400 pixels groot is. Om de Scene te maken, heb je nu een indeling nodig. In dit voorbeeld gebruiken we BorderPane, een indeling die je in staat stelt om elementen in verschillende gebieden (boven, onder, links, rechts, midden) te verdelen.

Stap 5: Een knop toevoegen

In deze stap voeg je een knop toe aan je Scene. Maak een nieuw Button-object aan en stel de tekst in op "Klik op mij". Om ervoor te zorgen dat de knop correct werkt, moet je ervoor zorgen dat je de benodigde importen uitvoert. Vaak kun je dit snel doen door Ctrl + Shift + O te drukken.

Stap 6: De knop aan de Scene toevoegen

Nu je knop is aangemaakt, moet je deze aan de BorderPane-indeling toevoegen. Geef aan waar de knop moet worden weergegeven, bijvoorbeeld boven of onder. Gebruik hiervoor de methoden van BorderPane, zoals setTop() of setBottom(), om de knop op de juiste plek te plaatsen.

Stap 7: Programma starten

Start je programma opnieuw om je knop zichtbaar te maken. Je zou nu een knop moeten zien die op de door jou ingestelde positie staat. Als je de positie verandert van "SetTop" naar "SetLeft", zie je hoe de knop zich overeenkomstig in het venster verplaatst.

Stap 8: Verdere aanpassingen en versiebeheer

Nadat je je knop hebt geplaatst, kun je verdere aanpassingen aan de GUI maken. Let op als je op verschillende resultaten stuit – de methode die je invoert zal je helpen om de structuur van de code en het gedrag van de elementen te leren.

Samenvatting – Je eerste stap in de JavaFX GUI-ontwikkeling: Stage, Scene en Node

In deze handleiding heb je geleerd hoe je een JavaFX-project aanmaakt, de structuur van de applicatie begrijpt en begint met het ontwerpen van je eerste venster. Je hebt belangrijke basisprincipes over het omgaan met Stage, Scene en Nodes eigen gemaakt.