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 · Jun 4, 2020

swamisantosh said:
we are been performing CRUD operation on Single Table,

The purpose of the Mock.Compile.Publish thread is to provide different templates for different scenarios. So your master detail case is coming, when? I'm not really sure. You will appreciate that the important issue here is stability and also ease of use and also maturity of this framework. That is rather important because if I cant use this to create useful apps, it might as well go to a long-drop toilet.

I have also provided the complete source code of this project. You will note that the designer itself is being created with the same framework with its complications and functionalities. What you can do is to post a question and attach your attempt B4J BVM project and component file(s) in trying to do what you want to achieve. We can take it from there.

If you have more questions, PLEASE DO NOT ASK ON THIS THREAD, post a question prefixed by [BANanoVueMaterial], thanks.

Mashiane · Jun 4, 2020

Upcoming Updates Drag n Drop a TreeView

Mashiane · Jun 5, 2020

Upcoming Updates Drag n Drop Timeline

Mashiane · Jun 7, 2020

Upcoming Updates: Drag n Drop Sparklines

The code is simple as...

B4X:

Dim sparksparkline1 As VMSparkLine
    sparksparkline1.Initialize(vue, "sparksparkline1", Me)
    sparksparkline1.SetValue(Array(0, 2, 5 ,9 ,5 ,10 ,3, 5, 0, 0, 1, 8, 2, 9, 0))
    sparksparkline1.SetGradient(Array("#f72047", "#ffd200", "#1feaea"))
    sparksparkline1.SetSmooth(10)
    sparksparkline1.SetPadding("8")
    sparksparkline1.SetLinewidth("2")
    sparksparkline1.SetStrokeLineCap("round")
    sparksparkline1.SetGradientdirection("top")
    sparksparkline1.SetFill(False)
    sparksparkline1.SetType("trend")
    sparksparkline1.SetAutoLineWidth(False)
    sparksparkline1.SetVisible(True)
    sparksparkline1.SetAutoDraw(True)
    cont.AddControl(sparksparkline1.SparkLine, sparksparkline1.tostring, 1, 1, 0, 0, 0, 0, 12, 12, 12, 12)

Mashiane · Jun 8, 2020

Upcoming Updates: Translate a MySQL database table to DataTable & Data Entry Dialog.

This demo shows how one can translate a MySQL database table to a datatable and a dialog for data entry. One can then update the properties of the data table and input controls to meet their requirements and then copy & paste to a B4J project.

joulongleu · Jun 8, 2020

I hope to have Translate a MSSQL database table to DataTable & Data Entry Dialog

Mashiane · Jun 8, 2020

Upcoming Updates: Drag n Drop Button Toggle

This demo shows how one can drag and drop a button toggle. This houses a couple of buttons / icons and have a change event.

Mashiane · Jun 8, 2020

joulongleu said:
I hope to have Translate a MSSQL database table to DataTable & Data Entry Dialog

Will research how to do that for PDO linkages as our BANAnoConnect class uses PDO. When available will add it. Ta!

Mashiane · Jun 8, 2020

Upcoming Updates: Translate a SQLite database table to DataTable & Data Entry Dialog.

This demo shows how one can translate a SQLite database table to a datatable and a dialog for data entry. For this we have used the SQLiteR class with sql.js for read-only access to the table. For crud functionality one will have to use the SQLite class in the BANanoConnect library. If a SQLite file was added via the Files tab, it needs to be copied to the root of the webapp for production.

Mashiane · Jun 9, 2020

Upcoming Updates: Translate a MSSQL database table to DataTable & Data Entry Dialog.

This demo shows how one can translate a MSSQL database table to a data-table and entry dialog. One can then update the table properties and column details to meet their needs.

Mashiane · Jun 9, 2020

Core 4.12 Now Available for Download

Mashiane · Jun 10, 2020

Upcoming Updates to Core 4.13

5. Template 1

We have added 2 methods here in pgIndex

B4X:

'build the bottom nav bar
Sub BuildBottomNav
    '*copy code after this line
   
End Sub

This is for code to build the bottom navigation bar, and

B4X:

'fire when a button in the bottom nav is clicked
Private Sub bottomnav_change(value As Object)
   
End Sub

To trap changes to the bottom nav button click event. This returns the value from the button you clicked.

To hide the bottom nav bar

B4X:

vm.BottomNav.Hide

And to show it

B4X:

vm.BottomNav.Show

Example code for this example

B4X:

vm.BottomNav.Hide
    vm.BottomNav.SetAbsolute(True)
    vm.BottomNav.SetGrow(True)
    vm.BottomNav.SetHeight("56")
    vm.BottomNav.SetShift(True)
    'add items
    vm.BottomNav.AddButton("btnaz", "Banner", "dashboard", "red", "btnaz", "A business banner", "")
    vm.BottomNav.AddButton("btnbz", "Squirrel", "account_box", "indigo", "btnbz", "Another squirrel", "")
    vm.BottomNav.AddButton("btncz", "Sky", "gavel", "green", "btncz", "Heavens", "")
    vm.BottomNav.AddButton("btndz", "Planet", "question_answer", "purple", "btndz", "Planets of the world", "")
    vm.BottomNav.AddButton("btnez", "Bird", "mdi-account", "yellow", "btnez", "This is a beautiful bird", "")

Ta!

Mashiane · Jun 10, 2020

Upcoming Upates: Drag n Drop Bottom Bar to the stage.

This demo shows how one can drag and drop a bottom bar to the stage. One is then able to add buttons to it via the items section of the property bag.

Mashiane · Jun 10, 2020

Upcoming Updates: Drag n Drop Card to the stage

This demo shows how one can drag and drop a card to a stage. You can set up its properties and also add actions to it.

Mashiane · Jun 10, 2020

Upcoming Updates - Avatar Menus

For the VMMenu component, one can now add a menu. This can be useful for profile management e.g. upload profile image etc.

B4X:

Dim menu2 As VMMenu = vm.CreateMenu("menu3", Me).SetAvatar("./assets/sponge.png")
    menu2.AddItem("inbox1", "", "mdi-view-dashboard", "Inbox", "","")
    menu2.AddItem("drafs1", "", "mdi-image", "Drafts", "","")
    menu2.AddItem("sent1", "", "mdi-help-box", "Sent", "","")
    menu2.AddToContainer(cont, 2, 1)

Trapping click events

B4X:

Sub menu3items_click(e As BANanoEvent)
    'get the id from the event
    Dim elID As String = vm.GetIDFromEvent(e)
    vm.ShowSnackBar(elID)
End Sub

Mashiane · Jun 10, 2020

Upcoming Updates: Drag n Drop Breadcrumbs

This demo shows how one can drag and drop a breadcrumbs component to the stage. One can later configure the properties of the dialog. This is also an invisible component which comes to life at runtime.

Mashiane · Jun 11, 2020

Upcoming Updates: Drag n Drop Overlay

This demo shows how one can drag and drop an overlay to the stage. One can later configure the properties of the dialog. This is a renderless component and comes to life at runtime.

Mashiane · Jun 11, 2020

Upcoming Updates: Drag n Drop Progress Linear

This demo shows how one can drag and drop a progress linear to the stage.

Mashiane · Jun 11, 2020

Upcoming Updates : Drag n Drop Progress Circular

This demo shows how one can drag and drop a progress circular to the stage.

Mashiane · Jun 11, 2020

Interesting Concept: Updating Progress Circular every 1 second using BANAno.SetInterval

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

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency