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

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, RIA Screen Layouts or RIA Screen Design 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.

This post is to remind myself that my first preference must be to use layout, LayoutInfo and layout related attributes such as Node.layoutBounds,Node.layoutX, and Node.layoutY instead of Node.boundsInLocal,Node.translateX and Node.translateY. Amy Fowler, Baechul and Jonathan Giles had discussed about this in detail.

Earlier I was using translateX, translateY and boundsInLocal for layout of node. So when should we use layoutBounds, boundsInLocal and boundsInParent? Amy Fowler’s blog has a diagram which shows difference between these attributes.

If the node does not use effect, opacity or clip, use layoutBounds to find the bounds of node. In this case layoutBounds and boundsInLocal will be same. If the node has one or more of those attributes set, then use boundsInLocal. Use boundsInParent only if some transformation attributes such as translateX, translateY, scaleX, scaleY, layoutX, layoutY etc is set and we need the bounds which includes these transformations.

Try your best not to use boundsInScene. Luckily the attribute is removed and a new method – localToScene(localBounds: Bounds) is provided. Using bounds with respect to scene complicates the computation of bounds and has major impact on performance.

In short we may mostly require just layoutX, layoutY and layoutBounds to layout a component. Use transformation attributes such as translateX, translateY etc for animation as mentioned in my previous blog. You may also be interested in related discussion happening at fxexperience.com and more layouts from JFXtras.