JavaFX – Modal Dialog

How to implement “Modal Dialog” in JavaFX ? Before going into details of implementation, lets first have a look at common requirement for “Modal Dialog”.. It must block..

  • Mouse Events beyond the modal dialog
  • Key Events beyond the modal dialog
  • Execution of current Thread until dialog is disposed

JavaSE 6 allows to specify various types of modality as in ModalityType. We will try to implement behavior some where between Application and Document Modal 🙂

To launch click on above image or

Use of “Block EDT” may lead to deadlock and freeze application

Blocking Mouse Events is very easy, we just need to place a Rectangle whose width and height spans the entire Scene. Then set Node.blocksMouse attribute to true.

Key Events can be restricted if we could ensure that none of nodes other than child of Modal-Dialog receives focus. One way to achieve this is to disable default focus traversal. Get a list of all focus-traversable nodes in the dialog. We can set Node.focusTraversable attribute to false. Now add key-listeners to all nodes. Since focus traversal is disabled, the node will receive TAB key events. When the node receives TAB key event we can explicitly move the request to next node by invoking Node.requestFocus. Request focus for previous node for Shift + TAB key event. Please refer to FocusCycleRoot.fx for more information.

Now comes the interesting part – block execution of current thread – But JavaFX is executed on Event Dispatch ThreadEventQueue.isDispatchThread() will return true. So we cannot block this thread, as it will freeze the user interface. Assuming that the underline Toolkit of JavaFX is built on top of AWT Toolkit, we can use AWT APIs to get around this situation. Before blocking the current thread, we can push a new EventQueue instance into System-Event-Queue, so as to create an alternate path for dispatching events. After disposing the modal dialog, we can restore the original event queue using pop. Please refer to for more information.

Above solution is not stable enough and also not future proof. It assume that Toolkit is AWT and we have access to EventQueue (For which we need to sign the Applet), also the API may not be compatible with other profiles. In addition to this, pop API has tendency to create deadlock, there were attempts to fix this in various releases, but still doesn’t provide stable behavior (especially when called from JavaFX).

So we may have to revisit the requirement – “block execution of current thread”. Instead we can write the program in such a way that the display of MessageBox will be the last statement in current execution block. Thus we don’t have to block the thread. Then MessageBox can handle redirection to other blocks of code by invoking functions. Thus MessageBox will act like a decision box. This approach will work with most cases and can emulate the “block thread” behavior. Also you don’t have to sign the application. Please refer to MessageBox.fx for more information.

Also JFXtras has built in Dialog implementation which supports modality. Please refer to JFXtras for more information.

Please try it out and let me know feedback..

Categories: javafx Tags: ,

JavaFX + JSP

March 29, 2010 Leave a comment

There were many queries related to integration of JavaFX with JSP or JSF. JavaFX is executed on client side, JSP & JSF resides on server, so “integration” in this context can be an overloaded term. Lets try one approach..

Its easy to just copy-paste all of those JavaFX launch script into your JSP. Another approach is to write a Custom Tag Library which will generate and embed the necessary code. JSP pages will use this tag library. This will allow to consolidate all JavaFX related code, customize the generation of JavaFX tags, pass additional arguments which are specific to your application.

A simple tld is shown here – javafx.tld – It accepts all parameters that are required to construct JavaFX applet tag as argument. You can pass additional arguments (in this case it passes User-Agent header information) to JavaFX Applet. The tag library is implemented by – It can be used as any other tag library as shown in – index.jsp. Rest of JavaFX – Server communication can be handled directly in JavaFX layer using AJAX like approach – REST WebServices – or directly invoking server technologies using JavaEE APIs

Its just a start, but I think it helps to consolidate and customize the “integration”..

Categories: javafx Tags: ,

JavaFX – Wizard UI

March 23, 2010 Leave a comment

This demonstrates implementation of simple wizard user interface using a combination of Container, Button and bind.

To launch click on above image or

I have a main Container – Wizard. This has the navigation buttons and a sequence of Containers – WizardPanel, which contains the user interface for each panel. A variable selectedIndex in Wizard keeps track of currently shown panel. Variable selectedPanel holds the instance of selected panel. A new panel instance is set to this variable when index is updated. The node is bound to content so as to update UI when a new panel is set. Disabled state of “Back” and “Next” button is set dynamically using bind with selectedIndex.

