B4J Library Bootstrap4Grid

Ola

So today I decided to look into this. After a couple of hours writing notes and speaking to myself in the process trying to figure it out, a long break travelling and some speaking to the kids, some debugging and some good trial and error, here is it.

What does this do? This generates the HTML bootstrap grid from a single class, just a basic grid using original source code. This could be adopted for other grid generating frameworks. One could use JQuery to put components using the ids of the RCs, if one explores this further.

How is this done?

Dim grid As BootstrapGrid
    grid.Initialize
    'the rc values should show the rcs
    grid.ShowID = True
    'add 1 row with two columns, column 1 spanning 10 spaces and column 2 spanning 2 spaces
    grid.AddRows(1).AddColumns(1,10,10,10,10).AddColumns(1,2,2,2,2)
    'add 2 rows, each row should have 2 columns, each column spanning 6 spaces
    grid.AddRows(2).AddColumns(2,6,6,6,6)
    'add 3 rows each row should have 3 columns, each column should span 4 spaces
    grid.AddRows(3).AddColumns(3,4,4,4,4)
    'show the bootstrap grid definition
    LogError(grid.tostring)
    'return boolean value of dic with id=R1 exists
    LogError(grid.RowExists(1))
    'return boolean value of div with id=R7C1 exists
    LogError(grid.ColumnExists(7,1))
    'log how many rows we have i.e. 1+2+3=6
    LogError(grid.HowManyRows)

The output? Lemme screep dump rather

In Summary...

This is not necessary limited to bootstrap but could be a generic grid builder for any web framework following responsive design. There is just one method to add rows to the grid, AddRows(x) and another method to AddColumns(x,ss,sm,sl,sxl)

NB: This wont be explored further than this. Example B4J project attached, it prints to the logs.

 

[Mashiane]

BootstrapGrid

• AddRows (Rows2Add As Int) As BootstrapGrid
  Add a specic number of rows, the following method should be AddColumns
• SetRowMargins (RowPos As Int, MarginTop As Int, MarginBottom As Int, MarginLeft As Int, MarginRight As Int) As BootstrapGrid
  set the row margins, the row should exist
• SetColumnMargins (RowPos As Int, ColPos As Int, MarginTop As Int, MarginBottom As Int, MarginLeft As Int, MarginRight As Int) As BootstrapGrid
  set the column margins using RC, the RC should be the actual position
• SetRowPadding (RowPos As Int, PaddingTop As Int, PaddingBottom As Int, PaddingLeft As Int, PaddingRight As Int) As BootstrapGrid
  set the row padding, the row should exist
• SetColumnPadding (RowPos As Int, ColPos As Int, PaddingTop As Int, PaddingBottom As Int, PaddingLeft As Int, PaddingRight As Int) As BootstrapGrid
  set the column padding, the RC should be the actual position
• AddColumns (Columns2Add As Int, SpanSmall As Int, SpanMedium As Int, SpanLarge As Int, SpanXLarge As String) As BootstrapGrid
  add a number of columns specifying their spans, use with AddRows
• ToString() As String
  returns the grid definition
• RowExists (rowPos As Int) As Boolean
  check if the row exists
• ColumnExists (rowPos As Int, colPos As Int) As Boolean
  check if the column exist
• HowManyRows() As Int
  how many rows do we have

Documented with Martins... http://b4a.martinpearman.co.uk/xml2bb/