JFXtras: lessons learned developing in JavaFX

JFXtras is my pet open source project. I like visual things, and HTML and CSS are way too frustrating, so I’m running with JavaFX. Since 2012 I’ve been submitting controls to it, simple ones at first; the ListSpinner, then the CalendarPicker (date picker), and eventually Agenda (Google Calendar) and gauges. Doing this has resulted in many satisfying moments when a control worked, but the road to that point was littered with many chunks of frustration and sometimes even scrapping whole controls and restarting on them (Agenda has three iterations).

Writing these controls in JavaFX 2 and later has teached a lot of lessons; things that work, things that didn’t work, or worked better than others, and in the end resulted in a few best practices. It’s not like I have all the wisdom on JavaFX or anything, but being on this for so long, well, at least some commonalities were found. So during Christmas holiday 2014 some of this knowledge was wrapped up in a small 1 – 1.5 hour presentation / talk, touching on some of JavaFX’s strong points, slip ups and other topics like code structure and testing JavaFX applications. It’s titled: “Lessons learned developing in JavaFX”, or “Let us make your mistakes for you”. (more…)

Continue ReadingJFXtras: lessons learned developing in JavaFX

corner menu

A few months back I had the pleasure of attending the multidevice presentation by Gerrit Grunwald (@hansolo_). In this presentation he demonstrated how easy it was to port a single JavaFX code base to several devices, including Android, iOS, RasberryPi, and a few more. One of the UI elements he showed on each device was a corner menu; circular icons appearing from the corner of a window. This was visually a great UI component, and Gerrit told me it was part of his Enzo library. The Enzo library is full of such visually appealing JavaFX controls and components, and freely available to everyone who wants to use them, but it is also the case that Enzo mainly exists to support Gerrit in his presentations and demonstrations. And there is a difference between a control intended for public use and one that is a result of a demonstration. So when I asked Gerrit if I could take his control and move it over to JFXtras, he agreed immediately.

The first order of business was to layout stuff in a 90 degree arc. And I could have just copied Gerrit’s code, but as things go in a hobby project I decided that this should be something reusable, so CircularPane was born.

CircularPaneRectanglesAndCircles

It took some time to get it working correctly; creating a general purpose pane for laying out stuff in a circle dynamically is not as trivial as it seems. But after a few weeks it got to the point where CircularPane was mature enough, a demo was available, and it was unit tested. After that, work could finally start on one of the primary things it was created for: CornerMenu. (Although the fact that a round shaped Android watch will come out soon, may turn out to be a nice coincidence.)

So CornerMenu is exactly what it says: a menu that is located in any of the four corners of a window. The menu can be static, but usually it will show the items when the mouse comes close to the corner, like so:

cornerMenu-fromOrigin (more…)

Continue Readingcorner menu

Round and round she goes

JFXtras has a TimePicker that uses a number of Sliders to represent hours, minutes and seconds. And even though this is functionally an OK user interface, it is visually not very appealing.

TimePickerHM

Recently I upgraded to a new phone and ran into this Android TimePicker, which I liked better than my slider UI. So I figured I would try and create something similar.

android-calendar-time-control-1

The first thing that is needed to create a UI like this, is to layout nodes in a circle. That turned out not to be too difficult, but the implementation was very specific for the circular time picker I was working on. And I figured it would be nice if the circular layout was reusable, so I got side-tracked in creating CircularPane. (more…)

Continue ReadingRound and round she goes

FXML builders detection

When you’re in the custom control business, you need hooks into the main framework to get the controls supported well. One of the features of JavaFX is the FXML UI notation format, it allows the coder to define (parts of) a scene with more ease and readability. FXML already is a pretty flexible and open technology, using reflection and the Java Bean standard (aka setters and getters) to try and automatically setup a control according to the values in the FXML file. But there are always situations that don’t fit.

One of those situation is the JFXtras CalendarTextField control and then specifically the date format properties. In the Java API these properties take instances of DateFormat, either a single one, or even a whole list. FXML at the moment does not know how to convert a string to DateFormat. So the dateFormat and dateFormats attributes below result in errors.

<?import javafx.scene.control.*>
<?import javafx.scene.layout.*?>
<?import jfxtras.labs.scene.control.*?>

<VBox xmlns:fx="http://javafx.com/fxml">
    <children>
        <CalendarTextField dateFormat="yyyy-MM-dd HH:mm:ss" dateFormats="yyyy-MM-dd, yyyy-MM, yyyy"/>
    </children>
</VBox>

(more…)

Continue ReadingFXML builders detection

Using CSS in JavaFX to keep the API clean

  • Post category:JavajavafxUI

As a notorious skeptic, the usage of CSS for styling in JavaFX to me was something of a “yeah, nice, but we’ll see how it works out.”. There are some doubts in how CSS will work out when complete skins (like Synthetica for Swing) are created, in combination with third party controls. But last week I had a situation that won me over to the “it’s good” side.

A user of one of my controls, CalendarPicker in JFXtras, came to me and told me about their usage of the control. They had integrated it in their application and styled it Windows 8 alike using CSS. But, he said, our graphical designer wants the arrows of the month and year selector to be on either side of the value, and the value centered instead of left aligned. Shown below is the default UI for CalendarPicker and as you can see, it is not as the designer wants:

calendarpicker_usa

(more…)

Continue ReadingUsing CSS in JavaFX to keep the API clean

Supporting JSR310 (Jodatime) in JFXtras

Probably everyone is exited that Oracle is finally picking up the highly dubious date time implementation in Java called Calendar. It is interesting to see that large companies like Sun really have problems getting something as seemingly simple as date and time implemented correctly. Of course there are two sides to the problem, first there are all the intricacies of date and time, like time zones and other more or less subtle problems (this is where Date went wrong). And secondly there is the implementation aspect, where for 99% of the usages a date or time is considered an immutable value, like a number, easy to use for a developer (this is where Calendar went wrong, just take a look at the output of toString()).

Now, there are reasons why there is a CalendarPicker and not a DatePicker in JFXtras. And the primary reason is that Calendar has a notion of locality, which Date has not; for example in Germany the week starts on a different day (Monday) than in the USA (Sunday).

calendarpicker_usa

calendarpicker_de

Calendar actually is pretty decent when it comes to the domain of dates and times, Jodatime is added to Java 8 is because the implementation, the API, is bad. (more…)

Continue ReadingSupporting JSR310 (Jodatime) in JFXtras

Layout in Android (and JavaFX)

One of my clients allowed me to write an Android application. I have done Java and mobile development before, so it basically comes down to learning the new framework. And that’s something Java developers do on a fairly regular basis. There were some special things, like connecting to a bluetooth barcode scanner, but nothing that some coding-by-googling wouldn’t fix. The application initially was aimed at Android 2.2+ and phones, but in the meantime it’s been upgraded to Android 4.0+ and 10″ tablets, because it needed a stronger visual screen (with loads of images) and the screens of the phones were simply too small.I’d like to share some of the experiences I had with this project.

ReindersAndroidScreenshot_2012-12-10-10-56-39

(more…)

Continue ReadingLayout in Android (and JavaFX)

JavaFX layout, a silver lining?

  • Post category:JavajavafxUI

As described in the previous post, I believe that JavaFX’s layout mechanism is not as good as it could (should) have been. Naturally it is one thing to complain, another to offer improvement suggestions, but the best is to provide alternatives. First there is MigPane, which is a very powerful layout manager, but it is also possible to ‘slap’ on a different API onto existing layout managers. And that is what is being attempted in the JFXtra’s drop-in replacement layout managers. These layout managers extend the existing one, but add a different style.

The basic idea is that instead of writing:

VBox lVBox = new VBox(5.0);
Button b1 = new Button("short");
lVBox.getChildren().add(b1);
VBox.setVgrow(b1, Priority.ALWAYS);

You can write:

VBox lVBox = new VBox(5.0);
lVBox.add(new Button("short"), new VBox.C().vgrow(Priority.ALWAYS));

(more…)

Continue ReadingJavaFX layout, a silver lining?