• Home
  • Events
  • About
  • How to choose the right color

    February 1st, 2016

    When creating a new control or a complete application I often ask myself what colors I should use for visualization. When defining a control, the best solution is to provide properties for all colors so that a developer that uses the component can configure it to match the needed color scheme. But still when developing only a control you should provide a color scheme as a default configuration. In this case it’s important that the colors of the default configuration fit to each other. If you develop a complete application the selection of a specific color scheme is even more important. Sometimes you will get some defaults by your customer but in other projects it might be your part to define a nice selection of colors. If I need to do this I’m always happy about some help and inspiration. Today it’s quite easy to get this help for free since there are some good online resources that can be used to pick some colors or a complete scheme for your application or control. Today I want to introduce 2 of them.

    Material Design Color Palette

    For the Material Design style Google create a style guide with a lot of information how components, layouts, colors, and animation should look and behave. One part of this specification defines how colors should be used in the Material Design style and what colors should be used together. You can find the description here. In this documentation Google provides a color palette that should be used in Material Design. This color palette defines several basic colors ands adds several accents colors to each basic color. Here is an example:

    Material Colors

    If you now need to define a component or an application you can simply choose one of the base colors and create subparts or effects by using the accents colors. Lets say you create a special error button. As the base color of the button you choose the red color as it’s defined as a base color in the palette. But then you need several additional color definitions that define a pressed state of the button or a glow if the button is focused, for example. Here you can easily use the accents colors for red. If you are a JavaFX developer you can simply use a little tool by Gerrit Grundwald to pick the needed colors.

    Next to the color palette the Material design specification defines general light and dark theme. The colors that are shown here are quite helpful to create basic parts of a control or application like panes and menus. The following picture shows an example of the dark theme:

    Dark Theme


    Another very helpful tool to create a complete color scheme is the Coolors web application. This application let you simple create new color schemes or choose an scheme that was created by the community.


    When creating your own scheme you start the generator that shows a random scheme with 5 colors. By pressing space a new scheme will be generated and appears on the screen.

    Whenever a scheme contains one or more colors that look good you can lock them. By doing so they won’t change anymore and with the next scheme generation only the colors that are not locked will change. Since all the colors in a scheme always fit to each other it’s quite easy to create a custom color scheme by using this tool.

    Round images with JavaFX

    November 29th, 2015

    In modern UI’s you can often find round avatar images like shown in this image:

    Creating these special UI nodes with JavaFX isn’t that hard. The most important JavaFX features to create such a rounded image is clipping. By using clipping you can define the area in that a control can draw it’s content. A clip can be any shape and you only need to set the shape property of a JavaFX Node instance to define its clipping. You can find an additional clipping description here.

    Let’s start creating the component. As a first step we will define a Circle shape as a clip and define it for an ImageView instance:

    In addition a border should be added to the component. To do so we add one (or several) Circle shapes on top of the ImageView:

    In the JavaFX code you can simply bind the bounds of the image to the bounds of the clip and the circle instances that are used as a border.

    Our JavaFX RefCard was published

    October 18th, 2015

    Refcard Cover

    Hendrik and Michael Heinrichs created a RefCard for JavaFX 8, which was published today. A big thanks goes to the people at Dzone, who made this happen. You can download the RefCard over at JavaFX 8 RefCard.






    Excerpt of controls overview

    The RefCard gives a quick overview of the most important features in JavaFX 8. For example there is a collection of screenshots from all controls that are available. You can see an excerpt to the left. This will make it easy for you to find any control that you need.







    Another example is the image to the right which is a quick reference to all the ways how you can style a JavaFX stroke.





    We hope you enjoy it.

    JavaFX 8 RefCard

    Dierk Koenig interviewed: Groovy is a pioneer for new ideas

    September 11th, 2015

    Dierk Koenig (JavaOne Rock Star) works as a fellow for Canoo Engineering AG. He is a committer to many open-source projects including OpenDolphin, Frege, Grails and Groovy. In the interview with JAXenter he talks about building user interfaces with projector patterns with HTML5 and JavaFX, Groovy and the W-JAX 2015.

    Read the full article (in German) here.

    7 GUIs with OpenDolphin

    July 8th, 2015

    Dierk König discovered 7 GUIs: A Notational Usability Benchmark for GUI Programming and we thought it would be great to have an OpenDolphin implementation of it.

    For me not necessarily the notational usability aspect is important but to find a good OpenDolphin implementation.

    So far I have implemented 3 of the GUIs. In the descriptions of the examples I will explain
    how I implemented them and what I have learned while doing it.

    Some of the 7 GUIs are only concerned with UI toolkit functionality.
    Since I want to focus on the ones which are more insteresting from an OpenDolphin point of view I skipped those for now.

    For the client technology I decided to use JavaFX in a simple programmatic way but will try to find the time to do a HTML GUI in the future.

    Since github supports Asciidoctor I decided to use that format for the descriptions of the individual examples, which brings back the fun in writing and the documentation close to the code.

    When you go through the descriptions I recommend that you look at the original description of 7 GUIs: A Notational Usability Benchmark for GUI Programming.

    Here is the list of the currently implemented GUIs with their descriptions:

    Sven Ehrke, @syendar