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 · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 4: Creating a Registration Screen

Mashiane · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 6: A fully functional CRUD app using BANanoSQL (feauturing DataTable and Dialog)

Mashiane · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 5: A fully functional CRUD app using MySQL as a backend (feautiring DataTable, Dialog, Charts)

Mashiane · Mar 13, 2020

Release Candidate 2 now available, download here.

Mashiane · Mar 13, 2020

BVM 3 - Chartkick integrated without any changes.

BVM 3 - Devices integrated without any changes

BVM 3 - Google Maps Intergrated

BVM 3 - Infor Box intergrated

Mashiane · Mar 15, 2020

BVM 3 Quill Editor & Prism Code Highlighter

One is able to have the Quill editor and to show the source code the VMPrism component comes in-handy.

Mashiane · Mar 15, 2020

BVM 3 - Expansion Panels (Accordions)

B4X:

Sub Code
    vm = pgIndex.vm
    'create a container to hold all contents
    Dim cont As VMContainer = vm.CreateContainer(name,Me)
    'hide this container
    cont.Hide
    cont.AddRows(1).AddColumns12
    ' make accordion
    Dim ep As VMExpansionPanels = vm.CreateExpansionPanels("ep", Me).SetAccordion(True)
    ep.Panel.SetVFor("(item, i)", "5")
    ep.Panel.Bind(":key", "i")
    '
    ep.Header.SetText("Item")
    ep.Content.SetText(vm.Fake.Rand_LoremIpsum(1))
    
    cont.AddComponent(1, 1, ep.tostring)
    '
    vm.AddContainer(cont)
End Sub

Mashiane · Mar 15, 2020

BVM 3 - Carousel

B4X:

Sub Code
    vm = pgIndex.vm
    'create a container to hold all contents
    Dim cont As VMContainer = vm.CreateContainer(name, Me)
    'hide this container
    cont.Hide
    '
    cont.AddRows(5).AddColumns12
    
    ' create a list of images
    Dim items As List
    items.initialize
    items.add(CreateMap("src":"./assets/squirrel.jpg"))
    items.add(CreateMap("src":"./assets/sky.jpg"))
    items.add(CreateMap("src":"./assets/bird.jpg"))
    items.add(CreateMap("src":"./assets/planet.jpg"))
    'save to state
    vm.setdata("images", items)
    
    Dim c1 As VMCarousel = vm.CreateCarousel("c1", Me).SetHeight("400").SetCycle(True).SetHideDelimiterBackground(True)
    c1.SetShowArrowsOnHover(True)
    '
    Dim ci As VMCarouselItem = vm.CreateCarouselitem("", Me)
    ci.SetVFor("(item, i)", "images")
    ci.Bind(":key", "i")
    ci.Bind(":src", "item.src")
    ci.SetReverseTransition("fade-transition")
    ci.SetTransition("fade-transition")
    '
    c1.AddItem(ci)
    '
    cont.AddComponent(1, 1, c1.tostring)
    
    'add container to page
    vm.AddContainer(cont)
End Sub

Mashiane · Mar 16, 2020

BVM 3 Parallax (updates on first post!)

B4X:

Sub Code
    vm = pgIndex.vm
    'create a container to hold all contents
    Dim cont As VMContainer = vm.CreateContainer(name,Me)
    'hide this container
    cont.Hide
    'create 2 columns each spanning 12 columns
    cont.addrows(2).AddColumns12
    '
    Dim par As VMParallax = vm.CreateParallax("p1", Me).SetSRC("./assets/material.jpg")
    cont.AddComponent(1, 1, par.tostring)
    '
    Dim par1 As VMParallax = vm.CreateParallax("p2", Me).SetSRC("./assets/bg-2.jpg").SetAttrLoose("dark")
    par1.Container.AddRows(1).AddColumns12
    par1.Container.SetAlignRC(1, vm.ALIGN_CENTER)
    par1.Container.SetJustifyRC(1, vm.JUSTIFY_CENTER)
    par1.Container.SetTextCenterRC(1, 1)
    '
    Dim h1 As VMLabel = vm.CreateLabel("h1").AddClass("display-1 font-weight-thin mb-4").SetText("Vuetify.js").SetH1
    par1.Container.AddComponent(1, 1, h1.tostring)
    '
    Dim h4 As VMLabel = vm.createlabel("h4").AddClass("subheading").SetText("Build your application today!").SetH4
    par1.Container.AddComponent(1, 1, h4.tostring)
      
    cont.AddComponent(2, 1, par1.tostring)
    vm.AddContainer(cont)
End Sub

Mashiane · Mar 17, 2020

BVM 3 ColorPicker

We have added a color picker.

B4X:

Dim cp As VMColorPicker = vm.CreateColorPicker("cp1", Me).SetVModel("mycolor")
    cont.AddComponent(1, 1, cp.tostring)

