Grid container support

In JavaFX release 1.3 in preview package can be located Grid container (com.javafx.preview.layout.Grid). This container implements grid layout idiom to simplify organization of controls in form like layouts. This container is in early stage of development but is really promissing and will be improved in next realeases. This blog post wants to provide overview how JavaFX Composer support this container.

Container overview

Grid overview image Grid organize content to set of rows. Rows are stored in sequence by order. Current implementation does not support specifying row index. As seen on image above, composer allows you to set Design Rows/Columns properties to simplify work with grid in design time. Unfortunately this property is not reflected in runtime because is not supported by preview implementation. The other properties works as on any container.

Creating simple application

Now is time to create simple application. The most important part of creating application in grid layout is ability to set element where I want. The Composer allows you to create grid, set desired number of cells and drag and drop components from palette to design on precisely selected cell. The target cell is highlighted in red. If there is no room to spare, just drag it on bottom or left border of container and suggestion shows that new cell will be added as seen on picture bellow. 

Adding new cell to grid by drag and drop mouse gesture

If you need to just add cell to already created grid, it is also simple task. Just press plus button on top or left side of grid (you need to have grid selected) and new column or row is added to grid and corresponding components are shifted to right or bottom of grid. The next important task is move already placed element within grid. It is possible by mouse gesture (just select and drag to destination cell) or manually typing into properties window.

Grid X and Grid Y properties

As seen on left, in Properties window if you activate Layout Info properties you can see three properties which allows you to handle exact position and number of occupied cells in grid. Grid X and Grid Y  properties hold column and row index of occupied cell. You are free to enter any number, also outside of currently visible number of columns or rows. But be careful! Rendering a lot of empty space consumes a lot of time and may slow down your IDE. You may be surprised by missing Grid Vertical Span. Yes, this property is missing because the preview version of grid does not support vertical span of elements.

Summary

The Java FX development team provide Grid container in preview quality and we invest 4 weeks to bring its strengths and benefits to NetBeans JavaFX Composer. There is a lot of things which was done, to make it as easy as possible for end user to manipulate the grid. Also there is several pitfalls and limitations. But this container is really promising and we are closely working with JavaFX Runtime team to make it even better.


Comments:

Hi, is this Grid Container already available on NetBeans 9B/ JavaFX 1.3 ? I am looking for it on JavaFx composer palette but it isn't there. Thanks.

Posted by Rafael Moreira Cunha on June 01, 2010 at 07:18 AM CEST #

In NB 6.9 Beta the grid is missing. It will is available in NB 6.9RC2 and will be in final release.

Posted by Rastislav Komara on June 01, 2010 at 08:30 AM CEST #

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

NetBeans JavaFX Composer blog

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