B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Mashiane · May 24, 2022

[BANanoVuetifyAD3] [RFI]: Creating CRUD WebApps

Hi there: REQUEST FOR INPUT In 2021, I released an ebook about Creating CRUD based WebApps ebook. This was for those in a hurry. I am also finding myself in a hurry lately, thus addressing this again. I am currently updating how that tool created apps, more especially with the outlook of BVAD3...

www.b4x.com

Mashiane · May 25, 2022

Needful Things...

Font Awesome has been removed from the library. If you want it, get the css and files from the NeedFul Things folder of Github (no pun intended)

Mashiane · May 30, 2022

[BANanoVuetifyAD3] Incwadi yamaBali (StoryBook) - Low Code Vue WebApps

Hi there Download You can read this Medium Article where I introduce this tool. You can check out the Alpha First Look from this YT video. PS: If you would like to be part of this, running tests, debugging, etc, you are welcome to, please hit me up via DM. Thanks. ?

www.b4x.com

Mashiane · Jun 1, 2022

Check the new gauges in the Kitchen Sink...

Mashiane · Jun 2, 2022

Mashy Teaches Low Code Vue Web Development with BANanoVuetifyAD3 Incwadi yamaBali (StoryBook)

Hi there Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download BANanoVuetifyAD3 Library Download Kitchen Sink WebApp (Optional - useful for Learning how this works) Download BVAD3Builder (Optional - useful to trim your final package) Terms of Engagement Get the...

www.b4x.com

Mashiane · Jun 5, 2022

Version 7.33 is live and kicking...

GitHub - Mashiane/BANanoVuetifyAD3: Create websites & webapps using Vuetify & BANano

Create websites & webapps using Vuetify & BANano. Contribute to Mashiane/BANanoVuetifyAD3 development by creating an account on GitHub.

github.com

Incwadi yamaBali has also been updated.

GitHub - Mashiane/BVAD3---Incwadi-yamaBali: Low Code Vue WebApp using BANanoVuetifyAD3

Low Code Vue WebApp using BANanoVuetifyAD3. Contribute to Mashiane/BVAD3---Incwadi-yamaBali development by creating an account on GitHub.

github.com

Mashiane · Jun 8, 2022

Upcoming Updates to Version 7.33

The next version has a video component, play your MP4, WEBM, OGG and YouTube Videos.

Mashiane · Jun 14, 2022

Please note that both the Kitchen Sink BVAD3 Demo web app has been updated and BVAD3 7.33 Maintenance is also available. Get your free copy from Github!

These feauture VStepper, Tabs and Expansion Panels Forms as depicted below.

Mashiane · Jun 16, 2022

Hi there

As you aware that BVAD3 can generate QRCodes...

In the next version we will also be able to generate all sorts of barcodes.

This is based on this library: https://github.com/lindell/JsBarcode/

Happy BVAD3 coding.

A bar-code scanner is coming soon!

Mashiane · Jun 16, 2022

AutoComplete Colored Chips are now possible on the VueTable. This helps in ensuring that inline editing is done easily without having to open a dialog.

Mashiane · Jun 19, 2022

QR Code Reader up and running:

You can test is here: https://bvad3qrreader.netlify.app/#/

Will be available soon...

Mashiane · Jun 22, 2022

The Relationship between BVAD3 Custom Views, the API and the Low Code generated by Incwadi yamabali (Story Book)

The current up to date, single source of truth for everything BVAD3 is currently running in Netlify on this link, https://magenta-vacherin-2f7e6b.netlify.app/#/

and also GitHub via this link, https://mashiane.github.io/BVAD3-Kitchen-Sink---A-Vuetify-Project/#/

If you access this, you have the BVAD3 API, which details all the components, their events and methods. This can help you understand how everything works for each component.

Below is an example of the VTextField component...

In the abstract designer, the custom views uses "Display Name" for description, the low code produced by the Story Book is based on the custom view or / property bag.
Besides, custom views are just classes that one can initialize and set properties to. For the low code we use the "key" of each property in the Map to feed to the designer script.

Happy BVAD3 Coding!

The attached document can shed some more light.

Mashiane · Jul 4, 2022

BANanoVuetifyAD3 7.34 Maintenance Update

Below are some of the stuff in the What's New Section

Using CDN

You can use CDN resources. In the library on Main > Process Globals > Online = True. This ensures jsDelivr is used for all the CSS & JS Files in the library. To use locally hosted resources in your final App, you can set this to False.

Using / Not Using PlugIns

You can turn off libraries that you wont use and can just get the Core CSS / JS Files you need.

Library Options:

Sub Process_Globals
    Private BANano As BANano 'ignore
    Public Version As String = "7.34"
    Public AppName As String = "BANAnoVuetifyAD3"
    'use debug vue.js
    Public CoreFunctionality As Boolean = False
    Public UseDebug As Boolean = False
    'Use online version of vue/vuetify & others
    Public Online As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adprism
    Public UsePrismCodeDisplay As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adgmap
    Public UseGoogleMaps As Boolean = True
    'ajax calls usix axios
    Public UseAxios As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/qrcode (an option to fetch)
    Public UseQRCode As Boolean = True
    'https://github.com/gruhn/vue-qrcode-reader
    Public UseQRCodeReader As Boolean = True
    'https://github.com/mebjas/html5-qrcode
    Public UseBarcodeReader As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adjspdf (export vuetable to pdf)
    Public UsePDF As Boolean = True
    '(export vuetable to excel)
    Public UseExcel As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adchartkick
    Public UseChartKick As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/firebasecrud
    Public UseFireBase As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/leaf
    Public UseLeafLetMaps As Boolean = True
    Public UseBlurring As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/quillx
    Public UseHTMLEditor As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/ (chat box)
    Public UseBeautifulChat As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/counchcrud (install offline first db)
    Public UsePouchDB As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/aes
    Public UseEncryption As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/kanban
    Public UseKanBan As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/animatecss
    Public UseAnimeCSS As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/lottie
    Public UseLottie As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/basicanimations
    Public UseAnimeJS As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adcamera
    Public UseWebCam As Boolean = True
    'https://www.b4x.com/android/forum/threads/bananovuetifyad3-organogram-lite-firebase-webapp-source-code-11.130680/
    Public UseFlowy As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/addynaform
    Public UseDynamicForms As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/translate
    Public UseTranslate As Boolean = True
    'export & import csv
    Public UseImportCSV As Boolean = True
    '
    Public UseFluidMeter As Boolean = True
    Public UseGauge As Boolean = True
    Public UseKMLToGeoJSON As Boolean = True
    'Public UseApexCharts As Boolean = False
    'Public UseCircularFluidMeter As Boolean = False
    '
    'Public UseShowDown As Boolean = True
    'sanitize data from HTML editor
    'Public UseDOMPurify As Boolean = True
    'show markdown/html from markdown
    'Public UseMarkDown As Boolean = True
    Public UseCompositionAPI As Boolean = False
    Public UseBarCode As Boolean = True
    Public UseSignaturePad As Boolean = True
    'Public UsePageFlip As Boolean = True
    Public UseBottomNavigation As Boolean = True
    Public UseBrowserPrint As Boolean = True
End Sub

If an option is set to false, the CSS & JS files applicable to that component will not be part of your App. These settings are all turned to True as they are showcased in the Kitchen Sink. For example, if your app will not use the UseQRCodeReader , you can just set it to False.

Using Core Functionality (without PlugIns)

You can just use the Core Vuetify functionality without PlugIns. You do this by setting CoreFunctionality = True. This is what it does

B4X:

If CoreFunctionality Then
         UsePrismCodeDisplay = False
         UseGoogleMaps = False
         UseAxios = False
         UseQRCode = False
         UseQRCodeReader = False
         UseBarcodeReader = False
         UsePDF = False
         UseExcel = False
         UseChartKick = False
         UseFireBase = False
         UseLeafLetMaps = False
         UseBlurring = False
         UseHTMLEditor = False
         UseBeautifulChat = False
         UsePouchDB = False
         UseEncryption = False
         UseKanBan = False
         UseAnimeCSS = False
         UseLottie = False
         UseAnimeJS = False
         UseWebCam = False
         UseFlowy = False
         UseDynamicForms = False
         UseTranslate = False
         UseImportCSV = False
         UseFluidMeter = False
         UseGauge = False
         UseKMLToGeoJSON = False
         UseCompositionAPI = False
         UseBarCode = False
         UseSignaturePad = False
         UseBottomNavigation = False
         UseBrowserPrint = False
    End If
  
    'ret
    'UseImportCSV = True
    'UseEncryption = True
    'UsePDF = True
    'UseExcel = True
    'UseAxios = True
    'UseBrowserPrint = True
    'UseLottie = True

If however you want to use the core-functionality but with some of the plugins, you can then set those to True after CoreFunctionality.

Happy BANanoVuetifyAD3 coding.

PS:

Setting the plugins = False, does not remove the related component code from the library & thus the compiled BANanoVuetifyAD3.b4xlib.
Also, this does not remove the JS / CSS from the b4xlib, but will surely remove the unused CSS/JS content from your final app.
Also use the package manager as it removes unused component code as an added functionality.
Comment your code with 'IgnoreDeadCode and run the RemoveDeadCode functionality with the transpiler.
Set Online = True for your final app to use jsDelivr CDN, this decreases the size of your app and ensures the needed cached resources are used. If however you expect erratic internet connection, consider making your app a PWA.

syerif · Jul 7, 2022

hi,
thanks for great lib, but i got problem with datatable using datetime, where is set automatic from database, it not shown if i set VField into CRUD mode and can not save data, and if i uncheck the CRUD it will not show data to table..

any suggestion please?

Mashiane · Jul 7, 2022

Please do not ask questions on this thread. It's very simple to start a new thread for your question. Please also when you do so attach an example project.

Mashiane · Jul 7, 2022

BANanoVuetifyAD3 Kitchen Sink - Topic Search

Find code pages related to your topic of interest easily and faster:

Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series

Creating a ListView - Other Item Variants In this lesson we look at how to create other item variants in the listview. It is recommended one uses one variant template at a time and hide other item using the Use directive in the ListViewOptions component to be linked with the VList. Sub...

www.b4x.com

Mashiane · Jul 9, 2022

Upcoming: Introducing the VFlexDialog

The VFlexDialog is a combination of VDialog+VForm+VFields to help you create your input dialogs. You drop a VFlexDialog inside a container inside of your page,then add input elements, rules and events to it. You do this via code. It has 3 buttons, Yes, No & Cancel and these have events linked to them. The color of each button can be customized and any button can be set visible, loading at runtime. For example:

Below are some variations of the output of this VFlexDialog based on the code below. Please note that due to it having to call .BindState internally, the VFields NEED to be defined on Class / Process Globals.

With Elements Filled, Outlined & Shaped

With Elements Outlined & Shaped

With Elements Outlined

Normal Elements

With Elements Outlined & Rounded

Reproduction:

1. Create a new page. Project > Add New Module > Class Modules > BVAD3 Page
2. Drop a VContainer on the page and resize it to fill the page
3. Drop a VFlexDialog inside the VContainer and set up some properties.
4. Generate members and update your source to LoadLayout to your layout name.
5. Create a sub that you will call after LoadLayout that will create your Form. VFlexDialog ONLY WORKS in design mode, thus the code needs to be in Initialize.

For example..

B4X:

Sub BuildPreferences VFlexDialog1.Clear 'create options Dim options As Map = CreateMap() options.Put("eng", "English") options.Put("afr", "Afrikaans") options.Put("xho", "Xhosa") options.Put("nde", "isiNdebele") options.Put("zul", "isiZulu") options.Put("sep", "Sepedi") options.Put("ses", "Sesotho") options.Put("tsw", "Setswana") options.Put("swa", "seSwati") options.Put("tsh", "Tshivenda") options.Put("xit", "Xitsonga") 'ROW 1 VFlexDialog1.AddTextField(1, 1, "firstname", "First Name","Anele") VFlexDialog1.AddTextField(1, 2, "lastname", "First Name","Mbanga") 'ROW 2 VFlexDialog1.AddTextArea(2, 1, "bio", "Biography","") 'ROW 3 VFlexDialog1.AddAutoComplete(3, 1, "lang", "Language", options, "eng", True) VFlexDialog1.AddColor(3, 2, "hair", "Enter hair color","black") 'ROW 4 VFlexDialog1.AddDate(4, 1, "dob", "Enter Date of Birth","1973-04-15") VFlexDialog1.AddDouble(4, 2, "height", "Enter your height","1.85") 'ROW 5 VFlexDialog1.AddFileInput(5, 1,"image", "Please upload your image") VFlexDialog1.AddImage(5, 2, "profile", "./assets/myself.jpg", "100", "100") ' Dim gender As Map = CreateMap() gender.Put("male", "Male") gender.Put("female", "Female") gender.Put("other", "Other") 'ROW 6 VFlexDialog1.AddRadioGroup(6, 1, "gender", "Gender", gender,"male", True) VFlexDialog1.AddRange(6, 2, "salary", "Salary Range", 5000, 10000, 100, 6000) 'ROW 7 VFlexDialog1.AddRating(7, 1, "service", 5, "How can you rate our service?", 2) VFlexDialog1.AddSlider(7, 2, "loan", "Loan amount", 1000, 5000, 50, 1500) 'ROW 8 VFlexDialog1.AddTelephone(8, 1, "tel", "Telephone", "") VFlexDialog1.AddTime(8, 2, "meet", "Time of Meeting","09:00") 'ROW 9 VFlexDialog1.AddPassword(9, 1, "pass", "Enter your password","") 'ROW 10 VFlexDialog1.AddSwitch(10, 1, "active","Active", True, True) VFlexDialog1.AddCheckBox(10, 2, "agree", "I agree with Terms & Conditions",True) ' VFlexDialog1.Refresh

