For the last couple of months I had the pleasure of working with JavaFX 8 in order to implement a sophisticated user interface for a planning and scheduling application. One of the features needed was a way to perform “in-place” editing, meaning a way to quickly edit some basic attributes of a user selected object.

Following the principle “if you can’t innovate, imitate” I took a look at how Apple is doing these kinds of things and surely enough iCal showed me everything I needed to know.

iCal – The Role Model

In iCal, when the user double clicks on an event, the following “pop over” appears.

At this point in time the pop over shows summaries of the various setting groups. The first group covers anything related to the event time, alarm settings, all-day flag. The second group deals with participants, the third group with notes, attachments and web links.

Once the user clicks on one of the three summaries the pop over will reveal controls to change the settings. This approach reduces the complexity of the UI and makes it easier for the user to focus on the information that really matters to him.

Another neat feature is the option to tear off the pop over. When the user drags the pop over away from the event first the arrow will disappear and then the pop over will become a standalone utility window (see screenshot below). This can be done several times so that several of these windows will be available for the user to work on in parallel.

JavaFX – The Contender

I was happy to learn that things like transparent windows and children popup windows that are glued to a parent window are a piece of cake for JavaFX 8 and the problems that developers faced with Swing are gone for good. The result of my work are 5 classes which produce the control shown below.

The PopupEditor control is a custom control with its own stylesheet. Its entire appearance can be controlled via CSS. The title and the subtitle are textfields and can be edited (border and background “styled away”). The complete header and the footer (with the “delete” button) are replaceable nodes.

The different sections inside the popup are subclasses of “TitledPane” inside an accordion control. Subclassing was needed in order to teach the pane to sometimes show the regular header text and sometimes a graphic node with the summary of the section (screenshot above only shows the regular header text).

The popup resizes automatically when a titled pane gets expanded or collapsed.

Just like in iCal the user can tear off the popup by starting a drag anywhere within the popup background. The arrow will disappear once it no longer points into the “owning” node (in the example above: the red button). When the user releases the mouse button the popup will become a regular window (the type of the new window can be specified (utility, transparent, decorated, ….)).

The following screenshot shows the popup editor in action in the scheduling application for which I needed it. 

And here is a little video showing some serious editing action 🙂