B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Mashiane · Feb 9, 2020

*START OF NOTICE

As of 02 FEB 2021, this project is is no longer maintained as it has given birth to BVAD3.

This project was a joy to create, however like everything that has a start and an end, its time to move on and evolve. BVAD3 is faster, more simpler to implement and takes advantage of the Abstract Designer use.

Subscribe to Telegram Channel

[BANanoVuetifyAD] Vuetify WebSites & WebApps with BANano for Dummies

Ahoy!!!

*END OF NOTICE

UPDATE 24 October 2020: The recommended methodology to create BANanoVuetify WebApp is being discussed here: MealPrep. This covers most of what VueJS + Vuetify is all about in terms of the internals.

Whilst you can use the designer to create your UX, you need to separate your concerns when creating the app just like its done on the MealPrep by using components and routers for the pages.

DO NOT FOLLOW THE APPROACH USED IN CREATING THE BANANOVUEMATERIALDEMO WHEN CREATING YOUR APPS. THAT METHOD IS NO LONGER FEASIBLE.

Download

BANanoVuetifyAD - Prelease Playlist on Youtube
BANanoVueMaterial (Vuetify) Playlist on Youtube

2020-05-20 Update: Important Update

BANanoVueMaterial Designer Usage - Mock.Compile.Publish

BANanoVueMaterialCore (pure vuetify without extensions)

Exploring Components & Router Basics

How to ask questions, request help, report bugs and request enhancements + Telegram Channel

Thanks to everyone who has been playing with this and highlighting issues and requesting features. You are stars!

*** IMPORTANT: Migrating to the new version

Word. Moving from VueMaterial to Vuetify was inevitable and whilst both are Vue Material based frameworks, Vuetify has more strengths. If if was going to be possible, we would not be having a migration guide, however things changed and enhancements happened and some code rewrites took place. When doing the transition from the VueMaterial to Vuetify codebases, we tried to make the code transition to be as smooth as possible, thus our migration guide is as small as possible. We did not want to dictate how to use the lib, so we removed some things that were hard coded and fixed. This was specific to the side drawer. To test the migration, the old examples were converted to new examples (see below) and all of them work.

BANanoVueMaterial is complete open source, so this means you can use it to your hearts content and adjust it and make it your own. If you enhance, send us word, we will merge. Make the code simple and comment it as much as you can. I cannot over-emphasize that Vuetify is LARGE, so check their website on how components are created and used to learn stuff. Do enjoy. TheMash. #IAmLovingThis

BANanoVuetify (recommended for new projects & migration notes attached)

You can track our progress from here. All the components that we got from VueMaterial exists in Vuetify and more!!!

Copy all the files in the 1. External Libraries folder to your B4J external libraries folder
If you want to explore the BANanoVuetify source code, open and run the project in 2. Library
If you want to explore all the components in this version, open and run the project in 3. Demo
You can also explore other specific examples from the 4. Examples folder

Live Preview

Mashiane · Oct 4, 2020

Runtime Components - components created at run-time - Part 3

Comboboxes, Selectes, AutoComplete.

These work the same. We Add the component and then add the items to it following a key, value pair approach.

B4X:

dynaR1.AddSelect("days", "Days").SetCacheItems(True)
    dynaR1.AddItem(1, "Tesla")
    dynaR1.AddItem(2, "Jobs")
    dynaR1.AddItem(3, "Taleb")
    dynaR1.RefreshItems
    dynaR1.SetValue(2)

dynaR1.AddComboBox("cbo1", "Combo Box").SetCacheItems(True)
    dynaR1.AddItem(1, "Tesla")
    dynaR1.AddItem(2, "Jobs")
    dynaR1.AddItem(3, "Taleb")
    dynaR1.RefreshItems
    dynaR1.SetValue(1)
    
    dynaR1.AddAutoComplete("autoc", "Auto Complete").SetCacheItems(True).SetSearchInput(Null)
    dynaR1.SetReturnObject(True)
    dynaR1.AddItem(1, "Tesla")
    dynaR1.AddItem(2, "Jobs")
    dynaR1.AddItem(3, "Taleb")
    dynaR1.RefreshItems
    dynaR1.SetValue(3)

To detect which value has been selected / a change, one uses the global_change event.

B4X:

Sub dynaR1_change(val As Object)
    Dim ev As EventValue = dynaR1.GetEvent(val)
    Select Case ev.key
    Case "days"
        'click the select control change
        vm.ShowSnackBarSuccess(ev.value)

Here we get the selected value with ev.value.

Mashiane · Oct 4, 2020

Version 4.35 BETA is now available with changes discussed from here, https://www.b4x.com/android/forum/t...based-framework-for-banano.113789/post-768274

Mashiane · Oct 5, 2020

DateGrid Select

We might just be able to do a data grid select. This is a combination of the auto-complete and data-table components.

NB: This still contains bugs for multiselect.

Mashiane · Oct 12, 2020

Version 4.35 BETA

Updates to Extensions Demo to fix the ECharts bugs. Download here.

On other things:

Runtime components: as this is a 3rd party component, date formatting has not been implemented.
DataGridSelect - as this is a 3rd party component, some issues have not been fixed yet so this is not usable yet!

Ta!

Mashiane · Oct 14, 2020

Found a nifty calculator for text-fields. This is awesome!!

Version 4.36 BETA Available on the 1st post including this component.

Ta!

Mashiane · Oct 14, 2020

Trying to explore BANanoElectron with the Abstract Designer version of BANanoVueMaterial

Mashiane · Oct 15, 2020

Creating a decrement / increment text-field

Create the control..

B4X:

Dim txtn1 As VMTextField = vm.CreateTextField("n1", Me).SetVModel("n1x").SetReadOnly(True)
    txtn1.SetLabel("Number")
    txtn1.AddDecrementIcon(vm.color_red)
    txtn1.AddIncrementIcon(vm.color_green)
    txtn1.AddToContainer(cont, 10, 1)

The value of the textfield n1 is bound to the vmodel "n1x", so we increment and decrement a value stored there.

As soon as you add the decrement icon and increment icon, the expected events are <txtboxname>decrement_click and <txtboxname>_increment_click

So lets add these events that will use the bound state and increment / decrement it.

B4X:

Sub n1increment_click(e As BANanoEvent)
    vm.Increment("n1x", 1)
End Sub

Sub n1decrement_click(e As BANanoEvent)
    vm.Decrement("n1x", 1)
End Sub

Ta

Mashiane · Oct 16, 2020

Now one can add a pulse class to the buttons to make them pulse!

Mashiane · Oct 16, 2020

One can add some fancy gradients to the buttons..

B4X:

vm.CreateButton("btnGradient", Me).SetLabel("Black Teal").SetGradient(vm.color_black, vm.color_teal).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient1", Me).SetLabel("Purple Teal").SetGradient(vm.color_purple, vm.color_teal).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient2", Me).SetLabel("Pink Indigo").SetGradient(vm.color_pink, vm.color_indigo).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient3", Me).SetLabel("Green Orange").SetGradient(vm.color_green, vm.color_orange).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient4", Me).SetLabel("Yellow Cyan").SetGradient(vm.color_yellow, vm.color_cyan).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient5", Me).SetLabel("Amber Yellow").SetGradient(vm.color_amber, vm.color_yellow).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient6", Me).SetLabel("Blue Red").SetGradient(vm.color_blue, vm.COLOR_RED).AddToContainer(cont, 15, 1)
    vm.CreateButton("btnGradient7", Me).SetLabel("Gray Light Blue").SetGradient(vm.color_grey, vm.color_Lightblue).AddToContainer(cont, 15, 1)

Mashiane · Oct 21, 2020

Upcoming Update: A TextField Color Picker

A rather challenging custom component.

B4X:

Dim tcolor As VMTextField = vm.CreateTextField("tcolor", Me).SetLabel("Color Picker").SetVModel("mycolor").AddColorPicker
    tcolor.AddToContainer(cont, 11, 1)

'

Mashiane · Oct 21, 2020

Upcoming Updates: Shortcuts methods for Getters & Setters i.e. Reference

NB: The components SHOULD be defined as globals to change them at runtime when using .GetValue & .SetValue

The events listed are default events, see the documentation for additional events esp the textfield etc.

Ta!

Mashiane · Oct 21, 2020

Important Information about the File Input Component

1. Multiple Files (use LIST argument on _change)

If you .SetMultiple(True), the file input expects a list of files. Then your change event should be passed a list of files.

2. Single File (use Map argument on _change)

If your file input is expecting a single file selection, you DONT use .SetMultiple(true) the argument passed to the change event is NO longer a list but a map.

Mashiane · Oct 21, 2020

Version 4.37 BETA available.

Please note that the VDataGridSelect is still buggy, so dont use for production.

Ta!

Mashiane · Oct 23, 2020

Adding an Icon to the alert using a prepend slot:

Down here, the material icon.

B4X:

vm.CreateAlert("a1", Me, "").SetColor(vm.color_green).SetContent("I'm a success alert.").Show.AddPrependIcon("mdi-material-design", "red").SetDismissible(True).AddToContainer(cont, 1, 1)

Mashiane · Oct 24, 2020

Creating a Meal Prep App

Mashiane · Oct 24, 2020

We have converted the meal app to an Electron Windows Destop App with BANanoElectron:

[BANanoVueMaterial] MealPrep App

Ola This is a wrap of this github project. For the BANano version, we will demonstrate the following: 1. BANanoPromises 2. BANanoFirestoreDB 3. Routers & Transitions 4. Firestore Auth 5. REST API (Edamam Recipe Database) 6. JSON manipulation 7. Sign In / Sign Up 8. Using V-IF Directive 9...

www.b4x.com

Mashiane · Oct 25, 2020

CDN Things

To speed up apps, we are opting to use the CDN versions of the css and js files. This is inline with the vuetify website.

On Core: These are the only required css and js files.

B4X:

BANano.Header.AddCSSFile("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900")
    BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/@mdi/font@4.x/css/materialdesignicons.min.css")
    BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css")
    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js")
    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js")
    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue-router@3.4.7/dist/vue-router.min.js")

The font files being favored are available here: http://materialdesignicons.com/

There are also additional files used by the core, these are:

B4X:

    BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/dayjs@1.9.4/dayjs.min.js")
    BANano.Header.AddJavascriptFile("https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js")

For dates and numeral calculations and formatting:

Mashiane · Oct 28, 2020

Version 4.43 Released.

Included:

Vuetify automatic update to v2.3.16

Known Issues:

DataGridSelect - multi-select bug
Dynamic Components - date formatting not added.
We are updating the icons used to materialdesignicons.com

If you want to use other icons on your project, you need to add this yourself on your project with BANano.Header.AddCss, for example

Google Material Fonts

B4X:

https://fonts.googleapis.com/css2?family=Material+Icons

As this uses cached versions of resources as noted in the post above, it will require an internet connection.

Ta!

PS: As the icons are not critical on any old code done before, I will not be maintaining those projects.

Mashiane · Oct 28, 2020

Pushed 4.44 to fix a few picked bugs.

IMPORTANT NOTIFICATION: Static vs Dynamic Sites/Apps

For element created with code, if you don't want to use bindings/state with your components, you can call .SetStatic(True) on the elements. This means you cannot change any of the attributes at runtime. This is useful for static sites. For more details you can see the MealPrep code examples of how this was used. With that said, these directives will still work with .SetStatic(True)

v-show
v-model
v-if
calling .Bind(":key", "x") directly

By default, SetStatic is OFF. This means any element you create is bound to a state for most of its attributes. This ensures that attributes can be changed at runtime per elements.

Ta!

Mashiane · Oct 29, 2020

Pushed 4.45 with an update of the BANanoFirestoreDB library on the Extensions Folder and an update to the MealPrep

Enjoy

B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency