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. Refer to MiG Layout Site for more information. Refer to JFXtras project for more information on MiG Layout for JavaFX.

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

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.

<script src="http://dl.javafx.com/1.2/dtfx.js"></script> <script src="http://javafxdemos.googlecode.com/hg/resource/JavaFXLayout/JavaFXLayout.js"></script>


To launch click on above image or

Please try it out and let me know feedback..


<script type="text/javascript">var dzone_style = '2';</script> <script language="javascript" src="http://javafxdemos.googlecode.com/hg/resource/JavaFXLayout/zoneit.js"></script>

Comments:

Hi Rakesh,
How can we arrange multiple panel in to one scene? Actually i am developing the menu driven code which required multiple panels.And I am also interesting in JFXtras and other third party tools for this project. Thank you consideration.

Posted by Omkar on April 15, 2010 at 08:23 AM IST #

@Omkar You can try the approach used in Wizard-UI sample or use Stack layout.

http://blogs.sun.com/rakeshmenonp/entry/javafx_wizard_ui
http://java.sun.com/javafx/1.2/docs/api/javafx.scene.layout/javafx.scene.layout.Stack.html

Posted by Rakesh Menon on April 15, 2010 at 08:43 AM IST #

Thanks Rakesh

Posted by Omkar on April 15, 2010 at 09:07 AM IST #

Post a Comment:
Comments are closed for this entry.
About


The views expressed on this blog are my own and do not necessarily reflect that of my organization

Search

Categories
Archives
« April 2014
SunMonTueWedThuFriSat
  
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
   
       
Today