Grid container support
By Rastislav Komara on May 31, 2010
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.
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.
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.
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.
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.