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

Ola

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)

Full Install Instructions on 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: Detecting changes made on edit dialog TextBox for a data-table column

We have a column named "itemkeys" can can be edited via textarea. This is defined as:

B4X:
tablecrud.AddColumn("itemkeys", "Item Keys")
    tablecrud.SetTextArea("itemkeys", True)

To detect changes made to that column

B4X:
private Sub tablecrud_itemkeys_change(item As Map)
    Log("item keys changed...")
    log(item)
End Sub

The item returned is the row being changed.

TA!
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
A tutorial to create PDF documents using jsPDF via the Abstract Designer is out.



This was featured here,



Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User

Mashiane

Expert
Licensed User
Longtime User
TIP: Removing the space between elements.

1624384917626.png


As you notice in the above form. We have added 6 rows, each row has a column and components.

What causes this "un-needed space"? Well, if you remember in the categories example, This space is reserved for "hints" and "errors". See below.

1624383570751.png


You can however hide-details to ensure that this space is removed. This means that your hints / errors will not show though. This is what happens after you Hide-Details for all the input elements.

1624385890406.png


Also instead of creating multiple rows and columns, you can create one and then size your elements with margins and padding to show property.

Now for the space for the checkboxes and switches. What we need is to set the top margin to 0, we do via the helper classes.

1. Find the MT property in the property bag and type 0 (zero) or on the classes property type mt-0. The end result is.

1624386587344.png


You can further decrease the size by checking the dense property of the input elements (not the checks/switches). This results in


1624386980798.png


All the best!
 
Last edited:

magdoz

Member
Licensed User
Part 5

We continue from part 4 and now add a menu to our v-app-bar with transitions. We add an active class to the menu and a background image to the v-app-bar


Enjoy!


Hi

Try to run the Part05 example. I got the following error message:
ReferenceError: menulistopen is not defined
at wn.eval (eval at Ya (app.js:14), <anonymous>:3:1118)
at wn.e._render (app.js:14)
at wn.r (app.js:14)
at fn.get (app.js:14)
at new fn (app.js:14)
at app.js:14
at wn.$mount (app.js:14)
at wn.$mount (app.js:14)
at wn.t._init (app.js:14)
at new wn (app.js:14)

It's something with the drop down menu implementation...

I miss something to set ? Thanks if you can help me with some suggestion.

"The latest working source code will always be on the latest tutorial."
... it's too complicated for one beginner!
Trying to learn step by step, following the Tutorials...

Zoltan
 
Last edited:

magdoz

Member
Licensed User
Hi

Try to run the Part05 example. I got the following error message:
ReferenceError: menulistopen is not defined
at wn.eval (eval at Ya (app.js:14), <anonymous>:3:1118)
at wn.e._render (app.js:14)
at wn.r (app.js:14)
at fn.get (app.js:14)
at new fn (app.js:14)
at app.js:14
at wn.$mount (app.js:14)
at wn.$mount (app.js:14)
at wn.t._init (app.js:14)
at new wn (app.js:14)

It's something with the drop down menu implementation...

I miss something to set ? Thanks if you can help me with some suggestion.

"The latest working source code will always be on the latest tutorial."
... it's too complicated for one beginner!
Trying to learn step by step, following the Tutorials...

Zoltan

I have one week to learn your solution Dear ! Are you kind to help me ?
(Contribute to you with much money support, If You like !)
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Update: Please note that Tutorial 47 is the most advanced tutorial that has all the basic components for BVAD3. If you are new to BVAD3, please use that working version. Please note that old source code is no longer being maintained due to time constraints.
Hi @magdoz , with due respect, please note that in terms of the first post, the above quote was indicated. So in all fairness, I am really not expecting anyone to use any of the tutorials before tutorial 47.

The library has evolved a great deal. And with that said, Im sorry for this but the only best alternative for you to use as a new person to BVAD3, is directly the New Awesome Kitchen Sink which features the New Enhanced Design System.

On May 21, an Enhanced Design System was introduced, https://www.b4x.com/android/forum/threads/bananovuetifyad3-enhanced-design-system-101.130966/

This was followed by the Kitchen Sink WebApp, which features all the elements using the Enhanced Design System.


Kindly use the Enhanced Design System featured in the Kitchen Sink. These are the final LTS version of BVAD3. Please. If there is something not working there, please.

Also kindly join the Telegram group, it helps a lot with updates.

All the best!
 

Mashiane

Expert
Licensed User
Longtime User
"The latest working source code will always be on the latest tutorial."
The latest tutorial is Part 72 and not Part 5.

... it's too complicated for one beginner!
Trying to learn step by step, following the Tutorials...
Please directly go to the New Awesome Kitchen Sink published beginning of June 2021. Find links on the previous post.
 

magdoz

Member
Licensed User
Thanks for your fast and kind feedback ! I'll go to study the " New Awesome Kitchen Sink "
...
Great RAD ... I will donate soon !

... Sometimes the q. is if worth to spend time to learn something...

Zoltan

... never used Telegram before ...
 
Last edited:

LJG

