JavaFX x CSS v. 2

Hej

Dzisiaj pokażę w jaki sposób dodać bardzo proste style i polepszyć nieco wygląd naszej aplikacji 🙂

Aby udało nam się poprawnie dodać nasz wygląd do aplikacji potrzebujemy naszych selectorów. Będą one wyglądały podobnie jak w normalnym css. Selectory poniżej odnoszą się do wszystkich elementów w danej scenie.

  • .button
  • .check-box
  • .scroll-bar

Dodatkowo, w przypadku gdy nadamy poszczególnym elementom id możemy odnieść się do nich w pliku css poprzez dodanie ‘#’

  • #mybutton
  • #button1
  • #tab1

Nasz css wspiera również pseudo klasy tj. pozwala na dodawanie różnych stylów w zależności od stanu elementu. Przykładowe pseudo klasy można zobaczyć poniżej.

  • .radio-button:focused
  • .radio-button:hover
  • .scroll-bar:vertical

Skoro potrafimy już nadać odpowiedniej scenie lub całej aplikacji dany styl i wybrać elementy, które chcemy edytować zatem można dodać kod w css. Oczywiście nie będę tutaj zamieszczał wszystkich możliwych modyfikacji jednak większość z nich można znaleźć pod tym linkiem Czymś o czym trzeba jednak pamiętać będzie dodanie ‘-fx-‘ ponieważ nie jest tutaj możliwe wpisanie czystego css. Przykładowo poniżej wrzucam jak wygląda część mojego kodu dla menu, a konkretnie dla jego przycisków w momencie gdy nie są wciśnięte

<pre>#checkandroid, #checkswift, #checkc, #checkcplus, #checkcsharp, #checkcss, #checkjava, #checkjs, #checknet, #checkphp, #checkpython, #checkqa, #checkruby, #checkscala, #checksecurity, #add {

    -fx-background-color:
            #083156,
            #657c87,
            #46626f,
            #123,
            linear-gradient(#234,#345,#234),
            linear-gradient(from 30% -10% to 70% 110%, rgba(100,155,155,0), rgba(100,155,155,.1) 50%, rgba(0,0,0,0) 50%);
    -fx-background-radius: 6,5,5,4,4,6;
    -fx-background-insets: 0, 1,2 1 1 1,2,2, 0;
    -fx-font-family: 'Francois One';
    -fx-font-size: 10px;
    -fx-padding: 4px 10px;
    -fx-text-fill: #def;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( three-pass-box , rgba(0,155,255,.3) , 7 , 0.4 , 0 , 0 );

}</pre>

oraz w momencie wciśnięcia.

<br data-mce-bogus="1">
<pre>#checkandroid:selected, #checkswift:selected {

    -fx-background-color:
            #083156,
            #657c87,
            #46626f,
            #123,
            linear-gradient(#234,#345,#234),
            linear-gradient(from 30% -10% to 70% 110%, rgba(100,155,155,0), rgba(100,155,155,.1) 50%, rgba(0,0,0,0) 50%);
    -fx-background-radius: 6,5,5,4,4,6;
    -fx-background-insets: 0, 1,2 1 1 1,2,2, 0;
    -fx-font-family: 'Francois One';
    -fx-font-size: 10px;
    -fx-padding: 5px 11px;
    -fx-border-image-width: 4px;
    -fx-border-color: white;
    -fx-border-style: solid;
    -fx-border-radius: 6,5,5,4,4,6;
    -fx-text-fill: #def;
    -fx-font-weight: bold;
    -fx-effect: dropshadow( three-pass-box , rgba(0,155,255,.3) , 7 , 0.4 , 0 , 0 );
}

</pre>
<pre>

Przepraszam za chaos panujący w moich wpisach, jednak czasu nie przybywa, sesja się zbliża wielkimi krokami, a praca sama się nie napisze. Niemniej jednak dzięki za przeczytanie i do następnego razu! 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s