Posts Tagged ‘container’

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 – Custom Layout

December 16, 2009 Leave a comment

Bookmark and Share

In one of the previous post I suggested to use Layout and Layout related attributes. But it didn’t clearly demonstrate how to use that for developing an application. So here is an example which uses Panel to layout the components.

To launch click on above image or

The components can be positioned using various methods available in Container such as getManaged, getNodePrefSize, positionNode, resizeNode and layoutNode. The entire layout of components is done in onLayout function. This function will be invoked when ever there is need to layout the content nodes. We may explicitly update layout using requestLayout function.

Try it out and let me know feedback..

Categories: javafx Tags: , , ,