BBj 24.02+ DWC Training

See the DWCTraining/05_CssLayouts/Exercise-ConvertToCssLayout.bbj program for the exercise source code.

This exercise for Chapter 5 - CSS Layouts consists of a window that has a contact form made up of labels and edit boxes.  The window is already set to use flow control, so if you run the program in this state the contact form will flow from left to right.

Exercise Goals:

1) Add code to the css! variable that's applied to the window to change the CSS "display" to "grid" to make the window adopt a CSS Grid layout.

2) Augment the css! variable to set the window's "grid-template-columns" CSS property to a value that forces two columns, such as "auto 1fr".

3) Augment the css! variable to add padding around the window and a gap between the grid's rows and columns.

4) Augment the css! variable to vertically center the labels and edit boxes by setting the "align-items" CSS property to "center".

5) Add a setStyle() method call to the [Submit] button that sets the CSS "grid-column" property to a value that causes it to span both of the grid's columns.  Hint, the value is the starting line (not column) followed by a /, followed by the ending line (not column).  If it were given in columns, we could set the value to "1 / 2".  But since we have to supply grid lines, we'll need to set the value to "1 / 3" or use the span syntax of "1 / span 2".