Sneak Peek: AeroFX

Last year we released AquaFX as a JavaFX 8 theme that emulates a native Look for JavaFX applications on Mac OS. Applications that use AquaFX may look like this:
A complete documentation of AquaFX can be found on its project page and at our blog.

Today I want to show a sneak peek on a new project called AeroFX. AeroFX is a theme for JavaFX that will emulate the native look of the Windows interface. AeroFX will use the same architecture as AquaFX so that developers can easily switch between the skins or support both on different operation systems. The skin of AeroFX will look perfect on Windows 7. At the moment AeroFX is in a very early stage and contains only skins for some basic controls. Because AeroFX is developed as a bachelor thesis the source code can’t be opened at the moment. But once the work is finished AeroFX will be provided under the same open source license as AquaFX. Here is the first screenshot of AeroFX:

aeroFX sneak peek

AquaFX dressed in Elements

As you know, Apples Aqua-UI is held completely in blue. But what about UI-Controls, that need the users’ special attention? Or what about Apps, that should fit into OS X with their look, but still need a corporate touch? During JavaOne we have introduced an approach to this matter.

With AquaFX Elements, we will provide a variation to usual AquaFX in three additional (more or less useful ūüėČ ) colors.

Elements enables the controls to be styled in red, green and a white variation of Aqua, representing the four classical elements water, fire, earth and air. Any colored highlight of the AquaFX Skin is changed by Elements in the chosen color-variation, so that e.g. a ProgressBar becomes pretty eye-catchy


and the focus-highlighting adapts to the element of choice.


Those variations are achieved by a simple extension of the AquaFX default stylesheet. The main styling remained in the aquafx.css and in addition to that, the coloring of all components are overridden by the element CSS files. So the elements are just an extension to the main stylesheet and do not cause structural changes. With this approach it is pretty easy to produce further color-variations.



Since AquaFX Elements is sitll in progress, it is not released yet. The information about availability will be posted here on GuiGarage.



I want to share my ideas and experiences about CSS in JavaFX beyond the past talk on JavaOne 2013. So, if you have seen something, you’d want me to write about, feel free to mail, twitter or comment :-)

AquaFX: lessons learned (Part I)

During the work on AquaFX there were some obstacles that needed to be overcome. With some research, the CSS Reference Guide and the help of google, most answers definitely can be found, so please don’t be angry with me when those tips might be obvious for you.¬†In this article I want to summarize information, so that they might help people who just face the same questions, as I had. And don’t hesitate to contact me/ comment when you know a better way for some things or think they might be wrong :-)

So, let’s get started:

class selection & CSS

Using CSS is pretty familiar to most developers. For me, it is a long time ago, that I styled HTML pages with CSS, so I had to learn some things over. Fortunately, JavaFX uses CSS in a simple yet powerful way.


class selection

If you style controls, you have to explicitly select a desired section, to achieve your goal. This is the case, e.g. when you style a ComboBox or a CheckBox. The mark of a CheckBox can be selected by using

.check-box > .box > .mark { ... }

which navigates the selection through the substructure of this control to the class .mark. The concrete structures can be seen in CSS Reference Guide and by using ScenicView.

So what does the “>” mean?

It means, the class named after it, is a direct child of the class before. If ¬†there is a class .xy in the structure¬†between those classes, the style won’t be applied. Siblings do not affect this definition.

In contrast, a definition like

.classA .subclassB { ... }

can be used.
The difference is, that it does not matter how many classes are between those two. This causes JavaFX to invest more computing time for  parsing the scenegraph, because the whole tree has to be checked for this possible constellation.
Though I use this in my AquaToolBar e.g.
This gives me the possibility to explicitly style Buttons in ToolBar in a different style than usual, although maybe wrapped in 1..n Panes, like HBoxes/ VBoxes.

Another selector is


which means nothing else, than they apply to the same thing. Since it is possible to add multiple style classes to a component, you can use this selection, to find a specific class in combination with another class. This allows you to set a differentiated styling of e.g. .button.alert and .text-field.alert.


adding style classes to controls

So, how to add a class to control? The simplest way is


and for this control, styles defined in { ... }

will be applied.


the difference between :armed and :pressed

Another (maybe obvious) information is the difference between the pseudo-class :armed and :pressed.

:pressed applies, when you press the mouse button on the control and stays applied, as long as the mouse remains being pressed, no matter whether you stay in the component with your cursor.

