Hand drawing effect with JavaFX

Some days ago Thierry Wasylczenko blogged about 12 of his favorite JS libs. On of the libs is js-sequence-diagrams that I did know. By using the library you can draw sequence diagrams in a browser. I really like the hand drawn theme of the tool that draw all the diagrams like they are sketched with a pen. Here is an example of the theme:
js-sequence-diagrams
After having a look at the source code of js-sequence-diagrams I found the methods that render all the hand drawn lines. Cubic curves are used here and the control points of the curves are calculated by using random values. These two control points define the bend of the curve as you can see in the following picture:
cubic curve
Once I’ve seen this I wanted to try if I can do the same with JavaFX :)
Thankfully JavaFX contains support for cubic curves. The Path shape can contain curves that can be defined by the CubicCurveTo class. By using this class you can create lines and shapes that look like hand drawn onces by using the same algorithm as in js-sequence-diagrams. I created a simple test class that draws some arrows, lines and rectangles by using this algorithm. Here are some results:
sketch1
sketch2
sketch3
sketch4

As you can see in the picture the shapes look different in each of them. This is caused by the random values that are part of the algorithm. If you want to try this here is my one class gist that contains all the code:

First steps with WebComponents

I think one of the big new HTML features in the next years will be WebComponents. By using WebComponents developers can create fully-featured DOM elements as defined in the web component spec. In short this means that you can create your own HTML tags. If you want to add an avatar view to your web app you and use web components you can define a avatar component and then use the <avatar> tag in your HTML file. To use web components today you can use one of the following libraries:

I chose polymer to create my first web component and in this post I want to show you what I did to create a reusable custom HTML tag. Most likely this isn’t a best practice tutorial because I currently starting to learn about this topic :)

Project setup

As a first step I downloaded the polymer lib. To do so I used bower that is a package manager for web development. With bower you can define all the library dependencies of a web application like you can do with Maven for Java apps.
After you have installed bower on your system you need to execute the following commands in the folder of your web project:

This will create a bower.json file in your project and adds polymer as dependency. My file looks like this:

To download all dependencies you need to call

This command will download all defined dependencies and install the in the bower_components folder in your project. When committing your project to git you can simply ignore this folder.

If you don’t want to use bower you can download and integrate the polymer lib by hand.

As a next step you can create a index.html to test your custom components and a folder that will contain the components. Once this is done your application folder might look like this:
folder-structure

General structure of a WebComponent

As said a web component is a custom control for web pages. Top define a component we only need one HTML file. As in other languages or UT toolkits a web component is composed of a layout definition, a style and controller logic. In the web world this means HTML (layout), CSS (style) and JavaScript (controller). By using polymer all 3 parts can combined in one file. Here is a skeleton for the file:

As you can see the code starts with an import. Each custom component must import the polymer.html file. Thanks to bower this is already in the bower_components folder and can simply be imported. The polymer-element tag describes the web component. In the tag there are 3 more tags that describes the layout (template), the style (style) and the controller of the component (script). The polymer-element tag has some attributes that describes the name of our component and its attributes.
To create a small web component you don’t need to define all 3 inner tags but some basics are needed to display the component in a browser.

Defining the first component

As a start we want to create a minimal web component that will only print an “A” on screen. To do so we create the “Simple-A.html” file in the components folder and add the following content:

As far as I know is this the minimum definition that you need to define a component. In the template a paragraph that contains an “A” is defined. This is default HTML and if we don’t want to create a reusable component we could write this directly in an HTML file. In the script section the Polymer({}); call registers the component so it’s recognized by the browser. Once this is done the component can be used in any HTML file to render the “A” paragraph on screen:
rendered

Use the component

To include the custom web component in a HTML page you need to import it. In addition the polymer platform lib must included to the page. Here is the code of a HTML page that includes everything and adds the “A” paragraph component several times to the body of the page:

As you can see in the code the html files that defines the custom component is imported in the web page. Once this is done the custom tag can be used in the web page. When having a look at the web developer tools of safari you can see that the

A

tags are now part of the page:
view in console

Browser support

I tested my HTML file on Safari, Chrome and Firefox. Safari and Firefox work fine but on Chrome I don’t see anything. The web console shows a “Cross-Origin Resource Sharing” so maybe it will work when running the page on a web server instead of just opening the file from the filesystem. I’m not a web expert so maybe Chrome has the correct behavior here. I will check this later and blog about it in my next web component post. After all by doing the most simply try and opening the HTML file with the browsers that re installed on my system this is the result of the browser check:
browser-check

Conclusion

It was very easy to create the first web component. As a next step I will try attributes for the components and some JavaScript logic. I will block about it as fast as possible.

Responsive Design for JavaFX

Once of the new APIs that I have shown at JavaOne was ResponsiveFX that can be used to add responsive design to your JavaFX application. ResponsiveFX is an open source project maintained by Canoo and will be published to Maven Central the next days.

Responsive Design

Today software must fit a wide range of devices. When developing an application customers often want to use it on a desktop pc and on a tablet. In addition a subset of the features should be useable with a mobile phone. Oh, and maybe next year the first customers want to check information on a smart watch. Even if web apps and JavaFX applications can be distributed and used on most of this devices you can’t simply use the same UI on them.

responsive1
All these devices provide different screen sizes and resolutions. In addition the user interaction is in some parts completely different. While using a mouse and keyboard on a desktop pc you want to use touch and gestures on your mobile to navigate through the app.
One approach to handle these issues is responsive design that can be used to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices. Responsive design was first introduced by web applications and influenced the development trends in this area. By defining different layout for specific screen sizes the fronted of a web application will look good on mostly all devices.

responsive2

ResponsiveFX

The core concept of ReponsiveFX is copied from Twitter Boostrap that provides responsive design for HTML. Boostrap provides several CSS style classes that can be used to hide or show components on different screen sizes. Here is a short overview of all the style classes:
responsive-twitter
By adding one of these style classes to a component the visibility of the component depends on the current frame size. Here is a small example how this can be used in HTML:

Responsive Design & JavaFX

By default JavaFX doesn’t provide an API for responsive design. Thankfully JavaFX supports CSS and therefore we can add this feature. This is exactly what ReponsiveFX does. By using the API you can simply use the same style classes as in HTML in your JavaFX application. To add the responsive support to an application you only need one line of Java code:

This adds the support for responsive design to the given stage. All nodes that are in this stage can now use the described style classes. Therefore you can simply do the following in Java code:

In the example a table and a list are defined that will visualize the same set of data (items). Depending on the size of the application the list or the table will be shown on screen. Here is a short video that shows the behavior:

By adding this API to your JavaFX application you will have the same possibilities as in HTML to provide responsive design.

Responsive Design & pseudo classes

By using the given classes you can hide and show components depending to the frame size in your application but often you want to show different sizes of controls depending on the screen size. Let’s think about a toolbar that should have a different size in all supported screen sizes. In HTML you would do the following:

In JavaFX this would correspond the following code snippet:

This is very bad practive because Java must handle all 4 instances in this case. Even if only one toolbar will be displayed on screen all are part of the scene graph. If you will do this with controls that contains images you will blow up your memory for example. Therefore you shouldn’t do this. I thinks it’s clear that we need a better solution and ResponsiveFX contains one :)
Next to the style classes ReponsiveFX provides pseudo classes for all supported screen sizes. Here is a list of the supported pseudo classes:

  • extreme-small-device
  • small-device
  • medium-device
  • large-device

By using this pseudo classes you can define the visualization of a node depending on the current application size. The pseudo classes will automatically be added and removed for each node inside the scene graph of a windows that is handled by the ResponsiveHandler. Thanks to this you can define the following CSS rules for a control:

In your Java code you can now define one control and set its ID to match the CSS rules:

Whenever the size of the application will change the matching pseudo class will be set to the control and the visualization of the control will change depending on the CSS attributes. By doing so you can create applications that will look different on the specified frame sizes. This will be helpful when developing applications that should work for desktop and mobile or on embedded devices. Here is a short video that shows how a responsive application might look:

Responsive Design in Java code

In addition to the shown features ReponsiveFX supports a Java API to react on responsive changes. A listener can be registered to the ResponsiveHandler and will be fired whenever the responsive types changes. By doing so you can react on changes direct in Java code. This will be helpful if you need to change anything that can’t be done by CSS. AT the moment this feature is a fast hack for JavaOne but I plan to refactor this in near future.

Where can I get it?

As said ResponsiveFX will be released in near future. I’m currently create clean modules / libraries of all the demos and examples that I showed at JavaOne. ResponsiveFX is already extracted as a stand alone library. The next days I will set up the GitHub repo and add some documentation. Once this is done I will upload the first version to Maven Central.

Additional Information

Because of a missing feature in JavaFX ReponsiveFX contains some hacks that can result in unwanted behavior. If you like the API and need responsive design in JavaFX you should vote for this issue at the JavaFX bug database.

New Desktop Application Framework & DataFX

Maybe you have mentioned that Andres Almiray is planing a new desktop application framework JSR. I had a chat with him some days ago at the canoo hq and we discussed some points of this project. In addition Andres gave me an introduction to Griffon and I showed him DataFX 8.
One of the core features of the framework should be UI toolkit independency. By doing so the framework will only contain general definitions and JavaFX or Swing specific implementations will be loaded by SPI, for example.
Griffon already contains this abstraction but DataFX is hardly coded against JavaFX. I think this is absolutely ok and at the moment there eis no plan to support other UI toolkits that JavaFX with DataFX. As said the application framework will define general classes and interfaces and maybe DataFX will be one of the JavaFX implementation. We will see what happens in the future.

Generalizing the DataFX concepts

If DataFX should become an implementation of the JSR specification it must implement general interfaces and support a toolkit independent architecture. Therefore I did some tests and create a small platform independent framework based on DataFX architecture and APIs. I chose the concurrent API and the controller API of DataFX and created more general versions. As a benefit I created some cool code and features that will be integrated in DataFX 8.1. Let’s have a look at the framework that is called “JWrap”. You can find the sources at GitHub. Because this was only a test there isn’t any javadoc at the moment but the project contains a Swing and a JavaFX example. JWrap has zero dependencies and defines a MVC and a concurrency API. Both API are platform independent and you don’t need dependencies to Swing or JavaFX to use them.

JWrap concurrency utils

JWrap contains a UIToolkit class that can be used to work with the event and rendering thread of the underlying UI toolkit. Here are the methods that are defined in the class:

By using these methods you can interact with the event and rendering thread of the used UI toolkit. To do so you must configure JWrap. This can be done by only one line of code. Here is an example how you configure JWrap to use the Swing EDT:

There are several other concurrency classes in JWrap that all depend on the UIToolkit class. By doing so you can now use all the concurrency helpers in JWrap and automatically the EDT will be used as application thread. I ported the ProcessChain of DataFX to JWarp and now you can code the following in your Swing application:

I think this code is much better than using the SwingWorker. You can easily use the ProcessChain in any Swing application that supports Java 8.

JWrap MVC API

DataFX contains the controller and flow API that can be used to define MVC based views in JavaFX. I ported some parts of this API to JWarp and created a UI toolkit independent way to define MVC based controllers. JWrap contains some annotations that can be used to create a link between the view and the controller of a dialog.
Let’s start with the swim example. As a first step we define the view and define names for all the UI components:

The second class of the dialog will be the controller class. In this class JWrap annotations can be sued to inject view components in the controller and define interaction:

The @ViewNode annotation can be compared to the @FXML annotation that is used in JavaFX and DataFX to inject view nodes that are defined in FXML in a controller. The @ViewNode annotation has some benefits because it can be used for FXML based view and for coded view (this is one of the features that I will integrate in DataFX 8.1).
The JavaFX version looks mainly the same. Here is the code for the view class:

And here we have the controller class:

As you can see the Swing controller class and the JavaFX controller looks mainly the same. Annotations like @ViewNode can be used in Swing and JavaFX.

The future of JWrap

I created this project to test of a UI independent API can look like. I don’t plan to continue working on the library. Maybe I will use it when checking some other ideas for the application framework JSR.
I think that the library can be a benefit for Swing developers. By using JWrap they will get some lambda based concurrency APIs and a MVC framework that can be used to structure the code or prepare a migration to JavaFX.

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:
datafx-dep.016
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.
frozen
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:
JavaOneAfterEvent1
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:
pvv

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:
awe
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.