VLWEB application -> Responsive VLWEB application

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

VLWEB application -> Responsive VLWEB application

Post by kno_dk » Thu Sep 06, 2018 11:08 pm

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
Posts: 40
Joined: Wed Dec 02, 2015 10:35 am

Re: VLWEB application -> Responsive VLWEB application

Post by Pablo » Tue Sep 11, 2018 12:16 am

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
Posts: 642
Joined: Thu Jan 21, 2016 6:43 am
Location: Oklahoma City, OK USA

Re: VLWEB application -> Responsive VLWEB application

Post by jyoung » Tue Sep 11, 2018 12:48 am

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

Re: VLWEB application -> Responsive VLWEB application

Post by kno_dk » Fri Dec 07, 2018 12:52 am

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
Posts: 40
Joined: Wed Dec 02, 2015 10:35 am

Re: VLWEB application -> Responsive VLWEB application

Post by Pablo » Fri Dec 07, 2018 2:26 am

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

Re: VLWEB application -> Responsive VLWEB application

Post by kno_dk » Tue Dec 11, 2018 1:53 am

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
Posts: 40
Joined: Wed Dec 02, 2015 10:35 am

Re: VLWEB application -> Responsive VLWEB application

Post by Pablo » Tue Dec 11, 2018 8:02 am

Hi Klaus, you mean bottom navigation like here?

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

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

Re: VLWEB application -> Responsive VLWEB application

Post by kno_dk » Tue Dec 11, 2018 8:48 pm

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
Posts: 40
Joined: Wed Dec 02, 2015 10:35 am

Re: VLWEB application -> Responsive VLWEB application

Post by Pablo » Thu Dec 13, 2018 2:59 am

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

Post Reply