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:

shutdown_fx8

All components look like mountain lion again.

You want more?

What about those neat components:

TextField:
textfield

PasswordField:
pw

TextArea:
textarea

RadioButton:
radio#

CheckBox:
check

ChoiceBox:
choice

ToggleButton:
toggle

ScrollBar:
scrollbar1

scrollbar2

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:
demodialog

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.

5 Responses to Update for the native ones

  1. Fantastic! Please don’t make the same mistake as Apple and add pixel-padding around all components in a futile effort to try to make the whitespace right in old apps. In MigLayout 5.0 I now have to de-pad them all and then add the right space or for instance TextFields and TextAreas doesn’t align.

    Again, great job!

  2. With regard to having a test application to look at all the different states of your user interface, I highly recommend you download and run the modena test application from the OpenJFX repo (it’s in rt/apps/experiments/Modena). This app has all the user interface controls in all their visual states, so it makes it very easy to see how things look. You could adapt this application to also show your Mac OS styling.

    Keep up the good work.
    — Jonathan

  3. You did a great job! It looks very good. But what about sizes? It seams that TextField, ToggleButton and RadioButton are too big…

    Could I download and test your mac skin?

    Best regards,
    Tobi

    • Hi Tobi,
      all screenshots are done on a retina mac. So that could be the point why you think that they are too big. We will post the next days a comparison between retina and normal views.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>