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

Ola

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

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

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



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
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.

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

B4X:
Sub changetheme_change(b As Boolean)
    vuetify.SetDarkTheme(b)
End Sub
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Part 70 is out.

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



Related Article

 
Last edited:

Mashiane

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

1621181417385.png


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

Mashiane

Expert
Licensed User
Longtime User
A thread has been created for all your animation needs.


Have fun!
 
Top