VLWEB application -> Responsive VLWEB application

[kno_dk]

HI.

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?

/klaus

[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
Pablo

[jyoung]

Reusable Parts can be responsive by listening for SYS_WEB.DeviceChanged event https://docs.lansa.com/14/en/lansa016/p ... 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.

NOTE
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,
Joe

[kno_dk]

Hi.

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?

/klaus

[Pablo]

Hi Klaus,

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

http://apps.lansa.com/lansav14sp2/dem/x ... 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 https://docs.lansa.com/14/en/lansa016/p ... rstyle.htm

Pablo

[kno_dk]

Hi

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?

/klaus

[Pablo]

Hi Klaus, you mean bottom navigation like here?

http://apps.lansa.com/lansav14sp2/dem/x ... eloper=yes

[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

/klaus

[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)

Endroutine

Evtroutine Handling(#TabItem.Click)

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

Endroutine

Evtroutine Handling(#TabItem1.Click)

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

Endroutine

Evtroutine Handling(#TabItem2.Click)

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

Endroutine

End_Com