JavaFX Script and other musing Clarkeman's Weblog

When I am not busy with my day job or writing books on JavaFX, JavaFX - Developing Rich Internet Applications, I spend my spare time helping out on the open source JFXtras project, http://code.google.com/p/jfxtras/ . One part I have contributed is the borders package. The idea started off trying to duplicate some of the borders found in Swing. However, finding it relatively easy to implement the Border classes in JavaFX, the types of Borders started to grow.

The following screen snapshot shows the current set of  borders:

To create a border just import the Border package from the JFXtras project and then include it in your scenegraph. For example, to implement the PipeBorder from the ensemble above, the code looks like:

import org.jfxtras.scene.border.PipeBorder;
import javafx.scene.image.ImageView; 
import javafx.scene.image.Image;

def image = Image {
    url: "{__DIR__}images/Mona_Lisa.jpg"
    width: 100
    height: 150
    preserveRatio: true
};

var pipeBorder  = PipeBorder {
    content: ImageView { image: image }
}; 

All the borders are created as JavaFX Controls and have corresponding Skins that allow you to modify their appearance either programatically or via CSS Style sheets. For the PipeBorder example, it is possible to have the pipe raised or lowered. A lowered pipe has its raised variable set to false and reverses the coloring of the border. This ends up looking like:

You can also control the coloring of the border through CSS Style like statements. In the above Ensemble, the FrameBorder used such a statement to get the coral colored border:

VBox {
   spacing: 5
   nodeHPos: HPos.CENTER
   content: [
      FrameBorder {
          style: "background-fill: coral;"
          content: ImageView { image: image }
      },
      Label { text: "FrameBorder" }
   ]
}

If we change this to another color, say aquamarine, we get the following:

One of the more interesting borders is the ShapeBorder.

This uses any JavaFX Shape object as a clip over the underlying content. In this case, the Mona Lisa image. This example uses the JFXtras Star2 Shape class.

import org.jfxtras.scene.border.ShapeBorder;
import org.jfxtras.scene.shape.Star2;

VBox {
    spacing: 5
    nodeHPos: HPos.CENTER
    content: [
        ShapeBorder {
            var anode: Node;
            shape: Star2 {
                centerX: bind anode.layoutBounds.width/2
                centerY: bind anode.layoutBounds.height/2
                outerRadius: bind anode.layoutBounds.width/2
                innerRadius: bind anode.layoutBounds.width/6
                count: 5
            }
            content: anode = ImageView { image: image }
            },
        Label { text: "ShapeBorder" }
   ]
}

As you can guess, there are way too many options to explain in a short blog, but I hope I have peaked your interest to check out the JFXtras project.

You can get the source code for the above examples from here and, of course, the Mona Lisa from here.

Next week is JavaONE and my schedule is already full to the max. See y'all there.