Working with EWB’s Responsive Design
by Erick Engelke
August 8, 2024
First time users of EWB will often meticulously design their screens so they look great on their development system, but are surprised when viewed on a different device (laptop. tablet, phone, etc.). How can you fix that?
Responsive design (RD) is when the content flows based on the available display space, making maximal use of the display. With RD you tell the system how to use the space conceptually, and let the display manager actually position your content.
The components will automatically update if the screen dimensions (ie. the window) change, or if the phone or tablet is rotated. It’s quite impressive.
The resulting application will often look better. But this is admittedly more challenging and more time consuming. There is always some price to pay for new functionality.
Concepts
I think of the whole display surface (ie. window, or box or panel) as starting fully available, and that space being used up incrementally by controls you add (eg. Labels, Buttons, Edits, etc.), each control leaving behind less space than before it was added.
You can grow your page from any side, (top left, left side, top center, bottom left, bottom center, bottom right, etc.), each time eating away available space.
First Example
My suggestion is to do a test project to learn:
-
Start by placing controls with the GUI, but try to do it in some order, either stating at the top left, then going across the top row, then going down a bit, adding more components, and then slowly advancing accross the display space.
-
Next, switch from the Library mode to the Navigator mode (these are on the lower right side of the IDE).
-
Using the Navigator, drag the ordering of components to the order in which you expect them to be drawn. If you did step 1 right, they are in order. But if you later added something out of order, now is the time to correct the ordering.
-
Using Shift Click, either in the IDE’s screen preview or in the Navigator, it doesn’t matter which, select all items in the top row going across. With all those items selected, press Layout then set Consumption to lcRight and Position to lpTopLeft. Those selected components will immediately reposition.
-
You may wish to adjust the Margins. With all the previous components still selected, set Margins Top to 5 and Left to 5 too. This will space out your components slightly. Each eats into the available space and is used to position the next component.
-
Click the background to unselect all controls, then select the last control in that row, and change its Layout Consumption to lcBottom, and check the Layout Reset to True. That means the system will progress to the space below all controls which have their Layout Consumption set to anything.
-
Do the same thing with each row across.
You now have your first responsive design app.
Reset?
You may wonder what reset does. If you just set Layout Consumption to lcBelow, EWB will continue below this component, whereas Reset sends it back to an earlier spot on the next row. (Importantly, I don’t say the beginning of the next row, because maybe something else has consumed some of that space too.)
Stretching
Often you will stretch the last control in a row to fill the rest of the horizontal (or vertical space). If so, set the Stretch property to lsRight, or lsBottomRight to consume the rest of the available display.
Bottom First
Often you will start at the bottom to put your copyright notice and maybe status information, so:
Layout Position = lpBottomCenter
or
Layout Position = lpBottomLeft
Layout Consumption = lcTop
Then set the next component to start at the lpTopLeft position.
The Consumption of the bottom component will eat up the bottom of the available space
Adding Controls later
If you have to add a control later that goes somewhere in the middle, you just add it like normal, then use the Navigator to place it logically after some other component, the set its Layout Position and Consumption (and maybe Reset) properties.
Alignment
Many controls default to Auto Width, like Labels, so they will not line up. You can turn off Auto Width and set each control’s width to a predetermined value.
Also, Labels, Edits and Buttons will not be vertically aligned nicely. Just add small integer to the Label’s Padding Top to make it look right.
versus
Smart Trick(s) to simplify complicted screens
A complicated form may have many, many controls, and the strategy above may be challenging.
I recommand adding BasicPanels for each horizontal row, and adding components into it. Then you use RD to organize controls inside the panel, and RD to also organize the panels.
There is a trick to moving controls into a panel. Start by creating a BasicPanel somewhere. Then select the controls in creation order, then press Ctrl-X to cut them from the GUI, then click the BasicPanel and Ctrl-V to paste those cut controls into the panel.
Notice they are indented in Navigator because they are now owned by the BasicPanel.
