Share My Creation [BANanoVuetifyAD3] New Awesome Kitchen Sink WebApp

Ola

Welcome to the New Awesome Kitchen Sink for BVAD3. BVAD3 helps one to create WebApps/Webistes using Material Design based on BANano+Vuetify+B4X.

Anyone who wants to, can now create WebApps/Websites with the full power of the Abstract Designer.
Click to expand...
​

All the components are custom view based and have events just like normal B4x programming. We have broken down each component to have its own individuality so that its easy for you to code websites/websites, with the existing knowledge and skillset you have in create B4X apps.

Drag and Drop a custom view to your abstract designer, generate members, load the layout, bind the components to the page, run your app and you are good to go.



Please note the following:

1. You need a webserver to create BANano Apps, I am using laragon for development (very easy to setup)
2. At the moment, this has not been tested with jetty i.e. BANanoServer (watch this space)

Running the Awesome Kitchen Sink

You can download an already running version here, copy and open the files from your web-server.

Compiling the Kitchen Sink WebApp yourself.

1. You will need these external libraries. Download and copy them to your External B4J Libraries folder.
2. Download the Awesome Kitchen Sink Source code and compile and run yourself. Remember to update the config.properties file to point to your ServerIP

There are a few components to finalize. In the mean time would appreciate your comments from your test-drive. Join us here, https://t.me/bananovuematerial to send your feedback.

Thanks
 
Last edited:
Click to expand...

Mashiane

Expert
Licensed User
Longtime User
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:

  1. Setting the plugins = False, does not remove the related component code from the library & thus the compiled BANanoVuetifyAD3.b4xlib.
  2. Also, this does not remove the JS / CSS from the b4xlib, but will surely remove the unused CSS/JS content from your final app.
  3. Also use the package manager as it removes unused component code as an added functionality.
  4. Comment your code with 'IgnoreDeadCode and run the RemoveDeadCode functionality with the transpiler.
  5. 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.
 
You must log in or register to reply here.

Similar Threads

  • Article
B4J Tutorial [BANanoVuetifyAD3] How to learn from the New Awesome Kitchen Sink to create your next powerful WebApp/Website
Replies
10
Views
3K
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] Version 6.05 - What's New?
Replies
0
Views
842
Mashiane
  • Article
Share My Creation BANanoVuetifyAD3 BANanoServer New Awesome Kitchen Sink - UI Phase
Replies
3
Views
2K
Mashiane
  • Article
Share My Creation Cuppy Framework - Redesign of a Food Widget App
Replies
0
Views
2K
FrostCodes
  • Article
Share My Creation MashOverviewCreator
Replies
8
Views
4K
Mashiane
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…