B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...

www.b4x.com

*************************************************

Download Additional Libraries
Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library
Download Kitchen Sink WebApp (Optional - useful for Learning how this works)
Download BVAD3Builder (Optional - useful to trim your final package)

Full Install Instructions on Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...


What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...

www.b4x.com

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...

www.b4x.com

USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]

 

[Mashiane]

New Form Builder Concept - Trapping Events

BANanoVuetifyAD3 - New Form Builder Concept

Ola Update on 14 July 2022: You might want to check the VFlexDialog Download the BVAD3 Library Source & Run Concept Form Builder Project This new form builder concept has been born due to the intensity of work that is necessary at times to create forms. You have containers, form, rows...

www.b4x.com

 

[Mashiane]

New Form Builder Concept - Linking the Form to the DataSource

BANanoVuetifyAD3 - New Form Builder Concept

Ola Update on 14 July 2022: You might want to check the VFlexDialog Download the BVAD3 Library Source & Run Concept Form Builder Project This new form builder concept has been born due to the intensity of work that is necessary at times to create forms. You have containers, form, rows...

www.b4x.com

 

[Mashiane]

New Form Builder Concept - Linking the form to the DataSource & Executing CRUD

BANanoVuetifyAD3 - New Form Builder Concept

Ola Download the BVAD3 Library Source & Run Concept Form Builder Project This new form builder concept has been born due to the intensity of work that is necessary at times to create forms. You have containers, form, rows, columns and the various elements you need. With this one drags a...

www.b4x.com

 

[Mashiane]

BANanoVuetifyAD3 5.81 is now available.

This enables one to create their own HTML tags and use them anywhere in their apps.

Download

A lesson on how to create these "components" will be loaded to the Mashy Teaches BANanoVuetifyAD3 channel.

 

[Mashiane]

Part 09 of the lessons is out..

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

Good day Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library Download Kitchen Sink WebApp (Optional - useful for Learning how this works) Download BVAD3Builder (Optional - useful to trim your final package) FOR A MORE DETAILED SETUP PROCESS...

www.b4x.com

 

[Mashiane]

This is awesome!!

slim-goodskelly.com

This domain may be for sale!

slim-goodskelly.com

 

[Mashiane]

Download

Kitchen Sink
Version 5.82

BANanoVuetifyAD3 - New Form Builder Concept

Ola Update on 14 July 2022: You might want to check the VFlexDialog Download the BVAD3 Library Source & Run Concept Form Builder Project This new form builder concept has been born due to the intensity of work that is necessary at times to create forms. You have containers, form, rows...

www.b4x.com

 

[cristian petersen]

hello,
I just follow the instructions to install en start to get into this new world of BananoVuetifyAD3.
I downloaded and copied all the files mentiones in https://www.b4x.com/android/forum/t...nanovuetifyad3-the-new-series.132305/#content
I am facing an error when compiling:
At first was that manifest of BananoVuetifyAD3 was not found, I downloaded all the files and run generating a new B4xlib solving that issue.
My actual error compiling is that manifest in BananoAnimeJs is not found. I generated a neu b4xlib but problem is still present.
So my result is a blank web page.
Any help would be appreciate.

 

[Mashiane]

@cristian petersen , can you attach the console error log. Perhaps that could help to shed some light.

 

[Mashiane]

IMPORTANT INFORMATION - Using BANAnoServer MySQL Connector

Just suffered some time loss due to connection issues. Solved it by using the latest connector.

Ensure you get the latest here: https://dev.mysql.com/downloads/connector/j/

This is what I'm using for the BANanoServer connections after shifting to java 32 bit.

#AdditionalJar: mysql-connector-java-8.0.26.jar

PS: Also noted that also in the forum there has been a lot of questions about these types of issues.

 

[Mashiane]

This is an interesting find: https://www.b4x.com/android/forum/t...stgresql-mariadb-and-oracle-databases.107545/

 

[cristian petersen]

Hello ,
I don't know what is different today from yesterday but now I am able to see the web page result, even though I still see "animejs manifest not found" in B4J log.

Reading B4J INI in C:\Users\Usuario\AppData\Roaming\Anywhere Software\B4J to find Additional Libraries folder...
Found Additional Libraries folder: C:\B4X_Additional_libraries
Starting to transpile...
Building c:\xampp\htdocs\SignIn\scripts\app.js
Loading layout home...
Loading layout view1...
Loading layout view2...
Loading layout baselayout...
Loading layout emptylayout...
Processing b4xlib: bananovuetifyad3
Processing b4xlib: bananoanimejs
java.io.FileNotFoundException: C:\PROGRA~4\B4J\Pruebas\vuetify\SignIn\B4J\Objects\b4xlibs_BANano\bananoanimejs\B4J\manifest.txt (El sistema no puede encontrar la ruta especificada)
at java.io.FileInputStream.open0(Native Method)
at java.io.FileInputStream.open(FileInputStream.java:195)
at java.io.FileInputStream.<init>(FileInputStream.java:138)
at java.io.FileInputStream.<init>(FileInputStream.java:93)
at java.io.FileReader.<init>(FileReader.java:58)
at com.ab.banano.BANano.ProcessB4XLib(Unknown Source)
at com.ab.banano.BANano.ProcessB4XLib(Unknown Source)
at com.ab.banano.BANano.a(Unknown Source)
at com.ab.banano.BANano.a(Unknown Source)
at com.ab.banano.BANano.Build(Unknown Source)
at b4j.example.main._appstart(main.java:116)
at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method)
at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62)
at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43)
at java.lang.reflect.Method.invoke(Method.java:498)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:108)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:95)

I am guessing there is something to do with the drive location of the b4xlib files? My path for the libraries is the way Erel suggested in the post https://www.b4x.com/android/forum/threads/b4x-additional-libraries-folder.103165/
C:\B4X_Additional_libraries
B4A
B4J
B4x
In my case when recreating the BananoVuetify3AD.b4xlib it is created in C:\B4X_Additional_libraries. If I put the file in C:\B4X_Additional_libraries\B4J and compile I see a the error showed in B4J and a blank web page. The browser console log shows:

Uncaught SyntaxError: missing name after . operator app.js:5436:661707

I hope I am giving enough data to correct the error. (mine I guess)
TIA

 

[Mashiane]

This seems to narrow it down to AnimeJS, then I guess you need to also download the sources for BANanoAnimeJS and then run it to compile it.

BANanoVuetifyAD3/Extensions at main · Mashiane/BANanoVuetifyAD3

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

 

[cristian petersen]

This seems to narrow it down to AnimeJS, then I guess you need to also download the sources for BANanoAnimeJS and then run it to compile it.

BANanoVuetifyAD3/Extensions at main · Mashiane/BANanoVuetifyAD3

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

Recompiled without luck
After recompiled file is created in C:\B4X_Additional_libraries
when creating a new app with BVAD3EDS (without any modifications)
I read in B4J log:
unknown member: anime

Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: anime
Miembro desconocido: initialize
Tipo desconocido: bananoanimejs <br />&#191;Te falta una referencia de biblioteca?
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Variable 'animate' no declarada se utiliza antes de que se le haya asignado cualquier valor.
Tipo desconocido: bananoanimejs <br />&#191;Te falta una referencia de biblioteca?
ViewHome - 8: La variable 'btnStartLoader' no se ha inicializado. (warning #11)
ViewHome - 9: La variable 'btnStopLoader' no se ha inicializado. (warning #11)
ViewOne - 7: La variable 'banano' no se ha inicializado. (warning #11)
ViewTwo - 7: La variable 'banano' no se ha inicializado. (warning #11)
ViewLeaflet - 7: La variable 'banano' no se ha inicializado. (warning #11)
ViewLeaflet - 8: La variable 'VLeaflet1' no se ha inicializado. (warning #11)
ViewLeaflet - 34: Sub 'readyleaflet' no utilizado. (warning #12)
Main - 45: El fichero de diseño 'baselayout.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)
Main - 45: El fichero de diseño 'emptylayout.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)
Main - 45: El fichero de diseño 'home.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)
Main - 45: El fichero de diseño 'leafview.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)
Main - 45: El fichero de diseño 'view1.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)
Main - 45: El fichero de diseño 'view2.bjl' no es usado. ¿Ha olvidado llmar a MainForm.RootPane.LoadLayout? (warning #16)

If I delete from C:\B4X_Additional_libraries and copy to C:\B4X_Additional_libraries\B4J
I see this in B4J log

Miembro desconocido: alternate
ViewHome - 8: La variable 'btnStartLoader' no se ha inicializado. (warning #11)
ViewHome - 9: La variable 'btnStopLoader' no se ha inicializado. (warning #11)

in both cases unable to compile.

 

[Mashiane]

For some reason you dont have all the needed resources to make this work. Perhaps lets try it again.

Internally, the BANanoAnimeJS library has all the needed files to make it work.

1. Download the BANanoAnimeJS folder
2. Open the BANanoAnimeJS B4j project and run it (DO NOT COMPILE TO LIBRARY)
3. This should compile a BANanoAnimeJS b4x lib for you.

Secondly

Download the BVAD3 library source code
Open the B4J project file and also RUN it (DO NOT COMPILE TO LIBRARY)
The BVAD3 project references the BANanoAnimeJS project as indicated below:

Please note that if you have any BANanoAnimeJS.jar and BANanoVuetifyAD3.jar in your external libraries , delete them.

Thirdly

Get the New Awesome Kitchen Sink WebApp project, open the project and run it. As an example, this is my kitchen sink project.

In the web browser, whether you see a blank page, do an HARD BROWSER RESET, ie press and hold shift + click refresh.

All the best.

PS: Also, before you run the project, check to see if there is any error on the B4j logs before compilation. If the warnings are not 10, 11, 12 at least then, you need to attend to that error. Are you also running the latest version of B4J?

 

[Mashiane]

What's coming

We have revisited the badges. A badge can be hosted by an icon, an avatar image and a button. Each of the hosts have different settings.

 

[Mashiane]

DataSource + DataTable Linking

In the Other section of the Kitchen Sink, we have demonstrated how to link the DataTable to the DataSource, this includes the New Form Builder Also.

 

[Mashiane]

New Form Builder

In the Other section of the Kitchen Sink, we have built a form using the Form Builder. You can check on each of the VFields how each component was defined and later became either an input or a button etc.

 

[Mashiane]

We have a Quill WYSIWYG HTML

Whilst this can be useful when creating blogs etc. Your imagination is the limit.

 

[Mashiane]

Thank you to all the sponsors and donations for my work done here.

Appreciated! Be blessed always!!

?