ABMPage is the main entrypoint to your webpage in a B4J Server WebSocket class. If you've copied the ABMPageTemplate, page and all its events will be declared for you.
It is good practice to have to methods in your page class: BuildTheme() and BuildPage(). BuildTheme() can be used to set up all your themes you are going to use in this page. You can inherit all the themes you declared in ABMShared using the AddABMTheme() method, and create additional themes for this page specific.
public Sub BuildTheme() // start with the base theme defined in ABMShared theme.Initialize("pagetheme") theme.AddABMTheme(ABMShared.MyTheme) // add additional themes specific for this page theme.AddContainerTheme("white") theme.Container("White").BackColor = ABM.COLOR_WHITE theme.Container("White").ZDepth = ABM.ZDEPTH_1 End Sub
BuildPage() has to be setup in a certain way before you can start adding controls. First, load your themes. Next Initialize the Page object and add a navigation bar if you need one. Before we can add components, we have to desing our page grid. If you have not read the part on Grids, this is now a good time.
Once you have added all your rows and cells you must use the BuildGrid command BEFORE you start adding components!
public Sub BuildPage() // initialize the theme BuildTheme // initialize this page using our theme page.InitializeWithTheme(Name, "/ws/" & AppName & "/" & Name, False, theme) page.ShowLoader=True ABMShared.BuildNavigationBar(page, "ABMPage", "../images/logo.png", "", "Helpers", "ABMPage") // create the page grid page.AddRows(5,True, "").AddCells12(1,"") page.BuildGrid //IMPORTANT once you loaded the complete grid AND before you start adding components End Sub
Start adding components
You can add components to a cell with two methods: AddComponent() or AddArrayComponent(). To add a component to a specific cell, 'navigate' to the cell width Page.cell(rowIndex,cellIndex). RowIndex and cellIndex are One-Based: meaning, the first row = 1, the first cell within a row = 1. Because you have to use Page.Cell() to position yourself within you page, you can see how important it is you've designed your grid well before adding components. If you have to 'insert' a row, you will have to go change the all the Page.Cell() lines after it to correct them. I'm thinking of a way to avoid this problem so that you can add components 'relative' to the previous row. (work in progress).
The code to add this line label looks like this (adding it to row 5, cell 1)
// add paragraph page.Cell(5,1).AddComponent(ABMShared.BuildParagraph(page,"par6","The code to add this line label looks like this (adding it to row 5, cell 1)") )
When you go through the code, you will see several components are added to the same row and cell. Therefor it is important you give each component a unique ID. Internally, ABMaterial uses a Map() object to organize the components, and the same IDs will overwrite each other. One exception you may overlook this rule is: 1. You do not need to access the control anywhere in your code (like a static label) AND 2. the components are in different rows. But generally, just give them all a unique id, and you do not have to worry about this.
How about AddArrayComponent()?
AddArrayComponent is a shortcut function to add several components that will share the same event code. For example, on the ABMChip page, we add the chips with AddArrayComponent() because we do not know how many chips there are going to be and we can't write a click event for each of them seperately.
I found it practical giving the 'Array' components just the numeric part of the ID. This way you can use the Event name as you would any other event. e.g. here: 'mycheck' is the ArrayName, and '5', '6', '7', '8' are the IDs. Now we can use mycheck_Clicked() and use the target to get our individual component.
// create the chips Dim ch5 As ABMChip ch5.Initialize(page, "5", "Dad", False, "") ch5.Image = "../images/dad.jpg" page.Cell(8,1).AddArrayComponent(ch5, "mycheck") Dim ch6 As ABMChip ch6.Initialize(page, "6", "Mom", False, "") ch6.Image = "../images/mom.jpg" page.Cell(8,1).AddArrayComponent(ch6, "mycheck") Dim ch7 As ABMChip ch7.Initialize(page, "7", "Brother", True, "") ch7.Image = "../images/brother.jpg" page.Cell(8,1).AddArrayComponent(ch7, "mycheck") Dim ch8 As ABMChip ch8.Initialize(page, "8", "Sister", True, "") ch8.Image = "../images/sister.jpg" page.Cell(8,1).AddArrayComponent(ch8, "mycheck")
Sub mycheck_Clicked(Target As String) Dim chip As ABMChip = page.Component(Target) Dim title As String = chip.Text Dim myTexts, myReturns As List myTexts.Initialize myReturns.Initialize myToastId = myToastId + 1 page.ShowToast("toast" & myToastId, "toastgreen", "Clicked " & title, 5000, myTexts, myReturns) End Sub
Adding a footer to your page
Each page can have a footer. You have floating and fixed footers. The footers on all the pages in this app are floating (they scroll with the page), except the one on this page which is fixed (it is always on the bottom of your screen, no mather how you scroll the body). This can be handy if you want to have e.g. buttons on the bottom of your app that should be accessible at all time. Footer is an ABMContainer, so you can put whatever ABMComponent into it, making it a powerful taskbar.
When you use a fixed footer, you need to set the padding in pixels of the bottom of the page!
Sub BuildFooterFixed(page As ABMPage) page.isFixedFooter= True // because we have a fixed footer at the bottom, we have to adjust the padding of the body in pixels page.PaddingBottom = 150 page.Footer.AddRows(1, True, "").AddCellsOS(2,0,0,0,6,6,6, "") page.Footer.BuildGrid //IMPORTANT once you loaded the complete grid AND before you start adding components page.Footer.UseTheme("footertheme") Dim lbl1 As ABMLabel lbl1.Initialize(page, "footlbl1", "Blog: Alwaysbusy's Corner{BR}{BR}B4J by Anywhere Software{BR}Materialize CSS by students from Carnegie Mellon University",ABM.SIZE_PARAGRAPH, False, "whitefc") page.Footer.Cell(1,1).AddComponent(lbl1) Dim lbl2 As ABMLabel lbl2.Initialize(page, "footlbl2", "ABMaterial Copyright @2015{BR}By Alain Bailleul{BR}{BR}Email: alain.bailleul@telenet.be",ABM.SIZE_PARAGRAPH, False, "whitefc") page.Footer.Cell(1,2).AddComponent(lbl2) End Sub
Pausing/Resuming your Page
With Page.Pause you can pause your app. This can be useful if you have to do something very time consuming on your server and the user has to wait some time. A black transparent overlay with 'loading' animation will be shown over the page. IMPORTANT! You have to resume the action with Page.Resume.
A good next read would be the ABMNavigationBar section in the Helpers menu.