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:

nativ1-1

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: com.sun.javafx.scene.control.skin.caspian.caspian.css

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:

caspian

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:

nativ2-1

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

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.

pushbuttondark-1

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:

myScene.getStylesheets().add(AquaSkin.getStylesheet());

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.

14 Responses to This is for the native ones

  1. As a Java Technology Ambassador I’m, of course, biased, but I think that creating an Aqua skin for JavaFX is a very worthwhile activity. This would enable Java/JavaFX applications to have a native Mac OSX look, which is something that I would love to see and call attention to.

    On a side note, Hendrik, this is one of the most aesthetically pleasing blog posts I’ve ever seen, from the graphical diagrams to the classical background music in the video.

    Thanks,
    James Weaver

  2. The article is very well written, and demonstrates clearly the value of native skins on platforms. While I like the JavaFX L&F. I want to be able to write applications that match the user expectations on their platform of choice.

    The video demonstrates very clearly how close they are. The only tattletale is the lack of the three round buttons in the upper left title bar. I am sure that gap will be closed though. Most users I don’t think would even notice. That is a perfect example of meeting user expectations.

    Great job, and keep up the good work.

  3. Very nice. I would love to see you guys push this project forward! I should note though that it is definitely import you test (and build) against JavaFX 8.0, as so much has changed (for the better) since 2.2, and I don’t want you pulling your hair out over things we’ve fixed or changed.

  4. Hi Hendrik,

    you did a very good job! Keep up the great work. If you like I can publish my work from blog.software4java.com

    Best regards,
    Tobi

  5. Hey dear commenters,

    thank you very much for your feedback, which gives encouragement to the idea making a thesis of this project. I will propose it to my professor soon and hope for a go. I will be grateful for any comment or idea from the community and try to provide useful results as soon as possible.

  6. The question is which one is the native window. I am not familiar with OSX. If I had to make a guess I would think that the bottom dialog (without the window decoration buttons) is the original – due to the privileged nature of the shutdown dialog which shall not be maximized, minimized, or closed in that way.

    As to the point about styling an application with just one line of code, the example only shows how to do this for a scene. An application will have more than one scene. It would be nice to have a similar way to change L&F as in Swing: change the default stylesheet application wide, not per scene, with an option to use the native style depending on the platform the application currently runs on.

    • You are absolutely right with your guess and the reason for that. This is because I just chose a standard Stage (made the quiz a little to easy ;-) ). I would have to make it undecorated and style it without window decoration buttons.

      Concerning the application-wide stylesheet; I guess, you have to handle that in code, but I’m absolutely not sure about that. (Had no need for this yet…) Maybe someone made this experience and can explain it to us…? :-)

      Cheers,
      Claudine

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind markiert *

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>