JavaFX – Rotate Chart Axis Label

It will be difficult to fit in long labels when they are horizontal. Labels will overlap. So it may be nice to rotate the label by small angle so as to fit long text. We may do this by customizing CategoryAxis. As of now it depends on some internal implementation, but it will be nice to have this feature as part of public API

For Applet mode, click on above image. For standalone mode

Try it out and let me know feedback

JavaFX[1.3] – Power of CSS

There was a question related to setting of background color for TreeView. Yes we can do lot of customization of Controls using CSS. It may be a bit difficult at this point of time due to lack of proper documentation. But you can start playing with CSS using StyleEditor sample.

Below samples shows ListView and TreeView customized using javafx.css file. Thanks to Jasper Potts for help

For Applet mode, click on above image. For standalone mode

Try it out and let me know feedback It will be much much easier once the official documentation is in place..

JavaFX [1.3] – TableView (?)

Yes! TableView or Data-Grid is really important control and must be included in JavaFX. If you are really in hurry and can use JavaFX 1.2, you can use XTableView from JFXtras. They are also working on 1.3 complaint version.

If both these strategies failed, you can still put together TableView using a group of ListView. All foundation for implementing a scalable TableView is already in place based on Cell API.

For Applet mode, click on above image
For standalone mode

Mean while you can use above TableView implementation. View is constructed using a set of ListView. The data model is direct copy of Swing. So didn’t really put any effort for implementing this…

Please try it out and let me know feedback..

JavaFX [1.3] – TreeView

JavaFX 1.3 has TreeView as preview control. Here I’ll demonstrate how to use it to implement a File Browser. For this, we need to implement a custom TreeView.cellFactory which will return a TreeCell instance (View) and provide an implementation for TreeItem (Model). TreeItem.createChildren is implemented so as to add more and more items, as and when user expands the nodes (Drive/Directory).

For Applet mode, click on above image

For standalone mode

Try all preview controls and give your valuable feedback and file RFEs/Bugs in JavaFX – JIRA

JavaFX + Facebook

One of my previous post discussed about OAuth based authentication for Twitter, LinkedIn and Yahoo. Here I’ll discuss about authentication and usage of Facebook. It also provides OAuth based authentication, but the flow and usage is slightly different. Please refer to Desktop Application Authentication for more information.

For new application, please ensure that you register your application with Facebook. Specify Connect URL as base URL of deployed applet. Note down Application ID which will be used as client_id. Using client_id and Applet URL we can create the authorization URL as shown below.

Authentication Steps:

• Click on above link and login to Facebook
• Authorize JavaFX Sample application to access your Facebook profile
• Page will be automatically redirected to the JavaFX Applet page
• Extract the access_token parameter from URL
• Pass access_token to JavaFX Applet as argument
• Use Facebook Graph API to access all rest of information

Please refer to JavaFXFacebook.html for more information related to extraction and passing of access_token and client_id to JavaFX Applet. The view is implemented using ListView. Please refer to New to JavaFX 1.3: Cells for usage on ListView + ListCell APIs.

Update: There was some confusion due to additional steps related to “redirection of url to applet”. Yes, Twitter, LinkedIn and Yahoo didn’t have this concept. The difference is, there user needs to copy the access_token numbers from the page and paste it in application. In case of Facebook, due to url-redirection, the access_token can be automatically passed to application as argument. So user don’t have to do any copy-paste.

Try it out and let me know feedback

JavaFX [1.3] – Save As Image

JavaFX – Save As Image code updated to be compatible with JavaFX 1.3
Please refer to JavaFX13Utils.fx for more information. You will need to update only if you are using internal APIs as mentioned in this forum thread.

For Applet mode, click on above image

For standalone mode

Try it out and let me know feedback

JavaFX + OAuth

As usual will start off with Wikipedia – OAuth (Open Authorization) – is an open standard that allows users to share their private resources (e.g. photos, videos, contact lists) stored on one site with another site without having to hand out their username and password. With more and more services moving to OAuth model, I think we need to try to have a generic implementation. Here is an attempt…

I prefer not to duplicate all those details available in various resources, so suggest to read few articles if you are not familiar with concepts of OAuth. Yahoo has a very detailed article outlining the flow of OAuth authorization or Beginner’s Guide to OAuth from Hueniverse. Please refer to same for more info..

You can try out yourself with demo below. You need to get consumer-key and consumer-secret from respective service providers – Twitter, LinkedIn or Yahoo

To launch click on above image or

First enter oauth_consumer_key and oauth_secret_key, click “Request Token” button. If key is proper, you will receive a message in log with a URL. Copy and paste that URL in browser and follow the instructions. Once you grant access to your application, it will return a number. Copy the number and paste it as oauth_verifier. Now click on “Access Token” button. It will return you oauth_token and oauth_token_secret which can be used for all subsequent communication.

Yes its a bit difficult to understand the overall flow and implementation. I have tried my best to simplify it. The API may be simplified a bit more. I have signed up for contributing to JFXtras long time back, but haven’t done anything yet. My objective was to pull in the various parsers that are used in different samples and create a library. I think all these can be incorporated into that…

Usage:

def oauthAPI = OAuthAPI.getInstance(     <Service-Provider>,      <oauth_consumer_key>,     <oauth_consumer_secret> ); // Request Token Callback oauthAPI.onRequestToken = function(response:String) : Void { } // Access Token Callback oauthAPI.onAccessToken = function(response:String) : Void { } // Request Token oauthAPI.requestToken(); // Access Token oauthAPI.accessToken(<oauth_verifier>);

Refer to LinkedInAPI.fx to get an idea on how we can extend the implementation to have fulll fledged support.

Please try it out and let me know your suggestions and feedback..

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 Thread – EventQueue.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 EventQueueUtils.java 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..

JavaFX + JSP

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 – JavaFXTag.java. 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”..

JavaFX – Wizard UI

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..