JavaFX App Development Part 1

Currently I am developing a JavaFX application for handling cooking recipes called Cookery. Part 1 will cover my development experiences using the JavaFX Composer in NB 6.9 RC1. Previously I had written Cookery entirely using the NB code editor and JavaFX 1.2. Unfortunately I had encountered some show stopper performance issues (with data binding) during testing, which meant I could not make any further progress with the application. This time around Cookery is undergoing a complete rewrite from scratch using JavaFX 1.3.

Since I had developed Cookery previously I had some rough screen designs on paper. Using the Composer I was able to design screens that were close to what I had on paper. Unfortunately the Composer does not yet support custom controls/classes/nodes, which meant containers had to be used during layout to hold the custom controls, thus no accurate visual feedback. On the plus side I was able to setup the layout for each screen quickly and easily.

The Composer organises control properties in a sensible way that is easily accessible. I like that fact that all commonly used properties for the selected control is presented in the top area of the Properties window. Not all properties are available in the Properties window, of particular mention is the read only properties which do not appear at all. Strangely enough there is still to way to visually manipulate the properties for the Stage (eg set the title), and properties are not sorted in ascending order for each category.

If you have ever used the previous version of the Composer you will no doubt have run into some major performance issues. Luckily with the current version it is much more responsive, and opens up design files much quicker. Also whenever a small change is made to a design file and you rerun the JavaFX project it is much quicker to build, this helped to boost productivity when the project was being built many times.

A major downside with using the Composer is the fact that it does not honour the user's formatting settings when it generates code. This slowed development down unnecessarily while I had to fix up the formatting. One major issue that is of major concern is the excessive amount of scanning that occurs whenever a change is made to a design file. This verges close to being a performance show stopper. Hopefully this issue is becoming priority number 1 with the Composer team, and will be fixed by the time the final version of NB 6.9 arrives. If necessary NB 6.9 should be delayed by about a week. It appears that the scanning issue is very common in other areas (eg JavaFX, PHP, Java).

On the positive side using the menu bar customiser proved to be a highly productive experience. Initially when I first used it I though it would not be as productive to use as Matisse's one (NB's Swing GUI builder). Who wants to manually type out the menu structure? However it proved to be the direct opposite, even saving me from manually renaming/positioning all menus/menu items. Also each menu can be customised individually without having to create the menu from scratch.

Another positive with using the Composer is that is generates very readable code that happens to be in a coding style that is very similar to my own. Any generated event handlers and binding functions/variables can be manually repositioned/changed on the fly. For handling data/state there is the Composer library which came in handy since I needed a general JavaFX database library for the application. There were two issues with the library which I was able to fix since all the source files are automatically created (for the first time only) in the project's src directory.

Listed below are the issues I encountered with the Composer and its library (most issues have workarounds):


Getting a value from a Record returns null

Ensure that the column name is correct and is in the correct case (eg in upper case).


Composer does not allow a custom control to be used visually in the Design Pane

Use a place holder Container (eg Group) in the control's place, and manually add the control to the Container.


Cannot directly resize Container's in the Design Pane

No workaround.


Cannot set any of the properties for the Stage (eg the title) in the Properties window

No workaround.


JDBC Data Source customiser does not handle a custom connection string

Change the connection property in the Properties window for the data source.


Sometimes the design file cannot be manually saved when a change is made

Close the design file and select the Save option when the dialog appears.


Excessive scrolling needs to be done with a design file in Design mode

No workaround.


Refactoring breaks when done in a design file (in Source mode)

Do manual refactoring without the assistance of the code editor's refactoring functions.


JavaFX Script code generated the Composer does not honour the user's formatting settings

Manually format the generated code.


DbDataSource returns a null RecordSet via getRecordSet function

Ensure all DbDataSource properties are correct. Also you may need to invoke the fetchData function before getting the RecordSet.


RecordSet returns null when using get(colName) function on a table column of type CLOB

Manually add code in the fetchData function (in DbDataSource) for retrieving CLOBs.


DbDataSource does not return the last insert ID used

Manually add code in DbDataSource to get the last insert id. Only a workaround if the chosen DB has a function that returns the last insert ID.


RecordSet does not have a specific function for retrieving a xxx type value from a column

