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

Ola

NB: PLEASE DO NOT ASK QUESTIONS ON THIS THREAD

FOR A MORE DETAILED SETUP PROCESS, PLEASE SEE THE GITHUB REPO README.

Github

What's New

To use this free and open source B4J library, you need BANano.

IMPORTANT: BANano License

Join Us

Telegram: https://t.me/bananovuematerial
Twitter: https://twitter.com/mashymbanga
Discord: https://discord.gg/ys8stGgWCU
YouTube: Mashy Teaches Video Series
B4x Blog: Mashy Teaches BVAD3 - New Series
Full Demo: New Awesome Kitchen Sink

Notable Forum Members Contributions

@Erel : Obviously
@alwaysbusy : valuable advice etc, BANano (incl. adjustments that support BVAD3)
@LJG : BANanoServer jRDC2, best overall bug finder
@aeric: Recommendations & Enhancements etc
@Star-Dust : Small solutions to development hitches etc
More...


What's Next?

You will find the most up to date content from this post onwards

Testing DataBase Connectivity (PHP)

The kitchen sink now has connectity testing for the various backends. To ensure that your app will work, you can check if your back-end is accessible.

MySQL
SQLite
MSSQL

WebServers You Can Use

Laragon - publish to c:\laragon\www

USBWebServer
IIS - Publish to C:\inetpub\wwwroot
XAMPP - change your publish folder to use // instead of \

You can find more information here related to IDE Setup

Enjoy

PS: Log Warnings & Compilation Errors

1. Please check the pre-run logs. In most cases modules with warnings will have an underline. Warning, 9, 10, 11, 12 are normal, don't be scared.

1625825241311.png


2. manifext.txt file not found - Download the library source code and RUN to recompile on your PC. "Do not Compile to Library"
3. Do a HARD REFRESH of your browser.[/B]
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Tip: VField Handling Foreign Data

Step 1: In the field that will be the combo, specify these details.

1650002290625.png


"Item Value" should be the field name on "this" table. Also specify the details of the foreign table, foreign key etc so that "this vfield" will know where to lookup from.

This will need another data-source, after adding and and in it specifying the connection details, the tables to source content from, AFTER you have loaded the data-table with the source from your table, execute.

theotherDataSource.GetForeignData AFTER "this" data-table.Reload call.

Internally

B4X:
'uses the values specified for the foreign data of the dropdown
'NB: USE ANOTHER DATA_SOURCE FOR THIS OPERATION
'<code>
'Private Sub (DataSource)_get(fieldname) (Success As Boolean, Response As String, Error As String, affectedRows As Int, Result As List)
'If Success And Response = DataSource.RESULT_SUCCESS Then
'    'update the contents of the combo
'    (fieldname).SetItems(component, result)
'Else
'    vuetify.ShowSwalError("The operation could not be executed, please try again!")
'     Return
'End If
'End Sub
'</code>
Sub GetForeignData(ds As BananoDataSource)
    Dim qry As String = $"select ${sDataKey},${sDataValue} from ${sDataSource} order by ${sDataValue}"$
    ds.CLEAR_PARAMETERS
    ds.CUSTOM_QUERY($"get${sFieldName}"$, qry)
End Sub

This will expect a callback, being "get(fieldname)" where fieldname is the name of the field you used in your VField "fieldname" property. You can hover around its definition to get the code.

ta!

PS: Example source will be provided soon for more clarity.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
Hi. This callbacks are not triggered when the DataTable get datasource from one Form Component .

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

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

1651006075360.png


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

This is possible from the vtreeview abstract designer..

1651006137249.png


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

1651006212593.png


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
 
  • Like
Reactions: LJG

Mashiane

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

1651006662406.png


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

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
VueTable Enhancements

1. Totals Row has a larger font...

1651857975257.png



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.

1651858109027.png


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.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Manipulate any item in pgIndex from any other page in your app at runtime!

 

Mashiane

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

Expert
Licensed User
Longtime User
Adding a tour guide to your app using Enjoy Hint






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

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

 
Top