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

Mashiane · Mar 31, 2020

BANanoVuetify 3.03 - Drag n Drop Selects, AutoComplete and Combo

To simplyfy development we have merged the Select, AutoComplete and Combo into VMSelect control. The source of data for these can be a map or a datasource from a list of records stored in a database. When using a map, one is provided with an option to specify the Item Values and Item Text values. These needs to be separated by ,.

For a database based source, one specifies the 'source table', 'item value' field and also the 'item text' field. For example

B4X:

Dim states as list
states.initialize
states.add(createmap("id":"1","name":"State 1"))
states.add(createmap("id":"2","name":"State 2"))
states.add(createmap("id":"3","name":"State 3"))
states.add(createmap("id":"4","name":"State 4"))

We save the list to the state of the app

B4X:

vm.SetData("mystates", states)

So as a data source, we will use "mystates" - meaning the state we have saved the list to for the list.

The item value will be the 'id' in each map record. This identfies each state uniquely.
The item text will be 'name' as it links to the name to be returned.

To use map values, one needs to select 'Use Options' in the property bag. This will use the '1,2,3' and 'One,Two,Three' as specified in item values and item texts and not the datasource.

This will be defined as

B4X:

Dim select3keys As String = "1,2,3"
Dim select3values As String = "One,Two,Three"
Dim select3map As Map = vm.keyvalues2map(",", select3keys, select3values)
Dim selselect3 As VMSelect = vm.NewSelectOptions(Me, true, "selselect3", "select3", "select3", true, false, "", select3map, "id", "text", false, "", "", 0)
selselect3.SetClearable(true)

NB: Watch in HD

AutoCompletes

Dragging and Droping AutoCompletes is the same as selects as the same component is being returned i.e. VMSelect. One just drags and drops it in the designer and uses the similar process as completing the Select property bag.

Combo boxes

Dragging and Droping Combos is the same as selects as the same component is being returned i.e. VMSelect. One just drags and drops it in the designer and uses the similar process as completing the Select property bag.

You can check the Vuetify documentation on the differences of these controls and what they offer.

Ta!

Mashiane · Apr 2, 2020

BANanoVuetify - Dragging and dropping Radio Boxes

This demo shows how to design your radio boxe group using the designer.

Enjoy!

Mashiane · Apr 2, 2020

BANanoVuetify - Creating Client Side Excel Reports

We have updated the Excel example to be able for one to generate an excel report for the expenses.

Let's look at the code. We are directly getting the records from the database and then feed them to the BANanoOXML engine.

B4X:

Sub PrintExpenses
    Dim oxml As BANanoOXML
    oxml.initialize("expenses.xlsx")
    Dim rpt As BANanoObject = oxml.WorkSheet("Expenses")
    'create a heading for the report
    oxml.SetText(rpt, 1, 1, "Expenses Report")
    'merge the heading
    oxml.Merge(rpt, "A1:E1")
    Dim rowH As BANanoObject = oxml.GetRow(rpt, 1, 1)
    Dim hstyle As OXMLStyle = oxml.CreateStyle
    hstyle.bold = True
    hstyle.fontSize = 18
    hstyle.hAlignment = "center"
    hstyle.vAlignment = "center"
    oxml.SetStyle(rowH, hstyle)
    'put border on merged rc
    Dim colCnt As Int
    For colCnt = 1 To 5
        Dim colH As BANanoObject = oxml.GetCell(rpt, 1, colCnt)
        oxml.SetStyleBorder(colH, oxml.colors_black, oxml.BorderThin)
    Next
    
    'add the headers
    oxml.SetRow(rpt, 2, 1, Array("Date", "Category", "Type", "Description", "Amount"))
    'get all the expenses we need to report on
    Dim qry As String = "select expenses.id, expenses.expense_date, expenses.expense_description, expenses.expense_amount, expensecategories.text as expense_category,"
    qry = qry & "expensetypes.text As expense_type from expenses, expensecategories, expensetypes where expenses.expense_category = expensecategories.id and expenses.expense_type = "
    qry = qry & "expensetypes.id order by expenses.expense_date desc"
    Dim dbsql As BANanoMySQL
    dbsql.Initialize(Main.dbase, "expenses", "id")
    dbsql.Execute(qry)
    dbsql.json = BANano.CallInlinePHPWait(dbsql.methodname, dbsql.Build)
    dbsql.FromJSON
    If dbsql.OK Then
        Dim rowCnt As Int = 3
        'loop through each expense record
        For Each expmap As Map In dbsql.result
            Dim sexpense_date As String = expmap.Get("expense_date")
            Dim sexpense_description As String = expmap.get("expense_description")
            Dim sexpense_amount As String = expmap.get("expense_amount")
            Dim sexpense_category As String = expmap.get("expense_category")
            Dim expense_type As String = expmap.get("expense_type")
            '
            Dim rptLine As List
            rptLine.initialize
            rptLine.AddAll(Array(sexpense_date, sexpense_category, expense_type, sexpense_description, sexpense_amount))
            oxml.SetRow(rpt, rowCnt, 1, rptLine)
            rowCnt = rowCnt + 1
        Next
        'add a total for the amount
        oxml.SetFormula(rpt, rowCnt + 1, 5, $"SUM(E3:E${rowCnt})"$)
        'apply borders to all the rows
        Dim rowStart As Int
        Dim rstyle As OXMLStyle = oxml.CreateStyle
        rstyle.borderColor = oxml.colors_black
        rstyle.borderthickness = oxml.BorderThin
        For rowStart = 2 To rowCnt
            rstyle.bold = False
            Dim rptr As BANanoObject = oxml.GetRow(rpt, rowStart, 1)
            If rowStart = 2 Then rstyle.bold = True
            oxml.setstyle(rptr, rstyle)
        Next
        'number format column from where amounts start
        Dim amt As BANanoObject = oxml.GetColumn(rpt, 3, 5)
        Dim cstyle As OXMLStyle = oxml.CreateStyle
        cstyle.numberFrmat = "#,##0.00 ;[Red](#,##0.00)"
        cstyle.borderColor = oxml.colors_black
        cstyle.borderthickness = oxml.BorderThin
        oxml.SetStyle(amt, cstyle)
    Else
        Log("modExpenses.Refresh: Error - " & dbsql.error)
    End If
    
    
    oxml.download(Me, "onDownload")
    
