FXML¶

Az FXML a JavaFX keretrendszer része, amely a Java nyelv grafikus felhasználói felületeinek (GUI) fejlesztéséhez használható. Az FXML egy XML-alapú nyelv, amely lehetővé teszi a felhasználói felület szerkezetének és elrendezésének meghatározását egy elkülönített, deklaratív módon. Ez segít elkülöníteni a felület megjelenítését a program logikájától, ami tisztább és karbantarthatóbb kódot eredményez.

Elemek és Komponensek: Az FXML-ben definiálható elemek magukban foglalják a különféle vezérlőket, mint például gombokat, szövegmezőket, címkéket, táblázatokat és egyéb UI komponenseket.
Elrendezések: Az FXML támogatja a különféle elrendezési stratégiákat, mint például a VBox (függőleges elrendezés), HBox (vízszintes elrendezés), GridPane (rács elrendezés) és továbbiak.
Stílusok és CSS: Az FXML-ben definiált elemek stílusát CSS segítségével lehet meghatározni, ami még nagyobb rugalmasságot biztosít a felület kinézetében.
Eseménykezelés: Az FXML lehetővé teszi eseménykezelők hozzárendelését a felületi elemekhez, ami a felhasználói interakciókat kezeli.
Adatkötés (Data Binding): Az FXML támogatja az adatkötést, ami lehetővé teszi az adatok automatikus szinkronizálását a felületi elemek és az alkalmazás adatmodellje között.

Az FXML használata segít a kód rendezettebb és karbantarthatóbb struktúrájában, mivel a felületi elemek definiálása különválik a Java kód logikai részétől. Ez különösen nagy projektjekeben és csapatmunkában jelent előnyt.

Példa

A bevezetés anyagrészben tárgyalt UI kinézete a következőképpen definiálható FXML-ben:

HelloApplication

hello-view.fxml
<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.geometry.Insets?>
<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<?import javafx.scene.control.Button?>
<VBox alignment="CENTER" spacing="20.0" xmlns:fx="http://javafx.com/fxml"
    fx:controller="com.example.demo1.HelloController">

    <Label fx:id="welcomeText"/>
    <Button text="Hello!" onAction="#onHelloButtonClick"/>
</VBox>

Label¶

A Label egy szöveges információt megjelenítő felhasználói felületi elem.

<Label text="Üdvözlet!" />

Properties¶

fx:id: Az elem egyedi azonosítója. A controller osztályban ezen keresztül érhető el az elem.
text: A megjelenítendő szöveg.
font: A szöveg betűtípusa.
textAlignment: A szöveg igazítása.
wrapText: Szövegtörés beállítása.

Button¶

A Button egy olyan felhasználói felületi elem, amelyet általában akkor használnak, amikor a felhasználó valamilyen műveletet szeretne végrehajtani.

<Button text="Hello!" onAction="#onHelloButtonClick"/>

Properties¶

fx:id: Az elem egyedi azonosítója. A controller osztályban ezen keresztül érhető el az elem.
text: A megjelenítendő szöveg.
onAction: Az eseménykezelő metódus neve.

TextField¶

A TextField egy egy soros szövegbeviteli mező, amelyet általában rövid, egysoros adatok, mint például felhasználónév vagy jelszó beírására használnak.

Megjegyzés

C# programozási nyelvben a TextBox néven ismert.

<TextField fx:id="myTextField" promptText="Írjon be valamit"/>

Properties¶

text: A TextField-ben megjelenő szöveg. Programozottan beállítható és lekérdezhető.
promptText: A felhasználónak mutatott szürke szöveg, amikor a TextField üres. Segít a felhasználónak megérteni, milyen típusú adatot kell beírnia.
editable: Meghatározza, hogy a felhasználó szerkesztheti-e a szöveget. Ha false, a szöveg csak olvasható.
prefWidth, minWidth, maxWidth: A TextField szélességének preferált, minimális és maximális méretei.
prefHeight, minHeight, maxHeight: A TextField magasságának preferált, minimális és maximális méretei.
maxLength: A beírható maximális karakterek számát korlátozza.
alignment: A szöveg igazítását szabályozza a TextField-ben (balra, középre, jobbra).
font: A megjelenített szöveg betűtípusát állítja be.
disabled: Ha true, a TextField nem használható (inaktív).
opacity: A TextField átlátszóságát szabályozza.
style: Inline CSS stílusokat lehet megadni a TextField kinézetének testreszabására.
onAction: Egy eseménykezelő, amely akkor hajtódik végre, amikor a felhasználó megnyomja az Enter billentyűt a TextField-ben.
focusedProperty: Jelzi, hogy a TextField éppen fókuszban van-e.
textProperty: Egy StringProperty, amely lehetővé teszi a szöveg követését és változásának figyelését.

ListView¶

A ListView egy olyan felhasználói felületi elem, amely egy listát jelenít meg. A ListView a listaelemeket egy ObservableList-ben tárolja, amelyet a ListView-hoz lehet kötni.

Megjegyzés

C# programozási nyelvben a ListBox néven ismert.

<ListView fx:id="myListView" />

Properties¶

items: A ListView által megjelenített elemek listája. Ez egy ObservableList típusú, amely lehetővé teszi a dinamikus frissítést.
selectionModel: Kezeli a ListView elemeinek kiválasztását. A SelectionModel segítségével beállítható, hogy egyszerre egy vagy több elem legyen kiválasztható.
placeholder: Egy olyan node (csomópont), amely akkor jelenik meg, amikor a ListView-nak nincsenek megjeleníthető elemei.
editable: Meghatározza, hogy a ListView szerkeszthető-e. Ha true, az egyes elemek szerkeszthetők lehetnek.
orientation: Meghatározza, hogy a lista elemek vízszintesen vagy függőlegesen jelenjenek meg. Lehet HORIZONTAL vagy VERTICAL.
cellFactory: Egy olyan factory, amely lehetővé teszi a lista egyedi celláinak testreszabását. Segítségével meghatározható, hogy hogyan jelenjenek meg az adott elemek a listában.
fixedCellSize: Beállítható egy fix cellaméret. Ha ez nem nulla, minden cella ebben a méretben jelenik meg, ami javíthatja a teljesítményt nagy listák esetén.
focusModel: Kezeli a fókusz állapotát a ListView-ben. Segítségével megadható, melyik elem legyen fókuszban.
prefSize, minWidth, minHeight, maxWidth, maxHeight: Ezek a tulajdonságok a ListView méretének beállítását teszik lehetővé, meghatározva a preferált, - minimális és maxListBoximális szélességet és magasságot.
onEditCommit, onEditCancel, onEditStart: Eseménykezelők, amelyek a szerkesztési eseményekre (commit, cancel, start) reagálnak.

TableView¶

A TableView egy táblázatot megjelenítő felhasználói felületi elem. A TableView oszlopokból és sorokból áll, amelyeket celláknak nevezünk. A TableView a táblázat adatait egy ObservableList-ben tárolja, amelyet a TableView oszlopaihoz lehet kötni.

Megjegyzés

C# programozási nyelvben a DataGridView néven ismert.

<TableView fx:id="myTableView">
    <columns>
        <TableColumn text="Név" prefWidth="100">
            <cellValueFactory>
                <PropertyValueFactory property="name"/>
            </cellValueFactory>
        </TableColumn>
        <TableColumn text="Életkor" prefWidth="100">
            <cellValueFactory>
                <PropertyValueFactory property="age"/>
            </cellValueFactory>
        </TableColumn>
    </columns>
</TableView>

Properties¶

fx:id: Az elem egyedi azonosítója. A controller osztályban ezen keresztül érhető el az elem.
columns: A táblázat oszlopait tartalmazó lista.
items: A táblázat sorait tartalmazó lista.
editable: Meghatározza, hogy a felhasználó szerkesztheti-e a táblázatot. Ha false, a táblázat csak olvasható.
prefWidth, minWidth, maxWidth: A táblázat szélességének preferált, minimális és maximális méretei.
prefHeight, minHeight, maxHeight: A táblázat magasságának preferált, minimális és maximális méretei.
selectionModel: A kijelölt sorokat tartalmazó lista.
style: Inline CSS stílusokat lehet megadni a táblázat kinézetének testreszabására.