B4J Question ABMaterial Responsive Apps

[walterf25]

Hi all, I am back trying to finish up a project I started months ago, i finally found some time to try and finish it, this is a web app that I plan deploying for internal use at work, the app is a very simple Inventory service, I have really not had much time to go through all the tutorials unfortunately because of the lack of time, and I am not at a point where I really need to finish this app as I will soon be needing it to keep track of project parts.

The issue I can't seem to figure out is when viewing the app on a phone or if when resizing the browser app, I see the whole content does not get resized accordingly, please see the two images below:

Notice how the Table header is outside of the Tab container, and also the Navigation Bar doesn't get resized to cover the full width of the browser.
As I mentioned above, this may be a very stupid question but again, I have not had much time to go through the tutorials, I pretty much decided to dive into creating an ABMaterial web app because I saw that it would not take so much to do ?

Here's is also the code where I create the Table container

    Dim tabs As ABMTabs
    tabs.Initialize2(page, "tabs", 98,-8, 8, "tabs")
    
    ' create the tabs as ABMContainers
    Dim cont As ABMContainer = BuildTabContainer("tab1", "")
    Dim cont2 As ABMContainer = BuildTabContainer("tab2", "")
    Dim tlb2 As ABMTable = FillHermosaProtoA
    Dim tbl1 As ABMTable = FillTable0

    cont.AddRows(1, True, "").AddCells12(1, "")
    cont.BuildGrid
    cont.Cell(1,1).AddComponent(tlb2)
    cont2.AddRows(1, True, "").AddCells12(1, "")
    cont2.BuildGrid
    cont2.Cell(1,2).AddComponent(tbl1)
    cont.IsResponsiveContainer = True
    cont2.IsResponsiveContainer = True
    tabs.AddTab("Parts", "Hermosa Proto A Parts", cont,3,3,3,12,12,12,True,True, "mdi-hardware-memory", "")
    tabs.AddTab("Equipment", "Equipment Inventory", cont2,3,3,3,12,12,12,True,False, "mdi-action-work", "")
    page.Cell(1,1).AddComponent(tabs)

    page.Refresh
    
    ' Tell the browser we finished loading
    page.FinishedLoading
    ' restoring the navigation bar position
    page.RestoreNavigationBarPosition

The code for BuildContainer

Sub BuildTabContainer(id As String, Text As String) As ABMContainer
    Dim Tabc As ABMContainer
    Tabc.Initialize(page, id,"tabpagewhite")
    
    Tabc.AddRows(1,True, "").AddCells12(1,"")
    Tabc.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    
    Dim lbl As ABMLabel
    lbl.Initialize(page, id & "lbl", Text, ABM.SIZE_H5, True, "")
    Tabc.Cell(1,1).AddComponent(lbl)
    Return Tabc
End Sub

Any hints as to why the app doesn't get resized according to the screen size?

Walter

 

[alwaysbusy]

Hi Walter,

Can you show me the method "FillHermosaProtA"? I assume this is where you create the table. Note that "responsive" does not mean "fit/resize" so if you have to many columns in your table, the Materialize CSS framework just can't fit it to the screen, that is why it goes outside of your page. The other resize problems are probably related to the table being to wide.

The way Materialize CSS tries to solve responsive tables is by changing the layout (done by setting tbl.IsResponsive=true), but I have to admit I'm not really a fan of that layout.
I usually hide 'less important' columns on small screens in my apps using the tbl.SetColumnVisible() on the table creation. For this 'visibility' list, I use ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_BELOW on the less important columns.

Which version of ABM do you use?

Alwaysbusy

 

[walterf25]

Hi Walter,

Can you show me the method "FillHermosaProtA"? I assume this is where you create the table. Note that "responsive" does not mean "fit/resize" so if you have to many columns in your table, the Materialize CSS framework just can't fit it to the screen, that is why it goes outside of your page. The other resize problems are probably related to the table being to wide.

The way Materialize CSS tries to solve responsive tables is by changing the layout (done by setting tbl.IsResponsive=true), but I have to admit I'm not really a fan of that layout.
I usually hide 'less important' columns on small screens in my apps using the tbl.SetColumnVisible() on the table creation. For this 'visibility' list, I use ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_BELOW on the less important columns.

Which version of ABM do you use?

