JavaFX Layout Widget Examples by Sven

As I mentioned in a previous post about binding, the purpose of JavaFX layout widgets are to layout the UI of an application in a cross-platform environment.  The declarative coding style used in JavaFX makes this simple and powerful.  The Word Search Puzzle Builder example that I showed you earlier utilizes several JavaFX layout managers.  For example, it uses the BorderPanel layout widget to position the tool bar across the top of its Frame as shown in this screenshot:

Within the center panel of the BorderPanel it uses the Box layout widget to position the word grid and list boxes side by side, as shown below:

I'd like for you to visit a web page created by Sven Drieling that shows code examples of various layout widgets.  An easy way to run these examples is to cut and paste the code into JavaFXPad (see previous posts for how to run JavaFXPad locally or from the Internet.  For example, here is the output that I received when running Sven's BorderPanel.fx example:

By the way, the first example on Sven's page (AddButtons.fx) uses a BorderPanel, and then assigns a FlowPanel to the top of the BorderPanel.  When the "Add button" button is clicked, the following code inserts an element that contains a Button to the FlowPanel's content attribute, which is a sequence (also know as an array):

var newButton = Button{text: "Button {count++}"};
insert newButton as last into flow.content;

The effect is that each time you click Add button, a button is added to the screen, as shown below:

Enjoy, and as always, your feedback is welcome!  Please post a comment about what kinds of JavaFX-related topics you'd like to see in this blog.  Is the pace OK for you?  What other suggestions do you have?

Regards,
Jim Weaver

JavaFX Script: Dynamic Java Scripting for Rich Internet/Client-side Applications

Comments

[Fábio]

The big problem is write similar code in JavaFX 1.2.

[Jim Weaver]

That's my plan! Thanks codecraig!

Jim Weaver

[codecraig]

Keep up the great posts, I'm learning bits of FX each day!