Mashiane · Mar 17, 2020

BVM 3 Rating

A rating control also exists...

B4X:

Dim r2 As VMRating = vm.CreateRating("r2", Me).SetVModel("rating").SetBackgroundColorIntensity(vm.color_pink,vm.intensity_lighten3)
    r2.SetColor(vm.color_pink).SetSize("64")
    cont.AddComponent(1, 2, r2.tostring)

Mashiane · Mar 17, 2020

BVM 3 InfoBox

Fixed a bug with the infobox as it didnt count and added some other varieties of the inforbox.

In process_globals

B4X:

Private newusers As VMInfoBox

Add on page

B4X:

newusers = vm.NewInfoBox(Me, "newusers", "NEW USERS", "face", "", "0", "257")
    newusers.SetBackgroundCOlor(vm.COLOR_INDIGO).SetStyle3(True).SetIconColor(vm.COLOR_WHITE)
    newusers.SetHoverZoomEffect(True)
    cont.AddComponent(2,4,newusers.tostring)

Then execute the start call to run the counter

B4X:

newusers.start

Mashiane · Mar 18, 2020

BVM 3 : Echarts

Wrap from this github

Found a nice implementation of the Echarts library. I wanted some charts with spider legs. This comes very handy.

B4X:

Dim pieD As List
    pieD.initialize
    pieD.Add(CreateMap("date": "01/01", "cost": 1523,"profit": 1523))
    pieD.Add(CreateMap("date": "01/02", "cost": 1223,"profit": 1623))
    pieD.Add(CreateMap("date": "01/03", "cost": 2123, "profit": 1723))
    pieD.Add(CreateMap("date": "01/04", "cost": 4123,"profit": 1423))
    pieD.Add(CreateMap("date": "01/05", "cost": 3123, "profit": 1223))
    pieD.Add(CreateMap("date": "01/06", "cost": 7123,"profit": 1123))

Dim echart12 As VMEChart = vm.createechart("e12", Me).SetPieChart
    echart12.SetColumns(Array("date", "cost", "profit"))
    echart12.SetRows(pieD)
    cont.AddComponent(4, 1, echart12.tostring)

Mashiane · Mar 18, 2020

BVM 3: EChart Map

B4X:

Dim mapD1 As List
    mapD1.initialize
    mapD1.add(CreateMap("location": "延庆区", "GDP": 123))
    mapD1.add(CreateMap("location": "密云区", "GDP": 1223))
    mapD1.add(CreateMap("location": "平谷区", "GDP": 2123))
    mapD1.add(CreateMap("location": "海淀区", "GDP": 4123))
    '
    Dim echart24 As VMEChart = vm.createechart("e24", Me).SetMapChart
    echart24.SetColumns(Array("location", "GDP"))
    echart24.SetPosition("province/beijing")
    echart24.SetRows(mapD1)
    echart24.SetLabel(False)
    cont.AddComponent(7, 3, echart24.tostring)

Mashiane · Mar 18, 2020

BVM 3 Sankey Chart

B4X:

Dim sData As List
    sData.initialize
    sData.add(CreateMap("page": "front", "pv": 100000))
    sData.add(CreateMap("page": "list-a", "pv": 20000))
    sData.add(CreateMap("page": "list-b", "pv": 80000))
    sData.add(CreateMap("page": "content-a-1", "pv": 10000))
    sData.add(CreateMap("page": "content-a-2", "pv": 10000))
    sData.add(CreateMap("page": "content-b-1", "pv": 60000))
    sData.add(CreateMap("page": "content-b-2", "pv": 20000))
        
    Dim echart26 As VMEChart = vm.createechart("e26", Me).SetSanKeyChart
    echart26.SetLinks(links)
    echart26.SetColumns(Array("page", "pv"))
    echart26.SetRows(sData)
    cont.AddComponent(9, 1, echart26.tostring)

Mashiane · Mar 18, 2020

BVM 3 HeatMap

B4X:

Dim hData As List
    hData.initialize
    hData.add(CreateMap("week": "Monday", "location": "Beijing", "person": 1000))
    hData.add(CreateMap("week": "Tuesday", "location": "Shanghai", "person": 400))
    hData.add(CreateMap("week": "Wednesday", "location": "Hangzhou", "person": 800))
    hData.add(CreateMap("week": "Tuesday", "location": "Shenzhen", "person": 200))
    hData.add(CreateMap("week": "Wednesday", "location": "Changhcun", "person": 100))
    hData.add(CreateMap("week": "Friday", "location": "Nanjing", "person": 300))
    hData.add(CreateMap("week": "Thursday", "location": "Jiangsu", "person": 800))
    hData.add(CreateMap("week": "Monday", "location": "Beijing", "person": 700))
    hData.add(CreateMap("week": "Wednesday", "location": "Shanghai", "person": 300))
    hData.add(CreateMap("week": "Tuesday", "location": "Hangzhou", "person": 500))
    
    
    Dim echart27 As VMEChart = vm.createechart("e27", Me).SetHeatMap
    echart27.SetColumns(Array("week", "location", "person"))
    echart27.SetRows(hData)
    cont.AddComponent(9, 2, echart27.tostring)

