B4J Tutorial [ABMaterial] Version 2.0 ABMParallax

The views below are shown as phone portrait size ( < 600px )

Prior to 2.0


TripInspect_oldpx.jpg



Version 2.0



TripInspect_newpx.jpg



B4X:
Sub ConnectPage()
  
    ABMShared.ConnectNavigationBar2(page,  "Blog", "Blog", "Blog",  Not(ws.Session.GetAttribute2("IsAuthorized", "") = ""))
  
    Dim cont1 As ABMContainer
    cont1.Initialize(page,  "scont1", "")
    cont1.AddRowsM(1,True,0,0, "").AddCellsOSMP(1,0 ,0,0,12,12,12,0,0,0,0,"")      
    cont1.BuildGrid ' IMPORTANT
  
    Dim siz1 As String = "40px"
    Dim siz2 As String = "35px"
    Dim siz3 As String = "45px"
    Dim scwdt As Int = ABMShared.GetDeviceWidth(page)  
    If scwdt > -1 And scwdt < 601 Then
        Dim siz1 As String = "20px"
        Dim siz2 As String = "25px"
        Dim siz3 As String = "30px"
    End If
  
    cont1.Cell(1,1).AddComponent(ABMShared.BuildLabel(page, "spar3","Welcome to:", ABM.SIZE_H2, "sblack",0, siz1))
    cont1.Cell(1,1).AddComponent(ABMShared.BuildLabel(page, "spar2","{B}TripInspect CMV {/B}- created by:", ABM.SIZE_H2, "sblue",0, siz2))
    cont1.Cell(1,1).AddComponent(ABMShared.Buildlabel(page, "shdr1", "Modern Mobile Solutions", ABM.SIZE_H3, "sred", 0, siz3))
    ' add paragraph
  
  
    Dim parallax1 As ABMParallax
    If Main.isReddog Then
       parallax1.InitializeWithContainer(page, "parallax1", "../images/parallax1.jpg",  540, cont1,  205)
    Else
       parallax1.InitializeScaledWithContainer(page, "parallax1", "../images/struck.png", 200,300,540 , cont1,  50,105,205)
    End If  
  
    page.Cell(1,1).AddComponent(parallax1)
......


B4X:
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

We now have the ability to adjust (scale) the image use new methods (in the case: InitializeScaledWithContainer)

Using the function, GetDeviceWidth (I put in in ABMShared), I determine if this a phone. If so, the text size is adjusted to fit nicely on a small device.

BTW, the GetDeviceWidth was borrowed from AB examples. 90 percent of my good code is copied from you intelligent people... I can read, understand and use it - but can rarely code it this way... Hell! - I can barely type!!!
 
Last edited:
Top