Lesson 2: Creating Multiple Pages
In this lesson, we look at how do we create multiple pages in our single page app. We will use buttons to navigate the pages which will have click events.
Creating multiple pages involves the process of clearing the contents of the
body in our page everytime a new page needs to be rendered.
To do this we use
code modules. Project > Add New > Code Module.
We name one module page1 and the other page2 and in each we have a .Show method. This time around we move our code to generate page content from BANano_Ready to the page that we want to show initialy, in this case, page 1
In Main.BANano_Ready, we call the page we want to show.
Code:
Sub BANano_Ready
'show the initial page we want to see
page1.Show
End Sub
When page1.Show is executed, it needs to build the content of that page. This happens in real-time.
Code for page1.codemodule
Code:
'Static code module
Sub Process_Globals
Private BANano As BANano 'ignore
End Sub
Sub Show
'get the body element of the page
Dim body As BANanoElement = BANano.GetElement("#body")
'clear the body
body.Empty
'add the contents
body.Append("<h1>Hello there, I am page 1. Click the button to go to page 2.</h1>").Append("<br/>")
'add the button
Dim btn1 As BANanoElement = body.Append($"<button id="btn1">Page 2</button>"$).Get("#btn1")
'add a click event to the button
btn1.HandleEvents("click", Me, "btn1_click")
End Sub
Sub btn1_click(e As BANanoEvent)
page2.show
End Sub
Here we define a global BANano variable in case we will use it in our page. Previously we got the body element and then appended to it. This time around, whilst we will append to the body, we will create an own independent element named 'btn1'. We create it individually because we want to assign a 'click' event to it.
We added a H1 element to the page that indicates which page we are in. We then defined btn1 as bananoelement, the contents of this element will be residing on the body of the page, thus,
body.append. To assign the HTML element defined within <button></button>, we call the .Get(?) element.
Because we want to trap the 'click' event of the button, we attach an event to the button. The event is click, this will call the btn1_click method which resides on this code module i.e. Me. We have used HandleEvents, this cancels out preventDefault.
There is a tutorial
here about events written by alwaysbusy.
btn1_click receives an event object when called, thus it being passed. When btn1_click is fired, we want page2 to be shown thus calling page2.show. In page 2 we want to clear the contents of the body and show the contents of page 2.
The code for the second module is almost identical.
Debugging & Checking out your transpiled code.
At times, you might run through error in our app, you can run it in debug mode so that you can try and identify errors. With this you have the ability of seeing the
transpiled code of your app.
Open app.js after running your app in debug mode, you will see similar...
Code:
// =========================== page1 ===========================
function banano_dummies_page1() {
var _B;
// [6] Sub Show
this.show=function() {
if (_B==null) _B=this;
var _body,_btn1;
// [8] Dim body As BANanoElement = BANano.GetElement( {1} )
_body=u("#body");
// [10] body.Empty
_body.empty();
// [12] body.Append( {2} ).Append( {3} )
_body.append("<h1>Hello there, I am page 1. Click the button to go to page 2.</h1>").append("<br/>");
// [14] Dim btn1 As BANanoElement = body.Append( {0} ).Get( {4} )
_btn1=_body.append("<button id=\"btn1\">Page 2</button>").find("#btn1").bananofirst();
// [16] btn1.HandleEvents( {5} , Me, {6} )
_btn1.handle("click", function(event) {if (typeof _B["btn1_click"]==="function") {return _B["btn1_click"](event,_B)}});
// End Sub
};
// [19] Sub btn1_click(e As BANanoEvent)
this.btn1_click=function(_e) {
if (_B==null) _B=this;
// [20] page2.show
_banano_dummies_page2.show();
// End Sub
};
Where is banano_dummies_page1 coming from? This is the BANano library, the b4j project file name is 'dummies', the module we added was page1. BANAno is case sensitive and thus most things should be lower case.
Running the BANano code this way (debug), enables you to see the representation of the code you wrote in b4j and how it was transpiled to javascript. BANano internally uses the
UmbrellaJS library (an alternative to JQuery), thus most of its functions are close to JQuery. To regress a little, there has been drives to leave JQuery by most, in some instances due to security issues or otherwise, for example,
http://youmightnotneedjquery.com
Running the same code in Release mode gives different code as its now encrypted, for example _body is now _B1.
Code:
function banano_dummies_page1() {
var _B;
this.show = function () {
if (_B == null) _B = this;
var _B1, _B4;
_B1 = u("#body");
_B1.empty();
_B1.append("<h1>Hello there, I am page 1. Click the button to go to page 2.</h1>").append("<br/>");
_B4 = _B1.append("<button id=\"btn1\">Page 2</button>").find("#btn1").bananofirst();
_B4.handle("click", function (event) {
if (typeof _B["btn1_click"] === "function") {
return _B["btn1_click"](event, _B)
}
});
};
this.btn1_click = function (_e) {
if (_B == null) _B = this;
_banano_dummies_page2.show();
};
}
Things to remember:
Code:
Dim btn1 As BANanoElement = body.Append($"<button id="btn1">Page 2</button>"$).Get("#btn1")
We created a button element with a unique identifier "
btn1".Each time you create a HTML element, you can give it an identifier. The identifier should be unique and it should ALWAYS be in lowercase.
The .Get("#btn1") at the end is the same as
Code:
Dim btn1 As BANanoElement = BANano.GetElement("#btn1")
In JQuery, this could have been written like..
In JavaScript, this could have been written like...
Code:
var btn1 = document.getElementById("btn1");
All of these are using the unique identifier for the HTML element,
btn1
BANAno transpiles the code to javascript based on Umbrella (Unencryped Debug Mode)
Code:
var _btn1;
_btn1 = u("#btn1)
Please note the declaration on the left is just the variable name, i just decided to call it btn1, you can use any variable name.
You can also attach events to elements and there are various ways to do this as per link provided above.
Ta!
