JavaFX Learning Curve Diary-2: Declaring user interface

I've been using the Java language to define the user interface for nearly 10 years, when I first experienced the JavaFX script, I immediately felt the difference between the two different environments. Although programmers use procedural code in the Java language to define user interfaces, in the JavaFX scripting language you can use declarative statements to define user interfaces. This is the biggest difference between the two, it does take a certain amount of time and effort to adapt to the latter.

To learn about this new declarative style of creating a UI, I decided to migrate an application UI that was previously implemented using the Java language to the JavaFX script. So I picked out a picture browsing application that I used in SwingWorker teaching in the Java language Center. The original application demonstrates how to use the SwingWorker class in Javase 6.0, because the UI itself is very simple, so I take it as a "raw material" for porting.

Existing user interface

Existing applications provide users with the ability to query, list, download and display pictures from the Flickr site. Users can output query keywords, apply calls to the rest API to query Flickr for matching thumbnail images, and users can choose from thumbnail images to view larger and more detailed pictures. The query results for existing applications are as follows:

Figure 1. Application UI with query results

This UI is composed of the following components, in order from top to bottom:

• Main Frame form container

• Query label and query text entry bar

• Query matching labels and processing progress bars

• Thumbnail list matching short description (retrieving keywords)

• Select labels and process progress bars

• Display labels for selected pictures

This UI is composed of the following common swing components: JFrame, Jlabel, JProgressBar, JScrollPane, JList. The JList component has a custom renderer that can display thumbnails and corresponding short descriptions.

But this is a fairly simple UI, and we use it to look at how to use the JavaFX script to describe the UI. Next, I'm going to try to use JavaFX to implement the entire application, but for now, just complete an approximate implementation of the existing UI. Here's a lifeless UI that represents the original goal I used to use the JavaFX script for UI description:

Figure 2. Apply UI