VL-web layout mobile (SOLVED)

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. 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
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

VL-web layout mobile (SOLVED)

Post by kno_dk »

Hi.

is it possible to hide the url address line at the top and the navigation line at the bottom in the browser on a mobile phone from a VL-WEB application?

/Klaus
Top
MarkD
Posts: 692
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD »

What happens if you make the URL a launchable shortcut from the phone's home screen?
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Hi.

Then the url and the navigation bar is gone - thanks.

My application is with 3 rows. Top, Main and Bottom. I would like that the top and bottom row is fixed. Right now It starts to fille the entire screen just as I want it to, but it is possible to slide that application up and down on the screen. Can I avoid that?

/Klaus
Top
JamesDuignan
Posts: 85
Joined: Thu Nov 26, 2015 1:43 pm

Re: VL-web layout mobile

Post by JamesDuignan »

Hi Claus,

if you are using a table layout on your webpage make the top and bottom rows units to be pixels and the content area to be proportion.

for example:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')

Evtroutine Handling(#Com_owner.Initialize)

Endroutine

End_Com
Regards,
James
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Hi James.

If I create your example and then added it to the homescreen on the iphone it will act the same way as my application. You are able to move the entire application up and down by swipping up and down with your finger.

I want the top and bottom bar to be fixed at all time in the top and in the bottom.

/Klaus
Top
MarkD
Posts: 692
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD »

In you web form's definition what is this option set to?
Capture.PNG
Capture.PNG (7.13 KiB) Viewed 23448 times
If yes, try setting it to no and recompile.
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Hi.

The allow zoom was yes and I have changed it to no. It did not help. The problem is only on my Iphone. On an android it works as it should.

Here is my test web page.

I have a small issue more. I have a order web application where
I want the top and bottom bar to be fixes and everything in the middel to be dynamic and be able to scroll. In this application I have a list,and there should be some information at the top and at the bottom. If I scroll it should be the entire middel section (#PanelMidt) not only in the list. I have tried a lot of things but I can not get it to scroll the way I want.

What am I missing?


Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com
Top
MarkD
Posts: 692
Joined: Wed Dec 02, 2015 9:56 am

Re: VL-web layout mobile

Post by MarkD »

I know this is a VLF guide, but VLF applications are just VL-Web applications.

https://docs.lansa.com/14/en/lansa048/i ... 8_8315.htm

Does doing that alter the behavior?
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Hi.

If i remove these 2 lines i get the statusbar and navigation - even on the shortcust from the homescreen. and that i dont want. I want to get rid of them.

/klaus
Top
User avatar
MarcusLancaster
Posts: 32
Joined: Tue Nov 24, 2015 9:20 pm

Re: VL-web layout mobile

Post by MarcusLancaster »

Hi Klaus

Is this version of your program closer to what you need to see?

Cheers for now.

Marcus.

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem2) Manage(#Label1) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Sizing(ContentHeightFitToWidth) Column(#LayoutColumn2) Alignment(TopLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')

Define_Com Class(#prim_PANL) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Layoutmanager(#LayoutGroupboxMidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(2) Layoutmanager(#LayoutList) Left(0) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1200) Parent(#GroupBoxMidt)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1166)
Define_Com Class(#PRIM_LABL) Name(#Label1) Caption('Label1') Displayposition(1) Ellipses(Word) Height(17) Left(0) Parent(#GroupBoxMidt) Tabposition(2) Tabstop(False) Top(0) Verticalalignment(Center) Width(1200)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt) Height(0)
#label1.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#label1.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Hi.
No. I have created in a different way where i calculate the heigt of the panel based on the number of entries in the list. I dont know if this is the only way to do it.
Here is the source:
Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt) Height(75) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow2) Displayposition(2) Parent(#Layoutmidt) Minheight(150)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow3) Displayposition(3) Parent(#Layoutmidt) Height(80) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow3) Column(#LayoutColumn1) Alignment(BottomLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow2) Column(#LayoutColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Height(75) Width(1200) Caption('GRPBOX top')
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Height(549) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(624) Height(80) Width(1200) Caption('GRPBOX Bottom')
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(528) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#LayoutRow2.MinHeight := 48
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#GroupBoxMidt.Height #List.Height #LayoutRow2.MinHeight += 48
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height
Endroutine
Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#panelmidt.Height := #GroupBoxTop.Height + #GroupBoxMidt.Height + #GroupBoxBotton.Height

#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
#GroupBoxBotton.Top := #GroupBoxMidt.height + 75
Endroutine
End_Com
Top
User avatar
MarcusLancaster
Posts: 32
Joined: Tue Nov 24, 2015 9:20 pm

Re: VL-web layout mobile

Post by MarcusLancaster »

Ah ha - you want groupbox top and groupbox bottom to scroll up/down too. Got it. Sorry misunderstood the requirement :-(

Try this... no calculations... just using layout managers...

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow3) Displayposition(3) Parent(#LayoutMain) Height(48) Units(Pixels)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel1) Parent(#LayoutMain) Row(#LayoutMainRow3)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Panel) Parent(#LayoutMain) Row(#LayoutMainRow1)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem3) Manage(#Panelmidt) Parent(#LayoutMain) Row(#LayoutMainRow2) Column(#LayoutMainColumn1) Alignment(CenterLeft) Flow(Down)

Define_Com Class(#PRIM_TBLO) Name(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow1) Displayposition(1) Parent(#Layoutmidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem1) Manage(#GroupBoxBotton) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem2) Manage(#GroupBoxTop) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(FitToWidth)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutmidtItem3) Manage(#GroupBoxMidt) Parent(#Layoutmidt) Row(#LayoutRow1) Column(#LayoutColumn1) Alignment(TopLeft) Flow(Down) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutColumn2) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutRow4) Displayposition(1) Parent(#LayoutGroupboxMidt)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutGroupboxMidtItem1) Manage(#List) Parent(#LayoutGroupboxMidt) Row(#LayoutRow4) Column(#LayoutColumn2) Alignment(TopLeft) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_TBLO) Name(#LayoutList)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutListColumn1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutListRow1) Displayposition(1) Parent(#LayoutList)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutListItem1) Alignment(CenterLeft) Column(#LayoutListColumn1) Manage(#ListPrimaryText) Marginleft(16) Marginright(16) Parent(#LayoutList) Row(#LayoutListRow1) Sizing(ContentHeightFitToWidth)

Define_Com Class(#PRIM_PANL) Name(#Panel) Displayposition(1) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(1) Tabstop(False) Top(0) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panel1) Displayposition(2) Height(48) Left(0) Parent(#COM_OWNER) Tabposition(2) Tabstop(False) Top(752) Width(1200) Themedrawstyle('DarkTitle')
Define_Com Class(#PRIM_PANL) Name(#Panelmidt) Displayposition(3) Left(0) Parent(#COM_OWNER) Tabposition(3) Tabstop(False) Top(48) Height(704) Width(1200) Layoutmanager(#Layoutmidt) Verticalscroll(True)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxTop) Displayposition(1) Left(0) Parent(#Panelmidt) Tabposition(1) Tabstop(False) Top(0) Width(1200) Caption('GRPBOX top') Height(75)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxMidt) Displayposition(2) Left(0) Parent(#Panelmidt) Tabposition(2) Tabstop(False) Top(75) Width(1200) Caption('GRPBOX Midt') Layoutmanager(#LayoutGroupboxMidt) Height(216)
Define_Com Class(#PRIM_GPBX) Name(#GroupBoxBotton) Displayposition(3) Left(0) Parent(#Panelmidt) Tabposition(3) Tabstop(False) Top(291) Width(1200) Caption('GRPBOX Bottom') Height(80)
Define_Com Class(#PRIM_MD.List) Name(#List) Displayposition(1) Layoutmanager(#LayoutList) Left(4) Parent(#GroupBoxMidt) Rowheight(48) Tabposition(1) Themedrawstyle('Card') Top(17) Height(199) Width(1192)
Define_Com Class(#PRIM_MD.ListLabel) Name(#ListPrimaryText) Caption('Single line item') Displayposition(1) Height(23) Left(16) Parent(#List) Tabposition(1) Themedrawstyle('Heading3') Top(13) Width(1158)

Evtroutine Handling(#Com_owner.Initialize)
Set Com(#GroupBoxMidt #List) Height(0)
#GroupBoxMidt.Caption += #GroupBoxMidt.Height.asstring
Begin_Loop Using(#LISTCOUNT) To(20)
#ListPrimaryText := 'Linie: ' + #LISTCOUNT.asstring
Add_Entry To_List(#List)
End_Loop
Endroutine

Evtroutine Handling(#SYS_WEB.DeviceChanged #COM_OWNER.SizeChanged)
#GroupBoxMidt.Caption := 'GRPBOX Midt: ' + #GroupBoxMidt.Height.asstring
Endroutine

End_Com
Top
kno_dk
Posts: 219
Joined: Tue Feb 23, 2016 12:00 am

Re: VL-web layout mobile

Post by kno_dk »

Thanks.

it worked.

/klaus
Top
Post Reply

Return to “Questions & Answers”