In 4. above, we created the
id, field1, field2, field3 textboxes, changed some properties like tabindex, label.text and saved these for the form. We saw how they will look based on the preview (top right) and saw how the code will be like on 'source code' (bottom right). Let's take this to B4J.
Fire up the BANanoWebix skeleton app template from your downloads.
In the B4J top menu, click Windows > Reset. On the bottom right of your IDE select the Libraries tab.
Ensure that BANano 3.09+, BANanoWebix 1.06+, BP (0.2) This is an updated version of the lib) are loaded.
Now you are ready to do this, let's just test if everything is ok. Let's run the BANanoWebixApp project. If all goes well, this is what you need to see. A kinda like blank canvas with Hello BANanoWebix.
The project itself has been ready for you to work on. All you need to do is transfer the code from the designer to the b4j project. As you might have noted, the BANano_Ready call just activates a module.
Code:
Sub BANano_Ready()
'build a page and render it to the body of the page
pgIndex.init("body")
End Sub
If you open up the module code, there is nothing except the 'Hello..."
Code:
Sub Init(pgContainer As String)
pg.Initialize("index", pgContainer).SetResponsive(True).SetHeader("Hello BANanoWebix")
pg.UI
End Sub
We have initialized a page, we want the contents of whatever is generated inside that page to be rendered inside a container called 'body'. So to create our BANanoWebix App, we need to write code between the pg.initialize and the pg.ui methods. We will however write any other subs and events for button clicks anywhere else.
Now lets copy our code to the project.
In the form designer, click on 'form' in the tree. Copy the source code of the form and paste it to our b4j project.
Now you will have something like this..
Code:
Sub Init(pgContainer As String)
pg.Initialize("index", pgContainer).SetResponsive(True).SetHeader("Hello BANanoWebix")
'lets create a form
Dim form As WixForm
form.Initialize("form")
form.SetName("form")
pg.AddRows(form.Item)
pg.UI
End Sub
Running the project now will give an error because the form is blank. So let's copy and paste all the code from our designer to our b4j project and create the form in completeness. This process involves for each element we want to add.
Click the element, copy source code, paste code to our project. At the end we have this code.
Code:
Sub Init(pgContainer As String)
pg.Initialize("index", pgContainer).SetResponsive(True).SetHeader("Hello BANanoWebix")
'lets create a form
Dim form As WixForm
form.Initialize("form").SetName("form")
Dim id As WixText
id.Initialize("id").SetType("text").SetLabel("ID")
form.AddRows(id.Item)
Dim field1 As WixText
field1.Initialize("field1").SetType("text").SetLabel("Field 1")
form.AddRows(field1.Item)
Dim field2 As WixText
field2.Initialize("field2").SetType("text").SetLabel("Field 2")
form.AddRows(field2.Item)
Dim field3 As WixText
field3.Initialize("field3").SetType("text").SetLabel("Field 3")
form.AddRows(field3.Item)
pg.AddRows(form.Item)
pg.UI
End Sub
What I have done is to chain the methods.
1. We initialized the page...
2. We initialized the form
3. We added elements to the form. We added these in the sequence that we want them to appear
4. We added the form to the page.
5. We build the UI by calling pg.UI.
Now running our app produces this.
The form is being added to the rows collection of the page pg.AddRows(form.item) thus it takes the whole width of our page.
Each element is being added to the rows collection of the form, form.AddRows(field1.item) thus it takes the whole width of the form.
So far our UI looks cool. But we need buttons and things.