From the above code, each VField is placed inside a RC (that is Row+Column) coordinate system. You can also set the default values for each element.

6. To get the VField definitions that you will copy in Class_Globals, after VFlexDialog1.Refresh, log..

B4X:

Log(VFlexDialog1.Declarations) Log(VFlexDialog1.Gets)

The Declarations will produce code that you will have to copy to class_globals. This code will be saved in the web console, after running the app, copy it. This will be like this..

B4X:

Private txtfirstname As VField 'ignore Private txtlastname As VField 'ignore Private txtbio As VField 'ignore Private cbolang As VField 'ignore Private colhair As VField 'ignore Private dpdob As VField 'ignore Private txtheight As VField 'ignore Private filimage As VField 'ignore Private imgprofile As VField 'ignore Private radgender As VField 'ignore Private rngsalary As VField 'ignore Private ratservice As VField 'ignore Private sldloan As VField 'ignore Private teltel As VField 'ignore Private timmeet As VField 'ignore Private pwdpass As VField 'ignore Private swtactive As VField 'ignore Private chkagree As VField 'ignore

The .Gets produces code that you need to copy to your Sub after the .Refresh call. This produces this code..

B4X:

txtfirstname = VFlexDialog1.Get("firstname") txtlastname = VFlexDialog1.Get("lastname") txtbio = VFlexDialog1.Get("bio") cbolang = VFlexDialog1.Get("lang") colhair = VFlexDialog1.Get("hair") dpdob = VFlexDialog1.Get("dob") txtheight = VFlexDialog1.Get("height") filimage = VFlexDialog1.Get("image") imgprofile = VFlexDialog1.Get("profile") radgender = VFlexDialog1.Get("gender") rngsalary = VFlexDialog1.Get("salary") ratservice = VFlexDialog1.Get("service") sldloan = VFlexDialog1.Get("loan") teltel = VFlexDialog1.Get("tel") timmeet = VFlexDialog1.Get("meet") pwdpass = VFlexDialog1.Get("pass") swtactive = VFlexDialog1.Get("active") chkagree = VFlexDialog1.Get("agree")

7. To show your dialog, which will be activated with the default specified values, you can call the .Show method.

B4X:

Private Sub btnShowDialog_Click (e As BANanoEvent) VFlexDialog1.Show End Sub

8. To get any entered form content, you can use..

B4X:

Private Sub VFlexDialog1_Yes_Click (e As BANanoEvent) Dim data As Map = VFlexDialog1.GetData Log(data) End Sub

And then process it.

9. Getting & Setting Data to the VFlexDialog.

The information is stored in a map. You can get / set it using .GetData & .SetData. The map keys are case SensiTive and should be smallercase.

For example, this is the result of the GetData call..

Source code coming soon:

Mashiane · Jul 14, 2022

[BANanoVuetifyAD3] : VFlexDialog inspired by the PreferenceDialog

Hi there The VFlexDialog is inspired by the ease of use in the PreferenceDialog. It exists to enable the ease of creating forms by developers. Its baseline are the VDialog, VForms and VFields. If you have used any of these including the VMsgBox, then you are right at home. The screen shots...

www.b4x.com

Mashiane · Jul 16, 2022

Using a Key Value Store

[BANanoKeyStore] A KeyValue Store for BANano on top of IndexedDB

Hi there The BANanoKeyStore is a Key Value store class that works like the b4j Key Value Store b4xlib. How to use...

www.b4x.com

Mashiane · Jul 21, 2022

[BANanoVuetifyAD3][Builder] How to Optimize your WebApp

Hi Download Please Note: You can run this process even before you develop your webapp so that it only uses the components you will use. In that case, just start on Step 3 below and then choose the components you will use beforehand. As we aware, the BVAD3 library is a large library, with 184...

www.b4x.com

B4J Tutorial [BANanoVuetifyAD3] Create Professional Looking Vuetify WebSites & WebApps with BANano

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads