Page 1 of 1

VLWEB application -> Responsive VLWEB application

Posted: Thu Sep 06, 2018 11:08 pm
by kno_dk

We have a customer VLweb application. It was not designed to handle responsive from start, but now the customer wants it to be responsive.

It is a Web page index with a lot of reusable part.
Where do we start? create a new index web page and start from that or ??

Is there anybody who have had such a project and want to share experience?


Re: VLWEB application -> Responsive VLWEB application

Posted: Tue Sep 11, 2018 12:16 am
by Pablo
Hi Klaus,

My recommendation:

1. Take a look at the Visual LANSA Framework.

2. Take a look at the shipped sample apps and templates for ideas.

If you decide the VLF is not suited to your application design specifics:

3. Create a web page using one of our templates or create a sample app then modify it.
Decide theme/styles you want to use, what options you want for the app bar and app drawer and create your menu items.

4. Make a high level classification of your reusable parts following this principle:

- Reusable Part has UI. These ones will most likely end up being Views or Dialogs.
- No UI. Most likely will stay the same.

5. Start plugging in a new Views/Dialogs in the web page and test how it responds in different devices.

6. Ask more questions in this forum.

Hope this helps

Re: VLWEB application -> Responsive VLWEB application

Posted: Tue Sep 11, 2018 12:48 am
by jyoung
Reusable Parts can be responsive by listening for SYS_WEB.DeviceChanged event ... hanged.htm.

Using this your RPs can change their layout accordingly.

You may be able to use your current RP layouts as the "Desktop" device. Then its a matter of going into each RP and adding additional layouts and switching to those layouts in the DeviceChanged event.

This way you may be able to slowly evolve your current app to be responsive without having to start over.

I think this used to be called "Designs" and you had to define your sizes manually in your web page. It looks like SP2 got rid of the "Design" and replaced it with "Devices", although I don't recall seeing that mentioned anywhere.

Hope this helps,

Re: VLWEB application -> Responsive VLWEB application

Posted: Fri Dec 07, 2018 12:52 am
by kno_dk

I have come a bit further with this project.
In my application today i have a tree menu structure to the left, and then show the items in the main area to the right.
Now in the mobile layout I want the tree structure to slide to the left and then show the items in the main area.
Is there anybody who have an example of that?
is it at correct way to go? any other suggestion?


Re: VLWEB application -> Responsive VLWEB application

Posted: Fri Dec 07, 2018 2:26 am
by Pablo
Hi Klaus,

Run this application in a mobile device ... I think it behaves the way you want yours to: ... eloper=yes

As per my earlier reply, if you start with a template or a sample app - in this case it's the Contacts app ... components XCA* - you will get this behavior that you can imitate in your application.

See also ... rstyle.htm


Re: VLWEB application -> Responsive VLWEB application

Posted: Tue Dec 11, 2018 1:53 am
by kno_dk

Thanks, Pablo. It works fine.

In my mobile version I want a menu bar at the buttom with pop menu items. Do you also have such an example?


Re: VLWEB application -> Responsive VLWEB application

Posted: Tue Dec 11, 2018 8:02 am
by Pablo
Hi Klaus, you mean bottom navigation like here? ... eloper=yes

Re: VLWEB application -> Responsive VLWEB application

Posted: Tue Dec 11, 2018 8:48 pm
by kno_dk
Hi Pablo.

I would like a pop up menu from the navigation bar at the bottom. I have tried to add the menu like this:
Define_Com Class(#PRIM_MD.Menu) Name(¤Menu) Displayposition(1) Height(400) Left(181) Parent(#COM_OWNER) Tabposition(5) Top(12) Width(240) Visible(False)
but it pop up downwards and that is not smart when it is from the bottom navigation ;-)


Re: VLWEB application -> Responsive VLWEB application

Posted: Thu Dec 13, 2018 2:59 am
by Pablo
Hi Klaus,

this should give you starting point. You can choose how to handle the popups, whether make reusable part(s) or define them inline, etc.

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Height(704)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) Backgroundbrush(#Brush1)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush1) Color(255:137:12)

Define_Com Class(#PRIM_VS.Style) Name(#Style2) Backgroundbrush(#Brush2)
Define_Com Class(#PRIM_VS.SolidBrush) Name(#Brush2) Color(240:240:240)

Define_Com Class(#PRIM_VS.Style) Name(#Style3) Fontsize(10) Fontunits(Point)

Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(2) Height(50) Left(429) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Top(251) Viewstyle(BottomNavigation)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem) Caption('ITEM 1') Displayposition(1) Height(50) Icon('view_quilt') Iconalignment(AboveCaption) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('ITEM 2') Displayposition(2) Height(50) Icon('view_quilt') Iconalignment(AboveCaption) Left(100) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('ITEM 3') Displayposition(3) Height(50) Icon('view_quilt') Iconalignment(AboveCaption) Left(200) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0)

Define_Com Class(#Prim_ppnl) Name(#PopupSettings) Left(-374) Top(-390) Height(100) Width(100) Style(#Style2)
Define_Com Class(#PRIM_LABL) Name(#Label1) Displayposition(1) Ellipses(Word) Height(33) Left(48) Parent(#PopupSettings) Tabposition(2) Tabstop(False) Top(8) Verticalalignment(Center) Width(281) Style(#Style3) Caption('Settings')
Define_Com Class(#PRIM_IMAG) Name(#Settings1) Displayposition(2) Height(32) Image(#xImageEmployee256) Left(8) Parent(#PopupSettings) Tabposition(1) Tabstop(False) Top(8) Width(32) Hintpopup(#PopupSettings) Imagesizing(BestFit)

Evtroutine Handling(#Com_owner.Initialize)


Evtroutine Handling(#TabItem.Click)

#PopupSettings.ShowPopup Left(#Tab.Left) Top( - #PopupSettings.height)


Evtroutine Handling(#TabItem1.Click)

#PopupSettings.ShowPopup Left(#Tab.Left + #TabItem.width) Top( - #PopupSettings.height)


Evtroutine Handling(#TabItem2.Click)

#PopupSettings.ShowPopup Left(#Tab.Left + #TabItem.width + #TabItem1.width) Top( - #PopupSettings.height)