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

progress_elements

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

buttons_elements

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.

elements

 

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

 

WANT SOME MORE ABOUT CSS?

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

4 Responses to AquaFX dressed in Elements

  1. Since the word “Aqua” is latin, shpuldn’t the other styles also be based on latin ;P ?

    aqua -> water
    flamma -> fire
    terra -> earth
    aer -> air

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>