public Sub ConnectPage()
Dim ResultLabel As ABMLabel
ResultLabel.Initialize(page, "ResultLabel", "", ABM.SIZE_H4, True, "right")
' we are going to use this component on the B4JS side, so give it a UNIQUE key
ResultLabel.B4JSUniqueKey = "ResultLabel"
ResultLabel.PaddingRight = "10px"
page.Cell(2,1).AddComponent(ResultLabel)
' setting a fixed height to the cell
page.Cell(2, 1).SetFixedHeight(90, False)
' a list with all the buttons so we can easily iterate through them to build the buttons
Dim Buttons As List = Array As String("7", "8", "9", "/", "4", "5", "6", "*", "1", "2", "3", "-", ".", "0", "Del", "+", "=")
Dim ButtonPos As Int = 0
For x = 1 To 4
For y = 1 To 4
' we use just a label for the 'button'
Dim btn As ABMLabel
' as we will raise events from the cell this time, we must give it also a UNIQUE key
page.Cell(2+x, y).B4JSUniqueKey = "btn" & ButtonPos
If y < 4 Then
' the first three button (white) of the row
btn.Initialize(page, "" & ButtonPos, Buttons.Get(ButtonPos), ABM.SIZE_H4, True, "black")
btn.IsTextSelectable = False
' setting the white theme
page.Cell(2+x, y).UseTheme("white")
' attaching our B4JS methods to the Cell events. We pass the labels ID that we can then use in the Javascript SetCSS method
page.Cell(2+x, y).B4JSOnMouseEnter("B4JSCalculator", "OnMouseEnter", Array As String("btn" & ButtonPos))
page.Cell(2+x, y).B4JSOnMouseLeave("B4JSCalculator", "OnMouseLeave", Array As String("btn" & ButtonPos))
Else
' the last button in the row (black). We don't set a hover effect on theù
btn.Initialize(page, "" & ButtonPos, Buttons.Get(ButtonPos), ABM.SIZE_H4, True, "white")
btn.IsTextSelectable = False
page.Cell(2+x, y).UseTheme("black")
End If
' all the cells have a click event and we pass the labels text to the B4JS function to use in the Select Case
page.Cell(2+x, y).B4JSOnClick("B4JSCalculator", "ButtonPressed", Array As String(Buttons.Get(ButtonPos)))
' also setting a fixed height
page.Cell(2+x, y).SetFixedHeight(90, False)
' add we add the component as an Array component
page.Cell(2+x, y).AddArrayComponent(btn, "btn")
' next button
ButtonPos = ButtonPos + 1
Next
Next
' finally we also add our last button, the =
Dim btn As ABMLabel
' setting the UNIQUE key
page.Cell(7, 1).B4JSUniqueKey = "btn" & ButtonPos
btn.Initialize(page, "" & ButtonPos, Buttons.Get(ButtonPos), ABM.SIZE_H4, True, "white")
btn.IsTextSelectable = False
' using the green theme
page.Cell(7, 1).UseTheme("green")
' also using the ButtonPressed function from B4JS
page.Cell(7, 1).B4JSOnClick("B4JSCalculator", "ButtonPressed", Array As String(Buttons.Get(ButtonPos)))
' setting the height
page.Cell(7, 1).SetFixedHeight(90, False)
' and finally adding it as an Array component
page.Cell(7, 1).AddArrayComponent(btn, "btn")
' and just to be sure if our server is still synced with the browser when we need it, lets show an msgbox
Dim btnServerResult As ABMButton
btnServerResult.InitializeFlat(page, "btnServerResult", "", "", "Hey, server what is my current result?", "")
page.Cell(9, 1).AddComponent(btnServerResult)
' refresh the page
page.Refresh
' Tell the browser we finished loading
page.FinishedLoading
' restoring the navigation bar position
page.RestoreNavigationBarPosition
End Sub