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

Johan Hormaza · Aug 11, 2020

Mashiane said:
Core 4.25 has been updated with Vuetify 2.3.8

Download

Hi, the demo is not loading now ..

Mashiane · Aug 11, 2020

Johan Hormaza said:
the demo is not loading now ..

Noted with thanks. Will attend to it.

Johan Hormaza · Aug 11, 2020

Mashiane said:
Noted with thanks. Will attend to it.

thanks

Mashiane · Aug 14, 2020

Was fortunate enough to get the drawer to work with drill-down. To be included in the next iteration.

Example code..

B4X:

'build the nav drawer
Sub BuildNavDrawer
    '*copy code after this line
    vm.Drawer.Setwidth("400")
    vm.Drawer.Setabsolute(True)
    vm.Drawer.Setvisible(True)
    vm.Drawer.SetClipped(True)
    vm.Drawer.SetOpenOnMediumLarge(True)
    
    
    vm.Drawer.AddParentChild("", "warehouse", "mdi-warehouse", "", "Warehouse", "")
    vm.Drawer.AddParentChild("warehouse", "pageReceipts", "", "", "W/H Receipt", "")
    '
    vm.Drawer.AddParentChild("", "masters", "mdi-cog-outline", "", "Configuration", "")
    vm.Drawer.AddParentChild("masters", "pageAgents", "", "", "Agents / Brokers", "")
    vm.Drawer.AddParentChild("masters", "pageCustomers", "", "", "Customers", "")
    vm.Drawer.AddParentChild("masters", "pageGodowns", "", "", "Godowns", "")
    vm.Drawer.AddParentChild("masters", "pageInsuranceProviders", "", "", "Insurance Providers", "")
    vm.Drawer.AddParentChild("masters", "pageInsurancePolicies", "", "", "Insurance Policies", "")
    vm.Drawer.AddParentChild("masters", "pageSubLocation1s", "", "", "Godown Sub Location1", "")
    vm.Drawer.AddParentChild("masters", "pageLocations", "", "", "Godown Sub Location2", "")
    vm.Drawer.AddParentChild("masters", "pageWarehouseLicenses", "", "", "Warehouse Licence", "")
    vm.Drawer.AddParentChild("masters", "pageProducts", "", "", "Products", "")
    vm.Drawer.Refresh
    vm.Drawer.Show
End Sub

If this method is used, the draweritems_click events needs to be changed also.

B4X:

'*IMPORTANT when a drawer item is clicked
Sub draweritems_click(elID As Object)
    'get the id from the event
    'Dim elID As String = vm.GetIDFromEvent(e)
    Select Case elID....

The important point here is the commenting out / removal of

B4X:

Dim elID As String = vm.GetIDFromEvent(e)

And the varaible passed to the click event is no longer (e As BANanoEvent) but (elID as Object)

zemorango · Aug 15, 2020

I have configure this nice framework,
I'm trying to run the demo, Everything compile fine but in the browser I got and Error

Uncaught SyntaxError: await is only valid in async function
app.js:1 Uncaught ReferenceError: banano_bananovuetifycore_bananoshared is not defined
at app.js:1

I'm using wamp server as my PHP server
last version of Banano and BananoVue

Regards

Jose

swamisantosh · Aug 15, 2020

e

Mashiane said:
Was fortunate enough to get the drawer to work with drill-down. To be included in the next iteration.

View attachment 98559

excellent option was very much needed

Mashiane · Aug 15, 2020

Vuetify Core 4.26 Now available.

Download

NB: There is a known bug with the SpeedDial and this is being attended to as its not working anymore.

On the Demo we have set the background image for the NavBar and Drawer. This is done with...

NavBar

B4X:

vm.NavBar.SetSrc("https://picsum.photos/1920/1080?random")

Drawer

B4X:

vm.Drawer.SetSrc("https://picsum.photos/1920/1080?random")

Mashiane · Aug 15, 2020

zemorango said:
I'm trying to run the demo, Everything compile fine but in the browser I got and Error

This has been fixed, see post above...

Mashiane · Aug 15, 2020

Important Facts: One can also have an icon for the file input with a hidden input part.

B4X:

vm.CreateFileInput("fi2", Me).SetAccept("image/*").SetLabel("File input").SetPrependIcon("mdi-camera").SetHideInput(True).AddToContainer(cont, 2, 1)

'

Mashiane · Aug 16, 2020

Important Facts: The VMPrism component has been updated to enable one to copy code & download it. This is due to now having 2 buttons.

