Razvoj uporabniškega vmesnika z orodjem Scene Builder v JavaFX

Razvoj grafičnih uporabniških vmesnikov (GUI) je včasih lahko izziv, zlasti če morate vse ročno uresničiti v kodi. Orodje, ki vam pri tem pomaga, je JavaFX Scene Builder. To orodje vam omogoča, da z minimalnim naporom ustvarite privlačne vmesnike. V tem priročniku vam bom pokazal korake, kako učinkovito uporabljati Scene Builder in oblikovati enostaven GUI.

Najpomembnejša spoznanja

• Scene Builder omogoča enostavno sestavljanje GUI-jev s pomočjo povleci-in-spusti.
• Pomembno je, da ustvarite.fxml datoteko, preden uporabite Scene Builder.
• Razporeditev elementov je mogoče upravljati neposredno v vmesniku, kar znatno pospeši razvoj.

Ustvarite.fxml datoteko

Za začetek dela s Scene Builderjem morate najprej ustvariti.fxml datoteko. To je zelo enostavno. Kliknite z desno tipko na mapo aplikacije in izberite „Novo“ in nato „Drugo…“. Pod „JavaFX“ izberite „Nova FXML dokument“. Zdaj lahko datoteko poimenujete, na primer „Kurs.fxml“, in kliknete „Dokončaj“. Po tem se bo datoteka pojavila v vašem projektnem imeniku.

Razumevanje XML kode

Čeprav se osredotočamo predvsem na postopek vizualizacije, je.fxml datoteka predstavljena v sintaksi, podobni XML-u. Verjetno ne boste morali veliko kode napisati sami, saj vam Scene Builder omogoča, da vse oblikujete s pomočjo povleci-in-spusti. Če pa potrebujete posebne prilagoditve, lahko XML kodo kadarkoli neposredno prilagodite.

Uporaba Scene Builderja

Za zagon Scene Builderja kliknite z desno tipko na.fxml datoteko in izberite „Odpri s Scene Builderjem“. Po nekaj sekundah se orodje odpre in prikaže uporabniški vmesnik. Na levi strani boste videli različne kontejnere in kontrolne elemente, kot so gumbi, besedilna polja in meniji, ki jih lahko uporabite v svoji aplikaciji.

Prilagoditev delovnega prostora

Prvi korak v Scene Builderju naj bo prilagoditev delovnega prostora, da boste imeli dovolj prostora za svoje elemente. Opazili boste, da je privzeto izbran AnchorPane. Ta kontejner lahko urejate tako, da prilagodite njegovo velikost in ustvarite več prostora za vaš GUI.

Dodajte elemente

Zdaj se začne ustvarjalni del: dodajanje GUI elementov. Na primer, lahko dodate gumb. Preprosto povlecite gumb iz seznama na delovno polje. Morda boste opazili, da se pojavijo rdeče črte, ki vam pomagajo pri usklajevanju pozicije gumba.

Urejanje lastnosti

Vsak element ima specifične lastnosti, ki jih lahko prilagodite. Na primer, če kliknete na gumb, lahko na desni strani pod „Lastnosti“ spremenite besedilo gumba. Namesto „Gumb“ vnesite „Moj gumb“. Upoštevajte, da lahko prilagodite tudi postavitev gumba, da ga postavite na želeno mesto.

Centriranje elementov

Če želite, da gumb vedno ostane centriran, boste morali opraviti nekaj prilagoditev postavitve. Gumb lahko na primer "prikovali" na določen položaj. Ko spremenite velikost okna, bo gumb vedno ostal na želenem mestu.

Preizkušanje sprememb

Za preizkus vašega GUI lahko shranite.fxml datoteko in jo vključite v vašo main.java datoteko. Namesto, da bi določili velikost, uporabite FXML nalagalnik za nalaganje.fxml datoteke. To lahko storite s pomočjo ukaza getClass().getResource().

Zdaj lahko zaženete program. Okno se mora pojaviti s polji za besedilo in gumbom, ki ste jih ustvarili. Videli boste, kako enostavno in učinkovito je lahko ustvariti GUI s Scene Builderjem.

Zaključek – Navodila za uporabo Scene Builderja v JavaFX

S Scene Builderjem lahko enostavno in intuitivno ustvarite GUI-je. Pristop povleci-in-spusti vam prihrani veliko časa in vidite lahko v realnem času, kako izgleda vaš vmesnik. Razumevanje.fxml datoteke in lastnosti vaših elementov je ključnega pomena za izkoristite to orodje.