Use the get function instead to retrieve the value and cast it to the specific type

JavaFX 1.3 Tooling

Many people are bound to cover what is new with JavaFX 1.3. Instead of covering the same thing I will cover the tooling for JavaFX 1.3. NB 6.9 Beta and JavaFX Composer for NB 6.9 Beta will be covered in this blog post. Currently in terms of cross platform tooling for JavaFX there is Inkscape (for creating images in FXD/FXZ format), NB (main JavaFX IDE), and JavaFX Composer (JavaFX GUI Builder in NB). As for the JavaFX Authoring tool it is currently in Alpha, though it will soon be at the Beta stage.

Most of the changes for the NB JavaFX editor is with hints and formatting. Previously the only hints available were restricted to “Implement Abstract Functions” and “Fix Imports”. However hints have been extended to include “Add Class XX” and “Add Function XX”. It is strange to see no options for setting up hints for JavaFX despite additional hints becoming available. You can now see all tasks for JavaFX in the Tasks window (eg TODOs). Additional items are available in the Palette, which cover some of the new items in JavaFX 1.3 (including the controls). Of note is the quicker build performance when doing a build/run of a JavaFX project.

Formatting of JavaFX Script code still requires a bit of work before NB 6.9 is released. For instance I found that the formatting of string literals would cause a huge number of blank lines to be inserted. Although it does not prevent a compile it is a huge nuisance that shouldn't be there in the first place. Another issue with formatting is the fact that braces for object literals are placed on a new line half indented, even though I have set the braces to just be on a new line. Additional formatting options are now available in the Options window for JavaFX.

In terms of the biggest changes most of them are found in JavaFX Composer. Once again the build performance is quicker. One can really notice the difference after making a simple change such as readjusting the size of a control on a Scene. The palette now includes the new items in JavaFX 1.3 (especially the new controls). With the Properties window there is a convenient button which allows one to quickly toggle the display of a category via a popup menu. This is very handy when you are not using a wide screen display. There is now concrete specifications for the JavaFX Composer QL (Query Language), which is used for filtering data sources.

JavaFX Composer is much more responsive compared to the previous version in NB 6.8, and properly outlines the contents of a design file (inside the Navigator window) in Design mode after exiting Source mode. Certain controls now have a corresponding customize button in the Properties window to customise them like one of the Composer templates. All data sources now have a “Raw Data” tab so you can see any data before it is filtered. In the design pane guidelines now appear when placing a control inside a Container (layout). Unfortunately there is still no support for handling custom JavaFX controls/nodes. Hopefully this will be remedied in a maintenance release.

With so many new changes in JavaFX Composer I have only covered some of the significant ones. All other changes can be found on the NB Wiki. Additional new features to note with NB which apply are basic refactoring options for CSS files, quick access to make simple changes to an Ant build (via double yellow arrow button), and build server support (with Hudson).

As you can see Oracle have certainly not stood still with the JavaFX tooling. Further adding to this is the fact that they are collaborating closer with Inkscape in realising that this vector graphics tool is commonly being used amongst JavaFX developers. One can hope that Oracle will establish closer ties with other open source tool vendors in the future. Tooling for JavaFX is certainly in a much better state than it was over 6 months ago.

JavaFX Composer Overview (Update)

Since the preview 2 release many changes have been made to JavaFX Composer. The majority of the changes are with the Data Source templates.


Changes Made

• More properties exposed in the Properties window
• Shapes, colours, effects are now available in the Palette window
• HTTP Data Source now handles the HTTP Post method
• JDBC Data Source now supports setting up CRUD instead of just reading from a DB table
• When setting up animations one can now use an inherited state animation
• Standard attribute names used for extracting data for each data source (in Data Source Customiser)
• File Data Source now supports loading files from additional sources (local FS, resource from class path, storage using the Storage API)
• Analyser added to identify design problems with a form

Improvements Needed

• Remove irritating requirement to have an object selected first (in design pane) before having it moved, rotated, bring up an accompanying context menu etc
• Display chart(s) in real time inside the design pane
• When an event handler's name is renamed some refactoring needs to occur on every property that is affected by the change
• Still there is no ability to add custom controls/nodes to the palette (absolutely essential)
• Allow shapes to be visually resized/rotated/skewed inside the design pane
• Display animations for affected objects inside the design pane (eg an animation preview like OO Impress)
• Display all visual objects inside the design pane in real time based on their set properties
• Provide facilities for easily creating custom controls (visual and non visual) in a visual way (eg wizards, templates in palette, design pane setup for designing a custom control)