:armed does the same, but is not applied any more when the cursor leaves the component. If mouse is still pressed and you enter component, it is applied again.


using relative units for dynamic sizing

When using Mac OS X, you will find dialogs, where controls have a smaller size than usual. This is a point, which is adopted to AquaFX. With relative units, it is pretty easy to style size-independend.

AquaFX uses a font size of 13px. The two size variants use 11px and 9px.
All style definitions, which have to be dynamic, are defined in em. In my case especially -fx-padding.

This makes my controls to shrink/grow, when the font size changes:




AquaFX is based on Caspian.css, which means I took the CSS and reworked it completely. This assures, that no component state is overseen. When working on so much components and details, the moment comes, when you loose attention for a moment and assign wrong values to properties.
So, in my code there showed up the following line without being recognized:

-fx-text-fill : -fx-text-fill;

As soon as the component, it belonged to, was used in a dialog my VM crashed and a nice greeting from Mac OS X welcomed me:


Never, ever do this bad assignment…¬†So, if something like this happens, CHECK YOUR CSS! ūüėČ



SVGs and icons

I prefered using SVG paths for all tiny icons and symbols, so I’d love to share my way of working on those things. Like everything written here, this is no rule, just a description to show how some details are realized.


create SVG-paths

To create and edit the SVG paths, I am using the open source SVG graphics editor Inkscape. Graphics can be created and the path can then be copied by selecting the graphic and choosing edit > XML-Editor:


In this pop up the path for CSS is shown and can be copied:




ready to use in CSS by setting

 -fx-shape: "<your path>";


the indeterminate ProgressIndicator

One control, which require SVG paths is the indeterminate ProgressIndicator.


Caspian has a different number of ‘rotating’ graphics. But, no problem for JavaFX!

-fx-indeterminate-segment-count: 12.0;

This solves the problem.. What you have to do then, is defining every single path with:

.progress-indicator:indeterminate .segment0 { -fx-shape:"...";}
.progress-indicator:indeterminate .segment1 { -fx-shape:"...";}
.progress-indicator:indeterminate .segment11 { -fx-shape:"...";}

and  a little color

.progress-indicator:indeterminate .segment { -fx-background-color: ...;}

and you are done.



In the next part I write more about some specific controls, like Buttons/ PillButtons, Lists vs. Tables, ToolBars, etc. So visit us again :-)


While Claudine is working on all the needed Skins for AquaFX I will use the time to show you some of the internal API stuff of AquaFX that Claudine has developed. Once the project is released you can easily style your complete application by just calling;

This will set the CSS Styles for all controls that are supported by AquaFX for you. Once this is done your application should look like a native one.

While working a lot with Aqua and reading all the Apple style guides, etc. we noticed that simply setting one style for every control type is not enough to provide a great Aqua Look and Feel for JavaFX. Many native applications use the default controls like Buttons in different variations. For example you can have smaller controls or buttons with a more rounded border than the default one. Here is good overview about the different size variations of components:


This Image is taken from the Apple documentation of the native Swing Look&Feel for Mac OS.

When using the Aqua L&F in Swing you can change the behavior of a component by adding a String as a clientProperty to the component:

component.putClientProperty("JComponent.sizeVariant", "mini");

I think with AquaFX Claudine found a better way to provide this different styles by simply providing Enums for all different designs. So you can change the size of the component by simply using this enum:

public enum ControlSizeVariant implements StyleDefinition {




@Override public String getStyleName() {

Now you can skin a button as a small control with just a method-call:

AquaFx.resizeControl(myButton, ControlSizeVariant.SMALL);

For doing so you only need the AquaFX class that is a static facade for all features AquaFX will provide. So a normal developer will only need to now this class and its’ internal methods to skin and configure an application with AquaFX.

But the rezise as shown above is not the only skin variation you can define. With AquaFX you can easily mix different variations, too. The Facade offers a method for that:, ButtonType.ROUND_RECT, ControlSizeVariant.SMALL);

Cause all Enums implement the StyleDefinition interface you can commit as many as you want for a control. AquaFX will try to create the best look for you. Here is a example of some controls with a custom styling:


At the moment some combinations of¬†StyleDefinition don’t make sense and I gave Claudine the hint to think about a fluent approach for skinning this variations. So maybe this is not the final API. But I think it’s at a good point to share this ideas and features with you. Hope you like it.

The native ones are not sleeping

As time goes by, there are lots of freshly skinned controls, which are waiting to be shown. So here comes a little “update post”.


New Components






Toggles & PillToggles

Sliders and TabPanes
tabpane & sliders










Since MacOS has some special Controls that are not in JavaFX out-of-the-box, I started to add some of them, which will be available when using AquaFX.

Here are some of them:


You can see some a HelpButton, a different rounded Variant for Buttons, a ShareButton and a GroupBox.
There are many more of them on my queue.


So with those Buttons, you can start to make neat dialogs without any pain. This can result in:






The SearchField is still missing, but since it is used so often in Mac OS in definitely will get this done, too. Just didn’t want to keep back some results from you.

My next blogpost will be about some useful HOW-TOs, I had to find out to go on, e.g. “How do I make Toolbars working together with the top of the dialog?” “How to make MenuBar showing on top in MacOS Menu?”. So keep on visiting us.

Use native Aqua icons in JavaFX

While planning AquaFX we found a way how to access Mac OS specific icons without using any closed APIs or Mac OS related classes. We wrapped this in a simple util class. While using this on a Mac you will receive images by the underlying OS. On any other OS the function will return “null”. We currently discuss if this should be part of AquaFX because this will be a part that is (under the hood) OS specific. All control skins of AquaFX are cross-platform. So you can skin your JavaFX application on Windows like a native Mac OS application (if you want ūüėÄ ). Because we currently don’t know if this sources will ever be part of AquaFX I simple will post them here:
This enum contains all fetch able images that we found:

public enum NsImageIcon {
            "NSBluetoothTemplate"), I_CHAT_THEATER_TEMPLATE(
            "NSIChatTheaterTemplate"), SLIDESHOW_TEMPLATE("NSSlideshowTemplate"), ACTION_TEMPLATE(
            "NSActionTemplate"), SMART_BADGE_TEMPLATE("NSSmartBadgeTemplate"), PATH_TEMPLATE(
            "NSInvalidDataFreestandingTemplate"), LOCK_LOCKED_TEMPLATE(
            "NSLockLockedTemplate"), LOCK_UNLOCKED_TEMPLATE(
            "NSLockUnlockedTemplate"), GO_RIGHT_TEMPLATE("NSGoRightTemplate"), GO_LEFT_TEMPLATE(
            "NSGoLeftTemplate"), RIGHT_FACING_TRIANGLE_TEMPLATE(
            "NSRightFacingTriangleTemplate"), LEFT_FACING_TRIANGLE_TEMPLATE(
            "NSLeftFacingTriangleTemplate"), ADD_TEMPLATE("NSAddTemplate"), REMOVE_TEMPLATE(
            "NSRemoveTemplate"), REVEAL_FREESTANDING_TEMPLATE(
            "NSRevealFreestandingTemplate"), FOLLOW_LINK_FREESTANDING_TEMPLATE(
            "NSFollowLinkFreestandingTemplate"), ENTER_FULL_SCREEN_TEMPLATE(
            "NSEnterFullScreenTemplate"), EXIT_FULL_SCREEN_TEMPLATE(
            "NSExitFullScreenTemplate"), STOP_PROGRESS_TEMPLATE(
            "NSStopProgressTemplate"), STOP_PRPGRESS_FREESTANDING_TEMPLATE(
            "NSStopProgressFreestandingTemplate"), REFRESH_TEMPLATE(
            "NSRefreshTemplate"), REFRESH_FREESTANDING_TEMPLATE(
            "NSRefreshFreestandingTemplate"), FOLDER("NSFolder"), TRASH_EMPTY(
            "NSTrashEmpty"), TRASH_FULL("NSTrashFull"), HOME_TEMPLATE(
            "NSHomeTemplate"), BOOKMARKS_TEMPLATE("NSBookmarksTemplate"), CAUTION(
            "NSCaution"), STATUS_AVAILABLE("NSStatusAvailable"), STATUS_PARTIALLY_AVAILABLE(
            "NSStatusPartiallyAvailable"), STATUS_UNAVAILABLE(
            "NSStatusUnavailable"), STATUS_NONE("NSStatusNone"), APPLICATION_ICON(
            "NSApplicationIcon"), MENU_ON_STATE_TEMPLATE(
            "NSMenuOnStateTemplate"), MENU_MIXED_STATE_TEMPLATE(
            "NSMenuMixedStateTemplate"), USER_GUEST("NSUserGuest"), MOBILE_ME(
            "NSMobileMe"), MULTIPLE_DOCUMENTS("NSMultipleDocuments"), USER(
            "NSUser"), USER_GROUP("NSUserGroup"), EVERYONE("NSEveryone"), BONJOUR(
            "NSBonjour"), DOT_MAC("NSDotMac"), COMPUTER("NSComputer"), FOLDER_BURNABLE(
            "NSFolderBurnable"), FOLDER_SMART("NSFolderSmart"), NETWORK(
            "NSNetwork"), USER_ACCOUNTS("NSUserAccounts"), PREFERENCES_GENERAL(
            "NSPreferencesGeneral"), ADVANCED("NSAdvanced"), INFO("NSInfo"), FONT_PANEL(
            "NSFontPanel"), COLOR_PANEL("NSColorPanel"), ICON_VIEW_TEMPLATE(
            "NSIconViewTemplate"), LIST_VIEW_TEMPLATE("NSListViewTemplate"), COLUMN_VIEW_TEMPLATE(
            "NSColumnViewTemplate"), FLOW_VIEW_TEMPLATE("NSFlowViewTemplate");

