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.

Advertisements

12 responses to “JavaFX 2.0 CSS Styling Part 2

  1. Pingback: xhtml css templates – JavaFX 2.0 CSS Styling Part 2 | jojorabbitjavafxblog | XHTML CSS - Style sheet and html programming tutorial and guides

  2. Pingback: JavaFX links of the week, September 5 // JavaFX News, Demos and Insight // FX Experience

      • Yes, I thought about that, but there are two problems: first – rectangle as a shape can not be styled (-fx-arc-…) by CSS because it is not a part of scene, second – there is a small problem with “rectangle arc value” and “border-radius value”.

        I actually made a rounded background-image stage by using blending. I added StackPane as a root for a scene, then I added Region and other Pane (ex. BorderPane) to the stack. CSS styles as follows:

        .#some-pane {
        -fx-background-image: url(“imgs/background.jpg”);
        -fx-blend-mode: src-atop;
        -fx-border-color: black, aliceblue transparent transparent aliceblue;
        -fx-border-insets: 0, 1 0 0 1;
        -fx-border-radius: 10, 11;
        }

        #background-region {
        -fx-background-color: black;
        -fx-background-radius: 10;
        }

        That is it.

      • Yeah, blend mode is other way nice example i was thinking about it but.am more used to clips :), I think there should not be so big problem with clips a lot of controls are using clips.

      • I tried but I do not know how to do it using clip and CSS styled corner radius.

        It works if I do it that way:

        Rectangle clipShape = new Rectangle();
        clipShape.setArcWidth(20);
        clipShape.setArcHeight(20);

        BorderPane pane = new BorderPane();
        pane.setClip(clipShape);

        and it works perfect 🙂

        But I do not know how to set -fx-arc-width and -fx-arc-height by CSS. Even if I tried by:

        clipShape.setStyle(“-fx-arc-width: 20; -fx-arc-height: 20;”); it does’n work at all.

        Thanks
        MB

      • Yes I have. I wrote about this in earlier comment. Haven’t you read it, have you?


        Rectangle clipShape = new Rectangle();
        clipShape.setArcWidth(20);
        clipShape.setArcHeight(20);

        BorderPane pane = new BorderPane();
        pane.setClip(clipShape);

      • I have misunderstood you.
        I have tried -fx-arc-width and -fx-arc-height it works on rectangle but if rectangle is clip then it does not work maybe it is bug, or maybe clip nodes can’t use css.
        For example if rectangle is in child list of some StackPane -fx-arc-width and -fx-arc-height properties are applied but if node.setClip(rectangle) nodes are not applied.
        You can see clip docco here http://download.oracle.com/javafx/2.0/api/javafx/scene/Node.html#clipProperty i think because “..This clipping Node is not a child of this Node in the scene graph sense….” css is not applied to that node.
        IMO when style manager applies css to nodes it only goes through nodes that are “child of this Node in the scene graph sense” and not through clip nodes. Maybe that is main reason why you can’t define css properties for clip nodes :).
        You can bind something to clips width and height of clip so it changes accordingly or bind something that will calculate clips arc width and height.
        Hope it helps.

      • Thanks for your reply, my English language is not so good 😉 I have worked it out using blending. Maybe in the future I will try what you suggest in your last comment.

        Thanks (yes it helps)
        MB

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s