B4J Tutorial [ABMaterial] ABMaterial For Dummies (lessons)

Discussion in 'B4J Tutorials' started by Harris, Jan 16, 2018.

  1. Harris

    Harris Well-Known Member Licensed User

    This has been often asked for - so it is high time to produce one.

    Lesson 1 - Master Template Project (covers Grids, BuildPage and ConnectPage). Required! - Contains all files for ABMaterial projects

    Lesson 1A - More on ABM Grids ( Rows and Cells )

    Lesson 2 - Simple ABMLogin with Public / Private Pages

    Lesson 3 - MySQL and CRUD / ABMTables

    Lesson 3A - More about ABMTables

    Lesson 4 - Working With Containers

    Lesson 5a - ABMGenerator
    Lesson 5b - Report Setup

    Lesson 6 - Sample Next Reports

    Lesson 7 - ABMGenerator revisited (includes ABMTable)


    On the surface, ABMaterial appears to be a complex framework - which in fact, it is. However, through the series of specific topics (new posts), we will expose how easy it is to use - and construct beautiful / functional web apps.

    The first post in this series (ok, the second) will have a complete project based on @alwaysbusy (empty) Template project included in each version he releases. It shall use ABM version 4.03 which is available to everyone. This well documented example will expose the Template page (populated with controls), a simple About page and the ABMShared code module containing the navigation bar and component themes. This is generally enough to get a newcomer started - since it actually does something!

    We encourage others who are proficient with ABM to contribute well documented examples to this tutorial. Usually, this will be in the form of a stand alone "page" that can be added to the project, and any support methods needed which should go into the ABMShared code module.
    For the pupil, he/she will download your .bas and add it to the project, create a menu item in the nav bar, add requirements in Main to initialize and any methods for ABMShared.

    Many lessons (new posts) will be added with simple sections - as not to over-complicate matters.

    PLEASE - DO NOT Post questions here!
    It only serves to muddy the waters of a clean flow.


    Here is a small sample of what to expect:
    Code:
    public Sub ConnectPage()
        
    ' connecting the navigation bar - now that we have built one above...
        ' examine the code in ABMShared to see how this works...
        ABMShared.ConnectNavigationBar(page)
     
     
        
    ' Let's add some components to the page - labels (with text), buttons and other controls...
        ' page.Cell(1,1).AddComponent(ABMShared.BuildLabel - here we add a label component to Row 1 / Cell 1, using a single statement
        ' and a method found in ABMShared Code Module.
        ' page.Cell(1,1).AddComponent(ABMShared.BuildLabel(page, "basic1",  - each component MUST have a Unique ID ("basic1" in this case)
        ' Notice that the text is right-justified...  How???  Using a theme - "lbltheme1"
        ' I will let you discover what the other parameters are for this method...
        page.Cell(1,1).AddComponent(ABMShared.BuildLabel(page"basic1",   "See the faint green dot above in title bar?  This means your websocket is connected! {BR} All of this page's code is explained in the source file! {BR}{NBSP}",  ABM.SIZE_H4, "lbltheme1"0"25px"))

        
    ' Here we add another component in Row 2, Cell 1 - It is essentially a label with block quote
        page.Cell(2,1).AddComponent(ABMShared.BuildParagraphBQWithZDepth(page"basic13",   "Hi There!  I am in Row 2 of this page!   {BR}{BR} I Have 'Flow Text' Applied. What does that mean? Resize this browser window and watch THIS text size shrink and grow accordingly!" ))

        
    ' Lets do something different in Row 3...
    '.............................................
    templatepage.jpg

    The second post will have a link to download the base project - since it is much too large to attach here.


    Thanks
     

    Attached Files:

    Last edited: Apr 19, 2018
  2. Harris

    Harris Well-Known Member Licensed User

    Master Template Project.

    Lesson 1

    Download the linked project and unzip to a folder of your choosing anywhere on your drive.
    You MUST be using ABMaterial 4.03 and B4J 5.90 (minimum).

    In the Template folder, double click on the Template.b4j file to open the project in B4J.
    Compile the app.

    In your web browser address bar, go to:
    http://localhost:51045/template

    Read the attached ABMaterial For Dummies.pdf

    Study the ABMPageTemplate.bas which is commented. This is the template page from the menu selection.

    All other files in this project make up a foundation of any typical ABMaterial application.
    They shall be examined in greater detail in future sessions.

    PLEASE - Post any questions / comments in the B4J Questions forum (title - ABM for dummies).

    http://gorgeousapps.com/ABMaterialForDummies.zip
    or
    https://www.dropbox.com/s/88klwrt918ccral/ABMaterialForDummies.zip?dl=1

    (above sites provided by yours truly - @alwaysbusy )

    Thank you.
     

    Attached Files:

    Last edited: Jan 23, 2018
  3. Harris

    Harris Well-Known Member Licensed User

    Lesson 1A

    Because the concept of the Grid is so important, let us review the brief introduction from Lesson 1.

    ********************************************************************************
    I hope everyone caught this error in my comments from the template page - Sorry!

    ' Now the cells part of adding rows... - .AddCellsOSMP( 1,0,0,0,12,12,12, 0, 0, 0, 0,"")
    The above line is correct. I was explaining how to use AddCellsOSMP properly.

    ' AddCellsOS( 1, - add one cell to this row...
    This line is incorrect. I forgot to add the MP to AddCellsOS!
    The actual compiled code is correct thou...
    ********************************************************************************

    There are many ways to add rows and cells.
    They all do the same thing essentially, with additional control for various types.

    Add Rows
    These are the current methods to add rows to a grid:
    page.AddRow( Adds 1 row with cells of equal size (possible values: 1,2,3,4,6,12) , center in page, row theme, cell theme )
    page.AddRows( Adds 'x' rows, center in page, row theme )
    page.AddRowsM( Same as above with top and bottom margin )
    page.AddRowsM2( Same as above with left and right margin )
    page.AddRowsMV( top and bottom margins with visibility set for desired device - ABM.VISIBILITY_ALL - implies all devices)
    page.AddRowsMV2( all margins with visibility set )
    page.AddRowsV( Same as AddRows with visibility set )

    If you want (or need) the most flexibility when creating rows, always use page.AddRowsMV2().
    This will allow you to set any property (number of rows, all margins, visibility) - and then tweek it later if need be.

    Note: The link below explains the importance of understanding the proper use of AddRows (AddRowsM in this case...). @alwaysbusy does an excellent job of helping us understand what happens, when and why.

    https://www.b4x.com/android/forum/threads/abmaterial-modalsheet-scrollbar-issue.88870/

    Add Cells
    page.AddRows().AddCells12( number of cells , theme )
    page.AddRows().AddCells12MP( #, margins (top, bottom) / padding (left/right) and themes )
    page.AddRows().AddCells12MPV( Same as above with visibility )
    page.AddRows().AddCells12V(#, visibility and themes )
    Note: Number of cells example for above: Creating 3 x 12 Cells will 'wrap' them to the next line!

    page.AddRows().AddCellsOS( number of cells, device offset (s,m,l), size (s,m,l), theme )
    page.AddRows().AddCellsOSMP( number of cells, margins (top, bottom), padding (left, right), theme )
    page.AddRows().AddCellsOSMPV( Same as above with visibility set )
    page.AddRows().AddCellsOSV( Same as AddCellsOS with visibility set )

    If you want (or need) the most flexibility when creating cells, always use AddCellsOSMPV().
    This will allow you to set any property (number of cells, all offsets, all margins, visibility) - and then tweek it later if need be.

    You really can't see nor clearly understand all these effects until you run them in browsers on different device sizes.
    Try and adjust your desktop browser window width to emulate these effects.

    Something new about adding rows/ cells...

    Adding Row/Cell Components - .Content.CellR(0,1)
    CellR() stands for row Relative - to the current row...

    In the example below, we add components to a row (and cell) NOT by row number, but by how far to move down the grid relative to the current row.

    Let's assume the current row is Row 1 (start/top of grid).

    The next line of code states the component to be placed in current row + 0 ( ie. row 1 / cell 1).
    ABMGentiZonesModal.Content.CellR(0,1).AddComponent(ABMShared.BuildParagraphBQWithZDepth(page,"par1"," Note: Vehicle Types.") )

    This, the next line of code states to place component in current row + 1 (ie. row 2 / cell 1).
    ABMGentiZonesModal.Content.CellR(1,1).AddComponent(ABMGentiZonesmastpk)

    This, the next line of code states to place component in current row + 0 (ie. row 2 / cell 2).
    ABMGentiZonesModal.Content.CellR(0,2).AddComponent(ABMGentiZonesname)

    This, the next line of code states to place component in current row + 0 (ie. row 2 / cell 3).
    ABMGentiZonesModal.Content.CellR(0,3).AddComponent(ABMGentiZonesspeed)

    This functionality may prove useful at times....


    http://prd.one-two.com:51042/demo/ThemesPage/abmaterial-theme-color.html
    http://prd.one-two.com:51042/demo/GridsPage/abmaterial-grid-layout.html

    The above page links describes themes and grids. By now, I hope you have a good understanding of how to apply both.
    AB also has a Grid Builder to make this process extra simple.
    This excellent tool lets you build grids and visualize how each row / cell in the entire grid will look on various devices. How cool is that!

    Thanks
     
    Last edited: Jan 28, 2018
  4. Harris

    Harris Well-Known Member Licensed User

    Lesson 2 - Simple ABMLogin with Public / Private Pages

    Simple because we are not using a database table (this time) to validate username and password.

    Most "membership only" websites begin with a public access page(s). Here they introduce prospects to what they have to offer before clients "sign-up".
    Once registered, users will then Login to the private pages with a username and password.

    The key to determining if login is required is by setting a NeedsAuthorization variable.

    On Public pages, NeedsAuthorization = False.
    On Private Pages, NeedsAuthorization = True

    During a successful login, a session variable (cookie) is set:
    Page.ws.Session.SetAttribute("IsAuthorized", "true" )
    ' ( Name, Value )

    Code:
    ' Each page looks at this attribute to determine it's state:
        If ABMShared.NeedsAuthorization Then   ' Does this page need Authorization?
            If session.GetAttribute2("IsAuthorized""") = "" Then   '  Check for Authorization status.  If "" then direct user to Login process.
                ABMShared.NavigateToPage(ws, ABMPageId, "../")
                
    Return
            
    End If
        
    End If
    You will find this code block in the WebSocket_Connected of each page.

    This lesson includes two new files: HomePage.bas and ABMLoginHandler.bas. Over-write all files in the project since some other files have new / changed content.
    The home page is your public "store front" and the login handler will process a user to gain access to the private pages.

    The Home Page also provides new navigation menu options. These are only visible when viewing the public pages.

    Code:
    public Sub BuildPage() ' HomePage.bas
    ' ...............
        ' builds the public nav bar as a top menu items
        ABMShared.BuildNavigationBarextra(page,  "Home","../images/logo.png""Home""Home""Home")
     
    ' ...............  
        ' builds the login sheets for user login process
        ABMLoginHandler.BuildModalSheets(page)

    End Sub

    Sub ConnectPage()
       
    ' ConnectNavigationBar2 is purposely built for public pages... It does not require a login to view
     '........
        ABMShared.ConnectNavigationBar2(page,  "Home""Home""Home",  Not(ws.Session.GetAttribute2("IsAuthorized""") = ""))
     
    '.......
    End Sub





    '**  Home Page  ************************************************
    ' handle the login and cancel buttons from the login sheet.
    Sub loginbtn_Clicked(Target As String)
        ABMLoginHandler.HandleLogin(
    "Home"page)
    End Sub

    Sub logincancelbtn_Clicked(Target As String)
        ABMLoginHandler.CancelLogin(
    page)
    End Sub

    '*************************************************************

    ' ABMShared module...
    Sub BuildNavigationBarextra(page As ABMPage, Title As String, logo As String, ActiveTopReturnName As String, ActiveSideReturnName As String, ActiveSideSubReturnName As String)

    ' ...............

         
    ' Init the top bar navigation for public pages - use a new theme to style it....
        page.NavigationBar.Initialize(page"nav1", ABM.SIDEBAR_AUTO, Title, TrueTrue33054, sbtopimg, ABM.COLLAPSE_ACCORDION, "nav1theme")

    ' ...............  
    End Sub
    ' ABMLoginHandler.bas - The Default User Name and Password...

    ' username password
    If (logininp1.Text = "dumb") And (logininp2.Text = "dumber") Then ' username and password for dummies after all...
    ' do your thing
    end if


    Included are the complete set files including project and .bas files.
    Replace all the existing files
    If you are familiar with B4J, then this lesson should be easy.

    The login introduces a ModalSheet. The creation structure is just like a page with rows and cells.
    The sheet is first built and then called using:
    page.ShowModalSheet("login") - from the HomePage.

    The sheet is closed using:
    page.CloseModalSheet("login")

    You should be able to read / follow the code and understand the logic.
    A little explanation can go a long way. If you get stuck, ask a question in the B4J Questions section.

    Thanks
     

    Attached Files:

    Last edited: Jan 23, 2018
  5. Harris

    Harris Well-Known Member Licensed User

    Lesson 3 - MySQL and CRUD / ABMTables

    Sure, you could use Wix, Go-Daddy or any one of the other so called web-site development systems to create your picture based site (in about an hour...).
    However, these systems don't support a database that you can add and manage. I guess that's why they are site development and not web-app systems.
    Database support is what really makes a web-app. You can use any database (MSSQL, Oracle, postgres, etc) since JDBC drivers exist for all of them.

    This lesson provides a basic, yet interesting example of how to work with database tables and records in your ABM projects.

    The attached zip has everything (code) included.
    You will need a WAMP (Windows version) to continue with this lesson (see below for a nice light one...).
    Also, import the attached users.sql (users.zip) into your database - using your favorite DB manager. I use phpmyadmin.


    Adding MySQL Support Drivers

    In the Main of our project, we must add the driver for MySQL. This driver file will be placed in our Libraries folder.
    The required jar is too large to attach to this post.
    ' #AdditionalJar: mysql-connector-java-5.1.37-bin
    ' #AdditionalJar: mysql-connector-java-5.1.44-bin ' latest jar file...

    Now you must init this driver.
    ' you will need YOUR database name, user name (login), password and pool size

    ' DB Name username password pool size
    ' DBM.InitializeMySQL("jdbc:mysql://localhost/ harris ?characterEncoding=utf8", "harris", "b12xw3455", 100 )
    ' or...
    ' DBM.InitializeMySQL("jdbc:mysql://localhost/database_name?characterEncoding=utf8", "username", "password", 100)

    The Main also explains how the apps pages are inited and added.


    Login - Uses a database lookup.

    In ABMShared, UsingDB is set to True. This forces the login system to use a table for user authorization.
    Public UsingDB As Boolean = True ' Using a table to check username and password
    Check out the code in ABMLoginHandler - the HandleLogin method.

    UsersPage.bas - The CRUD page

    The table system (ABMTable) in ABMaterial is second to none.
    Study the ConnectPage, LoadUsers and tblUsers_Clicked methods carefully.
    These explain how to create ABMTables, populate and work with them.
    Also, @alwaysbusy created a CRUD code generator. It can easily create the crud code for you - but you should know how this code works just the same.

    http://downloadbull.com/portable-usb-webserver-8-6-free-download/
    Web server link (if you don't have one already). I use this for my day to day development on my local pc.
    I use an industrial LAMP on my Linux remote production servers.

    Thanks
     

    Attached Files:

    Last edited: Apr 10, 2018
  6. Harris

    Harris Well-Known Member Licensed User

    Lesson 3A - More about ABMTables

    Since we had so much fun in Lesson 3 learning about ABMTables, I have added more content along the same lines....
    In this section we will add ABMLabel, ABMImage, and ABMSwitch to our ABMTable - all quite easily!

    Attached are 2 files:
    UsersPage.zip - the .bas file reworked for this lesson...
    dumb.zip - Place the folder in this zip in your: www/template/images folder. (result: "www/template/images/dumb")

    Here is a snap shot of the new ABM Users Table... The Edit (modalSheet) has changed as well...
    Read comments in the .bas file for instructions - as per usual...

    Thanks

    abmtables.jpg
     

    Attached Files:

    Last edited: Jan 23, 2018
  7. Harris

    Harris Well-Known Member Licensed User

    Lesson 4 - Working With Containers

    Question: What are containers?
    Answer: A place to put your stuff...

    Or more specifically, "another" place to put your stuff (components) - aside from the page.

    Containers are special and powerful components useful in creating wonderful apps.
    In this example, we will use 1/3 of the page to hold a container and the rest to show container actions.

    I shall supply the .bas file. It is now up to you to:
    1) add it to the project,
    2) init it in Main,
    3) add the page name to the navigation menu in ABMShared (or replace an existing item - like
    page.NavigationBar.AddSideBarSubItem("Config", "Company", "Test Containers", "mdi-action-home", "../ContPage") )


    More on this subject by @alwaysbusy
    http://prd.one-two.com:51042/demo/HelperContainerPage/abmaterial-container.html

    Good luck and enjoy this simple lesson.
    When the lessons are completed, perhaps you will create the advanced - "ABMaterial for Experts" !!!
     

    Attached Files:

  8. Harris

    Harris Well-Known Member Licensed User

    Lesson 5 - ABMGenerator (Part A)

    This handy tool was mentioned previously and really deserves a closer look.
    In part A of this section (one of many), we shall look at what it (simply) takes to generate modal sheet code for CRUD.
    I think that once you see the power of this, you won't bother writing these by hand any longer (or copy/paste as I have done previously).

    History
    Back when ABMaterial was first introduced, I asked @alwaysbusy if it was possible to create a code generator that would reduce the drudgery of writing ABMTables and Modal Sheets code - since each time the result was practically identical. Initially, he had some reservations about this yet 2 days later - ABMGenerator appeared!
    The result was much more than I could ever image possible. I swear he has a team of clever elves coding somewhere, like in Erel's basement - next room over from Erel's group. :) What do you feed elf coders? (Bits and Bites!).

    The attached About.bas contains the generator sections. For now, all we shall do is let it generate the code (lot's of it) - then view it.
    Each line is documented as to its' function in the generation process.

    Read (study) the output result. Be amazed (as I was) of the code design. Only a true professional could think of creating such well structured code.
    Look how updates and inserts are handled. This sure beats (by 1000 fold) the ultimate mess I would have written left to my own sparse knowledge of proper design.
    I have personally learned so much from ABM code examples - from his supplied projects. Now you can too since you will have a good idea of what you are looking at.


    In the next segment of this multi-part lesson, we shall use the generated output on a table I shall supply. We will also fill in some of the "blanks" of this result - since a generator can't do everything - but darn near! Also, we shall build the required ABMTable since the generator doesn't do this currently (easy enough for us however). We will look at a template for the "LoadTable" method - required and similar in each case where you will build new pages containing new (different) DB tables.

    The end result of our efforts in this series will introduce us to Next Reports - and how we shall use what we have built to drive / configure a simple reporting system (also based on the previous use of containers lesson).

    Again, ABM is essentially just your GUI. Let's put it to work directing B4J code, ABM complete components / helpers and other important web app things.

    We take things slowly around here - like Bill Murray in the movie "What About Bob" - baby steps....

     

    Attached Files:

    Last edited: Feb 3, 2018
    clarionero, inakigarm, Anser and 7 others like this.
  9. Harris

    Harris Well-Known Member Licensed User

    Lesson 5 - Report Setup (Part B)

    In this session we shall put our generated code to good use. We shall make the Report Setup form.
    Invariably, we may find our initial design (that we asked the generator to create) was slightly off the mark... No problem, we can fix it.
    The point was - it created a bunch of clean code we didn't have to write.

    Here is a list of things we must do / provide with the generated code:
    1) Create your ABMTable construct. We covered this previously.
    2) Provide the table name and where clause field name in SELECT, INSERT and UPDATE statements. I've shown where these go...
    3) Correct the modal sheet footer in the ABMGenBuildreport (or whatever the name is)... Add the button Text Name (Save and Cancel) and remove the transparent theme.
    4) Add margins for each row in the build sheet.
    5) Add titles to the Switch Components (when required).
    6) Re-order our input fields in our sheet.

    Note: All above has been corrected in the attached...

    Report Setup
    The Report Setup form is a simple helper that defines what reports our application provides and what parameters are required to run each.
    We can add new reports as they become available - and update our application with little effort.

    Reports Page
    This is where we will put our setup to use. Each report we choose may have various and different parameters shown to allow proper configuration.
    This section also introduces the use of ABMSideBar. This cool component keeps our main page clean while allowing our configuration container to slide in/out when required.

    Unzip the files to your template project (overwrite where asked).
    Add the two new .bas files to your project (reportPage, setup_paramPage)

    Import the report1.sql into your db. This is required to drive our reporting system.

    Add the following into Main, where shown...

    Code:
    Dim reportp As reportPage
        reportp.Initialize

        
    Dim reportset As setup_paramPage
        reportset.Initialize

        
    '****** End Init pages **********************************************
            
        
    ' add each of the pages to the app
        '***** Start Add pages ***********************************************

        myApp.AddPage(reportp.page)
        myApp.AddPage(reportset.page)
    Under Configure App - see Setup Reports

    Under Applications - see Reports Page

    In the next lesson of this series, we shall add some actual reports. This requires the Next Reports framework.
    I will supply some report files based on our data for the next lesson.
    Creating reports can be entertaining - when you don't have to fight with a reporting framework. Each has it's quirks and features.
    I have found that the more you pre-process your reporting data - the easier the process is.
    We shall create temp tables for our data - add blobs to support image printing and other fun stuff...

    If you are not familiar with NR, I suggest you download it and study how it works.
    You will need the engine files for the next lesson. Like B4J - it's all FREE...

    Get the NR designer...
    http://www.next-reports.com/products/nextreports-designer.html

    And the NR engine...
    http://www.next-reports.com/products/nextreports-engine.html

    We won't need the server - however it is nice to know there is one with NR (just like the expensive big boys).

    Finally, I shall have to assume that the lack of questions in the B4J Questions form concerning ABM for Dummies means that I am accomplishing the task of keeping this simple - for all us dummies.... As you can see - this stuff isn't difficult - when shown how easy...

    Thanks
     

    Attached Files:

  10. Gabino A. de la Gala

    Gabino A. de la Gala Active Member Licensed User

    The truth is that everything worked the first time.
    A really good job. Thank you very much.

    The only thing that did not work the first time was the connection to the MySql database. Finally it was only to change the default port that came in the 3307 portable application by the 3306 and it worked.

    I am anxious waiting for the next lesson.
    Thanks again.
     
    clarionero likes this.
  11. Mashiane

    Mashiane Expert Licensed User

    Can't wait... thanks man, this is good stuff here...;)
     
    clarionero and joulongleu like this.
  12. Harris

    Harris Well-Known Member Licensed User

    Lesson 6 - Sample Next Reports

    This lesson requires Next Report jar files as defined in the previous lesson.
    It also requires the jNxtReportsB4J library.

    This example has very little to do with ABMaterial. The ABMPDFViewer is used to show the NR pdf generated reports.
    We shall also show reports, in a new tab, when generated using the NR html output format.

    In the Main.bas, include the following lines in the project attributes section...

    Code:
    #AdditionalJar:nextreports-engine-9.1
        
    ' Don't forget to add jNxtReportsB4J in the B4J IDE Libraries tab
     
    '    Download these jar files to the B4J Libraries folder
    '    All these jar files are available from http://www.next-reports.com/download.html
        #AdditionalJar:commons-jexl-2.1.1
        
    #AdditionalJar:commons-logging-1.1.3
        
    #AdditionalJar:itext-2.1.7
        
    #AdditionalJar:itext-rtf-2.1.7
        
    #AdditionalJar:itextpdf-5.0.6
        
    #AdditionalJar:xstream-1.3.1
        
    #AdditionalJar:xstream-1.4.7
        
    #AdditionalJar:poi-3.7
    Supplied files:
    Replace the reportPage.bas with this new file attached.
    Place the pics folder into the template\images folder. (result -> template\images\pics )
    Place the reports folder into the the Objects folder. (result -> Objects\reports)

    Import the sql files into your database. Note: replace existing report1 with supplied file. Add insptype.

    The reports folder contains the NR report templates. These were created with Next Reports 9.1
    You can open these with your installed copy of Next Reports.

    The reportsPage.bas is well commented. Make sure you supply the correct url for the jdbc database definition - since the supplied code won't work in your environment.
    Next Reports will not generate a report when in Debug mode (use release mode).

    Good luck and remember to post comments or questions in the B4J Questions forum.

    Edit: The users.zip in lesson 3 has been updated to include images (pics) in case your example does not include it. This may happen if you did not follow these lessons from the beginning (lesson 1).

    Thanks
     

    Attached Files:

    Last edited: Apr 12, 2018
  13. Mashiane

    Mashiane Expert Licensed User

    After careful thoughts, I decided to work on Part 1 of this very big task. With this video, before I delve into the code and what to change, we look at what ABMaterial is, its structure (blank template), the Demo project and various other elements that we use to create our web apps. I hope you will enjoy the video as much as I enjoyed creating it. Ta!

    Watch in HD.

     
  14. Mashiane

    Mashiane Expert Licensed User

    Templating & Your Next ABM WebAPP

    Hi there...

    This is a continuation about the template video I added here..

    I have been thinking about the next section of the 'Template' and would really like to do my contributions here a lot of justice. In my post, above, I back-tracked a little to give an overview of everything this seeks to address, as a result, rather took a slow approach. Reason being, as a creator, the question of what you want to achieve with ABM and the understanding of how everything fits in together, becomes extremely crucial. So my two cents resulted in this diagram below.

    NB: Click the image to expand it and see it nicely...

    ABMBeast.png

    Before one writes even a single line of code, a pure understanding of how everything ABM is knitted together is necessary. I believe you are here because you are interested and also want to develop beautiful things with ABM. You have made a very good decision. This is a very beautiful framework and above I just did an overview of how I understand it, I'm still learning like everyone else and still make mistakes.

    An ABM project is made up of components that can be categorized into Input Controls (user has to enter/select something), Buttons, Media (display something, play music), Layouts (contain other components), Navigation (move around the page), Events related components e.g. calendar, planner etc, Reporting & Other things like the XTR (translating your app), Conzole (debug your app), ABMGenerator (Lesson 5a above) and Security (captchas, social-auth) etc.

    I have tried to remember as much as I can referencing the Demo ABM app also. Please if there is anything I have left out, kindly shout!

    All of the components indicated above will help one using the ABMPageTemplate to create beautiful UXs for their apps.

    When all the components that you want to use for your app are built into each of the pages you will have, these compile into a WebApp that you can then deploy to VPS. There are some developments towards publishing on GCE (Google Cloud Environment).

    In summary, the components feed into your ABM WebApp, you code each component you need to sit inside any of the layouts, especially the ABMPage (ABMPageTemplate class), these using B4J are compiled to into a WebApp, they you deploy this to a VPS.

    In my next post and hopefully last post about the template, I will conclude about the three most important 'blank template' classes that you need to be up and running with your ABM WebApp.

    I hope you found this informative just like I also found it.

    PS: This diagram is created using a custom component. See here
     
    Last edited: Apr 18, 2018
    clarionero, joulongleu and microbox like this.
  15. Mashiane

    Mashiane Expert Licensed User

    Your ABM WebApp Design: Part 1

    Now that you have an idea of what your next ABM will contain as per components discussed above. You need to look at the design, the look and feel and how everything will work together to make your perfect app. This answers the question of where the components will be placed?

    The starting point for that is the ABMGrid. The grid helps you place the components/controls you want on your containers, i.e. ABMPage, ABMContainer, ABMSmartWizard, ABMTabs etc etc.

    Let's just do a quick refresher based on Lesson 1A above.

    NB: Most of the ABM component needs to sit in a row/cell co-ordinate in a Grid.

    The ABMGridDesigner is a tool to help you create the grid that will host your components. Basically it helps you create something like Figure 1 below without typing the code. AB started the grid concept in 2016 and it has matured a great deal after that.

    Figure 1

    ABMGrid.png

    1. You need to add rows to the grid. Each row should have a cell or a couple of cells. The various methods to add rows as discussed by Harris, are AddRow, AddRows, AddRowsM etc. Each cell is added using any of the methods like AddCells12, AddCellOS, AddCellOSMP etc.

    2. You can add 1 row at a time or add multiple rows at the same time. The cells added will apply on all the rows being added. In the above Figure, 1 row was added to demonstrate each of the various methods of adding the rows.

    3. Each row as 12 cells / columns. This is depicted by the faint gray lines in each row.

    Let's explain Figure 1 above.

    I have created a grid with 12 rows and 12 columns/cells across. The sizes e.g. 111,999,222 indicate the span of each cell/column. For example, AddCells12(1,"") will add 1 single cell in that row spanning 12 spaces.

    3.1 AddCellOS(2,0,0,0,6,6,6,"") - adds 2 cells in that row spanning 6 spaces. This can be also done with .AddCellOS(1,0,0,0,6,6,6,"").AddCellOS(1,0,0,0,6,6,6,"")
    3.2 The example with cells 1,1,1:9,9,9:2:2:2 adds 1 cell, 9 cells and 2 cells as depicted above respectively.

    4. In all the rows in Figure 2 except the first row we have 2 cells/columns. The first row will be referenced with...

    Code:
    page.Cell(1,1).AddComponent(xxx)
    The 2nd row

    Code:
    page.Cell(2,1).AddComponent(xx1)
    page.cell(2,2).AddComponent(xx2)
    The 7th row has 3 cells, thus to add anything in each of them one will use...

    Code:
    page.Cell(7,1).AddComponent(xx1)
    page.Cell(7,2).AddComponent(xx2)
    page.Cell(7,3).AddComponent(xx3)
    NB: Each time you execute an AddRow method, ABM increments the existing row counters with the number of rows to add. In the Figure above, AddRows(1...) was used for all the row:cell system. The ABM framework then does the magic of referencing the RCs for you and allocates the correct RC co-ordinates for you.

    What about the MP (margins and padding) in the methods?

    I have left that out because this is basically related to something called the CSS Box model. Let me explain. In the video, I indicated that ABM generates HTML and CSS code for your WebApp, with you not having to write that. That was AB's good intentions.

    Each element that you see on your ABM webapp is an HTML element, meaning that it can be considered as a box. In CSS terms, when talking about designs and layouts, the term, "box model" is used. This box model wraps around it every HTML element. It's made up of margins, padding, border, and the actual content. So as an example, an ABMInput control will have padding, a border and a margin around it etc etc.

    Explanation of the different parts:

    Content - The content of the box, where text and images appear
    Padding - Clears an area around the content. The padding is transparent
    Border - A border that goes around the padding and content
    Margin - Clears an area outside the border. The margin is transparent

    cssbox.png

    As noted, this padding and margins can be set for the rows and cells by specifying the M and P variables when adding the rows and columns. That should cover the MPs.

    V - Visibility

    Each component/row/cell that you add can have a visibility set. This visibility indicates how your HTML element should be displayed within the various devices that you are designing for. Remember, when working with the grid-designer, you are designing for small, medium and large devices at the same time. The ABMWebAppViewer shows the output of your app perfectly when you run it. You can then tweak it.

    The enumeration for the visibility is..

    Code:
    ABM.VISIBILITY_ALL
    ABM.VISIBILITY_HIDE_ALL
    ABM.VISIBILITY_HIDE_ON_SMALL_ONLY
    ABM.VISIBILITY_HIDE_ON_MEDIUM_ONLY
    ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_BELOW
    ABM.VISIBILITY_HIDE_ON_MEDIUM_AND_ABOVE
    ABM.VISIBILITY_HIDE_ON_LARGE_ONLY
    ABM.VISIBILITY_SHOW_ON_LARGE_ONLY
    ABM.VISIBILITY_SHOW_ON_MEDIUM_ONLY
    ABM.VISIBILITY_SHOW_ON_SMALL_ONLY
    ABM.VISIBILITY_SHOW_ON_MEDIUM_AND_ABOVE
    ABM.VISIBILITY_SHOW_ON_MEDIUM_AND_BELOW
    This then allows flexible design for your apps as you can hide/show components depending on your device.

    As you have picked up, there are Offset properties when adding cells to a row. We will touch on that in Part 2 of this intro.

    Thanks.
     
  16. Mashiane

    Mashiane Expert Licensed User

    Your ABM WebApp Design: Part 2

    This part of the design talks about Offsets. One of the users asked the other day how he can have buttons on either side of his row? AB answered him by pointing him to offsets.

    When creating Cells in your rows, there are variables for small, medium and large devices that are usually indicated with 0,0,0 then followed by the size of each cell for each device.

    To put it simply, offsets indent / nudge to the right your cells for each of the device specifications. With ABM, you specify how much this indentation/nudging should be as it takes space.

    Figure 1

    offsets.png

    1. In figure 1 above, as we are aware, each ABMRow has 12 imaginary ABMCells, i.e. 1R=12C.
    2. If we want to nudge/indent something, we need to offset it by the number of spaces that it needs to take. In row 2, we have used an offset of 1 (1 space to the right) and 11 spanning spaces for the cell.
    3. In row 3, same story, we nudged the cell to the right it taking 2 spaces. 2 offsets + 10 spaces = 12 cells
    4. Now the fourth row is rather interesting. We want to have a component on either side of the row. We add 1 cell spanning 2 cells and another cell spanning 2 cells with an offset of 8, making the cell complete with 12 cells.
    5. In all the rows except row 4, each row has just one cell, thus, referencing it when adding components, one would use .Cell(x,1).AddComponent. With the 4th row, its .Cell(4,1).AddComponent(c1) and .Cell(4,2).AddComponent(c2).

    This is due to the fact that we cannot use TAB to indent our layouts, so a smart way was created, Offsets.

    Please note: One last thing I would like to touch on, time allowing, before we delve on actual coding of the 'blank template' to create a new ABM project is 'Theming'. Please just bear a little while.

    PS: And this was so hard to grasp when I started ABM. It's a marvel that we have the grid-designer to help us through this, however before you even start with that, you need to have an idea of how you want your pages to look like and where your components should be placed.

    I hope so far this thread is helping you achieving that.

    Enjoy.
     
  17. Harris

    Harris Well-Known Member Licensed User

    Lesson 7 - ABMGenerator revisited...

    In a previous lesson we looked at the first version of the ABM Code Generator.
    I was reminded of a newer release of the generator that produces much more than ABMSheets.

    This lesson is a stand alone Template project (backup your old project or use a new folder if required).
    It will create a simple page populated with the code from the generator. The nice thing about this lesson is the creation of an ABMTable (a grid with records).
    ABMTables generally require support methods to use them effectively. The generator writes all the code for you!
    Simply modify certain sections - mostly to make it look pretty / apply themes - and enjoy all the code you DID NOT have to write!

    This example uses MySQL as the database - and a users table for the example. Rename your existing users table if you have one prior to importing this one.
    Modify the Init method in the Main.bas to your requirements.

    The "ABMPageTemplate" is well commented and includes the code from the generator - some modified slightly.

    Thanks
     

    Attached Files:

Loading...