Mashiane · Mar 18, 2020

BVM 3 BMap

B4X:

Dim mData As List
    mData.initialize
    mData.Add(CreateMap("lat": 120.14322240845, "lng": 30.236064370321))
    mData.Add(CreateMap("lat": 120.14301682797, "lng": 30.236035316745))
    mData.Add(CreateMap("lat": 120.14138577045, "lng": 30.236113748704))
    mData.Add(CreateMap("lat": 120.1400398833, "lng": 30.235973050702))
    mData.Add(CreateMap("lat": 120.13893453465, "lng": 30.23517220446))
    mData.Add(CreateMap("lat": 120.1382899739, "lng": 30.234062922977))
    mData.Add(CreateMap("lat": 120.13265960629, "lng": 30.231641351722))
    mData.Add(CreateMap("lat": 120.13170681763, "lng": 30.229925745619))
    mData.Add(CreateMap("lat": 120.13119614803, "lng": 30.228996846637))
    mData.Add(CreateMap("lat": 120.13023980134, "lng": 30.228226570416))
   
    
    Dim echart28 As VMEChart = vm.createechart("e28", Me).SetHeatMap
    echart28.SetColumns(Array("lat", "lng"))
    echart28.SetRows(mData)
    echart28.SetBMapKey("oBvDtR6nzWtVchkY4cLHtnah1VVZQKRK")
    echart28.SetBMapCenter(120.14322240845, 30.236064370321)
    echart28.SetBMapZoom(14)
    echart28.SetBMapRoam(True)
    cont.AddComponent(9, 3, echart28.tostring)

Mashiane · Mar 18, 2020

BVM 3 Gauge

B4X:

Dim echart29 As VMEChart = vm.createechart("e29", Me).SetGaugeChart
    echart29.SetColumns(Array("type", "value"))
    echart29.AddRow(CreateMap("type": "speed", "value": 80))
    cont.AddComponent(10, 1, echart29.tostring)

B4X:

Dim echart30 As VMEChart = vm.createechart("e30", Me).SetGaugeChart
    echart30.SetColumns(Array("type", "value"))
    echart30.AddRow(CreateMap("type": "rate", "value": 0.8))
    echart30.SetDataType("rate", "percent")
    echart30.SetSeriesMap("rate", CreateMap("min":0, "max":1))
    cont.AddComponent(10, 2, echart30.tostring)

Mashiane · Mar 18, 2020

BVM EChart Tree (radial)

B4X:

Dim echart33 As VMEChart = vm.createechart("e33", Me).SetTreeChart
    echart33.SetColumns(Array("name", "value"))
    echart33.SetTreeRadial("tree")
    '
    echart33.AddItem("", "1", CreateMap("value":1, "name":"f", "link":"https://ele.me"))
    echart33.AddItem("1", "2", CreateMap("name":"a", "value":1, "link":"https://ele.me"))
    echart33.AddItem("2", "6", CreateMap("name":"a-a", "value":2, "link":"https://ele.me"))
    echart33.AddItem("2", "7", CreateMap("name":"a-b", "value":2, "link":"https://ele.me"))
    '
    echart33.AddItem("1", "3", CreateMap("name":"b", "value":2, "link":"https://ele.me"))
    echart33.AddItem("3", "8", CreateMap("name":"b-a", "value":2, "link":"https://ele.me"))
    echart33.AddItem("3", "9", CreateMap("name":"b-b", "value":2, "link":"https://ele.me"))
    '
    echart33.AddItem("1", "4", CreateMap("name":"c", "value":3, "link":"https://ele.me"))
    echart33.AddItem("4", "10", CreateMap("name":"c-a", "value":4, "link":"https://ele.me"))
    echart33.AddItem("4", "11", CreateMap("name":"c-b", "value":2, "link":"https://ele.me"))
    '
    echart33.AddItem("1", "5", CreateMap("name":"d", "value":4, "link":"https://ele.me"))
    echart33.AddItem("5", "12", CreateMap("name":"d-a", "value":4, "link":"https://ele.me"))
    echart33.AddItem("5", "13", CreateMap("name":"d-b", "value":2, "link":"https://ele.me"))
    
    echart33.AddRow(CreateMap("name": "tree", "value": echart33.treeData))

cont.AddComponent(11, 1, echart33.tostring)

Mashiane · Mar 18, 2020

We make the tree vertical by calling: SetTreeVertical("tree"). Below are some variants of the EChart trees.

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