Responsive VL-WEB

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: 89
Joined: Tue Feb 23, 2016 12:00 am

Responsive VL-WEB

Post by kno_dk » Mon Jan 14, 2019 8:45 pm

Hi.
I have changed a VL-WEB application to be responsive. I have a header (RP) where I have a lot of functionality. This RP's layout is very different from a PC to a mobile so the easy way was to split the RP into 2 - one for PC and one for mobile. In my index page I check the size of the device and then enable and make it visisble the correct RP. But if I do it this way I call both RP so I get other functions(RP) called twice. Is there a way I can "activate" only the one of the RP?

Case Of_Field(#sys_web.Device)
When Value_Is(= Mobile)
#Com_owner.LayoutManager <= #LayoutSmall
#KatalogMobileButtonMenu.Visible := true
Set Com(#KatalogTopResponsive) Visible(true) Enabled(true)
Set Com(#KatalogTop) Visible(False) Enabled(False)
When Value_Is(= Tablet)
#Com_owner.LayoutManager <= #LayoutLarge
#KatalogMobileButtonMenu.Visible := false
Set Com(#KatalogTopResponsive) Visible(False) Enabled(False)
Set Com(#KatalogTop) Visible(True) Enabled(True)
Otherwise
#Com_owner.LayoutManager <= #LayoutLarge
#KatalogMobileButtonMenu.Visible := false
Set Com(#KatalogTopResponsive) Visible(False) Enabled(False)
Set Com(#KatalogTop) Visible(True) Enabled(True)


/Klaus

Jurgen.Rentinck
Posts: 4
Joined: Wed Nov 25, 2015 9:02 pm
Location: Amsterdam
Contact:

Re: Responsive VL-WEB

Post by Jurgen.Rentinck » Tue Jan 15, 2019 12:17 am

Hi Klaus,

You can dynamically create the header panel.

If you look at the sample code below you can create a placeholder on your view, in this sample this is called #headerPanel.
Note that the reference parameter of this #prim_panl is set to *dynamic.

You can now dynamically instantiate the correct header panel based on your device.

I hope this helps.

JurgenR

Code: Select all

Define_Com Class(#PRIM_PANL) Name(#HeaderPanel) Reference(*DYNAMIC) DisplayPosition(2) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Width(300) Height(129)

Evtroutine Handling(#COM_OWNER.Prepare)
Case Of_Field(#SYS_WEB.Device)
When Value_Is(= Desktop)
#HeaderPanel <= *New #SKY_HeadDesktop
When Value_Is(= Mobile)
#HeaderPanel <= *New #SKY_HeadMobile
Otherwise

Endcase
Endroutine

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: Responsive VL-WEB

Post by kno_dk » Tue Jan 15, 2019 2:06 am

Hi Jurgen.

I have defined 2 layout on the Index page - LayoutSmall and LayoutLarge. LayoutSmall have 3 rows and 1 column and LAyoutLarge have 2 rows and 1 column. How do I then add the HeaderPanel to row 1 on both layouts?

/Klaus

atostaine
Posts: 395
Joined: Wed Jan 20, 2016 7:38 am

Re: Responsive VL-WEB

Post by atostaine » Tue Jan 15, 2019 5:09 am

In the header components have you tried seeing if they are visible?

if #com_self.visible
do header processing
endIf

Art
Art Tostaine

Jurgen.Rentinck
Posts: 4
Joined: Wed Nov 25, 2015 9:02 pm
Location: Amsterdam
Contact:

Re: Responsive VL-WEB

Post by Jurgen.Rentinck » Tue Jan 15, 2019 6:18 am

You can also do this dynamically.

I added the complete code for the sample view I created.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_VIEW) DisplayPosition(1) TabPosition(1) LayoutManager(#Layout1) Caption('View2')

Define_Com Class(#PRIM_TBLO) Name(#Layout1)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout1Row1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout1Column1) DisplayPosition(1) Parent(#Layout1)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item1) Column(#Layout1Column1) Manage(#Label) Parent(#Layout1) Row(#Layout1Row1) Sizing(ContentWidthAndHeight)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout1Item2) Parent(#Layout1) Row(#Layout1Row1) Sizing(FitToWidth) Column(#Layout1Column1) Alignment(TopCenter)


Define_Com Class(#PRIM_TBLO) Name(#Layout2)
Define_Com Class(#PRIM_TBLO.Row) Name(#Layout2Row1) DisplayPosition(1) Parent(#Layout2)
Define_Com Class(#PRIM_TBLO.Column) Name(#Layout2Column1) DisplayPosition(1) Parent(#Layout2)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item1) Column(#Layout2Column1) Manage(#Label) Parent(#Layout2) Row(#Layout2Row1) Sizing(ContentWidthAndHeight)
Define_Com Class(#PRIM_TBLO.Item) Name(#Layout2Item2) Parent(#Layout2) Row(#Layout2Row1) Sizing(FitToWidth) Column(#Layout2Column1) Alignment(TopCenter)


Define_Com Class(#PRIM_MD.Label) Name(#Label) Caption('View2') DisplayPosition(1) Height(51) IconHeight(0) Left(108) Parent(#COM_OWNER) TabPosition(1) Top(200) Width(84) CaptionAlignment(Center) ThemeDrawStyle('Heading1') PaddingBottom(10) PaddingLeft(10) PaddingRight(10) PaddingTop(10)




Define_Com Class(#PRIM_PANL) Name(#HeaderPanel) Reference(*DYNAMIC) DisplayPosition(2) Parent(#COM_OWNER) TabPosition(2) TabStop(False) Width(300) Height(129)

Evtroutine Handling(#COM_OWNER.Prepare #com_owner.DesignChanged)
Case Of_Field(#SYS_WEB.Device)
When Value_Is(= Desktop)
#HeaderPanel <= *New #SKY_HeadDesktop
#Layout1Item2.Manage <= #HeaderPanel
#com_owner.LayoutManager <= #Layout1
When Value_Is(= Mobile)
#HeaderPanel <= *New #SKY_HeadMobile
#Layout2Item2.Manage <= #HeaderPanel
#com_owner.LayoutManager <= #Layout2
Otherwise

Endcase
Endroutine
End_Com

kno_dk
Posts: 89
Joined: Tue Feb 23, 2016 12:00 am

Re: Responsive VL-WEB

Post by kno_dk » Tue Jan 15, 2019 8:46 pm

Hi.

it works regarding the numbers ofcall to the serve.

But now it will not fit the entire width when on a pc.I have the old index file and there it is using the entire width. How can i control the width on the HeaderPanel

Any suggestions?
ïndex1.PNG
ïndex1.PNG (14.57 KiB) Viewed 2194 times

Jurgen.Rentinck
Posts: 4
Joined: Wed Nov 25, 2015 9:02 pm
Location: Amsterdam
Contact:

Re: Responsive VL-WEB

Post by Jurgen.Rentinck » Wed Jan 16, 2019 12:16 am

In the layout you use the layout item that manages the header should have sizing(FitToWIdth).
This should now make sure the header takes the complete width.

Post Reply