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

Ola

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]

Whilst I don't develop using Linux, I am of the opinion for the PHP SQLite version to work, the sqlite3 extension also needs to be activated. I noted that on your address bar you have double //, this is rather incorrect.

 

[Mashiane]

Part 61 is out, we create a treeview based on a flat json structure.

Download

 

[roberto64]

Hello Mashiane , the double // have been fixed but nothing always the same error.
regards

 

[Mashiane]

Hi @roberto64, i've been trying to think what could be the problem about your last reported problem. Sadly I don't have a clue of what could be the cause.

 

[Mashiane]

Version 3.95 is now available with some bug fixes..

Download Everything.

Just the b4xlib: https://github.com/Mashiane/BANanoVuetifyAD3/raw/main/External Libraries/BANanoAxiosLib.b4xlib

 

[Mashiane]

Part 62 is out and it addresses the bottom navigation bar, which was used on the Seeking.Shelter for Women WebApp.

BVAD3 is now version 3.102, download from the links above.

 

[Mashiane]

Part 63 is out. We deal with Bottom Sheets

Download

BVAD3 is now Version 3.103

 

[Mashiane]

Part 64 is out, We create floating action buttons and change the theme to dark at runtime.

Download



Changing the theme to dark is toggleable function:

We add a switch to the navbar and set its v-model/value to false.

'add switch to toggle theme
    Dim swtTheme As  VueElement = vappbar.AddSwitch("changetheme", "mytheme", "Theme", Null, Null, "", True, Null)
    swtTheme.MT = 6
    swtTheme.ML = 4
    vuetify.BindVueElement(swtTheme)
    vuetify.SetData("mytheme", False)

When its changed from true/false, we change the theme.

Sub changetheme_change(b As Boolean)
    vuetify.SetDarkTheme(b)
End Sub

 

[Mashiane]

Part 65 is out where we create a Speed Dial.

Download

 

[Mashiane]

Learner Material is Freely Avaialble

LM (Learner Material) above the YT videos is being created on this class, https://classroom.google.com/c/MzI1MDg2MTMwODc1?cjc=clzmpm3
and is freely avaialable anytime you want to start developing with BVAD3.

Join the class now to get access. Enjoy!

 

[Mashiane]

Part 66 is out: We create tooltips using MicroTipCSS

Download

 

[Mashiane]

Part 67 is out: A Speed Dial Social Media Sharing thing and some beautiful gradients...

Download

 

[Mashiane]

Version 4.11 is out, download here

 

[Mashiane]

What's Coming

Created a simple component for basic spreadsheet manipulation from https://github.com/myliang/x-spreadsheet

Like I said, its basic, so don't expect any bells and whistles, awesome though..

 

[Mashiane]

Part 69 is out...

View on Github

Lets look at how OrganogramLite was created...




Also in the tutorial, under Components > Employees

 

[Mashiane]

Version 4.20 is now available.

Download

Vuetify has been updated to version 2.5.0.

Enjoy and please update any project using BVAD3 to this library version.

Have Fun!

 

[Mashiane]

Part 70 is out.

We install a new abstract designer based layout to make it easy to create projects.



Related Article

[BANanoVuetifyAD3] Implementing the new BVAD3 (1) B4X Project Template

Ola Download BVAD3 4.21+ b4xlib Copy this to your External B4J Libraries folder Download the Font Libraries (Roboto + MaterialDesignIcons) Copy these to your External B4J Libraries folder. After you create the project, ensure that these are referenced. Remember, if you want to use the...

www.b4x.com

 

[Mashiane]

Busy testing out animations with AnimeJS --- looking awesome.

 

[Mashiane]

Part 71 is out, we have started looking at Animations (incomplete), however

Download

What's new

1. The font resources have been moved out of core, if you want to host the fonts locally, use the provided library from the External Folders Libraries in Github.
What this means is that all examples before Tutorial 71 will work but the icons and fonts wont display well without referencing the library files. At most you need Roboto + Material Design icons. The rest are just for play.

So ensure that you have referenced the font resources. These are the libraries referenced by Tutorial 71.

So copy these to your b4j external resources folder.

2. The animation library is still work in progress so we are not talking about it as yet. So far all the tests are impressive. So dont use in production as yet until we provide more details. You will have to learn some animejs to get the drift.

Enjoy!

Reference

[BANano] BANanoFontLibraries - FontAwesome, Roboto, MaterialDesignIcons etc for LocalHosting

Ola In case you want to host your fonts locally, here are the font libraries. Usage. Download and copy the library of interest to your external libraries folder. Reference the library with your BANano library. Use the class names as per font to build your icons, use in app etc...

www.b4x.com

 

[Mashiane]

A thread has been created for all your animation needs.

[BANanoVuetifyAD3] Beginning WebApp Animations with BANanoAnimeJS

Ola This tutorial is related to BVAD3, however the library can be used separately outside of the BVAD3 namespace. As it is rather a specialized area for web development, we have created an own thread. AnimeJS is available here, https://animejs.com/ Get BANano Get BVAD3 Enjoy and have fun!

www.b4x.com

Have fun!