B4J Tutorial [BANanoWebix] App Creation Process: The UI

Ola

The form builder should be run on a web server as it uses SQLite with php. We use xampp. (The WebServer for Chrome DOES NOT support PHP)

Development Servers you can use

1. XAMPP
2. Laragon

This tutorial will introduce us of how to create an app using BANanoWebixFD (Form Designer)

At the end of this tutorial, we would have achieved the following:

1. We will create a backend database using BANanoSQL. This will use BANanoSQLUtils.
2. We will create a form with some textboxes
3. We will add some buttons that are related to CRUD, link these to the UI
4. We will test our app for functionality.



Get Set, Ready, Go

Get the complete BANanoWebix project

If you downloaded the complete project, just complete the rest of these 3 steps from your complete download. No need to redownload.

1. We will need the BANanoWebix library. Download and copy the contents of this folder to your b4j external libraries folder.
2. We will need the BANanoWebixFD, this is a form designer specifically creates to build BANano based apps using the BANanoWebix library. Download and unzip the FD on your webserver.
3. We will need a skeleton copy of a b4j BANanoWebix based project. Get it here

Designing the UI with the Form Designer

The next process involves creating the UI of our form, we want a simple form with some text boxes. You are already set up your development environment and are ready to create the UI.

1. Let's start the FD.

When you start the FD, its blank and you need to create your form.

01FD.png


2. Expand the Layouts on the side-bar and click form. This updates the property bag. There is nothing much to do here except click the 'save' button for now on the property bag toolbar. This will add the form to the treeview just under database.
 

Attachments

  • BANanoWebixAppDev.zip
    2.3 KB · Views: 394
Last edited:

ThRuST

Well-Known Member
Licensed User
Longtime User
I had a joyful moment watching that. Very nicely done. The music made up for your talking, but I'd like to hear it Speak out my son, or remain silent forever lol :)
Let your words bless us all, I will be the first to listen. Believe in the wholy ghost dear brother, wholy ghost power :)
 

Bothwell

Member
Licensed User
2. Expand the Layouts on the side-bar and click form. This updates the property bag. There is nothing much to do here except click the 'save' button for now on the property bag toolbar. This will add the form to the treeview just under database.

For me the form does not get added under the database when I try this step.

When I click save the download code button appears on the properties page but the form is not added on the treeview.

I downloaded the entire project from https://github.com/Mashiane/BANanoWebix
 

Mashiane

Expert
Licensed User
Longtime User
For me the form does not get added under the database when I try this step.

When I click save the download code button appears on the properties page but the form is not added on the treeview.

I downloaded the entire project from https://github.com/Mashiane/BANanoWebix
Sorry to hear that...

1. Are you running the form builder from a web server? If not please do as it’s using SQLite with php. We use xampp and it’s working perfectly.
2. The latest version of BananoWebix is 1.15, are you using that?
3. Can you please check the browser developer console log of what the error is and do a screenshot perhaps we can help.

Ta!
 

Bothwell

Member
Licensed User
I am running on my desktop with php -S localhost:8000
1. Are you running the form builder from a web server? If not please do as it’s using SQLite with php. We use xampp and it’s working perfectly

2. The latest version of BananoWebix is 1.15, are you using that?

not sure which version but when I click on forms I see there is "layout" below forms ( which is not on your screen shot above )
i downloaded the zip from https://github.com/Mashiane/BANanoWebix
upload_2019-7-22_12-39-17.png
 

Mashiane

Expert
Licensed User
Longtime User
not sure which version
Great, just one more thing, please copy the libraries in the folder 1. Libraries from this repo to your external libraries for b4j, https://github.com/Mashiane/BANanoWebix

Below is the libraries configuration for my b4j form builder code. You need to ensure yours is the same.

libs.png


One last thing, you also need to ensure that SQL3 extensions are enabled on your webserver in your php.ini file.

If you are experiencing the same issue, please pm me a screenshot from the browser console log.
 

Bothwell

Member
Licensed User
No luck yet, after saving and refreshing:


\Desktop\BANanoWebix-master\BANanoWebix-master\2. BANanoWebixFormDesigner\FormDesigner>php -S localhost:8001
PHP 7.2.11 Development Server started at Mon Jul 22 12:31:31 2019
Listening on http://localhost:8001
Document root is C:\Users\Dev\Desktop\BANanoWebix-master\BANanoWebix-master\2. BANanoWebixFormDesigner\FormDesignerPress Ctrl-C to quit.
[Mon Jul 22 12:31:46 2019] ::1:64783 [200]: /
[Mon Jul 22 12:31:46 2019] ::1:64782 [200]: /styles/app1563756049150.css
[Mon Jul 22 12:31:46 2019] ::1:64787 [200]: /scripts/app1563756049150.js
[Mon Jul 22 12:31:47 2019] ::1:64791 [200]: /manifest.json
[Mon Jul 22 12:31:47 2019] ::1:64792 [200]: /favicon.ico
[Mon Jul 22 12:31:55 2019] ::1:64828 [200]: /fonts/materialdesignicons-webfont.woff2?v=3.6.95
[Mon Jul 22 12:31:55 2019] ::1:64829 [200]: /styles/fonts/Roboto-Medium-webfont.woff2
[Mon Jul 22 12:31:55 2019] ::1:64830 [200]: /styles/fonts/webixmdi-webfont.woff2
[Mon Jul 22 12:31:55 2019] ::1:64831 [200]: /styles/fonts/Roboto-Regular-webfont.woff2
[Mon Jul 22 13:54:03 2019] ::1:50775 [200]: /
[Mon Jul 22 13:54:03 2019] ::1:50792 [200]: /styles/app1563756049150.css
[Mon Jul 22 13:54:03 2019] ::1:50795 [200]: /scripts/app1563756049150.js
[Mon Jul 22 13:54:04 2019] ::1:50799 [200]: /manifest.json
[Mon Jul 22 13:54:12 2019] ::1:50832 [200]: /fonts/materialdesignicons-webfont.woff2?v=3.6.95
[Mon Jul 22 13:54:12 2019] ::1:50833 [200]: /styles/fonts/Roboto-Medium-webfont.woff2
[Mon Jul 22 13:54:12 2019] ::1:50834 [200]: /styles/fonts/webixmdi-webfont.woff2
[Mon Jul 22 13:54:12 2019] ::1:50835 [200]: /styles/fonts/Roboto-Regular-webfont.woff2



upload_2019-7-22_13-58-33.png




php.ini

upload_2019-7-22_14-0-15.png
 
Top