B4J Code Snippet [ABMaterial] - Responsive Design - Input Footer

Discussion in 'B4J Code Snippets' started by Harris, Dec 1, 2016.

  1. Harris

    Harris Well-Known Member Licensed User

    This is always a challenge. A phone in portrait mode is nothing like a tablet or desktop in landscape...

    Fortunately, we can adjust the appearance for phone or desktop. I don't worry about tablets since they automatically take the best from both (upper and lower) screen views.

    Code:
    inp.Footer.AddRowsM(1,   True,00"").AddCellsOS(40,0,03,3,3""

        
    Dim SaveBtn As ABMButton
        SaveBtn.InitializeFloating(
    page"SaveBtn""mdi-toggle-check-box","green")
        inp.Footer.Cell(
    1,1).AddComponent(SaveBtn)   
        
    Dim lbl1 As ABMLabel
        lbl1.Initialize(
    page"lbl1""Save", ABM.SIZE_SPAN,  False"")
        inp.Footer.Cell(
    1,1).AddComponent(lbl1)


        
    Dim CancelBtn As ABMButton
        CancelBtn.InitializeFloating(
    page"CancelBtn",  "mdi-navigation-cancel""green")
        inp.Footer.Cell(
    1,2).AddComponent(CancelBtn)
        
    Dim lbl2 As ABMLabel
        lbl2.Initialize(
    page"lbl2""Back", ABM.SIZE_SPAN,  False"")
        inp.Footer.Cell(
    1,2).AddComponent(lbl2)
       
       
        
    Dim AttBtn As ABMButton
        AttBtn.InitializeFloating(
    page"AttBtn""mdi-image-camera-alt""green")
        inp.Footer.Cell(
    1,3).AddComponent(AttBtn)
        
    Dim lbl3 As ABMLabel
        lbl3.Initialize(
    page"lbl3""Pic", ABM.SIZE_SPAN,  False"")
        inp.Footer.Cell(
    1,3).AddComponent(lbl3)

       
        
    Dim NoteBtn As ABMButton
        NoteBtn.InitializeFloating(
    page"NoteBtn""mdi-notification-event-note""green")
        inp.Footer.Cell(
    1,4).AddComponent(NoteBtn)
        
    Dim lbl4 As ABMLabel
        lbl4.Initialize(
    page"lbl4""Note", ABM.SIZE_SPAN,  False"")
        inp.Footer.Cell(
    1,4).AddComponent(lbl4)
    Often, we use Flat buttons in footers (fixed or not) with Text to identify what they are. However, on a phone, the footer may extend two or more lines and confuse the user - since you have to scroll (way) down to expose the extra content in the footer. It seems this also degrades the performance of scrolling the whole page.

    The code above added 4 floating buttons - and 4 (short) labels to fit in a footer on a phone - each in their own cell. Describes what buttons are... Works fine for me in this situation.

    You will need to experiment on what works best for each of the 3 screen widths. You can also switch between flat and floating - depending on the device the ConnectPage sub determined you are using..

    Code:
    Public ScrnSize As Int = 0 ' set in ABMShared globals

    Sub ConnectPage()
        
    ' Can only be called from ConnectPage since Page.Ready has not yet fired...
        ABMShared.setScrnSize(page)  ' set device screen size 

    ..... 
    (
    end sub...)

    Sub setScrnSize(pg As ABMPage) ' in ABMShared...
       
        
    Dim ret As Int = 2 ' set initial as desktop
        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)
            
    Log(" width in PX: "&NewH)
           
           
            
    If NewH < 600 Then ret = 0    ' phone
            If NewH > 600 And NewH <= 992 Then ret = 1  ' tablet landscape
            If NewH > 992 Then ret = 2 ' desktop


        
    End If
        
    Catch
            
    Log(" screen setting failed!")
        
    End Try   

        
    Log(" screen width: " &ret)
        ScrnSize = ret
       
    End Sub

    Capture+_2016-11-30-16-26-37.png
     
Loading...
  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice