Exercise: Converting a simple form to use CSS Flexbox for layout
See the DWCTraining/05_CssLayouts/Exercise-ConvertToCssFlexbox.bbj program for the exercise source code.
This exercise displays a short form in a window with flow layout.
Exercise Goals:
1) Augment the css! variable to set the window's CSS display property to "flex" to switch to a flexbox layout.
2) Augment the css! variable to set the window's CSS flex-direction property to "column" so that the controls are laid out vertically.
3) Augment the css! variable to add padding around the window and a gap between the controls.
4) Note that we used the succinct versions of the BBjWindow::addEditBox() methods that just take the control's contents, and we chained the BBjControl::setAttribute() method resulting in an edit box with a label in one line of code, as shown below:
myName! = window!.addEditBox("Joe Blow").setAttribute("label", "Name:")