A Popup Editor for JavaFX 8

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.

ical-11

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.

ical-21

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.

ical-3

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.

javafx-1

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.

javafx-2

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

javafx-3

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

gantt-popup

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


 

Reference: A Popup Editor for JavaFX 8 from our JCG partner Dirk Lemmermann at the Pixel Perfect blog.

Do you want to know how to develop your skillset to become a Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

JPA Mini Book

Learn how to leverage the power of JPA in order to create robust and flexible Java applications. With this Mini Book, you will get introduced to JPA and smoothly transition to more advanced concepts.

JVM Troubleshooting Guide

The Java virtual machine is really the foundation of any Java EE platform. Learn how to master it with this advanced guide!

Given email address is already subscribed, thank you!
Oops. Something went wrong. Please try again later.
Please provide a valid email address.
Thank you, your sign-up request was successful! Please check your e-mail inbox.
Please complete the CAPTCHA.
Please fill in the required fields.

Leave a Reply


7 + = eight



Java Code Geeks and all content copyright © 2010-2014, Exelixis Media Ltd | Terms of Use | Privacy Policy | Contact
All trademarks and registered trademarks appearing on Java Code Geeks are the property of their respective owners.
Java is a trademark or registered trademark of Oracle Corporation in the United States and other countries.
Java Code Geeks is not connected to Oracle Corporation and is not sponsored by Oracle Corporation.
Do you want to know how to develop your skillset and become a ...
Java Rockstar?

Subscribe to our newsletter to start Rocking right now!

To get you started we give you two of our best selling eBooks for FREE!

Get ready to Rock!
You can download the complementary eBooks using the links below:
Close