CodeGuide

Ebben a cikkben a JavaFX és a CSS kapcsolatáról lesz szó. Megmutatjuk, hogyan kell létrehozni, majd hozzárendelni egy alkalmazáshoz egy stíluslapot, valamint azt, hogy egy ilyen css fájlban előforduló elemek hogyan kapcsolódnak a színtérgráf-beli objektumokhoz.

JavaFX CSS

A .css fájl stílus definíciókat tartalmaz, amelyek meghatározzák a grafikus felhasználói felület (GUI) kinézetét. A JavaFX CSS nem egyezik meg a W3C által ajánlott CSS szabvánnyal, ugyanis az egyes tulajdonságoknak speciális nevük van, valamint JavaFX-specifikus tulajdonságokat is tartalmaz. A jó hír, hogy a 2.1-es CSS szabvány alapján készült, így lesz hasonlóság is. A GUI szerkezetét továbbra is fx-ben definiáljuk, azonban a formázásokat már a stíluslapra bízzuk. Ennek a módszernek az előnye, hogy a formázási utasítások elkülönülnek az alkalmazáslogikától, így egy jobban érthetőbb és átláthatóbb kódot kapunk.

A stíluslap létrehozása

Egy alkalmazáshoz több stíluslap is megadható. Ezek kiterjesztése a .css és általában a főosztály csomagjába szokták tenni, de ez nem kötelező. Netbeansben a létrehozáshoz tegyük a következőket:

1. Nyissunk meg, vagy hozzunk létre egy új JavaFX alkalmazást.
2. A Projects ablakban a Source Packages mappán belül jobb klikk azon a csomagon, amelyikbe szeretnénk tenni a fájlt. Ez után New, azon belül Other.
3. A New File dialógus ablakon válasszuk az Other kategóriát, és a Cascading Style Sheet fájltípust. Ez után menjünk a Next-re.
4. Adjunk egy nevet a stíluslapnak: [név], majd nyomjuk meg a Finish-t.

Ezzel létrejött egy [név].css stíluslap a kiválasztott csomagon (pl: a “hu.css” csomag) belül. Ezt még regisztrálnunk kell a JavaFX alkalmazásban, hogy használhassuk. Ezt az alábbi kód oldja meg:

1
2
    Scene scene = new Scene(grid, 700, 400);

    scene.getStylesheets().add("hu/css/my_style.css");

Vegyük észre, hogy az útvonallal együtt kell megadni a .css fájl helyét! A másik fontos dolog, hogy még a primaryStage.show() metódus hívása előtt kell ezt megtennünk.

Szelektorok

JavaFX-ben a színtérgráf elemeinek stílusát különböző CSS szelektorokkal lehet megadni.

Class attribútum alapján #1

A javafx.scene.control és a javafx.scene.chart csomagokban található vezérlőelemekhez és diagramokhoz tartoznak stílusleíró osztályok, amelyek meghatározzák egy-egy elem alapértelmezett stílusát. Ezeket felüldefiniálhatjuk a saját stíluslapunkban. A JavaFX kódban nem is kell külön hozzárendelni ezeket a stílusleíró osztályokat a megfelelő objektumokhoz, elég ha a CSS fájlban a megfelelő névvel hivatkozunk rájuk. Általános alakja: “.class { }”. Például egy Label címkéhez, így tudunk megadni egy stílusleíró osztályt:

1
2
3
4
.label {

    -fx-fill: #fede00;  

    -fx-font-size: 14px;

}

Ebben az esetben a programban szereplő összes Label címke megkapja ezt a stílust!

Class attribútum alapján #2

Létrehozhatunk saját stílusleíró osztályt is, melyet hozzárendelhetjük bármely színtérgráf-beli objektumhoz. Egy ilyen osztályt akár több objektumhoz is hozzárendelhetünk. Például:

1
2
3
4
.my-class {

    -fx-padding: 8px;

    -fx-font-size: 14px;

}

Ebben az esetben a JavaFX kódban hozzá kell rendelni ezt az osztályt valamilyen érvényes felületelem(ek)hez. Például:

1
2
3
4
5
    TextField txfUserName = new TextField();

    txfUserName.getStyleClass().add("my-class");



    PasswordField pwfPassword = new PasswordField();

    pwfPassword.getStyleClass().add("my-class");

Egyedi id alapján

A színtérgráf minden csúcsához megadhatunk egy egyedi id-t a setId() metódussal. Ekkor CSS-ben ezzel az id-vel hivatkozhatunk az adott objektumra. Például:

1
2
    Text scenetitle = new Text("Bejelentkezési felület");

    scenetitle.setId("title");

Ekkor CSS-ben a “#id” alakú szelektorral hivatkozhatunk rá. Például:

1
2
3
4
5
#title {

    -fx-font-size: 20px;

    -fx-font-weight: bold;

    -fx-fill:  #fede00; 

}

Pseudo-osztályok

A legtöbb színtérgráf-beli objektumhoz tartoznak bizonyos pseudo-osztályok, melyekkel egy objektum különböző állapotainak stílusait tudjuk megadni. Ezt úgy tehetjük meg, hogy egy szelektor után, kettősponttal elválasztva hozzácsatoljuk a pseudo-osztályt. A hivatalos referenciában megnézhetjük, hogy milyen elemekhez, milyen pseudo-osztályokat adhatunk meg. Például:

1
2
3
.label:hover {

    -fx-text-fill: #5555aa;

}

Hierarchia

A JavaFX CSS-ben ugyanúgy megvan a lehetőségünk, hogy a különböző szelektorokat egymásba ágyazzuk. Az alábbi példában a SearchBox egy általunk létrehozott felületelem (melynek az id-je szintén SearchBox), melyhez tartozik egy TextField.

1
2
3
4
5
#SearchBox .text-field:focused {

    -fx-background-color: -fx-focus-color, white;

    -fx-background-insets: -1.4, 1;

    -fx-background-radius: 14.4;

}

Ha több elemhez ugyanazt a stílus módosítást szeretnénk megadni, akkor vesszővel elválasztva soroljuk fel őket. Például:

1
2
3
#highlightsButton:hover, #newButton:hover {

    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.6) , 10, 0.5 , 0 , 0 );

}

Mit nem támogat a JavaFX CSS?

• A pozicionáló tulajdonságokat (pl: float, position, overflow, width). Ezeket JavaFX-ben tudjuk csak meghatározni. Azonban a padding és margin tulajdonságok működnek néhány színtérgráf-beli objektumon.
• A további megszorítások megtalálhatók a hivatalos referenciában.

Hasznos linkek

• JavaFX CSS referencia
• JavaFX alapok