This is using vue-clipboard2 to enable one to copy code to the clipboard. Once copied, the code can be pasted anywhere from the clipboard.

We tested this with showing one of the alerts code.

How have we done this.

1. We created a method to create the prism component on the modAlerts page.

B4X:

CreateVBCode("a1code", "Alert", $"vm.CreateAlert("a1", Me, "success").SetContent("I'm a success alert.").Show.AddToContainer(cont, 1, 1)"$).AddToContainer(cont, 1, 1)

This expects 2 methods, a1codecopy_click(e as bananoevent) and a1codedownload_click(e as bananoevent)

These are based on the prism component id.

We then add the events, passing them the prism component identifier.

B4X:

Sub a1codecopy_click(e As BANanoEvent)
    vue.CopyCode2Clipboard("a1code")
End Sub

Sub a1codedownload_click(e As BANanoEvent)
    vue.DownloadCode("a1code", "a1code.txt")
End Sub

The code to create the component is as easy as:

B4X:

Sub CreateVBCode(codeID As String, sTitle As String, scode As String) As VMPrism
    Dim pri As VMPrism
    pri.Initialize(vue, codeID, Me)
    pri.SetLanguage("vb")
    pri.SetTitle(sTitle)
    pri.SetCode(scode)
    Return pri
End Sub

Mashiane · Aug 16, 2020

Important Facts: We will take some time to slowly improve the documentation of how the library works.

Documentation 01: Alerts Complete

Download

Mashiane · Aug 16, 2020

Google Authentication - allow users to sign in using a google popup screen

Mashiane · Aug 16, 2020

Just realized that creating the documentation is going to be a loooong process. It looks fancy though as one can refer and then copy the source code for their apps. One has to do it.

Let me fire some b4j then do some copy and paste and code generation to copy back to the demo. The code is there, I just need to put it to the prism component. Jah neh!

Mashiane · Aug 17, 2020

Upcoming Updates: Data-Table Totals & Navigation Changes

We want to sum the calories column. We define this in the data-table definition.
We also register this method. If the method will be called multiple times, it just needs to be registered once with .SetMethod.

Step 1

B4X:

dt1.SetColumnTotal("calories", "sumfield('calories')")
    'register the method
    vue.SetMethod(Me, "sumfield")

The sumfield method will be called passing to it the name of the column. NB: This is case sensitive, colum names are lower case.

Step 2

We define the method that should be called. This gets the list of records, loops through each one and then sums the details

B4X:

'sum any column passed
Sub sumfield(fld As String) As String
    'get all the records
    Dim totSum As Int = 0
    Dim recs As List = dt1.GetData
    For Each rec As Map In recs
        Dim fldNum As String = rec.get(fld)
        totSum = totSum + BANano.parseInt(fldNum)
    Next
    totSum = vue.makemoney(totSum)
    Return totSum
End Sub

We have also changed the pagination. This is done by just adding this call to the data-table definition, for example

B4X:

dtUsers.SetExternalPagination

#Coming soon

Mashiane · Aug 17, 2020

Core 4.26 Maintenance Now Available.

Enjoy!

Mashiane · Aug 17, 2020

Upcoming changes: Designer Improvements

Mashiane · Aug 18, 2020

Core 4.26 Maintenance Released.

This fixes some bugs on the data-table (demo) and also the split device (designer) and schema translation bugs.

Ta!

NB: For checkboxes and switches, the values are Yes/No (Case sensitive)

Mashiane · Aug 20, 2020

Upcoming Changes:

1. Vuetify updated to 2.3.9.
2. Add a clear sort for data-table. If you have clicked on the header of the data-table, stuff sorts and if you have multi-sorted headers, you can sort on multiple-columns. Thing is, the sort order never cleares when you reload the data. A clear sort button has been added to the data-table. To activate this, add this to your definition. This example we are using the dtschema vmdatatable, we add a divider, then the clear sort button and then a column chooser.

B4X:

dtschema.AddDivider
    dtschema.SetClearSort
    dtschema.SetColumnChooser(True)

To demonstrate this, see when we click the 'R' and 'C' column and then clear the sort.

This is also activated when executed .SetDataSource(?)

3. The column chooser is now activated by clicking the button and no longer on hover.

Mashiane · Aug 21, 2020

Latest Documentation

Mashiane · Aug 21, 2020

Core 4.27 Now Available

Also added button group on buttons

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

Well-Known Member

Expert

Well-Known Member

Expert

New Member

Member

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads