B4J Question [ABMaterial]: [SOLVED] How to change the ABMModalSheet size property at runtime?

[Mashiane]

Hi there

1. When my page shows I want to show a ModalDialog.
2. Depending on the device size, for example if the device is a phone, I assume checking page.IsPhone method, then change the modal sheet size to Full or rather fill the whole screen of the phone? See iPhone screen above!!

Is this possible? How can I implement it?

Thanks

 

[Cableguy]

I think the simplest approach would be to define all necessary modal form sizes and conditionally show the appropriate one based on screen size.

 

[Harris]

Public Sub GetDeviceWidth( page As ABMPage ) As Int
    
    Dim NowWH  As String = ABM.GetBrowserWidthHeight(page)
    
    If NowWH <> "" And NowWH <> ";" Then ' check if we got something useful back
        Dim split() As String = Regex.Split(";", NowWH) ' split the string
        Dim NewH As Int = split(0)
    Else
        Dim NewH As Int = -1
    End If
    
    Return NewH
    
End Sub

'........................
Log(" browser page width: "&ssize)
   
    If ssize < 1400 Then
        ABMGentiZonesModal.Size = ABM.MODALSHEET_SIZE_LARGE
    Else
        ABMGentiZonesModal.Size = ABM.MODALSHEET_SIZE_NORMAL
    End If

I have seen you use this in your example posts...

 

[Mashiane]

Ok, now I remember GetDeviceWidth ... I had used page.isPhone property, let me play around chaps, thanks.

 

[Mashiane]

Ok, so far, the modal sheet is build on the BuildPage method, GetDevice... does not seem to work at that level and does return values on ConnectPage and can be checked.

I will see if I can change the modal sheet size on ConnectPage and refresh it.

 

[alwaysbusy]

Yes, GetDevice cannot be used in BuildPage. (Its when the html is written to disk, so it has no notion of what device it will be opened later).

Just try to build your Modal Form in connectpage instead of in BuildPage. I know I adviced in the past to always do it in BuildPage but ABM has changed so much in the past year it just may work.

 

[Mashiane]

Thanks a million chaps... this was very crucial for this as most people will be using a phone for the webapp.

In my ABMShared, added a method to detect the phone..

Sub IsPhone(pg As ABMPage) As Boolean
    Try
        Dim NowWH As String = ABM.GetBrowserWidthHeight(pg) ' returns a string "width;height"
        If NowWH <> "" And NowWH <> ";" Then ' check if we got something useful back
        Dim split() As String = Regex.Split(";", NowWH) ' split the string
        Dim NewH As Int = split(0)
        If NewH < 600 Then Return True
        If NewH > 600 And NewH <= 992 Then Return False
        If NewH > 992 Then Return False
    End If
    Return False
Catch
    Return False
End Try
End Sub

My ConnectPage (as advised to move the ModalSheet building there)

Public Sub ConnectPage()
    'connect navigation bar
    ConnectNavigationBar
    'add components for the page
    AdminAccess
    page.SetFontStack("arial,sans-serif")
    ' this page uses uploads, so needs some settings
    page.ws.session.SetAttribute("abmcallback", Me)
    page.ws.session.SetAttribute("abmdownloadfolder", DownloadFolder)
    page.ws.session.SetAttribute("abmmaxsize", DownloadMaxSize)
    page.AddModalSheetTemplate(msLoginBuild)
    page.Refresh ' IMPORTANT
    ' NEW, because we use ShowLoaderType=ABM.LOADER_TYPE_MANUAL
    page.FinishedLoading 'IMPORTANT
    page.RestoreNavigationBarPosition
    page.ShowModalSheet("msLogin")
End Sub

and the method to build the modal sheet, for phones, the modal sheet should fill the phone screen.

Private Sub msLoginBuild() As ABMModalSheet
    Dim msLogin As ABMModalSheet
    Dim dSize As Int = ABM.MODALSHEET_SIZE_NORMAL
    If ABMShared.IsPhone(page) Then dSize = ABM.MODALSHEET_SIZE_FULL
    msLogin.Initialize(page, "msLogin", False, ABM.MODALSHEET_TYPE_NORMAL, "ms")
    msLogin.Size = dSize...

This is cool.