JavaFX 2.0 CSS Styling Part 2

I got a lot of requests for part 2, hope it will be helpful as much as part 1.

In this part i will cover Background images and image borders Region CSS properties. All Java code from previous post remains same (ExtendedApplication.java and CSSTest.java) i will only change CSS code. Used images are in same directory/package as css file. In this part i will leave a lot of stuff to play with it.

Note: This are all mine tests it does not mean that all stuff said here is 100 percent correct because i could not find any examples/tutorials for properties explained here, it was helpful to play with these and sometimes hard to understand some of them but when you start playing it is not so hard.

So lets begin with some examples, here is example with 2 background images and some background colors, insets have negative values try to use positive and you will know why I have used negative. If you read carefully Region CSS properties you can see that you can add as many as you want urls for background images.  Also <bg-position> values are a little bit tricky, type  <size> can be used or other values like “left top”, “left”, “center”, etc can also be used, feel free to play with them.

Also play with <repeat-style> values and with <bg-size> values, <bg-size>  (width and height) or you can use auto, cover, contain.

.custom-node {-fx-background-color: skyblue, derive(skyblue, 25%);-fx-background-insets: -20, -10;-fx-background-image: url("bg2.jpg"), url("DukeWithHelmet.png");-fx-background-position: left top, center;-fx-background-repeat: no-repeat;-fx-background-size: cover, auto;}

This is result with just few lines of CSS.

Try to lower background insets to : -2, -1 to see result.

Another example with more then 1 image background

.custom-node {-fx-background-color: skyblue, derive(skyblue, 25%);-fx-background-insets: 0, 10;-fx-background-image: url("bg2.jpg"), url("mybg.jpg"), url("mybg.jpg"), url("bg2.jpg");-fx-background-position: 20 20, 160 20, 20 160, 160 160;-fx-background-repeat: no-repeat no-repeat;-fx-background-size: 120 120;}

The result is 4 images positioned in “rectangle” with 2 background colors.

With adding one more image a really nice results can be accomplished

.custom-node {-fx-background-color: skyblue, derive(skyblue, 25%);-fx-background-insets: 0, 10;-fx-background-image: url("bg2.jpg"), url("mybg.jpg"), url("mybg.jpg"), url("bg2.jpg"), url("DukeWithHelmet.png");-fx-background-position: 20 20, 160 20, 20 160, 160 160, center;-fx-background-repeat: no-repeat no-repeat;-fx-background-size: 120 120, 120 120, 120 120, 120 120, auto;}

Well in my opinion it is best to play a lot with css you will learn better, and now a little bit about image borders. ImageBorders have similar CSS properties like ImageBackground but sometimes they are a little bit tricky. So you sometimes will get weird and unexpected results well they were unexpected until i figured out how to use ImageBorders properly. Here are some of the unexpected results that i have experienced.

Here is little warning/tip : I noticed that border-image-slice values have to be “equal or greater then” their corresponding border-image-width values because in most cases i got results similar to those ugly borders shown in images. Third image shows result without specified border-image-slice values even after changing repeat result remains same. And sometimes if slice values are too big (lets say bigger then half of image) i also got similar results like in third image. For border-image-slice i recommend reading Region CSS documentation.

It is time to show some nice examples with image-borders.

.custom-node {    -fx-border-image-source: url("bg2.jpg"), url("mybg.jpg");    -fx-border-image-insets: 10, 40;    -fx-border-image-repeat: stretch, stretch;    -fx-border-image-width: 20, 20;    -fx-border-image-slice: 25, 30;}

And a bit more complex example :

.custom-node {    -fx-background-image: url("DukeWithHelmet.png");    -fx-background-position: center;    -fx-background-repeat: no-repeat;    -fx-background-size: auto;    -fx-border-image-source: url("bg2.jpg"), url("mybg.jpg");    -fx-border-image-insets: 10, 30;    -fx-border-image-repeat: stretch, stretch;    -fx-border-image-width: 50, 10;    -fx-border-image-slice: 50, 20;}

I have not explained -fx-shape property because if you know a little bit of SVG it won’t be hard to understand it. If you read/use CSS reference you will see that some of Region properties are “similar” to Shape properties like dash-array etc. So i hope Shape properties won’t be so hard to learn. Node CSS properties are practically well known and used in your applications if not in CSS then in some javaFX code.

Next part continues the CSS  styling but in other ways with more java code and not so much CSS code.

Feel free to leave come some comments, critics, or anything and if i forgot to cover something feel free to contact me by comment or mail.

Source : jojorabbitjavafxblog[dot]wordpress[dot]com