Sådan tilføjes knapper og tekst til dit JavaFX Project - dummies

Som en start java programmerer vil du gerne tilføje ting til dit JavaFX projekt. Når du opretter et højt drevet GUI-program, starter du ved at oprette et vindue med knapper og andre widgets. Så tilføjer du metoder til at reagere på tastetryk, klik på klik og andre sådanne ting.

Her bruger du en XML-fil til at beskrive en knap og et tekstfelt:

1Open dit JavaFX-projekt.

Se i Eclipse's Package Explorer til det nye projekt.

2Udvid det nye projektets filial i Eclipse's Package Explorer.

Kig efter programafdelingen, som er inde i src-filialen.

3 Højreklik (eller på en Mac, kontrol-klik) applikationsfilen. I den sammenhængsmenu, der vises, skal du vælge Filer → Ny → Andet.

Dialogboksen Vælg en guiden vises.

4 Udvid JavaFX-afdelingen i dialogboksen Vælg en guiden. I JavaFX-afdelingen skal du dobbeltklikke på elementet Ny FXML-dokument.

Der vises en FXML-fil dialogboks.

5 Skriv et navn til din nye fil i dialogboksens Navn-felt, og klik derefter på Udfør.

Navngiv filen Root .

Du skriver navnet Root, men e (fx) clipse opretter en fil, hvis fulde navn er Root. fxml.

Denne nye rod. fxml-fil beskriver layoutet af knapperne, tekstfelterne og andre ting i dit nye JavaFX-program.

6 Højreklik (eller på en Mac, kontrol-klik) den nye Root. fxml filial i Eclipse's Package Explorer. I den sammenhængsmenu, der vises, skal du vælge Åbn med SceneBuilder.

Programvinduet til Scene Builder vises.

Vinduet Scene Builder indeholder flere områder:

I midten af ​​Scene Builder-vinduet findes Indholdspanel , hvor du ser et eksempel på din nye app. (I øjeblikket er der intet i din app for at se, så indholdspanelet er et stort, tomt rum.)

Den øverste venstre del af vinduet indeholder et Bibliotekspanel , der huser en Containersektion, en kontrol sektion og flere andre sektioner.

I GUI-verdenen kaldes ting som knapper, tekstfelter, etiketter og afkrydsningsfelter kontroller . Bibliotekspanelets Kontrolpanel udgør en palette. For at oprette et GUI-vindue trækker du kontroller fra paletten og slipper dem på indholdspanelet.

Den nederste venstre del af vinduet indeholder et Dokumentpanel , der indeholder et hierarkiafsnit og en Controller-sektion. Afsnittet hierarki indeholder et AnchorPane-element.

Afsnittet hierarki indeholder et træ, der viser, hvilke elementer i dit vindue der er inden for hvilke andre elementer.Kontrolafsnittet hjælper dig med at linke det vindue, du designer med programmets Java-kode.

Den højre del af vinduet indeholder en Inspektionspanel , som indeholder en Egenskaber sektion, en Layout sektion og en Kode sektion.

I afsnittet Egenskaber beskriver du funktionerne i elementerne i dit vindue. I kodeafsnittet hedder du de Java-metoder, der er knyttet til elementer i dit vindue.

Din kilometertal kan variere! Disse instruktioner arbejder med en forhåndsvisning af Scene Builder 2. 0. Hvis du har en anden version af Scene Builder, kan dine trin være lidt anderledes.

7Vælg AnchorPane-elementet i hierarkiet.

Der vises en markør midt i Scene Builder's Indholdspanel.

8Drag markøren i indholdspanelet for at forstørre ankerpanelet.

Ankerpanelet vil forstørres.

9Find TextField-indgangen i afsnittet Kontrol i Bibliotekspanelet

Træk derefter en TextField-kontrol i AnchorPage i indholdspanelet.

10Find knappen Knappen i afsnittet Kontrol i bibliotekspanelet.

Træk en knapkontrol i AnchorPage i indholdspanelet.

11I hovedmenuen skal du vælge Filer → Gem.

Gør det så gemmer din nye FXML-fil.

12Luk Scene Builder-programmet.

Når du vender tilbage til Eclipse-arbejdsbordet, kan du se den nye kode i din rod. fxml-fil.

Dobbeltklik på roten. fxml filial i pakken explorer for at se filens kode. Hvis du ikke ser ordene TextField og Button i koden, skal du klikke på musen inde i editorens vindue. (Når du klikker på musen, opdateres editoren for at afspejle ændringer foretaget af Scene Builder.) Hvis koden i editoren ikke synes at være indrykket ordentligt, skal du klikke på musen på et tomt område i editoren og trykke på Ctrl-Shift-F.

Når du vil formatere koden i Eclipse's editor (gør koden lettere at læse og lettere at forstå), tryk Ctrl-Shift-F.

13Edit projektets Main. java fil.

Kommentér BorderPane root statement og tilføj en parentes root statement, som vist i fed skrift type i Listning 20-3.

Redigeringen i liste 20-3 forbinder programmet med din nyligt udviklede Root. fxml layout.

14Run projektet.

Når du gør det, ser du et løb af dit projekt ved hjælp af Root. fxml-fil.