EGL Development User Group

EGL Development User Group

EGL Development User Group

The EGL Development User Group is dedicated to sharing news, knowledge, and insights regarding the EGL language and Business Developer product. Consisting of IBMers, HCL, and users, this community collaborates to advance the EGL ecosystem.

 View Only

Rich UI layouts made easy

By Jiyong Huang posted Wed April 01, 2020 09:18 PM

  
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 v8.0.1.1, 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.

image
 

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. 

image

Using GridLayout, you can make the most use of Design view and quickly create and modify complex UIs. 

Theresa

0 comments
0 views

Permalink