The panels in demo uses a series of SVG images – Duke, Lamborghini and Tiger. Its converted into FXZ format using JavaFX Production Suite – SVG Converter and ofcourse the text is from wikipedia

Please try it out and let me know feedback..

Categories: javafx Tags: , ,

JavaFX – How to Layout

Just thought of providing an outline for design and implementation of JavaFX application. I briefly described this in one of previous post – Custom Layout.To start with we will most likely receive a huge PSD file from designer. You may use Production Suite tools to import the content into JavaFX. Here is manual approach..

First we need to identify various functional areas in the UI. Most likely the UI is already grouped. Areas can be Settings, Authentication, Data-Entry/Update View, ToolBar, Search etc. From this we can identify set of packages to be created in JavaFX. If the UI is simple, we may have the entire UI under “view” package. Now we can breakup the UI in to multiple classes based on the functional area. It will be easier if we could make these classes extend Container or CustomNode. From there we come down to actual layout of Controls..

Given below is the layout used in one of MiG Layout Demos – Layout Showdown. Please refer to MiG Layout Site for more information. We will try to implement this UI in JavaFX. Please refer to JFXtras project for more information on MiG Layout for JavaFX.

Now we need to visualize a grid on top of the layout so as to identify some pattern in UI. It will be much easier if we could do this mapping. You may refer to various sites such as Layout Cookbook or RIA Screen Layouts to get some idea..

Once we get the mapping, we can implement the layout using various layoutNode functions in Container. Please refer to PersonalDetailsView.fx source for more information.

To launch click on above image or

Please try it out and let me know feedback..

Categories: javafx Tags: , , ,

JavaFX – Flat Carousel

There was a request to write a Flat Carousel, here is an attempt using HBox, ClipView and Timeline.

To launch click on above image or

The HBox content is clipped using ClipView layout. When user drags the node, ClipView.clipX is updated accordingly using a Timeline + EASEOUT Interpolator. We may use custom Interpolator as shown in SpringAnimation sample. Two buttons (vertical bars) are provided on both sides to scroll as per the width of the Carousel.

Please try it out and let me know feedback..

Categories: javafx Tags: , ,

JavaFX – Deployment

I would like to highlight two import features in java deployment – Deployment Toolkit and Download-Service (available in Java 1.6.0_18). There is an excellent article on Deploying RIAs in Mixed Environments. This will help in understanding and resolving many of Java/JavaFX deployment issues. JavaFX deployment script – dtfx.js – already does lot of these checking. But these APIs will enable further customization related to JRE-Version, OS, Browser etc.

Please click on above image to load the HTML page with JavaScript which demonstrates use of these APIs

DownloadService provides APIs to query user cache. This can be used to request and update resources required by your application. It may be used to query existence of JavaFX runtime extension in cache. Sometimes this runtime is cached in “system” cache, and hence it may not be possible to query using this API. Please refer to and DownloadService.html for more information on usage. Entire list of JNLP Service APIs is available here. Refer to “Deployment” section in JavaFX Tutorials for more information..

Please try it out and let me know feedback..

Categories: javafx Tags: , ,

JavaFX + Yahoo Weather

February 25, 2010 Leave a comment

Bookmark and Share

JavaFX Composer preview is available. You can install this plugin. In NetBeans IDE, goto “Tools” -> “Plugins” -> “Available Plugins”. Select “JavaFX Composer” and install the Plugin. Please refer to NetBeans JavaFX Composer for more information.

Summer has set in like a flick of a switch! So couldn’t think of anything else other than Weather. Developed a simple Weather application using Yahoo Weather RSS Feed. It was much easier to visualize and develop using JavaFX Composer, especially for small widget like applications. Soon we will be able to develop complex application using this…

To launch click on above image or

The city is set to Bangalore city by default. Double click on the widget to enable the TextBox, in which you can enter your ZipCode or City and press “Enter” key. Ideally I must persist this information using Storage APIs, but I leave that task to you!

For getting the information from Yahoo, we need to first identify the Where On Earth ID – WOEID of the city using its ZipCode or Name. Please refer to Yahoo WOEID documentation for more information. Once we identify the WOEID, we can use forecastrss feed for getting the weather information.

Please try it out and let me know feedback..

Categories: javafx Tags: , , , ,