JavaFX - How to Layout
By Rakesh Menon on Mar 08, 2010
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..
We will try to implement this UI in 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, RIA Screen Layouts or RIA Screen Design to get some idea..
<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="http://javafxdemos.googlecode.com/hg/resource/JavaFXLayout/JavaFXLayout.js"></script>
Please try it out and let me know feedback..