End Sub

Sub onDownload
    vm.ShowSnackBar("Expenses report downloaded!")
End Sub

Frankie Lagrange · Apr 2, 2020

Great job, Mashiane! And I admire your commitment and generosity.

Mashiane · Apr 2, 2020

Added some additional devices to the VMDevice class

Download

B4X:

.SetNote8

and

B4X:

.SetS5White

B4X:

.SetNexus5

and

B4X:

.SetIPhone8

B4X:

.SetIPhone4S

and

B4X:

.SetIPhone5S

Mashiane · Apr 3, 2020

Drag and Drop Date & Time Pickers

Here we are able to drag and drop date and time pickers. Note that its a known issue of the component appearing in two places when activated (not crucial). The b4x code and html code however are on point!

Marc Van Cauwenberghe · Apr 3, 2020

Amayzing is the word.

Mashiane · Apr 3, 2020

Exciting!!! Exciting!!! Exciting!!! A new thread about initializing and handling events!!

[BANanoVueMaterial] Handling Events

Ola Download This thread is to be about handling events in BANanoVueMaterial (aka BANanoVuetify). This is something that has been requested for me to explain some more. So I will start by addressing the question I was asked. How to detect changes in the stepper control. Steppers 1...

www.b4x.com

Mashiane · Apr 6, 2020

Drag n drop parallax...

This demo shows how to create a parallax...

Mashiane · Apr 6, 2020

Drag and drop a Container

A container is the root layout of all designs. When you design your page, the underlying component that you create is a container and controls are added to it and the grid is designed based on your requirements.

In all instances of the components we designed above, the underlying root component would have been the container. Now this is how we will create the container with the designer. When we specified the matrix of R1C1, we were indicating that that respective component will be placed on that particular location of the container.

A container is a div with a container class added to it. It can be fluid, have elevation etc etc. Let's watch.

NB: The designer is working in static mode and does not page refresh. As a result we have a known issue of the datetimepicker (not showing, a bug we will sort soon)

Mashiane · Apr 7, 2020

Drag and Drop the Toolbar - Part 1 (This applies for AppBar, ToolBar and SystemBar)

Download

In this part 1 of this toolbar thread, we explore how we can drag and drop a toolbar to our stage to create our code. There are 3 types of toolbars for Vuetify, these are

1. The AppBar
2. The ToolBar and
3. The SystemBar

Using a radio group, one is able to select any type of toolbar they need.

In Part 2 we will look at adding iconbuttons, search, menus and other buttons. Watch this space! Above all else.. Enjoy!

NB: Watch in HD

PS: You can directly run the designer without installation directly from this github link

Mashiane · Apr 9, 2020

Drag and Drop the Toolbar - Part 2 (This applies for AppBar, ToolBar and SystemBar)

This demos shows how you can create, update and delete the toolbar buttons,

Mashiane · Apr 9, 2020

Drag and Drop the Menu - Part 1

Download
Run Designer from Github

This part 1 shows how one can drag and drop a menu to design it using the designer.

NB: Watch with HD

Mashiane · Apr 10, 2020

@Rubsanpe Thanks for your encouragement and appreciation.

Please note that this is how we ask questions about this library. This is indicated on the 1st post.

IMPORTANT: Asking Questions about BANanoVueMaterial

1. Please do not ask questions on this thread as this is about updates and new developments about BANanoVueMaterial.
2. When asking a question, please use the B4J Forum and prefix your question with [BANanoVueMaterial] Your Question
3. As the author of this lib, I would recommend that in the content of your question you also address it to myself with @Mashiane (this will also help me find and attend to your questions faster as it will show in my personal notifications)

If you have followed all the instructions about how to set up your IDE and as indicated in the 1st post, you should not experience any problems.

I cannot reproduce your error on my side. Try and click Project > Clean Project and also Window > Reset

Anyway, this is my configuration and everything is fine. The reported issue about the post processor though is not really an issue.

Mashiane · Apr 12, 2020

Menu - Part 2 Creating, Updating and Deleting Menu Items

Download

This demo shows how to create the menu items for the menu. In the designer itself, the menu items added only show in the "Items" menu. Using the source code generated you can then create your menu items you need.

Mashiane · Apr 18, 2020

Drag n Drop Carousel

This demo shows how one can create a carousel and edit and update its properties.

Mashiane · Apr 21, 2020

Drag n Drop Dialog

This demo shows how one can drag and drop a dialog to the stage. The content inside the dialog is created inside a container. This can be done by just specifying the parent element for the child elements.

Mashiane · Apr 21, 2020

Drag n Drop Rating

The demo below shows how one can drag n drop a rating input component to the stage.

Mashiane · Apr 21, 2020

Drag n Drop SpeedDial

This demo shows how to drag n drop a speed-dial to the stage

Mashiane · Apr 27, 2020

Version 3.7 is out!

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

Expert

Expert

Expert

Member

Expert

Expert

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads