If you’ve ever worked with JavaFX, you’ve realized by now that UI controls in JavaFX are highly customizable and make it easy to quickly design stunning UIs.
The challenge with JavaFX is that without a little help, you have to do everything in code, yourself. Obviously, designing a UI exclusively with code is a path I doubt many would like to take, especially when there is tooling that can do it for us. In this post, we’ll look at some tools that will make building a UI in JavaFX virtually effortless.
Scene Builder (by Gluon)
This is probably the most-used tool in developing applications with JavaFX. Scene Builder provides a drag-and-drop mechanism for quickly prototyping the application interface. Behind the scenes, Scene Builder generates the FXML code for the application, which otherwise would have been done manually with code. Scene Builder exposes the various properties of controls for customization. Drag a button onto the window, and you can specify the button color, size, method to be called when an action is performed, and further modify the button via JavaFX CSS. The CSS Analyzer in Scene Builder lists all the available CSS attributes of controls, making it possible to customize every aspect of UI controls. Scene Builder is a must-have if you’re developing with JavaFX. Many other tools are dependent on Scene Builder.
Gpick
Gpick is a small, powerful color-picker. With Gpick, you can pick color anywhere on the screen and get the color name, RGB, HSL, and HEX values generated automatically for you. Even more interesting, it allows you to generate a color palette of up to 100 colors from any image. Since JavaFX accepts both RGB and HEX values for colors, these values can be used in Scene Builder wherever a color value is permitted.
Gpick provides a layout preview section to visualize how colors will look when combined in different ways. This saves you the time and trouble of using a color for UI design, only to realize it doesn’t exactly look “right” when combined with another color. Struggling to pick the perfect color combination? Gpick will find you complementary, analogous, and clashing color combinations in one click.
You can check out my post on Gpick for more details.
CSS Gradient (CSS3 Factory)
Generating a gradient by code is not fun! Trust me! It is really difficult to visualize how exactly the gradient will look. Hence, many top designers rely heavily on gradient generators, either built into a larger program or as a standalone. JavaFX accepts only linear and radial gradient values. The format of the gradient values can be found here.
CSS3 Factory generates linear gradient values that can be used as color values in JavaFX. With a little modification to conform to the accepted format, radial gradients can also be generated.
Below is a sample linear gradient and its gradient values generated with CSS3 Factory.
/* using only Hex */ linear-gradient(to bottom, #91F230 7%, #984FFF 39%, #FF754F 100%) /* using only RGB */ linear-gradient(to bottom, rgb(145, 242, 48) 7%, rgb(152, 79, 255) 39%, rgb(255, 117, 79) 100%)
FontAwesomeFX Glyphs Browser
FontAwesomeFX Glyphsbrowser contains tons of icons for all your design needs: EmojieOne, Octicons, FontAwesome, Material Design Webfont, etc. These icons can be added to your JavaFX application. But first, the FontAwesomeFX JAR must be added to your project and Scene Builder. The glyphs can also be added as text in your application.
This eliminates the need to add images to controls, which only increase application size and make it hard to align elements. The Glyphs Browser displays the code to create each icon or text version of the icon in JavaFX. Below are some sample buttons created using icons listed in the Glyphs Browser.
I hope these tools become a part of your UI JavaFX arsenal. Enjoy!