In general the biggest improvement that needs to be made in the JavaFX Composer is to allow custom controls/nodes to be incorporated. Since JavaFX is designed to allow custom front ends to be developed why prevent people from using 3rd party content (eg controls, graphics)?

JavaFX composer doesn't stop custom graphics from being incorporated so why should custom controls be any different? After all JavaFX already has a standard system for developing custom controls (using MVC – Model/View/Controller), so it should be possible to use custom controls.

JavaFX Composer Overview

With the release of JavaFX Composer (the JavaFX GUI builder for NetBeans) I decided to go through a general overview of the tool. With the overview it will answer some key questions which include identifying any missing areas not covered by the tool, point out any of the tool's strengths, point out any of the tool's weaknesses, and look at the major differences between Masisse (the Swing GUI builder for NetBeans) and JavaFX Composer.



Key Questions

Before the release of JavaFX Composer there were some key questions compiled about the tool that needed answers. These questions are:

• Can data binding be done visually?
• Does JavaFX Composer handle creating/editing animations visually?
• Are GUI changes reflected in real time as they occur?
• Is the .fxc file format also used in the JavaFX Authoring tool (for exchanging view data)?
• Can custom JavaFX controls be added to the palette via drag 'n' drop or through a wizard?
• Does JavaFX Composer support visual binding of data to/from a DB?
• What differences are there between JavaFX Composer and the JavaFX Authoring tool?
• What are “states” in JavaFX Composer?
• What advantages will JavaFX Composer have over Matisse?
• What is the relationship between JavaFX Composer and JavaFX Designer?

Differences With JavaFX Composer Compared To Matisse

• Separates the view from the controller and model
• Supports a number of data sources for data binding beyond just DB and general objects
• Supports the ability to do animation visually
• Does not support doing dynamic layout visually
• All generated code is clean and easy to understand
• Handles layout for multiple screen sizes
• Supports the idea of “states” with GUI design for GUI navigation
• Can toggle the display of one or more groups (categories) of properties
• Uses a separate XML type file for storing the GUI design data (not the view)
• Does not allow JavaFX classes, JavaFX controls (custom ones), and JavaFX classes that extend CustomNode to be added to the palette

Advantages

• Can do animations visually for any JavaFX control
• Uses “state” based design
• Generates clean code that is easy to understand and can be customised
• Template system greatly simplifies building forms by having all options in one place and templates can be easily customised after they are created

What To Improve

• Need additional extensibility for JavaFX Composer with the ability to add new JavaFX controls, custom nodes and classes to the palette window
• Have a standard system for developing custom templates that can be added to the palette window
• All public properties for controls and JavaFX classes should be exposed in the properties window
• Real time display of controls that have continuous animations which are started immediately
• Provide official documentation for JavaFX Composer that covers all built in features
• Provide writing capability to all data sources that are supported by JavaFX Composer
• Use the fx source files (which contain the view) instead of the fxc files if two way editing is supported (use a single file instead of two)

Conclusion

Currently the biggest issue with JavaFX Composer is the fact that extensibility is too limited. For example a custom JavaFX control is created and a JavaFX developer wishes to use it with the tool for building a JavaFX application, by adding it to the palette window. Data binding in general is restricted to reading for some data sources (JDBC, File System, File, HTTP). With the next release of the tool one would expect that there will be the ability to write to all data sources.

Templates are a great productivity booster in JavaFX Composer since all options for creating and customising them is under one place. This is unlike wizards where one has to rerun the wizard if anything has to be changed, and not all options are covered by the wizard itself. Also each template produces code that can be easily customised when needed.

At the moment there is an awkward situation where if one edits an fxc file the corresponding fx file is not updated. Also this occurs (in the opposite direction) if one edits the fx file instead. With an fxc file it is more difficult to edit and harder to read compared to an fx file. Why have two different file types present for a JavaFX application's view? It is highly recommended that the fx file is solely used if two way editing is supported in a future release.