B4J Question [ABMaterial] Request for complex BuildGrids

alwaysbusy · Dec 17, 2016

Hi all,

I'm putting the last hand on the ABMGridBuiler and it would be nice to have some grids you have created in your own projects that were rather complex (e.g. really making use of the responsive design concept).

e.g.

B4X:

Page.AddRows(1, true,"").AddCells12(1,"").AddCellsOS(1,0,0,1,12,6,3,"").AddCellsOS(1,0,0,0,12,6,4,"").AddCellsOS(1,0,0,0,12,6,3,"").AddCellsOS(1,0,0,1,12,6,3,"").AddCellsOS(1,0,0,0,12,6,4,"").AddCellsOS(1,0,0,0,12,6,3,"")
Page.AddRows(1, true,"").AddCellsOS(1,0,0,1,12,12,7,"").AddCellsOS(1,0,0,0,12,12,3,"")
Page.BuildGrid ' IMPORTANT!

IMPORTANT NOTE: no grids who do use CONSTANTS in these lines. I need the pure numbers and values.

Thanks in andvance!

Alain

Cableguy · Dec 17, 2016

A Christmas present in the making???

Harris · Dec 17, 2016

B4X:

    page.AddRowsM( 1, True,  10,  3, "rowtheme").AddCellsOSMP(1,0,0,0,  6,3,3,     5 , 5, 0,0,"cnter") .AddCellsOSMP(1,0,0,0,6,3,3,  5,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,0,3,3,  5 ,  5,0,0,"cnter").AddCellsOSMP(1,0,0,0,0,3,3 ,    5,   5, 0,  0,"cnter")
    page.AddRowsM( 1, True,  0,   13, "rowtheme1").AddCellsOSMP(1,0,0,0, 6,3,3,   5 , 5, 0,0,"cnter") .AddCellsOSMP(1,0,0,0,6,3,3, 5,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,0,3,3,  5 ,   5, 30,10,"cnter").AddCellsOSMP(1,0,0,0,0,3,3 ,   20,   5,30, 10,"cnter")
    page.AddRowsM( 1, True,  0,   13, "").AddCellsOSMP(1,0,0,0, 6,4,4,   5 , 5, 0,0,"cnter") .AddCellsOSMP(1,0,0,0,6,4,4,  15,5, 0,0,"cnter").AddCellsOSMP(1,0,0,0,0,4,4,  15 ,   5, 30,10,"cnter") '.AddCellsOSMP(1,0,0,0,3,3,3 ,   20,   5,30, 10,"cnter")

Desktop

Looks like for small devices, I should show the delete button, but disable it for Non Admin users...

Phone

Tablet

I get a toolbar of desktop and a grid of a phone?

alwaysbusy · Dec 17, 2016

This code actually creates a very weird grid in my ABMGridBuilder (on phone it has 'empty' cells). And yes, you will be able to copy your AddRow code in the clipboard and the builder will 'visualize it'

This is the code it generates back (but in reality, I would never been able to build it in the editor as a cell can never be 0 width, so something I have to think about. But hey, that is why I asked in this post for some unusual code, no? ):

B4X:

Page.AddRowsM(1, true,10,3,"rowtheme").AddCellsOSMP(1,0,0,0,6,3,3,5,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,6,6,6,5,5,0,0,"cnter").AddCellsOSMP(2,0,0,0,0,3,3,5,5,0,0,"cnter")
Page.AddRowsM(1, true,0,13,"rowtheme1").AddCellsOSMP(2,0,0,0,6,3,3,5,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,0,3,3,5,5,30,10,"cnter").AddCellsOSMP(1,0,0,0,0,3,3,20,5,30,10,"cnter")
Page.AddRowsM(1, true,0,13,"").AddCellsOSMP(1,0,0,0,6,4,4,5,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,6,4,4,15,5,0,0,"cnter").AddCellsOSMP(1,0,0,0,0,4,4,15,5,30,10,"cnter")

Harris · Dec 17, 2016

alwaysbusy said:
I would never been able to build it in the editor as a cell can never be 0 width

I have not tried to make sum not > 12 (so I set it to 0 for phone).
I did have it set to 1 at some point with no ill effect.
But the gen would then see sum > 12 can bitch about it?

The only other way is to detect device size and Case it... But that's more code to maintain.
I already do this in connectpage... Is there a better way?

B4X:

 Sub setScrnSize(pg As ABMPage)
   
    Dim ret As Int = 2
    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

B4X:

Sub ConnectPage()
   
ABMShared.setScrnSize(page)   



If ABMShared.ScrnSize = 0 Then   ' phone

    Log(" new scrn size "&ABMShared.ScrnSize)

   'put components in 2 cells cause we are on phone

    Dim btnaddnew As ABMButton
    'btnaddnew.InitializeFlat( page , "AddCaseBtn", "mdi-content-add-circle", ABM.ICONALIGN_LEFT, "Add","amber")
    btnaddnew.InitializeFloating(page,"AddMastBtn","mdi-content-add-circle", "amber")
    page.CellR(0,1).AddComponent(btnaddnew)

