streamalism.org

1. Bemutatkozás

A JavaFX egy gazdag kliens alkalmazások Java-hoz történő felépítésére szolgáló könyvtár. API-t biztosít a GUI alkalmazások tervezéséhez amelyek szinte minden Java-támogatott eszközön futnak.

Ebben az oktatóanyagban néhány kulcsfontosságú képességre és funkcionalitásra fogunk összpontosítani és áttekinteni.

2. JavaFX API

A Java 8, 9 és 10 rendszerekben nincs szükség további beállításokra a JavaFX könyvtár használatának megkezdéséhez. A projekt a JDK 11-től kezdődően eltávolításra kerül a JDK-ból.

2.1. Építészet

A JavaFX hardveres gyorsítású grafikus folyamatot használ a megjelenítéshez, az úgynevezett Prizma. Mi több, a grafika használatának teljes felgyorsítása érdekében a szoftveres vagy a hardveres megjelenítési mechanizmust használja ki, belső használatával DirectX és OpenGL.

A JavaFX platformfüggő Üveg ablakos eszköztárréteg a natív operációs rendszerhez való csatlakozáshoz. Az operációs rendszer eseménysorát használja a szálhasználat ütemezéséhez. Emellett aszinkron módon kezeli az ablakokat, eseményeket, időzítőket.

A Média és Web motorok lehetővé teszik a médialejátszást és a HTML / CSS támogatást.

Nézzük meg, hogyan néz ki a JavaFX alkalmazás fő szerkezete:

Itt két fő konténert észlelünk:

• Színpad az alkalmazás fő tárolója és belépési pontja. A főablakot képviseli, és a Rajt() módszer.
• Színhely egy tároló a felhasználói felület elemeinek, például a képnézetek, a gombok, a rácsok, a szövegdobozok tárolására.

A Színhely lecserélhető vagy átállítható másra Színhely. Ez a hierarchikus objektumok grafikonját képviseli, amelyet a néven ismerünk Színhely Grafikon. A hierarchia minden elemét csomópontnak nevezzük. Egyetlen csomópontnak megvan az azonosítója, stílusa, effektjei, eseménykezelői, állapota.

Ezenkívül a Színhely tartalmazza az elrendezési tárolókat, képeket, adathordozókat is.

2.2. Szálak

Rendszer szinten, a JVM külön szálakat hoz létre az alkalmazás futtatásához és megjelenítéséhez:

• Prizma renderelő szál - felelős a Jelenetdiagram külön.
• Alkalmazás szál - bármely JavaFX alkalmazás fő szála. Az összes élő csomópont és alkatrész ehhez a szálhoz kapcsolódik.

2.3. Életciklus

A javafx.application.Application osztály a következő életciklus-módszerekkel rendelkezik:

• benne() - az alkalmazáspéldány létrehozása után hívódik meg. Ezen a ponton a JavaFX API még nem áll készen, ezért itt nem hozhatunk létre grafikus összetevőket.
• rajt (szakasz szakasz) - az összes grafikus komponens itt jön létre. Is, a grafikus tevékenységek fő szála itt kezdődik.
• álljon meg() - az alkalmazás leállítása előtt hívják meg; például amikor a felhasználó bezárja a főablakot. Hasznos felülírni ezt a módszert bizonyos tisztítások előtt az alkalmazás megszüntetése előtt.

A statikus dob() módszer elindítja a JavaFX alkalmazást.

2.4. FXML

A JavaFX egy speciális FXML jelölőnyelvet használ a nézet felületeinek létrehozásához.

Ez egy XML alapú struktúrát biztosít a nézet és az üzleti logika elválasztására. Az XML itt jobban megfelel, mivel teljesen természetes módon képes reprezentálni a Jelenetdiagram hierarchia.

Végül a .fxml fájlt használjuk FXMLLoader osztály, amely a jelenet hierarchiájának objektumdiagramját eredményezi.

3. Az első lépések

Hogy praktikus legyen, és készítsünk egy kis alkalmazást, amely lehetővé teszi az emberek listáján való keresést.

Először tegyünk hozzá egy Személy modellosztály - a domainünk képviseletére:

public class Személy {private SimpleIntegerProperty id; privát SimpleStringProperty név; privát SimpleBooleanProperty isEmployed; // getters, setters}

Figyelje meg, hogyan kell becsomagolni a int, húr és logikai értékeket használjuk SimpleIntegerProperty, SimpleStringProperty, SimpleBooleanProperty osztályok a javafx.bab.tulajdonság csomag.

Ezután hozzuk létre a Fő osztály, amely kiterjeszti a Alkalmazás absztrakt osztály:

public class Main kiterjeszti az Alkalmazás {@Orride public void start (Stage primaryStage) dobja a {FXMLLoader loader = new FXMLLoader (Main.class.getResource ("/ SearchController.fxml")) kivételt; AnchorPane oldal = (AnchorPane) loader.load (); Jelenetjelenet = új Jelenet (oldal); primaryStage.setTitle ("A cím ide megy"); primaryStage.setScene (jelenet); primaryStage.show (); } public static void main (String [] args) {launch (args); }}

Fő osztályunk felülírja a Rajt() módszer, amely a program belépési pontja.

Aztán a FXMLLoader betölti az objektumgráf hierarchiáját SearchController.fxml ba,-be AnchorPane.

Miután elindított egy új Színhely, az elsődlegesre állítottuk Színpad. Beállítottuk az ablakunk címét is és előadás() azt.

Ne feledje, hogy hasznos a fő() metódus a JAR fájl futtatásához a JavaFX Launcher.

3.1. FXML nézet

Merüljünk most mélyebben a SearchController XML fájl.

Kereső alkalmazásunkhoz hozzáadunk egy szövegmezőt a kulcsszó és a keresés gomb megadásához:

AnchorPane itt a gyökér tároló, és a gráf hierarchia első csomópontja. Az ablak átméretezése közben a gyermeket a rögzítési pontjára helyezi. A fx: vezérlő attribútumokat vezet a Java osztályhoz a jelöléssel.

Van néhány más beépített elrendezés:

• BorderPane - öt részre osztja az elrendezést: felső, jobb, alsó, bal, középső
• HBox - rendezze el a gyermek alkatrészeit egy vízszintes panelen
• VBox - a gyermekcsomópontok függőleges oszlopba vannak rendezve
• GridPane - hasznos egy sorokból és oszlopokból álló rács létrehozásához

Példánkban a vízszintes belsejében HBox panelen a Címke szöveget elhelyezni, TextField a bemenethez, és a Gomb. Val vel fx: id az elemeket megjelöljük, hogy később felhasználhassuk a Java kódban.

A VBox panelen jelenítjük meg a keresési eredményeket.

Ezután a Java mezőkhöz való leképezéshez - a @FXML kommentár:

public class SearchController {@FXML private TextField searchField; @FXML private Button searchButton; @FXML privát VBox dataContainer; @FXML privát TableView tableView; @FXML private void inicializálás () {// keresőpanel searchButton.setText ("Keresés"); searchButton.setOnAction (esemény -> loadData ()); searchButton.setStyle ("- fx-background-color: # 457ecd; -fx-text-fill: #ffffff;"); initTable (); }}

Miután feltöltötte a @FXML kommentált mezők, inicializálás () automatikusan hívásra kerül. Itt további műveleteket hajthatunk végre a felhasználói felület összetevőin keresztül - például regisztrálhatjuk az eseményhallgatókat, hozzáadhatunk stílust vagy megváltoztathatjuk a szöveg tulajdonságát.

Ban,-ben initTable () módszerrel létrehozzuk az eredményeket tartalmazó táblázatot 3 oszloppal, és hozzáadjuk a dataContainer VBox:

private void initTable () {tableView = új TableView (); TableColumn id = új TableColumn ("ID"); TableColumn name = új TableColumn ("NAME"); Alkalmazott TableColumn = új TableColumn ("EMPLOYED"); tableView.getColumns (). addAll (id, név, alkalmazott); dataContainer.getChildren (). add (tableView); }

Végül, az összes itt leírt logika a következő ablakot hozza létre:

4. Binding API

Most, hogy a vizuális szempontokat kezeljük, kezdjük el a kötelező adatok megtekintését.

Az összerendelési API néhány interfészt biztosít, amelyek értesítik az objektumokat, ha egy másik objektum értékváltozása történik.

A érték használatával a kötés () módszerrel vagy hallgatók hozzáadásával.

Az egyirányú kötés csak egy irányhoz biztosít kötést:

searchLabel.textProperty (). bind (searchField.textProperty ());

Itt a keresési mezőben bekövetkező bármilyen változás frissíti a címke szöveges értékét.

Összehasonlításképpen: a kétirányú kötés szinkronizálja két tulajdonság értékét mindkét irányban.

A mezők megkötésének alternatív módja a ChangeListeners:

searchField.textProperty (). addListener ((megfigyelhető, oldValue, newValue) -> {searchLabel.setText (newValue);});

A Megfigyelhető Az interfész lehetővé teszi az objektum változásainak megfigyelését.

Ennek példájaként a leggyakrabban használt megvalósítás a javafx.collections.ObservableList felület:

ObservableList masterData = FXCollections.observableArrayList (); ObservableList results = FXCollections.observableList (masterData);

Itt minden modellváltozás, például az elemek beillesztése, frissítése vagy eltávolítása, azonnal értesíti a kezelőfelület vezérlőit.

A törzsadatok lista tartalmazza a kezdeti listát Személy objektumok, és az eredménylista lesz az a lista, amelyet megjelenítünk a keresés során.

Frissítenünk kell a initTable () módszer a táblázat adatainak a kezdeti listához való kötésére, és az egyes oszlopok összekapcsolására a Személy osztály mezők:

private void initTable () {tableView = new TableView (FXCollections.observableList (masterData)); TableColumn id = új TableColumn ("ID"); id.setCellValueFactory (új PropertyValueFactory ("id")); TableColumn name = új TableColumn ("NAME"); név.setCellValueFactory (új PropertyValueFactory ("név")); Alkalmazott TableColumn = új TableColumn ("EMPLOYED"); alkalmazott.setCellValueFactory (új PropertyValueFactory ("isEmployed")); tableView.getColumns (). addAll (id, név, alkalmazott); dataContainer.getChildren (). add (tableView); }

5. Egyidejűség

A felhasználói felület összetevőivel való munka egy jelenetdiagramon nem szálkamentes, mivel csak az Alkalmazás szálból érhető el. A javafx.concurrent csomag itt található, hogy segítsen a többszálas használatban.

Nézzük meg, hogyan tudjuk végrehajtani az adatkeresést a háttérszálban:

privát void loadData () {String searchText = searchField.getText (); Feladat feladat = új Feladat() {@ A védett ObservableList hívás () felülbírálása () dobja a Kivételt {updateMessage ("Adatok betöltése"); adja vissza az FXCollections.observableArrayList (masterData .stream () .filter (érték -> value.getName (). toLowerCase (). tartalmazza (searchText)) .collect (Collectors.toList ())); }}; }

Itt létrehozunk egy egyszeri feladatot javafx.concurrent.Task objektumot és felülírja a hívás() módszer.

A hívás() metódus teljes egészében a háttérszálon fut, és az eredményt az Application szálba adja vissza. Ez azt jelenti, hogy a felhasználói felület összetevőinek bármilyen manipulációja ezzel a módszerrel futásidejű kivételt hoz.

Azonban, updateProgress (), updateMessage () hívható az Alkalmazáslánc-elemek frissítésére. Amikor a feladat állapota átmegy SIKER állapotba, a onSucceeded () az eseménykezelőt az Application szálból hívják meg:

task.setOnSucceeded (esemény -> {eredmények = task.getValue (); tableView.setItems (FXCollections.observableList (eredmények));}); 

Ugyanebben a visszahívásban frissítettük a tableView adatokat az új eredménylistához.

A Feladat van Futható, így az indításához csak egy új beindításához kell cérna a ... val feladat paraméter:

Szál th = új Szál (feladat); th.setDaemon (igaz); th.start ();

A setDaemon (true) jelző jelzi, hogy a szál a munka befejezése után megszűnik.

6. Eseménykezelés

Leírhatunk egy eseményt olyan műveletként, amely érdekes lehet az alkalmazás számára.

Például az olyan felhasználói műveleteket, mint az egérkattintások, a gombnyomások, az ablak átméretezése, kezeli vagy értesíti javafx.event.Event osztály vagy annak bármely alosztálya.

Három eseménytípust is megkülönböztetünk:

• InputEvent - az összes típusú billentyű és egér művelet, mint például KEY_PRESSED, KEY_TYPED, KEY_RELEASED vagy Egér_NYOMTATÓK, MOZGÓ_KINDÍTOTT
• ActionEvent - különféle akciókat képvisel, például a Gomb vagy befejező a KeyFrame
• WindowEvent – WINDOW_SHOWING, WINDOW_SHOWN

Demonstrálni, az alábbi kódrészlet befogja a Belép kulcs felett searchField:

searchField.setOnKeyPressed (event -> {if (event.getCode (). egyenlő (KeyCode.ENTER)) {loadData ();}});

7. Stílus

Megváltoztathatjuk a JavaFX alkalmazás felhasználói felületét, ha egyedi dizájnt alkalmazunk rá.

Alapértelmezés szerint a JavaFX használja modena.css CSS erőforrásként az egész alkalmazás számára. Ez része a jfxrt.jar.

Az alapértelmezett stílus felülbírálásához hozzáadhatunk egy stíluslapot a jelenethez:

scene.getStylesheets (). add ("/ search.css");

Használhatunk inline stílust is; például egy stílus tulajdonságának beállításához egy adott csomópontnál:

searchButton.setStyle ("- fx-background-color: slateblue; -fx-text-fill: white;");

8. Következtetés

Ez a rövid írás a JavaFX API alapjait ismerteti. Átnéztük a belső struktúrát, és bemutattuk az architektúra, az életciklus és az összetevők kulcsfontosságú képességeit.

Ennek eredményeként megtanultuk és képesek vagyunk létrehozni egy egyszerű GUI alkalmazást.

És mint mindig, az oktatóanyag teljes forráskódja elérhető a GitHubon.