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

Mashiane · Apr 18, 2022

So, Im testing a theory, so I took the designer scripts from the VForm abstract designer and made into an online property bag.

Check this GIF, out..

BANanoVuetifyAD3/CustomView2PropertyBaf.gif at main · Mashiane/BANanoVuetifyAD3

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

github.com

Mashiane · Apr 18, 2022

magdoz said:
Hi. This callbacks are not triggered when the DataTable get datasource from one Form Component .

magdoz said:
Possibly you have not generated the events, I kindly request that next time you have an issue, please start a new thread as this thread is for posting content about the library and its use. I thank you.

Mashiane · Apr 18, 2022

With a small adaptation to read the CustomView designer scripts, we have used the BVAD3Form, which enables creation of Forms at runtime.

The demo of the Dynamic Form is in the kitchen sink page, https://mashiane.github.io/BANanoVuetifyAD3/#/addynaform

Mashiane · Apr 22, 2022

VueTable Updates on latest Version 7.31

One can now change the language of the VueTable bottom navigator...

Get the latest BVAD3 version from Github...

Mashiane · Apr 26, 2022

VTreeView Append Slot

Each item in the treeview can now receive buttons. This is possible due to the "append slot" - which helps append content after each item.

For example here, we have added 4 buttons, these being, add, edit, delete and refresh.

This is possible from the vtreeview abstract designer..

The Generate Members functionality only has 3 events that you can generate for the VTreeView.

Each receiving the item being processed.

As refresh is our own defined menu key, to provide it an event, we just add this code

B4X:

Private Sub treeName_Refresh (item As Map) End Sub

Mashiane · Apr 26, 2022

VTreeView Append Slot: Hiding Node Buttons.

By default, all the items specified on the Menu Keys will be available for all the items added to the tree. However, one is able to hide/show the buttons per item as per need, as depicted below in the Apps node.

As an example, our menu items are: add; edit; delete; refresh

However we want to hide the edit and delete buttons for the Apps node. We would...

B4X:

'clear the tree
    trProjects.Clear(page)
    'add a parent node to tree
    trProjects.AddItem("", "apps", "Apps", "", "mdi-semantic-web", False)
    'hide edit/delete for node
    trProjects.SetItemMenuVisible("apps", False, Array("edit", "delete"))
....
....
....
banano.await(trProjects.RefreshWait(page))

Mashiane · May 2, 2022

Isiketshi (Sketch) is avaialable for download

BANanoVuetifyAD3/Mashy Teaches BANanoVuetifyAD3/BVAD3Isiketshi.zip at main · Mashiane/BANanoVuetifyAD3

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

github.com

Mashiane · May 2, 2022

Deploying static websites to Netlify - A BVAD3 Kitchen Sink Experience.

Hi there So I decided to check deploying the latest version of BANanoVuetifyAD3 Kitchen Sink on netlify. Easy peasy. 1. I run my BVAD3 webapp, it publishes content to a laragon folder. 2. I use Github Desktop and create a new repo and then copy and paste all the generated BANano content into...

www.b4x.com

Mashiane · May 2, 2022

Mashiane · May 6, 2022

VueTable Enhancements

1. Totals Row has a larger font...

2. Compute Totals Can Now also receive field names you want to total without the callback specified. Both methods still work, one with a callback and one without. This is useful when you want to sum a lot of columns.

If a callback is not specified, there is no need for it to be added via code. The formatting applied to this option will be what you specify in "Money" / "Thousands" / "File Size" properties for those fields.

3. To HideColumns at run-time, call

B4X:

dtQA.HideColumns(Array("col1", "col2", "col3"))

This should also apply to the columns set to be visible in your filter chips

4. To ShowColumns at run-time, call

B4X:

dtQA.ShowColumns(Array("col1", "col2", "col3"))

This should also apply to the columns set to be visible in your filter chips

5. To change which chips should be "groupable" at runtime, you can call

B4X:

dtQA.SetGroupAble(Array("col1", "col2", "col3"))

6. To clear the column grouping, call

B4X:

dtQA.SetGroupBy("")

7. To group by a particular column, call. NB. Only 1 column can be grouped at a time

B4X:

dtQA.SetGroupBy("col1")

Happy BVAD3 Coding.

Mashiane · May 11, 2022

Using the VIframe to embed a website on our WebApp.

See the starting page of the kitchen sink.

Mashiane · May 12, 2022

Manipulate any item in pgIndex from any other page in your app at runtime!

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

BANanoVuetifyAD3 - Fullstack WebApp using Vuetify, MSSQL, Java Jetty & Hikari Pooling (No PHP) 1. You will need MSSQL connection drivers applicable to the Java JDK you are using. Related Content https://www.b4x.com/android/forum/threads/bananovuetifyad3-bananoserver-directmssql-crud.135834/

www.b4x.com

Mashiane · May 12, 2022

BANanoVuetifyAD3 Uses Directives

The BVAD3 library has been updated to include "Uses" directives. These directives tell the library which js and css resources to use.

For example, if you want to use CDN version of vuetify & vue, online fonts etc, you would turn the "Online" directive. When BANano is compiling the library, it will use these directives in AppStart to determine what to add locally or not and BANano.Header.AddJavaScriptFile/BANano.Header.AddCssFile will act accordingly.

Turning Online = True has an effect of you using the online CDN versions of the major css and js files. This is greatly recommended as it affects the speed of your app and the use of caches available on CDN. If however you suspects that your app may be used in areas where internet connectivity is a challenge, make your app a PWA to cache all resources on first run (in an internet available area) or set Online = False.

I have included URLs here as a guide as to what each setting does. Please note that whilst the resources will be included even if set Online is used, they will not be loaded. To avoid this, use the package manager to both "remove" unused js and css file and even source code from the lib.

You can click the links to take you to what that uses directive is about. If you are not using that component, set the directive to False, compile the library and then reference it in your project, rerun it to check if all goes well.

B4X:

Sub Process_Globals
    Private BANano As BANano 'ignore
    Public Version As String = "7.32"
    Public AppName As String = "BANAnoVuetifyAD3"
    'Use online version of vue/vuetify & others
    Public Online As Boolean = True
    'Use FontAwesome Fonts
    Public UseFontAwesome As Boolean = False
    'Use MaterialDesignFonts - default
    Public UseMaterialDesignIcons As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adprism
    Public UsePrism As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/adgmap
    Public UseGMap 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://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 UseLeafLet As Boolean = True
    Public UseBlur As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/quillx
    Public UseEditor 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 UsePropertyBag As Boolean = True
    'https://mashiane.github.io/BANanoVuetifyAD3/#/translate
    Public UseTranslate As Boolean = True
    '
    '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
End Sub

Why you need RemoveDeadCode?

To thin & tree-shake your app, its important that all dead code is removed. Dead code is code that is not used in your app.

Step 1

Comment all subroutine signatures with 'ignoreDeadCode. This is important so that the BANano.Transpiler does not remove used subs. Here is an example

B4X:

Sub beforeEnter(boTo As Map, boFrom As Map, boNext As BANanoObject)   'ignoreDeadCode

Step 2

in Main > AppStart of your App, this line should exists & uncommented

B4X:

BANano.TranspilerOptions.RemoveDeadCode = True

Run your app and test of everything is working as expected and if not check the web console log for errors and fix those.

You can also redirect all the B4J logs to an external file and if you want to see which code is marked / will be marked as dead by the BANano Transpiler, also add this line.

B4X:

BANano.TranspilerOptions.ShowWarningDeadCode =True

To direct the b4j log to an external file, you can use

B4X:

BANano.TranspilerOptions.RedirectOutput(File.DirApp, "bvadks.log")

Happy BVAD3 coding!

Mashiane · May 12, 2022

Coming Soon...

VAutoComplete Color Chips

Mashiane · May 14, 2022

The Date by default is English. One can add date transactions in pgIndex.Init before the AddPages call. This will apply formatting to all pages added to the app

You need to change the Date and Month to have the date-picker show a date specific to your language. Please note this is case SensiTive.

Mashiane · May 14, 2022

Changing App Locales

Add this before the end of pgIndex.Init subroutine.

B4X:

'chang the locale vuetify.SetLocale(vuetify.LOCALE_Spanish) End Sub

Mashiane · May 15, 2022

What has been happening with BANanoVuetifyAD3? Lets check this reel of the demo to see the b4xlib in action.

Mashiane · May 18, 2022

Adding a tour guide to your app using Enjoy Hint

SithasoEnjoyHint/SithasoEnjoyHint.zip at main · Mashiane/SithasoEnjoyHint

Tour Guide Using Enjoy Hint. Contribute to Mashiane/SithasoEnjoyHint development by creating an account on GitHub.

github.com

Example Source

B4X:

hints.Initialize
    hints.AddStep("trProjects", "The treeview will have your models, views and components you have defined. You are able to add, update and delete anything you create by clicking the corresponding buttons.")
    hints.AddStep("tabPreview", "Here you can get a preview of your elements, HTML and B4X generated code.")
    hints.AddStep("propdrawer", "This will hosts the property bag to change any element in your project. Enter the details necessary.")
    hints.AddClick("trprojectsadd", "Click here to add a new project.")  
    hints.AddStep("propCol", "Then update the details of the property bag according to your needs.")
    hints.AddStep("propBar", "This toolbar has buttons, each with a tooltip to guide you of their functionality. You can click Save.")
    hints.AddStep("tabpreviewtab1", "Here you are able to get a sneek preview of how your form / element will look like.")
    hints.AddStep("tabpreviewtab2", "Here you get the HTML code of the elements showing in your preview or being edited.")
    hints.AddStep("tabpreviewtab3", "Here you get generated B4x code for the element you are working on.")
    hints.AddStep("tabpreviewtab4", "Here you get PHP REST API source code generated from your data models.")
    hints.EndsOn("tabpreviewtab4", "Got It!")
hints.Run

Mashiane · May 21, 2022

BVAD3 has been updated to fix a few bugs and use the latest version of Vuetify, i.e. 2.6.6. Get your free copy from Github. You will find how to use the FluidMeters as requested by SD from the updated New Awesome Kitchen Sink. Happy BVAD3 coding. PS: There is also one other user request on LeafLet that I hope to sort out soon.

These are featured here:

Liquid Progress Indicator With JavaScript And Canvas - fluid-meter.js | CSS Script

fluid-meter.js is a JavaScript library to create a circular progress indicator with a fluid/water-like effect using Canvas API.

www.cssscript.com

Mashiane · May 22, 2022

Hi there gang, it is with pleasure to release the first version of the BVAD3 API Documentation. Please check it out, send us your thoughts and feelings. Have fun,

NB: The API depends on a PHP Web Server running, you can get the latest BVAD3 version + Kitchen sink and run a local copy. GitHub + Netlify are for "static" websites, so you might not see the documentation there.

Access it here: https://magenta-vacherin-2f7e6b.netlify.app/#/

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads