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

joulongleu · Mar 10, 2020

BananoVuetify is too beautiful

Mashiane · Mar 13, 2020

BVM 3: File Input Component : Current developments that make sense

The code to upload the contents selected from the file input are now built within the library. All files uploaded will be saved to the assets folder of your app.

1. Define the FileInput Component

B4X:

Dim uploadprofile As VMFileInput = vm.NewFile(Me,"fiuploadpic", "upload", "Upload Profile Image", "", False, "", "", 0)

This is passed the module handling the events, the unique id of the element, the vmodel (temporal in this case), label etc.

2. Then you define a _change event, this fires after the files are uploaded. It will return a list of files belonging to this object.

B4X:

Type FileObject(FileName As String, FileDate As String, FileSize As Long, FileType As String)

The _change event is linked to the unique id of the component. In this case we read the uploaded file and then update the profile picture.

B4X:

Sub fiuploadpic_change(fileList As List)
    If fileList = Null Then Return
    'get the file object
    Dim fo As FileObject = fileList.Get(0)
    vm.setdata("dp", $"./assets/${fo.FileName}"$)
End Sub

Mashiane · Mar 13, 2020

BVM 3 Image: The image is used to display pictures. You can change an image by updating its v-model as per example above,

B4X:

Dim profilepic As VMImage = vm.NewImage(Me,"displaypic", "dp", "./assets/sponge.png", "SpongeBob", "80px", "80px")
    profilepic.SetBorder("1px", vm.COLOR_BLUE, vm.BORDER_RIDGE)
    profilepic.SetBorderRadius("50%")

The v-model for this image that will update the src attr of the image is "dp". Changing that changes the picture displayed. See here.

Mashiane · Mar 13, 2020

BVM 3 Text Fields: These are used for text inputs

B4X:

Dim txtfirstname As VMTextField = vm.NewText(Me,"txtfirstname", "firstname", "First Name", "First Name", True, "", 0, "", "The first name is required!", 0)
    Dim txtlastname As VMTextField = vm.NewText(Me,"txtlastname", "lastname", "Last Name", "Last Name", True, "", 0, "", "The last name is required!", 0)
    '

To get the contents of the textfields we would execute

B4X:

Dim fname as string = vm.GetData("firstname")
dim lname as string = vm.GetData("lastname")

As we are using the grid methodology, we have defined a single method called .GetData to get all details of all input components inside a container.

Mashiane · Mar 13, 2020

BVM 3 Date Picker: A control to select a date

B4X:

Dim dpDOB As VMDatePicker = vm.NewDatePicker(Me,"dpdateofbirth", "dob", "Date of Birth", True, "Date of Birth","","",0)

To set and get the date one also just needs to update the v-model, in this case "dob"

Mashiane · Mar 13, 2020

BVM 3 Time Picker : This allows one to select time for input.

B4X:

Dim tpTOB As VMTimePicker = vm.NewTimePicker(Me,"tptimeofbirth", "tob", "Time of Birth", True, "", "", "",0)
    '

Mashiane · Mar 13, 2020

BVM 3 Radio Group: This allows one to make a selection from options.

B4X:

Dim radGender As VMRadioGroup = vm.NewRadioGroup(Me,"rggender", "gender", "Gender", "Male", CreateMap("Male":"Male","Female":"Female"), True, True, 0)

Here we want 2 options, to select a gender, Male / Female. The default selection is "Male"

Mashiane · Mar 13, 2020

BVM 3 Passwords

Passwords enable one to specify hidden content for their password. In this instance we have turned off the toggle eye.

B4X:

Dim txtPassword As VMTextField = vm.NewPassword(Me,"txtpassword", "password", "Password","",True,False,"",15,"", "The password is required!",0)
    Dim txtconfirmPassword As VMTextField = vm.NewPassword(Me,"txtconfirmpassword", "confirmpassword", "Confirm Password","",True,False,"",15,"", "The password is required!",0)

By just changing one of the variables passed, one can have the toggle buttons visible.

B4X:

Dim txtPassword As VMTextField = vm.NewPassword(Me,"txtpassword", "password", "Password","",True,True,"",15,"", "The password is required!",0)
    Dim txtconfirmPassword As VMTextField = vm.NewPassword(Me,"txtconfirmpassword", "confirmpassword", "Confirm Password","",True,True,"",15,"", "The password is required!",0)

Mashiane · Mar 13, 2020

BVM 3 Switch - to make a choice.

B4X:

Dim notifications As VMSwitch = vm.NewSwitch(Me,"swtnotifications", "notifications", "Receive Notifications", "Yes", "No",True, 0).SetString

We want our switch to return Yes when true and No when false. The return value should be a string and not a boolean, thus .SetString.

Mashiane · Mar 13, 2020

BVM 3 TextArea

B4X:

Dim notes As VMTextArea = vm.NewTextArea(Me,"txtnotes", "notes", "Notes", "", True, True, "", 0,"", "Notes are required!", 0)

Usable for long entry..

Mashiane · Mar 13, 2020

BVM 3 CheckBox

B4X:

Dim agree As VMCheckBox = vm.NewCheckBox(Me,"chkagree", "agree", "I agree with terms of use", "Yes", "No", True, 0).SetString

Just like the switch, we also want this to return Yes/No depending on what is entered.

Mashiane · Mar 13, 2020

BVM 3 Getting Data from the screen.

The data that is returned from your screen is based on the specified v-models per component that you added. This is returned as a map (key value pair)

B4X:

Sub btnicony_click(e As BANanoEvent)
    Dim rec As Map = cont.getdata
    vm.ShowAlert("inform","Data", BANano.tojson(rec), "Data")
End Sub

Mashiane · Mar 13, 2020

BVM 3 Slider

B4X:

Dim slider As VMSlider = vm.NewSlider(Me, "slider", "slider", "Slider", 0, 100, 0).SetDevicePositions(2, 2, 12, 6, 6, 6)
    cont.AddControl1(slider.Slider, slider.ToString)

This slider starts from 0 to 100, will sit in row 2 column 2, spanning 6 spaces on medium, large, xlarge devices.

Mashiane · Mar 13, 2020

BVM 3 AutoComplete

The autocomplete can be sources from a list or key value pairs.

We first define the source.

B4X:

Dim lst As List
    lst.Initialize
    lst.Add(CreateMap("name": "Florida", "abbr": "FL", "id": "1"))
    lst.Add(CreateMap("name": "Georgia", "abbr": "GA", "id": "2"))
    lst.Add(CreateMap("name": "Nebraska", "abbr": "NE", "id": "3"))
    lst.Add(CreateMap("name": "California", "abbr": "CA", "id": "4"))
    lst.Add(CreateMap("name": "New York", "abbr": "NY", "id": "5"))
    vm.SetData("states2", lst)

We add our auto-complete

B4X:

Dim ac1 As VMAutoComplete = vm.NewAutoCompleteDataSource(Me, "acx1", "acx1", "States", "States", "states2", "id", "name", False, True, "This is it!", "", 0).SetDevicePositions(3, 2, 12, 6, 6, 6)
    cont.AddControl1(ac1.AutoComplete, ac1.ToString)

The data source in this case will be like records coming from a db select command.

The second option is to define the autocomplete from a normal list

Here we define a list for our options.

B4X:

Dim genderlist1 As List = Array("Male", "Female")

Then we define our AutoComplete

B4X:

Dim ac2 As VMAutoComplete = vm.NewAutoComplete(Me, "acx2", "acx2", "Gender", "Gender", genderlist1, False, "This is it!", "", 0).SetDevicePositions(3, 2, 12, 6, 6, 6)
    cont.AddControl1(ac2.AutoComplete, ac2.ToString)

This approach also applies to Combo and Select components.

Mashiane · Mar 13, 2020

BVM 3 Labels

One can define any label and size they want according to the available standards. In this example, we define a H1.