Alwaysbusy

 

[alwaysbusy]

@walterf25 Is there a question? All I can see in your last post is just quoting me

 

[walterf25]

@walterf25 Is there a question? All I can see in your last post is just quoting me

Yeah sorry, I think B4X server went down exactly at the same time i was posting my reply.

Anyhow, here's the code for the FillHermosaProtoA sub

Sub FillHermosaProtoA As ABMTable
    Dim tbl1 As ABMTable
    tbl1.Initialize(page, "tbl2", True, False, True, "tbl1theme")
    tbl1.SetHeaders(Array As String("Internal Part No", "Description", "Rev.", "Date Received", "Quantity Received", "Balance", "Qty Out", "Taken By", "Comments", "Update"))
    tbl1.SetHeaderThemes(Array As String("headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter", "headerfooter"))
    
    If DBM.GetSQL.IsInitialized Then
        Dim sql As SQL
        sql = DBM.GetSQL
    Else
        DBM.InitializeSQLite(File.DirApp, "LabInventory.db", False)
        sql = DBM.GetSQL
    End If
    
    Dim rs As ResultSet
    rs = sql.ExecQuery("SELECT rowid, Internal_PartNo, Description, Revision, Date_Received, Quantity_Received, Taken_By, Balance, Comments FROM HermosaProtoA ORDER BY Date_Received ASC")
    
    Dim n As Int = 0

    Do While rs.NextRow
        Log($"inside loop getting items"$)
        Dim cols As List
        Dim rCellThemes As List
        rCellThemes.Initialize
        cols.Initialize
        n = n + 1
        If n Mod 2 = 0 Then
            cols.Add(rs.GetString("Internal_PartNo"))
            rCellThemes.Add("positive2")
            cols.Add(rs.GetString("Description"))
            rCellThemes.Add("positive2")
            cols.Add(rs.GetString("Revision"))
            rCellThemes.Add("positive2")
            cols.Add(rs.GetString("Date_Received"))
            rCellThemes.Add("positive2")
            cols.Add(rs.GetString("Quantity_Received"))
            rCellThemes.Add("positive")
            cols.Add(rs.GetString("Taken_By"))
            rCellThemes.Add("positive")
            cols.Add(rs.GetString("Balance"))
            rCellThemes.Add("positive2")
            cols.Add("")
            rCellThemes.Add("positive")
            Dim val As String = rs.GetString("Comments")
            If val = Null Then
                val = ""
            End If
            cols.Add(val)
            rCellThemes.Add("positive")
            Dim update As ABMButton
            update.InitializeFloating(page, "update"&n, "mdi-notification-sync", "")
            cols.Add(update)
            rCellThemes.Add("buttons")
        Else
            cols.Add(rs.GetString("Internal_PartNo"))
            rCellThemes.Add("nocolor2")
            cols.Add(rs.GetString("Description"))
            rCellThemes.Add("nocolor2")
            cols.Add(rs.GetString("Revision"))
            rCellThemes.Add("nocolor2")
            cols.Add(rs.GetString("Date_Received"))
            rCellThemes.Add("nocolor2")
            cols.Add(rs.GetString("Quantity_Received"))
            rCellThemes.Add("nocolor")
            cols.Add(rs.GetString("Taken_By"))
            rCellThemes.Add("positive")
            cols.Add(rs.GetString("Balance"))
            rCellThemes.Add("nocolor2")
            cols.Add("")
            rCellThemes.Add("nocolor")
            Dim val As String = rs.GetString("Comments")
            If val = Null Then
                val = ""
            End If
            cols.Add(val)
            rCellThemes.Add("nocolor")
            Dim update As ABMButton
            update.InitializeFloating(page, "update"&n, "mdi-notification-sync", "")
            cols.Add(update)
            rCellThemes.Add("buttonsnocolor")
        End If
        
        Log("rowid: " & rs.GetString("rowid"))
        Log($"column list size ${cols.Size}"$)
        tbl1.AddRow("uuid"&rs.GetString("rowid"), cols)
        tbl1.SetCellTag(n-1, 0, rs.GetString("rowid"))
        tbl1.SetRowThemes(rCellThemes)
    Loop
    sql.Close
    Return tbl1
End Sub

And I am using the latest ABMaterial Library version 4.3

Thanks,
Walter