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

Ola

The use of .BindVueElement & .BindState is now done automatically for components, there is not need to have that code anymore. As some of these lessons are old and were done before the automatic BindVueElement/BindState, where you find such code in the examples, comment it out / remove it. Also using the VueElement directly is no longer recommended as all it does is handle DESIGN TIME properties and CANNOT be used for any run-time updates. The Kitchen Sink WebApp is the most up to date repo that contains all examples about how the BVAD3 library works.

NB: PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

FOR A MORE DETAILED SETUP PROCESS, PLEASE SEE THE GITHUB REPO README.

How to learn from the New Awesome Kitchen Sink to create your next powerful WebApp/Website

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



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.

1625825241311.png


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]
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
New Form Builder Concept - Trapping Events

 

Mashiane

Expert
Licensed User
Longtime User
New Form Builder Concept - Linking the Form to the DataSource

 

Mashiane

Expert
Licensed User
Longtime User
New Form Builder Concept - Linking the form to the DataSource & Executing CRUD

 

Mashiane

Expert
Licensed User
Longtime User
Part 09 of the lessons is out..

 

Mashiane

Expert
Licensed User
Longtime User
Download

Kitchen Sink
Version 5.82

 
Last edited:

cristian petersen

Member
Licensed User
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

Expert
Licensed User
Longtime User
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.

B4X:
#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.
 

cristian petersen

Member
Licensed User
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

Expert
Licensed User
Longtime User
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.

 

cristian petersen

Member
Licensed User
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.

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

Expert
Licensed User
Longtime User
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.

1628105568848.png


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:

1628105942319.png


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.

1628105912702.png


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?

1628106099070.png
 
Last edited:
Top