VLWEB application -> Responsive VLWEB application
VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
Hi Klaus, you mean bottom navigation like here?
http://apps.lansa.com/lansav14sp2/dem/x ... eloper=yes
http://apps.lansa.com/lansav14sp2/dem/x ... eloper=yes
Re: VLWEB application -> Responsive VLWEB application
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
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
Re: VLWEB application -> Responsive VLWEB application
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.
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