• 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

    Colors

    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.

    Coolors

    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.

    Coolor
    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.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Running TestFX tests in headless mode

    January 31st, 2016

    For the past few months I’ve been working on a JavaFX based product that has lots of bells and whistles. Last week we succeeded in setting up functional tests using TestFX. While everything was working fine on a developer’s machine (see this for more information) we were experiencing trouble with our CI environment.

    At first we thought it was a faulty configuration related to xvfb on the server but as it turns out xvfb was working correctly. We even ssh’ed into the server, exported the DISPLAY to a different machine and saw the test run. Kind of. The following is the basic test code that was causing us trouble:

    Clicking on #optionsMenu (a button) should bring a popup menu; clicking on #preferencesActionTarget then selects an item from the popup menu. The button is placed at the top right corner of the window.

    When running the test on a local machine we can clearly see the robot clicking on all items we told it to, however the execution on the server always left the pointer at the center of the window. Aha! the problem was that the mouse pointer froze completely. The Robot was unable to move it to the right point on the screen and the click on the expected element.

    Searching for clues to fix this problem led us to this thread at the TestFX Google Group. The problem discussed there was of a different nature, nevertheless the thread contained a small nugget of information:

    The DragAndDropBug occurs when the GlassRobot is used without Monocle. Automatic mouse movement will freeze. — Benjamin

    So we had to enable Monocle on the server. As far as we can tell there’s only one release of Monocle available at JCenter/Maven Central: 1.8.0_20. This version worked well for us although we’re running JDK8u72. Please follow the instructions laid out here if you require another version; or point that repository to jitpack.io and let it serve the binaries for you.

    Assuming you’re building projects with Gradle (if not, what are you waiting for? Maven is so old school now) you only need to configure the following dependencies to have Monocle in your build

    The last bit found in this file allow us to enable/disable headless mode in our tests. In this way we can use the real Glass Robot when running locally or the Monocle Robot when running on CI. Headless mode is disabled by default; it can be enabled by invoking

    $ gradle -Pheadless=true test

    Of course, one could tweak the build file and have the value of the headless property be set according to the current environment, that is, if the build is being executed inside the CI server or not. Once we’re done with the setup the only thing left to do is update the tests so that the correct robot is used. You’ll typically use a static initializer block to perform this feat, such as

    And that’s it. There’s nothing much to it once you know what to tweak.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Dolphin Platform and Polymer

    December 15th, 2015

    Starting with version 0.7 the Dolphin Platform JavaScript and Polymer API has been released. Now you can easily create desktop, mobile and web clients for your application by using the same controller and presentation model. You only need to change the thin view layer. The Dolphin Platform repository at GitHub already contains a small client server application with a JavaFX based client and a Polymer client. In addition the example contains a Spring Boot tutorial and a KumuluzEE server. By doing so you can select the environment that fits perfectly to your needs. You can find there project here. A short description about the Polymer client API can be found here.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    Dolphin Platform Jumpstart

    December 1st, 2015

    Starting with a new technology is often hard. Even if the technology is documented and follows the pattern and structures that you already know from other APIs or frameworks the initial start is always a problem. To simplify this start when working with the Dolphin Platform, we created a first Maven archetype that creates a simple client server application.

    This application is an ideal starting point to play with the Dolphin Platform framework, learn the APIs or directly start your own application based on Dolphin Platform.

    The Maven multi module project that is created by using this first archetype contains a Spring Boot based server and a JavaFX client. With this archetype you can create your own project directly in an IDE like IntelliJ or by using the shell. If you want to use the shell you need maven on your system. IDEs like IntelliJ contain a bundled Maven instance and you don’t need to install anything on your system (without the IDE).

    The following video shows how you can create your first Dolphin Platform application in 1 minute by using IntelliJ:

    We will post about other IDE and the commandline usage later.

    If you have any questions about Dolphin Platform you can now use the “dolphin-platform” tag at stackoverflow. If you are new to Dolphin Platform you can find general information and tutorials on the Dolphin Platform website.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    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.

    Share and Enjoy: These icons link to social bookmarking sites where readers can share and discover new web pages.
    • email
    • Print
    • Twitter
    • LinkedIn
    • XING
    • Facebook
    • Google Bookmarks

    css.php