DataFX 8 has been released & DataFX core overview

I’m proud to announce that we have released DataFX 8.0 last week. With DataFX 2.0 we created an API to get real world data in your JavaFX 2 application by using data readers for REST, WebSocket, SSE and many more endpoints. With DataFX 8.0 we introduce a lot of more content for your JavaFX 8 applications. Next to the data reader APIs we included flow and injection API to DataFX to create MVC based views and complex workflows. By doing so we lifted DataFX from a data reader API to a (small) application framework. DataFX 8.0 contains 5 modules:

  • core
  • datasources
  • websocket
  • flow
  • injection

I think one of the big benefits of DataFX is that it has hardly any external dependency. The following graph shows the internal and external dependencies of DataFX 8:
As you can see in the picture next to the javassist dependencies all other dependencies are Java specs.

Ok let’s talk about the content of the modules. As a first step of the DataFX 8 development we extracted all APIs that provide general support for multithreading and added them to the core module. Next to this some cool new APIs are part of the core module that will help you to define background tasks and solve concurrent problems the easy ways. Today I want to introduce two of these features. If you are interested in all features of DataFX 8 you should read the tutorials and have a look in our JavaOne slides.

The Observable Executor

When working with background tasks you will need a thread pool to manage all the concurrent operations. JavaSE provides several different of them with the Executors class. In DataFX 8 we introduce the ObservableExecutor that is an implementation of the Executor interface and provides some JavaFX specific additional functionality. By using the ObservableExecutor you can bind the capacity of the executor to any JavaFX property. In addition all the task interfaces and classes of JavaSE, JavaFX and DataFX are supported by the ObservableExecutor. By doing so it is very easy to define titles, messages or progress updates for all your background tasks and show them on screen. A demo of the ObservableExecutor can be found here. As a next step we will combine the ObservableExecutor with the cool Task Progress View by Dirk Lemmermann. It looks like this one is made for the ObservableExecutor ;)

The ProcessChain

When developing an enterprise application with JavaFX you will need to define background tasks to call some server endpoints or start batch processes. Normally you will react to the answer of the tasks and update the UI. For example if you call a REST endpoint to receive some data you want to display the data on screen once the call is done. Doing this in the JavaFX Application thread isn’t the best idea. You don’t know how long the task will need to execute and therefore the application can’t be repainted while the call is executing. This will end in a frozen application and frustrated users.
It’s import to execute the server call (as any long running action) to a background thread. Doing this with the basic JavaSE concurrency tools will blow up your code and create methods that aren’t readable. Here is a simple example of a function that will call a background task and show it’s result on screen:

I hope you are with me when saying that this code isn’t as readable as it should be. In Swing Java contains a good helper class called the SwingWorker. By using this class it was easier to create background tasks that provide data for the fronted.
background thread
It’s still a lot of code that is needed to create a working SwingWorker because anonymous classes are needed. But today we have Lambdas, functional interfaces and all this cool language features and therefore you wouldn’t code a background tasks this way. In DataFX 8 we introduce the ProcessChain class that is like a SwingWorker on steroids. Here is a small example that shows how the top code can be refactored by using the ProcessChain:

Cool, isn’t it. Now we can read the code and understand what’s going on here. The ProcessChain uses all the new functional interfaces like Supplier or Consumer to define a chain of tasks that can be called on a background thread or on the JavaFX Application Thread. In addition the exception handling is directly included in the ProcessChain API. If you want to learn more about the ProcessChain you should check out our slides or my JavaFX Enterprise talk.

I hope you like these features. In the next posts I will introduce the other DataFX 8 modules.

JavaOne Sessions at Canoo

Canoo had 16 sessions at JavaOne this year. In this sessions we discussed different topics like enterprise architecture, testing, open dolphin or usability design. For all the developers that can’t attend JavaOne Canoo has a nice offer:
We selected some of our talks and will give them again in Basel. There will be two open events with different talks the next weeks:

If you are interested in Java and live near Basel you should attend one of these events.

JavaOne 2014 Slides

I uploaded the slides of the first 3 talks at slideshare. The other 3 talks had slides with animation, etc. and therefore I need to refactor them before I will post them to slideshare.

Iconify your application the resolution independent way

