B4J Question [ABMaterial] Request for complex BuildGrids

[alwaysbusy]

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.

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]

A Christmas present in the making???

 

[Harris]

    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]

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? ):

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]

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?

 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

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]

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]

@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]

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

    ' 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]

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]

    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]

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 ,,,

1. windows 10 pro
2. Java Version 8 Update 241
3. B4J 8.10

 

[Cableguy]

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

 

[alwaysbusy]

the .vat file

You probably mean the .bat file

 

[Cableguy]

You probably mean the .bat file

Dahm t9!!!

 

[andy67]

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