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:

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:

.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:

.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:

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:

Text scenetitle = new Text("Bejelentkezési felület");
scenetitle.setId("title");

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

#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:

.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.

#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:

#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.

Ajánló

A sorozat további részei

Cimkék: ,

Az Eötvös Loránd Tudományegyetem Informatikai Karának hallgatója vagyok. Jelenleg az Információs Rendszerek tanszék Tudáskezelő laborjában dolgozom.