Working With Multiple Layouts

[jyoung]

A problem I have when having multiple layouts is getting the controls/fields in the right layoutitem for the different layouts.
Even though I can toggle the active layout, all the controls still show in the designer and it gets really difficult trying to move controls from one layoutitem into another. So much so, that I pretty much give up on the designer after my first layout then work with other layouts directly in the code. For example, I will often start with one layout such as a desktop or mobile layout, then copy the code for that layout and make a new one adjusting the layoutitems as needed.

Are there any tips or suggestions on how to make working with multiple layouts easier?

For example this is one reusable part that has three layouts (a Main Container, Narrow and Wide)

Code: Select all

define_com class(#PRIM_TBLO) name(#MainLayout)
define_com class(#PRIM_TBLO.Column) name(#Column1) displayposition(1) parent(#MainLayout)
define_com class(#PRIM_TBLO.Row) name(#Row1) displayposition(1) parent(#MainLayout) height(45) units(Pixels)
define_com class(#PRIM_TBLO.Row) name(#Row2) displayposition(2) parent(#MainLayout)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem1) alignment(TopLeft) column(#Column1) parent(#MainLayout) row(#Row1) sizing(FitToWidth) manage(#MOBTitlePanel) marginleft(5) marginright(5) margintop(5)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem2) alignment(TopLeft) column(#Column1) manage(#ContainerPanel) parent(#MainLayout) row(#Row2) marginleft(5) marginright(5) margintop(5)

define_com class(#PRIM_TBLO) name(#WideLayout)
define_com class(#PRIM_TBLO.Column) name(#Column2) displayposition(1) parent(#WideLayout)
define_com class(#PRIM_TBLO.Column) name(#Column3) displayposition(2) parent(#WideLayout)
define_com class(#PRIM_TBLO.Row) name(#Row3) displayposition(1) parent(#WideLayout)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem3) alignment(TopLeft) column(#Column2) manage(#StatsPanel) parent(#WideLayout) row(#Row3)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem16) alignment(TopLeft) column(#Column3) manage(#ChartPanel) parent(#WideLayout) row(#Row3)
define_com class(#PRIM_TBLO.Item) name(#LayoutItem17) alignment(TopCenter) column(#Column3) manage(#ChartLoadingImage) parent(#WideLayout) row(#Row3) sizing(None) margintop(10)

define_com class(#PRIM_TBLO) name(#NarrowLayout)
define_com class(#PRIM_TBLO.Column) name(#Column4) displayposition(1) parent(#NarrowLayout)
define_com class(#PRIM_TBLO.Row) name(#Row4) displayposition(1) parent(#NarrowLayout) height(176) units(Pixels)
define_com class(#PRIM_TBLO.Item) name(#NarrowLayoutItemStatsLoading) alignment(TopCenter) column(#Column4) parent(#NarrowLayout) row(#Row4) sizing(None) margintop(10)
define_com class(#PRIM_TBLO.Item) name(#NarrowLayoutItemStats) alignment(TopLeft) column(#Column4) parent(#NarrowLayout) row(#Row4) manage(#StatsPanel)
define_com class(#PRIM_TBLO.Row) name(#Row5) displayposition(2) parent(#NarrowLayout)
define_com class(#PRIM_TBLO.Item) name(#NarrowLayoutItemChartLoading) alignment(TopCenter) column(#Column4) row(#Row5) parent(#NarrowLayout) sizing(None) margintop(10)
define_com class(#PRIM_TBLO.Item) name(#NarrowLayoutItemChart) alignment(TopLeft) column(#Column4) parent(#NarrowLayout) row(#Row5) manage(#ChartPanel)

Once I have the layouts in place, it is easy to toggle between them, its the creating of the Narrow and Wide layouts that is the difficult part.

[Stewart Marshall]

Hi Joe

Building responsive apps can be a little tricky but there are a couple of things that should help.

The first is to make a rough design before setting the layout attributes. The moment you create a second layout manager, the define_coms have no layout attributes at all. This means you can resize and move them without them getting in the way of each other too much. Once they're roughly where you want them, set the attributes as normal.

The second is to split your app in to reusable parts. In your example, you have StatsPanel and ChartPanel etc. It's unclear whether these are separate parts in their own right already, but if not, it's an excellent habit to get in to. It's so much easier to move components in a design if they're just one thing...particularly if it's a set of fields/input boxes etc. This also allows you to make each piece work discretely which will greatly simplify the process and any ensuing maintenance.

The third is to use the visible property of a control. The "design" group on the ribbon "Home" sheet allows you to toggle whether visible controls are shown. It's handy sometimes to set a a few to visible(false) and to hide them while you tinker with the rest.

Could you perhaps send a screen shot of the different designs so that I can get a better understanding of the complexity of the problem you're trying to solve?

Regards

[jyoung]

Hi Stewart,

The StatsPanel and the ChartPanel are NOT reusable parts, just two panels, one with some stats the other with a bar chart. The WideLayout shows these panels side by side in a horizontal fashion whereas the NarrowLayout shows these panels stacked (stats on top of chart) in a vertical fashion.

Narrow.PNG (21.32 KiB) Viewed 9185 times

Wide.PNG (18.01 KiB) Viewed 9185 times

What do you mean by "make a rough design before setting the layout attributes"? Are you saying to put the controls on the panel WITHOUT a layout, then create a layout and move the controls into the layoutitems? I have always started with a layout first, perhaps that is my problem.

When the design changes, I change the layoutmanager of the ContainerPanel (the panel that houses StatsPanel and ChartPanel)
(the design is passed in from the parent object that picked up the DesignChangedEvent)

Code: Select all

mthroutine name(SetDesign) options(*REDEFINE)
case of_field(#design.UpperCase)
when (= DESKTOP)
#ContainerPanel.LayoutManager <= #WideLayout
when (= TABLET)
#ContainerPanel.LayoutManager <= #WideLayout
when (= MOBILE)
#ContainerPanel.LayoutManager <= #NarrowLayout
endcase
endroutine

[Stewart Marshall]

Hi Joe

You can design with or without a layout manager. The timing of creation is largely irrelevant.

Your first image shows a 2 row, 1 column layout. Then, you might create a second layoutmanager with 1 row and 2 columns to allow for a wide layout. At this point, there are no layoutitems for the new layoutmanager, so there should be nothing to do other than to click a couple of ribbon options to determine the behaviour of the stats and chart panels for the new layoutmanager that you've just created.

The stats panel will be FitBoth in R1C1, and the graph panel FitBoth in R1C2.

I'm curious then as to what you mean by "move the controls into the layoutitems".

[jyoung]

By move controls to the layout items, I am referring to dragging the controls / resuable parts from the repository or controls menu unto the designer to a specific row / column location.

Apologies for being dense, but I want to make sure I am understanding what you are saying.
If I have two layouts, one Wide and one Narrow and I drag an edit box from the controls to Wide R1C2 and set the alignment to TopLeft.

Wide2.PNG (3.19 KiB) Viewed 9179 times

When I switch over to the Narrow layout, the edit box still shows in the designer.

Narrow2.PNG (2.72 KiB) Viewed 9179 times

This is where I get confused with a lot of controls on the page trying to figure out where each control should be. Going through this exercise I have seen that you can drag a control from its original location R1C2 in Wide to its new location R2C1 in Narrow.

Narrow3.PNG (2.67 KiB) Viewed 9179 times

I was not aware you could do this, so I end up deleting the control and adding it back in the new location, which hoses up the original.

Now I think I see why the visibility property is so important.

[Stewart Marshall]

I'm pretty certain you're not being dense. Layouts are a complex subject. They are well worth the time and effort to fully understand though.

When you drop a control in the designer, the IDE creates a Define_Com. One control = one Define_Com
When you create a layout manager, the IDE creates a Define_Com for the layout manager and sets the LayoutManager property of the Panel/WebPage.
When you set layout attributes, the IDE create a Define_Com for a layout item belonging to the active LayoutManager and managing the control.
Create a 2nd layout manager, the IDE creates a Define_Com for the layout manager and sets the LayoutManager property of the Panel/WebPage.

Everything else remains as is.

The define_coms for the controls haven't changed. They're now sitting there waiting to be hooked up to the new layout. All you need to do is put them where you want.

When you set layout attributes, the IDE create a Define_Com for a layout item belonging to the active LayoutManager and managing the control.

Thus, we end up with one set of controls being manipulated by which ever Layout manager happens to be active.

However screens are rarely simple, and every time you add a panel to a page, you need to make a new layout for the controls parented to that panel. This is why I strongly suggest making self contained parts. Make lots of simple little bits and then glue them together.