Rich UI layouts made easy
TheresaRamsey 1100004FVX Visits (2807)
In RBD v8.0.1, laying out a Rich UI from the Design view became much easier. When you create a Rich UI handler, you'll get a GridLayout widget by default in the code template. GridLayout is a flexible layout widget that replaces the Box widget that was part of the RUI handler template in RBD v7.5.x. With GridLayout, you can drag and drop widgets from the palette into any cell of the GridLayout. Change your mind on where a widget should go? Just drag and drop the widget to a different empty cell. Easy!
You can define the total number of rows and columns from the Properties view to best suit your needs; the default is 4 rows and 3 columns. As of RBD v18.104.22.168, you can insert a row or column in your GridLayout. The Insert commands come in handy when you are using the Visual Editor and find that you need some additional space in the middle of your RUI.
The cells in the GridLayout automatically resize based on the largest widget within that row or column. You can define alignment and span properties under the Layout tab. Have a widget that should occupy the space of multiple columns? No problem! Just set the horizontalSpan property. Want to left align the widget? Set the horizontalAligment property to LEFT. Alignment and span properties are available for horizontal and vertical orientations. You can also define padding, either by cell or for the entire GridLayout.
Using GridLayout, you can make the most use of Design view and quickly create and modify complex UIs.