B4X:

Dim lbl As VMLabel = vm.NewLabel("labelz", "labelz", vm.SIZE_H1, "This is H1").SetDevicePositions(6, 2, 12, 6, 6, 6)
    cont.AddControl1(lbl.Label, lbl.ToString)

Mashiane · Mar 13, 2020

BVM 3 Selects

For this select we base it on a map and another one on the previous states list.

Let's define a gender list.

B4X:

Dim genderlist As Map = CreateMap("f":"Female", "m":"Male")

Let's use this map to define a select dropdown.

B4X:

Dim mysel1 As VMSelect = vm.NewSelectOptions(Me, "myselect1", "myselect1", "Select Gender", True, False, "Gender", genderlist, "id", "text", False, "My thingo", "", 0).SetDevicePositions(8, 2, 12, 6, 6, 6)
    cont.AddControl1(mysel1.Combo, mysel1.ToString)

The second option is from a datasource.

We define the ds:

B4X:

Dim lst As List
    lst.Initialize
    lst.Add(CreateMap("name": "Florida", "abbr": "FL", "id": "1"))
    lst.Add(CreateMap("name": "Georgia", "abbr": "GA", "id": "2"))
    lst.Add(CreateMap("name": "Nebraska", "abbr": "NE", "id": "3"))
    lst.Add(CreateMap("name": "California", "abbr": "CA", "id": "4"))
    lst.Add(CreateMap("name": "New York", "abbr": "NY", "id": "5"))
    vm.SetData("states2", lst)

We then add a multiple input select.

B4X:

'datasource
    Dim mysel As VMSelect = vm.NewSelectDataSource(Me, "myselect", "myselect", "Select States", True, True, "States", "states2", "id", "name", False, "My thingo", "", 0).SetDevicePositions(8, 1, 12, 6, 6, 6)
    cont.AddControl1(mysel.Combo, mysel.ToString)
    'map

Mashiane · Mar 13, 2020

BVM 3 Buttons

1. Let's define a button that will take the whole block

B4X:

Dim btn As VMButton = vm.NewButton(Me, "buttonx", "TheMash Block", True, True, False, True).SetDevicePositions(7, 2, 12, 6, 6, 6)
    cont.AddControl1(btn.Button, btn.ToString)

2. Lets add an icon button

B4X:

Dim icon As VMIcon = vm.NewIcon(Me, "icon", "mdi-chevron-right", vm.ICON_LARGE, vm.COLOR_AMBER).SetDevicePositions(7, 1, 12, 6, 6, 6)
    icon.SetDark(True)
    cont.AddControl1(icon.Icon, icon.ToString)

3. Let's add a FAB button

B4X:

Dim btnxy As VMButton = vm.NewFabButton(Me, "btnicony", "mdi-pencil", vm.COLOR_DEEPORANGE, "Fab Button").SetDevicePositions(9, 2, 12, 6, 6, 6)
    btnxy.SetLarge(True)
    cont.AddControl1(btnxy.Button, btnxy.ToString)

4. Let's add the speed dial

B4X:

Dim sp1 As VMSpeedDial = vm.CreateSpeedDial("sp1", Me, "mdi-account-circle", "mdi-close")
    sp1.Button.SetColorIntensity(vm.COLOR_BLUE, vm.INTENSITY_DARKEN2)
    sp1.AddItem("edit", "mdi-pencil", "green")
    sp1.AddItem("addit", "mdi-plus", "indigo")
    sp1.AddItem("deleteit", "mdi-delete", "red")
    vm.AddSpeedDial(sp1)

All events for buttons take the specified id and then a click method.

B4X:

Sub edit_click(e As BANanoEvent)
    vm.ShowSnackBar("Edit!")
End Sub

Mashiane · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 1: Creating Grids

Mashiane · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 2: Navigation between 2 pages using v-show directive.

Mashiane · Mar 13, 2020

BVM 3 Example Projects (in the Examples Folder)
Example 3: Creating a Login Screen.

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

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads