niedziela, 10 marca 2013

JavaFX integracja z CSS

CSS czyli Kaskadowe arkusze stylów pozwalają nam określić sposób wyświetlania elementów(w tym przypadku) aplikacji. Oracle zapewnia całkiem przyjemne tutoriale - dla CSS w FX też się znalazł: Fancy Forms with JavaFX CSS.

My dokończymy dzisiaj program rozpoczęty w ostatnim poście. Jako że nie ma co przesadzać(bo co tam można upiększyć :D ) - zmienimy tylko tło oraz dodamy jakiś efekt przyciskom.
Pierwszą rzeczą jaką zrobić trzeba to stworzenie pliku CSS. Druga rzecz to "zapoznanie ze sobą" naszego pliku CSS oraz wcześniej stworzonego pliku FXML. W pliku FXML dodajemy: Teraz będziemy modyfikować plik CSS. Dodamy nowe tło(białe nie wygląda najlepiej). W tym celu dodamy właściwość dla background-image. .root - określa nam właściwość dla instancji sceny.
-fx-background-image - tło pobieramy z pliku(url("sample.jpg"))
-fx-background-color: - w tym przypadku wygenerowało by nam tło z podanego przez nas koloru(np: #2A5058)
Ja zwiększyłem sobie jeszcze rozmiar tekstu o kilka px: -fx-font-size: 13px;

Mamy już tło(inwencja twórcza wskazana) teraz czas na przyciski. -fx-text-fill:white; - wypełnienie tekstu.
-fx-font-family:"Arial Narrow"; - jego czcionka.
font-weight: - "waga czcionki".
-fx-background-color: linear-gradient(#61a2b1, #2A5058); - generujemy kolor tła.
-fx-effect: dropshadow( three-pass-box , rgba(0,0,0,0.6) , 5, 0.0 , 0 , 1 ); - JavaFX CSS Reference Guide

:hover - odpowiada za aktywną wersje pola(tu przycisku).

Właściwości takie jak .button czy .Text odpowiadają za "ogół". Jeżeli chcemy być bardziej szczegółowi - i chcemy odnieść się do jednego przycisku czy pola możemy odnieść się do stworzonego przez nas id pola np: fx:id="actiontarget" w takim przypadku odniesienie w CSS wyglądało by następująco:
Dzięki tym 14 linijką app. wygląda trochę bardziej znośnie :) moim zdaniem nie wyszło najgorzej.

Brak komentarzy:

Prześlij komentarz