Using multiple layouts in a web page

This forum allows developers to post programming tips and coding techniques that may be useful to other Visual LANSA developers. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
User avatar
Dino
Posts: 253
Joined: Fri Jul 19, 2019 7:49 am
Location: Robbinsville, NC
Contact:
Contact Dino

Using multiple layouts in a web page

Post by Dino » Wed May 25, 2022 1:27 am

I had been asked a few times about how to handle two layouts in a web page, so let's share it here, I will be using the Outline Tab to see it better:

1) Let's say you bring a few components in a LANSA Web page:

Image

2) And you want to have two different layouts, let's say one for mobile and one for the other cases like (tablet/desktop).
First create one layout and organize all for that first layout as usual.

Image

3) I choose 2 rows 2 columns, organized it all and ended with for example this (you can notice the name assigned to this layout is by default LayoutMain and it is automatically assigned as the LayoutManager property for this Web Page):

Image

4) Usually your work ends here, but you want to have a second layout. So, with the Web page selected, if you click in the Layouts icon again you will create a new Layout, this time will be called LayoutMain1. Let's choose for example 4 rows 1 column:

Image

5) if you go to the details of the web page, you will notice that now the LayoutManager property associated with the LANSA Web page is using LayoutMain1.

Image

6) fear not, before creating LayoutMain1, we organized all the controls using LayoutMain, so, if you change the Layout Manager for the Web Page to LayoutMain, all will be fine as it was before creating the new layout.

For now, leave the LayoutManager property with the option LayoutMain1.

Now go ahead and distribute again all the components in the new layout, this time, it will create the LayoutMainItems* for the second layout.

We end with this:

Image

7) now you can add a little bit of code to control when use one or the another:

Image

and that is it. You can have as many layouts as you want, just select the one you want to work on at Web Page level before making any layout changes.

Full code of this example is here:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Height(416) Width(704) LayoutManager(#LayoutMain1)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) DisplayPosition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn2) DisplayPosition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) DisplayPosition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) DisplayPosition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Manage(#Button) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn2) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Manage(#Button1) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn2) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Button2) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn2) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10) Alignment(TopCenter)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem4) Manage(#CheckBox2) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn1) Alignment(TopCenter) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem5) Manage(#CheckBox1) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn1) Alignment(TopCenter) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem6) Manage(#CheckBox) Parent(#LayoutMain) Row(#LayoutMainRow2) Sizing(None) Column(#LayoutMainColumn1) Alignment(TopCenter) Flow(Down) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem7) Manage(#Image) Parent(#LayoutMain) Row(#LayoutMainRow1) Column(#LayoutMainColumn2) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem8) Manage(#Text) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(FitToWidth) Column(#LayoutMainColumn1) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem9) Manage(#Text1) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(FitToWidth) Column(#LayoutMainColumn1) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20) Alignment(TopLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMain1Column1) DisplayPosition(1) Parent(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMain1Row1) DisplayPosition(1) Parent(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMain1Row2) DisplayPosition(2) Parent(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMain1Row3) DisplayPosition(3) Parent(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMain1Row4) DisplayPosition(4) Parent(#LayoutMain1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item1) Manage(#Text1) Parent(#LayoutMain1) Row(#LayoutMain1Row1) Column(#LayoutMain1Column1) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item2) Manage(#Text) Parent(#LayoutMain1) Row(#LayoutMain1Row2) Column(#LayoutMain1Column1) MarginBottom(10) MarginLeft(10) MarginRight(10) MarginTop(10)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item3) Manage(#CheckBox) Parent(#LayoutMain1) Row(#LayoutMain1Row3) Sizing(None) Column(#LayoutMain1Column1) Flow(Right) Alignment(CenterLeft) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item4) Manage(#CheckBox1) Parent(#LayoutMain1) Row(#LayoutMain1Row3) Sizing(None) Column(#LayoutMain1Column1) Flow(Right) Alignment(CenterLeft) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item5) Manage(#CheckBox2) Parent(#LayoutMain1) Row(#LayoutMain1Row3) Sizing(None) Column(#LayoutMain1Column1) Flow(Right) Alignment(CenterLeft) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item6) Manage(#Button) Parent(#LayoutMain1) Row(#LayoutMain1Row4) Sizing(None) Column(#LayoutMain1Column1) Alignment(CenterRight) Flow(Left) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item7) Manage(#Button1) Parent(#LayoutMain1) Row(#LayoutMain1Row4) Sizing(None) Column(#LayoutMain1Column1) Alignment(CenterRight) Flow(Left) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item8) Manage(#Button2) Parent(#LayoutMain1) Row(#LayoutMain1Row4) Sizing(None) Column(#LayoutMain1Column1) Alignment(CenterRight) Flow(Left) MarginBottom(20) MarginLeft(20) MarginRight(20) MarginTop(20)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMain1Item9) Manage(#Image) Parent(#LayoutMain1) Row(#LayoutMain1Row1) Sizing(None) Column(#LayoutMain1Column1) Alignment(TopRight)

Define_Com Class(#PRIM_IMAG) Name(#Image) DisplayPosition(2) Image(#xImageImage32) ImageSizing(None) Left(392) Parent(#COM_OWNER) TabPosition(1) TabStop(False) Top(0) Height(168) Width(312)
Define_Com Class(#PRIM_MD.Label) Name(#Text) Caption('Text') DisplayPosition(3) Parent(#COM_OWNER) TabPosition(2) Top(114) Width(684) Height(84)
Define_Com Class(#PRIM_MD.Label) Name(#Text1) Caption('Title') DisplayPosition(1) Height(84) Parent(#COM_OWNER) TabPosition(3) ThemeDrawStyle('Title') Width(684)
Define_Com Class(#PRIM_MD.CheckBox) Name(#CheckBox) Caption('Checkbox') CheckState(Checked) DisplayPosition(4) IconColor(Theme500) Left(20) Parent(#COM_OWNER) TabPosition(4) Top(248)
Define_Com Class(#PRIM_MD.CheckBox) Name(#CheckBox1) Caption('Checkbox') CheckState(Checked) DisplayPosition(5) IconColor(ThemeSuccessMedium) Left(160) Parent(#COM_OWNER) TabPosition(5) Top(248)
Define_Com Class(#PRIM_MD.CheckBox) Name(#CheckBox2) Caption('Checkbox') CheckState(Checked) DisplayPosition(6) IconColor(ThemeErrorMedium) Left(300) Parent(#COM_OWNER) TabPosition(6) Top(248)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button) Caption('PRIMARY') DisplayPosition(7) Left(584) Parent(#COM_OWNER) TabPosition(7) ThemeDrawStyle('MediumTitle') Top(346)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button1) Caption('ACCENT') DisplayPosition(8) Left(444) Parent(#COM_OWNER) TabPosition(8) ThemeDrawStyle('MediumAccent') Top(346)
Define_Com Class(#PRIM_MD.RaisedButton) Name(#Button2) Caption('SUCCESS') DisplayPosition(9) Left(304) Parent(#COM_OWNER) TabPosition(9) ThemeDrawStyle('MediumSuccess') Top(346)

Evtroutine Handling(#Com_owner.Initialize #SYS_WEB.DeviceChanged)
Case (#SYS_WEB.Device)
When (= Mobile)
#COM_OWNER.LayoutManager <= #LayoutMain1

When (= Tablet = Desktop)
#COM_OWNER.LayoutManager <= #LayoutMain
Endcase
Endroutine
End_Com
Top
atostaine
Posts: 604
Joined: Wed Jan 20, 2016 7:38 am

Re: Using multiple layouts in a web page

Post by atostaine » Wed May 25, 2022 4:02 am

Well done Dino. Thanks
Art Tostaine
Top
adale
Posts: 48
Joined: Wed Apr 08, 2020 9:18 pm
Location: Poplarville, MS

Re: Using multiple layouts in a web page

Post by adale » Thu May 26, 2022 7:25 am

Dino,
Thanks for posting this. I was struggling with the on-line tutorials, and your explanation cleared things up once I realized in the layouts and layout manager are specific to each View as well as the main Page (or at least in V15).
Thanks!
Arlyn Dale
Servias Development & Support
Intelliware, Inc.
Top
Post Reply

Return to “Tips and Techniques”