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?

It’s not all gold and sunshine; JavaFX layout

  • Post category:JavajavafxUI

After my previous post, praising the properties and binding mechanism, I’d also like to voice an opinion on something on which I think the JavaFX team has dropped the ball.

In the previous post about Agenda control I explained that there were two ways I updated the nodes in Agenda; either I setup binding in the constructor, or I listen to relevant properties and call a relayout() method, setting the appropriate values there. Especially the binding is a powerful feature. No software engineer can deny that the sniplets below don’t have a certain beauty to them.

Adding a rectangle that serves as a dragger at the bottom of an appointment:


durationDragger.xProperty().bind(widthProperty().multiply(0.25)); // 25% offset from the left border
durationDragger.widthProperty().bind(widthProperty().multiply(0.5)); // 50% of the width of the appointment
durationDragger.yProperty().bind(heightProperty().subtract(5)); // 5 pixels from the bottom border
durationDragger.setHeight(3); // 3 pixels high

Making sure the day head and day body line up:


header.getChildren().add(dayHeader);
week.getChrildren().add(dayBody);
dayHeader.xProperty().bind( dayBody.xProperty());
dayHeader.widthProperty().bind( dayBody.widthProperty());

What is important here is that the x,y,w,h values are set directly on the children. The container does not do any layout, it simply draws its childeren where they say they want to be. This is called an ‘absolute’ layout. All other layouts (VBox, HBox, BorderPane, …) do not want you to set the x,y,w,h of the children, their added value is that they’ll calculate and set them for you. (more…)

Continue ReadingIt’s not all gold and sunshine; JavaFX layout