Else

   ' put components in 3 or 4 cells (tablet or desktop)

End If

alwaysbusy · Dec 17, 2016

it is not a problem going over 12. That is just the point it wraps.

Your code is not bad at all. You adept the 'content' of cell to the screen it is on. A better user experience (but of course some more work for you, the programmer)

alwaysbusy · Dec 18, 2016

@Harris I think I have found a rather elegant solution for your cell size 0 problem. By giving all the AddRiow and AddCell methods an AddrowV and AddCellV equivalent (the V stands for Visibility) + adding a couple of new Visibility Constants (ABM.VISIBILITY_SHOW_ON_SMALL, etc), you will actually be able to show or hide cells (or even rows) depending on the device size. So you can add one type of button to e.g. R1C2 which is visible on small devices and other type of button in R1C3 which is visible on tablets and desktops. (Note, due to how Materialize CSS is build, two out of three need to be the same. So you cannot set hide/show for phone AND tablet AND desktop. At least one of those AND's needs to be an OR).

In the editor it will look like this:

Or with the 'Hide invisibles' checkbox set, they will appear the same on the right (although the phone picture shows C2 and the others C3.

The generated code looks like this:

I'll have a version ready for you Donators of the builder before Christmas (yes @Cableguy )

mindful · Dec 18, 2016

alwaysbusy said:
(Note, due to how Materialize CSS is build, two out of three need to be the same. So you cannot set hide/show for phone AND tablet AND desktop. At least one of those AND's needs to be an OR)

Actually I have a row setup for each screen (small, medium, large) like this:

B4X:

    ' create the page grid
    page.AddRows(3,True, "").AddCells12(1,"")
    page.BuildGrid 'IMPORTANT once you loaded the complete grid AND before you start adding components
    page.Row(1).Visibility = ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_BELOW ' for large
    page.Row(2).Visibility = ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_ABOVE ' for small
    page.Row(3).Visibility = ABM.VISIBILITY_HIDE_ON_LARGE_ONLY & " " & ABM.VISIBILITY_HIDE_ON_SMALL_ONLY ' for medium

And it works

alwaysbusy · Dec 18, 2016

idd. Forgot about that As they are just CSS classes, they should be combinable. But you will have to be knowing what you do else you could make some 'impossible' combinations. And it won't hurt having something like: SHOW_ON_MEDIUM_ONLY

Harris · Dec 19, 2016

B4X:

    Dim tblUsers As ABMTable
    tblUsers.IsResponsive = True

    tblUsers.Initialize(page, "tblUsers", True, True, True, "tbltheme")
    tblUsers.SetHeaders(         Array As String ("ID"  , "Number"   , "Division Name"    , "Description"    , "Manager"    , "Open/Edit", "Delete"))
    tblUsers.SetHeaderThemes(    Array As String ("bg"  ,"bg"      , "bg"      , "bg"       ,"bg"           , "bgc"      , "bgc"   ))

    tblUsers.SetHeaderHeights(   Array As Int    (0     , 0        , 0         , 0          , 0             , 48         , 48      ))   

    tblUsers.SetColumnVisible(   Array As Boolean(False, True      , True      , True       , True          , True       , True    ))

The SetHeaderHeights seems to be more important on smaller devices. Without it, everything gets mis-aligned - especially when using an image in a col.

Desktop, everything looks fine...

ivanomonti · Mar 27, 2020

ho scaricato il materiale completo diABMaterial e nel lanciare grid builder 4.0 mi viene fuori tutto bianco,,,

I downloaded the complete material of ABMaterial and in launching grid builder 4.0 everything comes out to me white ,,,

windows 10 pro
Java Version 8 Update 241
B4J 8.10

Cableguy · Mar 27, 2020

You must NOT launch the .jar file. It's the .vat file that you must launch

alwaysbusy · Mar 27, 2020

Cableguy said:
the .vat file

You probably mean the .bat file

Cableguy · Mar 27, 2020

alwaysbusy said:
You probably mean the .bat file

Dahm t9!!!

andy67 · Mar 28, 2020

sorry allan, I have had several problems in recent times ... now I would like to resume programming ... http://feedback.abmaterial.com site not working?

B4J Question [ABMaterial] Request for complex BuildGrids

alwaysbusy

Expert

Cableguy

Expert

Harris

Expert

alwaysbusy

Expert

Harris

Expert

alwaysbusy

Expert

alwaysbusy

Expert

mindful

Active Member

alwaysbusy

Expert

Harris

Expert

ivanomonti

Expert

Cableguy

Expert

alwaysbusy

Expert

Cableguy

Expert

andy67

New Member

Similar Threads

B4J Question [ABMaterial] Request for complex BuildGrids

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

New Member

Similar Threads

Privacy & Transparency

Privacy & Transparency