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

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