Next to the normal responsive page behaviour, in ABMaterial 4.25 you will be able to do this with containers too!
This may not sound special, but it's a biggie! There are very few frameworks out there that can do this, so I'm very proud of this one.
"Nice but that must ask for a lot of control code, no?", I hear you ask.
Well, here it is:
Done!
Just by setting gridContainer.IsResponsiveContainer = True, you just made the ABMContainer device responsive just like a page. This means you can from now on actually create controls that behave differently depending on the device you are on.
For example, setting this grid, the last 5 cells will wrap differently on a phone, tablet or desktop:
I also added some powerful tools to adjust the layout of your Webapp according to the device you are on:
Page.GetCurrentPageSize:
Returns the current page size (phone, tablet, desktop). You can use this method e.g. in ConnectPage to determine the state of the current page size and act accordingly.
An event Page_SizeChanged will return the same value in the 'current' parameter if the user changes the window size. (It also returns the 'previous' state).
Note that this event is NOT raised at load time! Use Page.GetCurrentPageSize to check that.
Containers on a fixed position:
Next to setting a fixed with and height of an ABMContainer, you can now also set a fixed position. This can be handy to create 'floating' sidebars for example.
Params: left, right, top,bottom
Set a parameter to empty string when you don not want to set it.
These 3 new features used together give you an immense power over how your WebApp should behave depending on the device it is running on, with very little effort.
Alwaysbusy
This may not sound special, but it's a biggie! There are very few frameworks out there that can do this, so I'm very proud of this one.
"Nice but that must ask for a lot of control code, no?", I hear you ask.
Well, here it is:
B4X:
gridContainer.IsResponsiveContainer = TrueDone!
Just by setting gridContainer.IsResponsiveContainer = True, you just made the ABMContainer device responsive just like a page. This means you can from now on actually create controls that behave differently depending on the device you are on.
For example, setting this grid, the last 5 cells will wrap differently on a phone, tablet or desktop:
B4X:
gridContainer.AddRows(1,True,"").AddCells12(1,"")
gridContainer.AddRows(1,True,"").AddCells12(1,"")
gridContainer.AddRows(1,True,"").AddCellsOSMP(5,0,0,0,12,6,4,0,0,0,0,"")I also added some powerful tools to adjust the layout of your Webapp according to the device you are on:
Page.GetCurrentPageSize:
Returns the current page size (phone, tablet, desktop). You can use this method e.g. in ConnectPage to determine the state of the current page size and act accordingly.
B4X:
public Sub ConnectPage()
Log("Current page size: " & page.GetCurrentPageSize)
...
End SubAn event Page_SizeChanged will return the same value in the 'current' parameter if the user changes the window size. (It also returns the 'previous' state).
Note that this event is NOT raised at load time! Use Page.GetCurrentPageSize to check that.
B4X:
Sub Page_SizeChanged(previous As String, current As String)
Log(previous & " -> " & current)
Select Case current
Case "phone"
gridContainer.MarginLeft = "0px"
gridContainer.SetFixedWidth("100%")
Case "tablet"
gridContainer.MarginLeft = "210px"
gridContainer.SetFixedWidth("calc(100% - 210px)")
Case "desktop"
gridContainer.MarginLeft = "210px"
gridContainer.SetFixedWidth("calc(100% - 610px)")
End Select
gridContainer.Refresh
End SubContainers on a fixed position:
Next to setting a fixed with and height of an ABMContainer, you can now also set a fixed position. This can be handy to create 'floating' sidebars for example.
B4X:
compContainer.SetFixedPosition("0px", "", "56px", "")Params: left, right, top,bottom
Set a parameter to empty string when you don not want to set it.
These 3 new features used together give you an immense power over how your WebApp should behave depending on the device it is running on, with very little effort.
Alwaysbusy