    private String name;

    private NsImageIcon(String name) { = name;

    public String getName() {
        return name;

And here is the loader class:

import java.awt.Graphics;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;

import javafx.embed.swing.SwingFXUtils;
import javafx.scene.image.Image;

public class NsImageIconLoader {

    public static Image load(NsImageIcon icon) {
        System.setProperty("java.awt.headless", "false");
        java.awt.Image awtImage = Toolkit.getDefaultToolkit().getImage(
                "NSImage://" + icon.getName());
        BufferedImage bufferedImage = null;
        if (awtImage instanceof BufferedImage) {
            bufferedImage = (BufferedImage) awtImage;
        } else {
            bufferedImage = new BufferedImage(awtImage.getWidth(null),
                    awtImage.getHeight(null), BufferedImage.TYPE_INT_ARGB);
            Graphics g = bufferedImage.createGraphics();
            g.drawImage(awtImage, 0, 0, null);
        return SwingFXUtils.toFXImage(bufferedImage, null);

Here is a overview of all icons that we have found:
native icons

If anyone knows more icon names that can be loaded by Mac OS please let us know ūüėČ

Update for the native ones

Since my project was accepted, I was keen on starting with the first components. Now I want to show you what is the result. 

Remember the shutdown dialog?

As Jonathan suggested, the whole project is realized in JavaFX 8.

In the first step, the proof-of-concept dialog had to be migrated to be up-to-date again. Pretty soon, I could welcome my dialog in JavaFX8:


All components look like mountain lion again.

You want more?

What about those neat components:










Just for the moment, everything is crafted in a little dialog, where I have an overview over all results untill now.
The good news in this context is, that all of this stuff works on retina- and non-retina macs and looks the same:

The development and different struggles

There are some points, which had to be decided before I really could start and which are not absolutely clear.
Currently all CSS-styling is overriding caspian.css, as it is the default style. But we all look forward to modena replacing caspian for JavaFX 8. This may cause some trouble in future concerning new controls, which do not have Mac OS-Styling yet. For this reason, it is not that clear, how to apply mac_os.css to an application. Hendrik describes the different variations using the StyleManager in his latest blogpost. Thoughtless usage of style management also causes trouble with PopUp-components.
The main approach in styling the components is, using CSS as much as possible. Everything, that is not possible in CSS e.g. multiple effects on one component or animations is implemented in Aqua*Skins, which simply override the skin of the affected control. In this way, effects and animations are no problem.
One open struggle is the behavior of the hover in default-buttons. In MacOS default-buttons are blinking from a light blue to a darker blue. If the mouse hovers into the button there is a tiny little flashing until the next repaint, which shows the button in his non-default state. Just some milliseconds, but very distracting.. ūüėČ Until now, there is no way of disabling the hover-effect in my skin class, which is worth a Jira-Issue.

What comes next?

Right now I am working on finishing the PopUp of ChoiceBox an ScrollBar-animation. More components will to come up soon.

This is for the native ones

As you can read in an earlier post, JavaFX provides the ability to style controls by CSS or code. Most of the techniques you can use to style components are described in this great JavaOne talk by Gerrit Grunwald. The following graphic shows the basic relationship between all parts that are involved in component styling:


As you can see in the graphic, the CSS file is the main entry point for the Control styling. The CSS defines UI related properties like colors or fonts. In addition to this the CSS specifies the Skin class that will be used to style the Control.

Official JavaFX styles

JavaFX currently offers one system independent style that is named “Caspian”. The style is completely defined in one CSS file:

Oracle and the JavaFX team did a really great job by designing this cross platform skin. I my opinion it looks great on every OS. Here is a short extract of the Style:


You can see the complete blueprint here (you need to be logged in to OpenJFX Jira). The Caspian style offers definitions for all default JavaFX controls.
The following chart describes the style handling for the JavaFX Button with the official caspian CSS file:


While JavaFX 2.x only offers the caspian style, JavaFX 8 will provide a second one called “Modena”.


Here you can see a preview of Buttons with Modena style. Compared to Caspian it’s brighter and the controls look a little flatter. Modena is still in development and can change all the time until JavaFX 8 will be released.

While the current preview of Modena really looks great (see full preview at OpenJFX Jira¬†here) it’s still a cross platform Look & Feel. You can compare the “Caspian” and “Modena” styles to the “Metal” and “Nimbus” Look & Feel of Swing. Both are designed for cross platform use, too. But Swing benefit are the system L&Fs. So if you have to develop a application with a native look, you currently have to use Swing because it offers native Look & Feels for Windows, Mac OS and Linux. But since JavaFX 2.x is out we do not want to use Swing anymore :)

Native JavaFX styles

As described above JavaFX officially only offers cross platform skins. According to a mail by Richard Bair¬†from the JavaFX mailing list oracle won’t provide native skins for JavaFX in the near future.
Thanks to the great JavaFX community the first approaches for native styles appeared the last month. Jasper Potts created some basic CSS styles for buttons that copy the native style of iOS, Mac OS Lion and Windows 7.

native buttons

The second starting point is JMetro, a project maintained by Pedro Duque Vieira, that provides Windows 8 Metro skins for JavaFX controls with the support of a dark and a light theme.


contextmenu-metroJMetro is part of JFXtras and can be found at github. While writing this post the following controls are supported by JMetro:

  • Button
  • ToggleButton
  • CheckBox
  • RadioButton
  • ContextMenu
  • MenuItem
  • ScrollBar
  • ScrollPane
  • ComboBox

The next supported Control will be the JFXtras Calender Control. You can find a cool preview here.

The last approach I’ve found is from software4java. On this blog you can find some pictures and videos of iOS, Mac OS and Windows 7 related styles for JavaFX. But there is no activity since April 2012 and the sources were never provided.

JavaFX goes Aqua

The current community based projects demonstrate that it’s possible to create native looking skins for JavaFX controls. According to this conditions a student I’m currently responsible for is planning the bachelor of science thesis based on JavaFX. Currently it is planned to develop a native JavaFX skin for Mac OS. The project should combine skins for JavaFX controls like it’s done with JMetro and provide new Mac specific controls on the other hand like macwidgets does for Java Swing.
We have done a first prove of concept and are happy to share the result with you. Do you find out which shutdown window is the native one and which one is developed in JavaFX?

Our first code is hacked in many ways and needs a lot of refactoring for sure. But it was a lot of fun and we learned a lot about CSS and JavaFX skins. Even if it’s hacked at some points we do not use any bitmaps. Everything is done with CSS, JavaFX effects and the SVG support. We created some basic concepts how to create this aqua related skins for JavaFX. The following chart shows the class relations and inheritance for a Button:

nativ3-3As you can see we still use the basic Button class from JavaFX. So every Button can be skinned to a Aqua Button. The Button will be styled by a special Skin class (“AquaButtonSkin”) because the usage of CSS isn’t enough for some points. As you can see in the video the default button of a dialog has a blinking animation in MacOS. This effect can’t be generated by CSS. But because there is only one global CSS file for the Aqua Skin you can style a complete application (once every control type is supported) ¬†by only adding one line to your code. As described at the beginning of this article all Skin classes are defined inside the CSS and will be managed by JavaFX automatically. Here is the code to set the style to your application:


One last hurdle

We currently defining the proposal of the thesis and plan to submit it next week. The topic of the project is not really typical for an exam and it’s not supported by a company. But we like the topic and open source development a lot more than a project that is related to our company so we chose this one. It could be difficult to convince the university of this project. Maybe some feedback from the JavaFX community can help. So if you like this idea (or even if you have some critique) please give us a short review or feedback. We hope that we can confirm the benefit of this project this way.