Share My Creation AMPaperGrid Concept: Creating a 'Live Demo' of your B4J App

Yello!

Download AMPaperGrid

The purpose of this B4J is to show how one can achieve the creation of a 'Live Demo' by showing an end user ques in terms of how their B4J app works. What 'Live Demo' actually means is that during the running of the Demo, the app itself executes underlying code to perform actions.

The app itself has arrow keys that an end user can select and depending on the position of the tutorial, the particular control is highlighted with a 'red border' to indicate what the user should do. This also shows a toast explaining what the user should do.

Whilst the AMPaperGrid app itself works to create the various grids, (that you can print on paper, thus 'PaperGrid'), program code is executed to create the grids. The AMPaperGrid concept has been inspired by the ABMaterial GridBuilder and running a 'Live Demo' of one's app, could come handy in end users, whilst running the demo/tutorial they execute actual code.

In closing, AMPaperGrid is NOT a code generator and you can't use it for any ABMaterial related coding except off course some extra learning about the grid the design and printing of a limited 12x12 grid. It will not be taken any further than that!

That's all folks!!! Happy B4J programming.


Ta!

Related Articles:

My Take On the Grid
 
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
There might be an easier and quicker way to do this, however this is just the way I have done it, it could be improved...

What could be nice to have though: An overlay kinda view that actually get's placed within a view radius as a replacement to the toast!

B4X: 
Sub RunTutorial(tPos As Int)
    File.WriteString(File.DirApp,"steps.txt",tPos)
    CSSUtils.SetBorder(pnlGrid,1,fx.Colors.black,2)
    CSSUtils.SetBorder(txtGridLastRow,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridAddRow,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(pnlGrid,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells12,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(txtGridLastCell,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridClear,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells1,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells2,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells3,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells4,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells5,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells6,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells7,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells8,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells9,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells10,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells11,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCells12,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridRC,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridRR,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(txtGridSpan,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridCR,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridPrint,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR1,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridDecrease,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridIncrease,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridAddRowAfter,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridAddRowBefore,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridOpen,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridSave,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridAddCellAfter,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridAddCellBefore,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridRowDown,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGridRowUp,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid2x6,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid3x4,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid4x3,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid6x2,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid10p2,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid7p5,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid8p4,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid9p3,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid11p1,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid1p11,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid2p10,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid3p9,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid4p8,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(btnGrid5p7,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(txtGridLastCell,1,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR1,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR2,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR3,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR4,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR5,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR6,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR7,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR8,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR9,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR10,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR11,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblR12,0,fx.Colors.Gray,2)
   
    CSSUtils.SetBorder(lblC1,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC2,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC3,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC4,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC5,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC6,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC7,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC8,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC9,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC10,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC11,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(lblC12,0,fx.Colors.Gray,2)
   
    CSSUtils.SetBorder(GridR1,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR2,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR3,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR4,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR5,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR6,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR7,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR8,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR9,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR10,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR11,0,fx.Colors.Gray,2)
    CSSUtils.SetBorder(GridR12,0,fx.Colors.Gray,2)
       
    Dim txt As String
    Select Case tPos
    Case 0
        ' start
        jMash.InformUser1("Welcome to AMPaperGrid", "This has been a very fun and an experienced filled project in my B4J education, purely inspired by the ABMaterial Grid Designer." & CRLF & CRLF & _
        "Whilst this app DOES NOT generate and DOES NOT reverse engineer grids, it is also limited to 12 rows by 12 cells." & CRLF & _
        "I would like you to enjoy the 'Live Demo' functionality added, a feature that could be useful for your B4J apps." & CRLF & CRLF & _
        "This has been a fun intenstive 5 day experiment and you can click the '?' to show the current active Live Demo step.", MainForm, "CENTER")
    Case 1
        jMash.InformUser1("Step " & tPos,"Let's explain how this grid app works with this quick tutorial. Here we go!", MainForm,"")
    Case 2
        CSSUtils.SetBorder(txtGridLastRow,2,fx.Colors.Red,2)
        jMash.InformUser1("Step " & tPos,"On Top Left, you will see the active Row in the grid.", MainForm,"")
    Case 3
        CSSUtils.SetBorder(lblR1,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR2,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR2,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR3,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR4,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR5,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR6,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR7,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR8,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR9,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR10,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR11,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblR12,2,fx.Colors.red,2)
        jMash.InformUser1("Step " & tPos,"Also on the Left, you will see the Rows in the grid all the way down." & CRLF & _
        "This grid system is limited to 12 rows and 12 columns.", MainForm,"")
    Case 4
        CSSUtils.SetBorder(lblC1,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC2,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC2,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC3,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC4,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC5,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC6,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC7,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC8,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC9,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC10,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC11,2,fx.Colors.red,2)
        CSSUtils.SetBorder(lblC12,2,fx.Colors.red,2)
        jMash.InformUser1("Step " & tPos,"On the Top, you will see the Columns/Cell in the grid all the way down. This grid system is limited to 12 columns and 12 rows.", MainForm,"")
    Case 5
        CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.Red,2)
        jMash.InformUser1("Step " & tPos,"On Top Right, you will see the active RowCell in the grid.", MainForm,"")
    Case 6
        CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.Red,2)
        jMash.InformUser1("Step " & tPos,"Also On Top Right, you will see the active RowCell span i.e. how many spaces the cell is taking in the grid.", MainForm,"")
    Case 7
        CSSUtils.SetBorder(pnlGrid, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(btnGridClear, 2,fx.Colors.Red,2)
        CallSubDelayed(Me,"btnGridClear_Action")
        txt = "The grid is blank on startup, how ever to clear it at anytime, click 'GC'."
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")   
    Case 8
        CSSUtils.SetBorder(btnGridAddRow, 2,fx.Colors.Red,2)
        txt = "The next step is then adding row(s) to the grid. This is done by clicking 'NR', here we go." & CRLF & "We will click 'NR' and a new row will be added."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 9
        CSSUtils.SetBorder(btnGridCells1, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(btnGridCells2, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(btnGridCells3, 2,fx.Colors.Red,2)
        txt = "You can then use any of the Cell buttons to add cells to the active row." & CRLF & "These are 1 to 12, 2x6, 3x4, 6x6 etc. We have added 1 cell to the active row."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 10
        CSSUtils.SetBorder(btnGridCells2, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(GridR1, 2,fx.Colors.Red,2)
        txt = "Let's add 2 extra cells to the row." & CRLF & "We will now have 3 of 12 cells in total to the grid."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 11
        CSSUtils.SetBorder(btnGridCells9, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(GridR1, 2,fx.Colors.Red,2)
        txt = "Let's add 9 extra cells to the row to make the row 12." & CRLF & "We will now have 12 of 12 cells in total to the grid."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 12
        CSSUtils.SetBorder(btnGridAddRow, 2,fx.Colors.Red,2)
        txt = "Let's add 2 extra Rows to the grid to make us 3 rows. To do this we click 'NR' twice"
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 13
        CSSUtils.SetBorder(txtGridLastRow, 2,fx.Colors.Red,2)
        CSSUtils.SetBorder(btnGrid2x6, 2,fx.Colors.Red,2)
        txt = "By default, the last active row is now R3, what ever cells we add will go there." & CRLF & "Let's add 2 cells in that row which are spanning 6 each. Click 2x6."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 14
        txt = "To add/update/delete cells in another row, or clear/delete/update a row, you need to select it by clicking on it." & CRLF & "We have selected 'R2' now to process by clicking the orange part of 'R2'."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me, "GridSelectRow","R2")
        CSSUtils.SetBorder(txtGridLastRow, 2,fx.Colors.red,2)
        CSSUtils.SetBorder(GridR2, 2,fx.Colors.Red,2)
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 15
        CSSUtils.SetBorder(btnGridRR, 2,fx.Colors.red,2)
        txt = "We have decided that we don't want R2 anymore, click remove row, 'RR' to delete it."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me, "GridSelectRow","R2")
        CallSubDelayed(Me,"btnGridRR_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 16
        CSSUtils.SetBorder(btnGridRR, 2,fx.Colors.red,2)
        txt = "Let's add more rows, click 'NR' about 5 times, now we have 7 rows."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me,    "GridRemoveRow","R2")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        CallSubDelayed(Me,"btnGridAddRow_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 17
        CSSUtils.SetBorder(txtGridLastRow, 2,fx.Colors.red,2)
        CSSUtils.SetBorder(btnGrid6x2, 2,fx.Colors.red,2)
        CSSUtils.SetBorder(GridR3, 2,fx.Colors.red,2)
        txt = "Let's add more rows, click 'NR' about 5 times and add some cells too." & CRLF &  "Select R3, add '6x2' cells i.e. 6 cells spanning 2 each."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed2(Me,"GridAddRow",7)
        CallSubDelayed2(Me, "GridSelectRow","R1")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed2(Me, "GridSelectRow","R2")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me, "GridSelectRow","R3")
        CallSubDelayed(Me, "btnGrid6x2_Action")
        jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 18
        CSSUtils.SetBorder(txtGridLastRow, 2,fx.Colors.red,2)
        CSSUtils.SetBorder(btnGrid11p1, 2,fx.Colors.red,2)
        CSSUtils.SetBorder(GridR4, 2,fx.Colors.red,2)
        txt = "Let's select 'R4' and add 11+1 cells i.e. first column with 11 cells and the next column with 1 cell."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed2(Me,"GridAddRow",7)
        CallSubDelayed2(Me, "GridSelectRow","R1")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed2(Me, "GridSelectRow","R2")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me, "GridSelectRow","R3")
        CallSubDelayed(Me, "btnGrid6x2_Action")
        CallSubDelayed2(Me, "GridSelectRow","R4")
        CallSubDelayed(Me, "btnGrid11p1_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
    Case 19
        CSSUtils.SetBorder(btnGridCells1, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridLastRow, 2,fx.Colors.red,2)
        txt = "Let's select 'R7' by selecting it, add '1' cell in it."
        CallSubDelayed(Me,"btnGridClear_Action")
        CallSubDelayed2(Me,"GridAddRow",7)
        CallSubDelayed2(Me, "GridSelectRow","R1")
        CallSubDelayed(Me,"btnGridCells1_Action")
        CallSubDelayed(Me,"btnGridCells2_Action")
        CallSubDelayed(Me,"btnGridCells9_Action")
        CallSubDelayed2(Me, "GridSelectRow","R2")
        CallSubDelayed(Me,"btnGrid2x6_Action")
        CallSubDelayed2(Me, "GridSelectRow","R3")
        CallSubDelayed(Me, "btnGrid6x2_Action")
        CallSubDelayed2(Me, "GridSelectRow","R4")
        CallSubDelayed(Me, "btnGrid11p1_Action")
        CallSubDelayed2(Me, "GridSelectRow","R7")
        CallSubDelayed(Me,"btnGridCells1_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 20
            CSSUtils.SetBorder(btnGridCR, 2,fx.Colors.red,2)
            txt = "We realize we made a mistake in 'R7' and we want to clear it, click 'RC' to clear the row."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R7")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCR_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 21
            CSSUtils.SetBorder(btnGridAddRowBefore, 2,fx.Colors.red,2)
            txt = "We also realize that we are supposed to have another row just before 'R3', click on 'R3' to select it." & CRLF & _
            "Then click 'RB' (add row before) or 'RA' (add row after) to add another row."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 22
            CSSUtils.SetBorder(btnGridCells4, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(btnGridCells3, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(btnGridCells2, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(btnGridCells1, 2,fx.Colors.red,2)
            txt = "On the new row, which is now automatically 'R3', let's add 4,3,2,1 columns, click '4','3','2','1'."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 23
            CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(GridR3, 2,fx.Colors.red,2)
            txt = "Now, we want to increase the size of one of the cells we have just added, let's say 'R3.C2'." & CRLF & _
            "To update/delete a cell, you need to select it first. Click on 'R3.C2'"
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 24
            CSSUtils.SetBorder(btnGridIncrease, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(GridR3, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.red,2)
            txt = "Click '+1' button to increase the size of the 'R3.C2', the RC span will also increase"
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 25
            CSSUtils.SetBorder(btnGridIncrease, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(GridR3, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.red,2)
            txt = "Let's also increase 'R3.C4' by clicking '+1' button to increase the size of the 'R3.C4', the RC span will also increase"
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 26
            CSSUtils.SetBorder(btnGridDecrease, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(GridR1, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.red,2)
            txt = "Let's decrease 'R1.C3' by two sizes, we do so by clicking '-1' twice after we select 'R1.C3'."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 27
            CSSUtils.SetBorder(GridR1, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridLastCell, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(txtGridSpan, 2,fx.Colors.red,2)
            CSSUtils.SetBorder(btnGridAddCellBefore,2,fx.Colors.red,2)
            txt = "Actually, we want to add cells before 'R1.C3', let's select 'R1.C3' and add cells before it by clicking 'Cell Before'."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridAddCellBefore_Action")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 28
            CSSUtils.SetBorder(btnGridSave, 2,fx.Colors.red,2)
            txt = "We are almost done with our grid, let's save it. Click the 'Save' button to do so. You can click 'Cancel' there to continue."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridAddCellBefore_Action")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed(Me,"btnGridSave_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 29
            CSSUtils.SetBorder(btnGridOpen, 2,fx.Colors.red,2)
            txt = "You can also open an existing grid design by selecting the 'Open' button to do so. You can click 'Cancel' there to continue."
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridAddCellBefore_Action")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed(Me,"btnGridOpen_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 30
            CSSUtils.SetBorder(btnGridPrint, 2,fx.Colors.red,2)
            If lastSaved.Length > 0 Then
                GridFromFile(lastSaved)
            Else
            txt = "In case you want a hard copy of your grid, you can convert it into an image and print it out by selecting the 'Print' button"
            CallSubDelayed(Me,"btnGridClear_Action")
            CallSubDelayed2(Me,"GridAddRow",7)
            CallSubDelayed2(Me, "GridSelectRow","R1")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells9_Action")
            CallSubDelayed2(Me, "GridSelectRow","R2")
            CallSubDelayed(Me,"btnGrid2x6_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGrid6x2_Action")
            CallSubDelayed2(Me, "GridSelectRow","R4")
            CallSubDelayed(Me, "btnGrid11p1_Action")
            CallSubDelayed2(Me, "GridSelectRow","R3")
            CallSubDelayed(Me, "btnGridAddRowBefore_Action")
            CallSubDelayed(Me,"btnGridCells4_Action")
            CallSubDelayed(Me,"btnGridCells3_Action")
            CallSubDelayed(Me,"btnGridCells2_Action")
            CallSubDelayed(Me,"btnGridCells1_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C2")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R3.C4")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed(Me,"btnGridDecrease_Action")
            CallSubDelayed2(Me,"GridRowCellSelect","R1.C3")
            CallSubDelayed(Me,"btnGridAddCellBefore_Action")
            CallSubDelayed(Me,"btnGridIncrease_Action")
            End If
            CallSubDelayed(Me,"btnGridPrint_Action")
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
        Case 31
            txt = "Thank you for going through this tutorial, happy B4J programming."
            jMash.InformUser1("Step " & tPos,txt, MainForm,"")
            tPos = 0
            File.WriteString(File.DirApp,"steps.txt",tPos)
    End Select
End Sub

And the InformUser code....

B4X: 
Sub InformUser1(sTitle As String, sText As String, Frm As Form, location As String)
    If location = "" Then location = "BOTTOM_CENTER"
    cutils.ShowNotification3(sTitle, sText, cutils.ICON_INFORMATION, Frm, location,5000)
End Sub
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mastering the Team Grid Component
Replies
2
Views
202
Mashiane
Mashiane
aeric
  • Article
Share My Creation [Project Template] [Web] API Server 2
2 3 4
Replies
61
Views
12K
aeric
aeric
Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
43K
Mashiane
Mashiane
alwaysbusy
  • Article
B4J Library [ABPlugin] Live plugin library for your apps
Replies
6
Views
4K
alwaysbusy
alwaysbusy
alwaysbusy
  • Question
B4J Question [ABMaterial] Grid Builder (proof of concept)
Replies
6
Views
4K
ivanomonti
ivanomonti
Top