Often icons are very important for a good UI. They will create a modern and professional look and will help the user to understand the meaning of actions. Especially on small screens icons are important. For a mobile application you won’t create a toolbar with 5 actions that are described by a long text. In the following screenshot 3 actions are defined in the toolbar by using only icon:
Bildschirmfoto 2014-09-16 um 21.21.04
I think that mostly all users will understand that these actions defines a back action and 2 actions to change the volume.
Today applications will be developed for different hardware and therefore for different screen resolutions. Let’s think about the retina displays. Here you will have a 4x bigger resolution than on normal screens. In an ideal case an applications supports this devices and will fit its size and content. But that means, that all controls will have a 4x bigger size. Often you will use images for your icons. But resizing them will create a pixelated view. For a Mac retina display you can use the “@2″-syntax to provide retina images. But sometimes you want to scale an icon even bigger (Maybe you want to scale it in an animation, for example). Thats why you should use vector based icons:

Ok, that sounds reasonable but where can we find vector based icons and how can we integrate them in JavaFX?
For me the best resource for vector based icons is Font Awesome that is a font which contains over 450 vector based icons. Here is a short extract:
Because it is a font it can simply be integrated to any JavaFX application (see this post). Once the font is assigned to a control you can define an icon by setting the text of the control. Here a special unicode character need to be set as the text. The following example describes how to set the pen icon to a button:

Once you now this trick you still need to do some steps to display a vector based icon:

  • add the font to the resources folder
  • define the font in CSS by using @font-face
  • set the font to the specific control (in CSS)
  • define the specific icon in java code

Especially the last point isn’t what I want. Icons are part of the style of an application and therefore it would be perfect if we could define them in CSS. There fore I created a new Skin for the JavaFX Button called IconifiedButtonSkin. By using the skin the handling of vector based icons in your JavaFX application is much easier. To use the skin you only need one line of Java code:

Once this is done the new skin for the button is set. This automatically contains the following steps:

  • add the font to the resources folder
  • define the font in CSS by using @font-face
  • set the font to the specific control in CSS by adding the iconified-button style class

The last think that need to be done is setting the text of the button to define the wanted icon. Thankfully the new skin provides an additional CSS attribute that can be used. By using the -fx-icon-text attribute you can define the wanted icon directly in CSS:

The IconifiedButtonSkin class is part of the ui-basics module that will be found at Maven Central the next days:

further development

I plan to add a special CSS Converter in Java to provide a better definition of the icons in CSS. Wouldn’t it be cool if you could do the following:

Once this is done it would be cool to support more fonts like ionicons by default.

The View Objects Pattern & automated tests with TestFX

When developing an application you should add automated tests. Oh, sorry – I mean you MUST add automated test. So when developing a JavaFX application there will come the moment when you ask yourself “How should I test this UI? A normal JUnit tests won’t work here…”

TestFX basics

That’s right but the JavaFX community is prepared for this problem by offering TestFX. With TestFX you can create unit tests for JavaFX applications. Let’s imagine you have an application that only contains a login dialog:
You can automatically test this dialog by using the TestFX API. I coded test might look like this:

As you can see you can control and fake all user events by using TestFX. At github you can find a general documentation of the API.

Dialog Objects Pattern

Mostly your application will contain more than a simple login dialog and in that case a test could become confusing:

Web developers already know this problem and introduced a pattern to avoid it: PageObject
Since we don’t have pages in JavaFX applications I would call it “View Objects Pattern” instead. By using this pattern you will define a class / object for each view in your application. Let’s image we have a music application with the following workflow:
The applications contains 4 different views. To write tests for the application we should create a view object for each view. Here is an pseudo code example for the album overview:

You can see some important facts in the code:

  • Each user interaction is defined as a method
  • The class provides methods to check important states
  • Each method returns the view object for the page that is visible after the method has been executed
  • If the view won’t change by calling a method the method will return “this

By doing so it is very easy to write understandable tests. Because all the methods will return a view object you can use it as a fluent API:

How to integrate custom fonts in your JavaFX application by using CSS

This is one of the CSS tips that were part of my “Extreme Guimaker” talk at JavaOne this year and will show how you can change to font for a complete application or only a specific control by using CSS.
Before explaining the CSS solution I want to show a short example in Java code:

In the code the font of a button is set to “Arial” with a size of 24. All basic nodes in JavaFX that contains a text provide a font property that can be simply used to define a new font for the node. I don’t think that this is best practice because the font is an attribute that styles the application and therefore it should be separated from the application code.

Set fonts by CSS

Fortunately JavaFX supports CSS and therefore we can extract the font specification from the Java code and add it to CSS. I won’t discuss how IDs and style classes in CSS work in this post (If you not familiar with CSS you should have a look in my book). The font of a node can be defined by using the -fx-font-* attributes in CSS. You can find a documentation of these attributes here. Here is an example that defines the font for a button:

If you want to define a global font for all controls in your application you can simply set the font to the .text style class. The Text shape in JavaFX contains this pseudo class by default and all nodes that render a text on screen use the Text shape internally. Here is the css rule that will set the font for a complete application:

Adding custom fonts

In the examples “Arial” is used as the custom font. Normally you can assume that this font will be installed on a client system. But sometimes you want to use a custom font to create a unique UI. In the following example I want to use the Roboto font that is the official font of Googles Material Design. Normally this font won’t be installed on a client system. So if you define the font by CSS and a customer will run the application without installing the specific font on the OS JavaFX will select a system font as fallback and the cool UI of the app is broken. But thankfully there is a good solution for this problem. Since Java 8 JavaFX supports the @font-face rule that can be used to add fonts. As a first step the font file must be added to the application. As best practice the file should be added to the resources folder:
Once this is done the font can be defined in CSS by using the @font-face rule:

Now the font will be used in our application even if it isn’t installed on the OS:

Enrich your List UI by using the MediaListCell

By default the cells of a ListView will show only a string representation of your data on screen. This is ok for a basic implementation and will work for a lot of use cases. But if you have a application that contains a big list like a news feed or a chat you need a better skin for the cells. For JavaOne I created some JavaFX APIs that contains basic utilities and controls that can be easily integrated in any JavaFX application. The ui-basics module contains some custom list cells that can be used to enrich your JavaFX application. By using this cells we can achieve the following UI change with only a few lines of Java code:
The following graphics shows the inheritance of the new cell classes:
The StructuredListCell defines a cell that splits a cell in 3 regions: left, center and right. The center region will grow by default:
cell layout
You can add any content to the cell by calling the following methods:

In addition the cell provides some new CSS attributes to style it:

  • -fx-left-alignment (VPos): Defines the vertical alignment of the left content
  • -fx-center-alignment (VPos): Defines the vertical alignment of the center content
  • -fx-right-alignment (VPos): Defines the vertical alignment of the right content
  • -fx-spacing (number): Defines the spacing between the 3 regions
  • -fx-height-rule (HPos): Defines which region should be used for the height calculation. By default the center content is used. This means that the cell will be as high as the center content.

The MediaListCell extends this cell definition. It sets the center content to a a title and a description label. If you want to use the cell you only need to call setTitle(…) and setDescription(…) to define the center content:
The class provides default style classes for both labels:

  • media-cell-title
  • media-cell-description

In addition the class provides two new CSS properties:

  • -fx-show-description (boolean): Defines if the description label should be visible
  • -fx-text-spacing (number): Defines the spacing between the title and description label

If you want the UI as shown in the demo you should use the SimpleMediaListCell class. This adds a rounded image view as the left content. By using this cell its very easy to create a list view like you know from many modern applications. To make the use of the cell even easier I introduced the Media interface. The SimpleMediaListCell is defined as SimpleMediaListCell and therefore it can only used with data that implements the Media interface. This interface is quite simple as you can see in its source:

The properties of the nodes in the cell are automatically bound to the properties that are provided by the interface and therefore the SimpleMediaListCell class can be used like shown in the following example:

All the cell classes are part of the ui-basics module that can be found at github:

further development

At the moment I plan some new features for the cells. As you might have registered the right region wasn’t used in this example. In most UIs this is used to define a user action or hint like shown in this image:
I plan to add this as a default feature. In addition I will provide different styles for the image view. Maybe you don’t want a rounded view. In this case it would be perfect to define a style by css. Please ping me if you have some other cool improvements :)

Interview at FX Experience

JavaOne is coming closer and closer. On the one hand I can’t wait to be there but on the other hand I need to finish all my talks in only a few days fearful
At canoo we prepared a short overview of all our talks. If you fare interested in a preview of the canoo talks watch them.
In addition a interview with me about JavaOne and my current work was posted at FX Experience and another overview about my talks can be found at the JavaOne blog.
I think that I won’t have time to add an additional blog post before JavaOne. But at the moment I have several post finished that describes new APIs and tricks that I want to show at JavaOne :) I you can’t be there you should stay tuned and wait for these posts.

Back to all the slides… Here are some previews of my work today (DataFX & Extreme Gui Makeover):
sneak peak
sneak peek 2