Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Mashiane

Expert
Licensed User
Good day

Download

I hope i'm in the right space, or else!!! Anyway, the intension is to provide quick short videos on how to do common tasks with BANanoVuetifyAD3. We will use the abstract designer in all of our creations and as much minimal coding as possible to get what we need and want. Mostly, this is intended to be the main source of truth about BANanoVuetifyAD3.

Please watch the video and feedback please whether its simple, what can be improved, whether you are able to reproduce the same thing etc.

What you will need...

1. Download and Copy these files to your B4J External Libraries Folder
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. A webserver. We will show you how to do similar with BANanoServer (b4j webserver) at a later stage.

Tools

BindVueElement Builder


Asking Questions

Please, if you have questions, please post them on this thread.

Related Content

Download & Run New Awesome Kitchen Sink
Downlod & Run New BANanoServer Awesome Kitchen Sink

Video Lessons

01. Creating a Login Dialog
02. Creating input controls for the login dialog with validation
03. Getting the entered data i.e email and password, validating it, showing a loading button
04. Adding a background image for our page and hiding the navbar and drawer for until a user is authenticated.
05. Creating the back-end database and User Sign Up
06. User Sign Up and "Taken" User Profiles
07. User Sign Up
08. User Sign Out
09. Creating our own HTML tags i.e. Components

HIGHLIGHT!!!! - The New Form Builder

10. Creating Dialogs
11. Live Code Swapping / Hot Reload
12. VMsgBox Inputs & Prompts & Changing Button Labels @ runtime
13. Beginning Offline First WebApps
14. Creating a Text File NotePad (i.e reading text files)
15. Introducing the V-Data-Table (VueTable)
16. BANanoVuetifyAD3 Rewind - BindState Source Code Generation with the Kitchen Sink BindState Tool
17. BANanoVuetifyAD3 Rewind - A Time to Reflect
 
Last edited:

Mashiane

Expert
Licensed User
01 Creating a Login Dialog - in part 2 we add input controls with validation


1625598706674.png


Video

 

Gabino A. de la Gala

Active Member
Licensed User
Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

B4X:
# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.
 

Mashiane

Expert
Licensed User
Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

B4X:
# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.
The backend database is MySQL and accessing it from outside / inside it just needs to be accessible. Is is finicky though sadly.

B4X:
BANano.PHP_NAME = $"${AppName}.php"$
    BANano.PHPHost = $"${ServerIP}/${AppName}/"$
    BANano.PHPAddHeader("Access-Control-Allow-Origin: *")

For accessing via mobile device, I usually use the domain name in the config.properties file e.g. https://domain.com, with that said, try and use the domain name just to test.
Also as the default port is 8080 for web access, do not include it on the server ip string, the ip address should work fine also without hustles.

Just also remember to update your MySQL connection settings on the login layout, registerDS to point to your server. This you have to do on all DataSources that you use.

1626684295824.png
 
Last edited:

Mashiane

Expert
Licensed User
Hello again.
As the example is published, should I be able to login from any device on the internal / external network just by opening the corresponding port in the firewall or should something else be changed?

I am doing the tests and from the computer that acts as the server, I can login, but if I try it from my mobile, I get the page correctly with the login window, but when I peek at any of the buttons, apparently it does nothing at all. There is no type of error or warning.

What I can be doing wrong?

Changing in the config.properties "localhost" to "server ip" seems to work, but I'm afraid that if I try to access the page from outside the local network it will stop working.

B4X:
# Server configuration PC local Ip para poder acceder desde el móvil
ServerIP=http://192.168.150.4:8080

# Server configuration Local
;ServerIP=http://localhost:8080

Thanks in advance.
I kindly request that you use the link provided in the first post to ask questions as it has tutorials about everything BVAD3 related, this thread is just for lessons. Please, its a kind request.
 

Mashiane

Expert
Licensed User
12 VMsgBox (Inputs & Prompts)

In one page, we use 2 VMsgBoxes, one for input and another to show a prompt. We also show how to change the labels of the OK button at runtime by calling

B4X:
.UpdateOkLabel

Before the VMsgBox is shown. When changing the buttons, we set a "Mode" to determine the kind of action we are executing.
 

Attachments

  • MsgBox.zip
    230.5 KB · Views: 20

Mashiane

Expert
Licensed User
Teaching Notes...

One of the awesome things that one can do with BANanoVuetifyAD3 is to create fully fledged CRUD WebApps.

In this thread we look at how we can create a CRUD app for Server Maintenance using MySQL (Php)

 
Top