Member
Thanks for your fast and kind feedback ! I'll go to study the " New Awesome Kitchen Sink "
...
Great RAD ... I will donate soon !

... Sometimes the q. is if worth to spend time to learn something...

Zoltan

... never used Telegram before ...
Hi Magdoz, I just want to encourage you to continue learning BVAD3. Of course, before learning BVAD3, make sure that you first have a foundational understanding of B4J and BANano. Secondly, I would recommend that you start with the most recent BVAD3 template. The BVAD3 template is a clean and simple starting point where you can learn the basics without being too overwhelmed. After you are comfortable and understand a simple BVAD3 template, then move on to adding things to the template from the New Awesome Kitchen Sink.

Learning B4J/BANano/BVAD3 is a great investment if you want a powerful and fun way to create fully functional web apps that actually look good and actually do something in the real world. I encourage you again to start with the simple and clean BVAD3 template and start building from there. Wishing you the best!
 

Mashiane

Expert
Licensed User
Longtime User
We have created a single thread where you can always find the latest BVAD3 tools and projects for those offered for free.

 

Mashiane

Expert
Licensed User
Longtime User
Version 5.42 is out with the New Awesome BANanoDataSourceFireStore abstract layer so that you can use the google firestore as your back end.

Download to External Libraries here

Also the ChartKick charts have been replaced with a new version based on UOECharts, the one that was built specifically for VueJS has a few needed things left out.

ChartKick.jpg


It would be nice to have data labels on the points though. Still hard to beat!

Enjoy.

PS: I'm off for a couple of days, if there is anything urgent, hit me up on whatsapp, +27 81 736 6739.
 

Mashiane

Expert
Licensed User
Longtime User
TIP: PrependIcon, PrependInner, AppendIcon, AppendOuterIcons

You can place up to 4 icons on input controls, these are named as above and all of them are clickable. For example I have 2 here for both text areas and when clicked they perform different actions.

1624737207604.png


This is the complete source code for the page. Its intension is to detect booleans both in globals and design view code and generate the needed source code that I add back to the BVAD3 library.

B4X:
'Static code module
Sub Process_Globals   
    Public vuetify As VuetifyApp
    Public about As VueComponent
    Public path As String
    Public name As String = "boolfixer"
    Private banano As BANano
    
    Private txtdeclarations As VTextField
    Private txtdesigner As VTextField
    Private booleans As List
    Private booleans1 As List
    Private bFound As List
    Private bFound1 As List
    Private txtresult As VTextField
End Sub

Sub Initialize
    'establish a reference to the app
    vuetify = pgIndex.vuetify
    'initialize the component
    about.Initialize(Me, name)
    path = about.path
    
    banano.LoadLayout(about.Here, "booleanfixer")
    txtdeclarations.BindState(about)
    txtdesigner.BindState(about)
    txtresult.BindState(about)
    
    'add the component as a router
    vuetify.AddRoute(about)
End Sub


Private Sub txtdesigner_ClickAppendOuter (e As BANanoEvent)
    txtresult.SetValue(about, "")
    'get the code and try and find all booleans
    booleans.Initialize
    Dim scontent As String = txtdeclarations.GetValue(about)
    booleans = banano.split(CRLF, scontent)
    bFound.Initialize
    For Each strLine As String In booleans
        strLine = strLine.Trim
        'ends with boolean or true or false
        Dim bOk As Int = 0
        If strLine.ToLowerCase.EndsWith(" boolean") Then bOk = bOk + 1
        If strLine.ToLowerCase.EndsWith(" true") Then bOk = bOk + 1
        If strLine.ToLowerCase.EndsWith(" false") Then bOk = bOk + 1
        '
        If bOk > 0 Then
            strLine = BANanoShared.MvField(strLine, 2, " ")
            strLine = strLine.trim
            bFound.Add(strLine)
        End If
    Next
    
    
    Dim sb As StringBuilder
    sb.Initialize
    booleans1.Initialize
    Dim scontent As String = txtdesigner.GetValue(about)
    Dim xcontent As String = scontent.tolowercase
    booleans1 = banano.Split(CRLF, scontent)
    For Each strLine As String In booleans1
        strLine = strLine.Trim
        strLine = BANanoShared.MvField(strLine, 1, "=")
        strLine = strLine.Trim
        'if this line found on indexes
        Dim bSearch As Boolean = BANanoShared.ListSearch(bFound, strLine)
        If bSearch Then
            'a match is found
            Dim nLine As String = $"${strLine} = BANanoShared.parseBool(${strLine})"$
            Dim xLine As String = nLine.ToLowerCase
            Dim xfound As Boolean = xcontent.Contains(xLine)
            If xfound = False Then
                sb.Append(nLine).Append(CRLF)
            End If
        End If
    Next
    Dim sout As String = sb.ToString
    txtresult.SetValue(about, sout)
End Sub

Private Sub txtdeclarations_ClickAppendOuter (e As BANanoEvent)
    txtdeclarations.SetValue(about, "")
    txtdesigner.SetValue(about, "")
    txtresult.SetValue(about, "")
End Sub

Enjoy!
 
Top