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:

(more…)

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…)

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…)

After getting my feet wet writing the ListPicker and CalendarPicker control in JavaFX for the JFXtras project, I felt it was time to put my aim at something bigger; I always wanted to write a control that does a “Google Calendar”. Even though such a control on the surface seems simple, there are many things that make it a real challenge and fun for a software engineer to create. For example the beauty of how overlapping appointments are rendered. So after a few days where the spare time went into drawings and scribbles on paper, fleshing out how things should be set it up, the coding started. There were a few things I would like to do different from Google’s version.

1. When I plan an appointment, I always forget to look at the whole day events, and often get conflicts because of that. So I wanted a whole day event to have a presence during the whole day.
2. Google only allows for appointments that span a certain amount time. Tasks (which basically only have a single date & time) are not supported. Google has a task feature, but it is not mature enough IMHO in terms of reminders and visibility.

So before diving into how the control is set up, first a quick peek at the state of affairs when writing this blog (tasks are not implemented yet):

(more…)