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

Mashiane · Jun 14, 2021

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 · Jun 15, 2021

Version 5.30 is now available, get it here, https://github.com/Mashiane/BANanoVuetifyAD3

We explore real-time CRUD of the data-table. i.e. data-table updates without refresh.

Demo source code attached on this post: https://www.b4x.com/android/forum/threads/bananovuetifyad3-vuetable.131596/#post-829892

Mashiane · Jun 15, 2021

BindVueElement Builder in the Kitchen Sink

Open it here: https://mashiane.github.io/BANanoVuetifyAD3-Enhanced-Design-System/#/adbindbuilder

The kitchen sink has a BindVueElement Builder

Copy and paste your code definition from the process globals, only copy the Vuetify Elements.
Click the {} button
Click the copy button on the prism generated code.
Paste the code after the banano loadlayout all.

Ta!

Mashiane · Jun 17, 2021

Version 5.33 is now available.

Also the New Awesome BVAD3 Kitchen Sink has been updated with jsPDF, if you missed it the ChartKick charting framework.

Enjoy!

PS: jsPDF Documentation

BTW, we are still finalizing the jsPDF project, still to figure out images via this new methodology.

Thanks for your support and awesomeness during the creation of these awesome tools, ?

Mashiane · Jun 17, 2021

A tutorial to create PDF documents using jsPDF via the Abstract Designer is out.

[BANano] Creating PDF Documents with jsPDF using BANanoJsPDFAD

Ola As you are aware, the BANanoJsPDFAD tool is out. Its developed using jsPDF and it uses the abstract designer for you to create pdf Documents. You can insert text, triangles, images, ellipses, circles, annotations, links, lines, rectangles, rounded rectangles and more. Step 1 Drop and...

www.b4x.com

This was featured here,

[BANanoJsPDFAD] The Ultimate Drag n Drop jsPDF Document Creation Engine

Ola First of all, a great thanks to Alain for his brilliant BANano project, otherwise this feat would not even be close to possible. Above all else, Viva to Erel & B4X! A great thanks!! ? Anyway, You’re not obligated to win. You’re obligated to keep trying to do the best you can every day...

www.b4x.com

Enjoy!

Mashiane · Jun 22, 2021

[BANanoVuetifyAD] Server Maintenance Categories MySQL CRUD WebApp featuring the BANanoDataSource (PHP)

Ola NB: Please run the MySQL Connection Test first Attached is a fully working project developed with BVAD3 that showcases the new BANanoDataSource. Download Source Youw ill need the BVAD3 b4xlib, copy these to your external libraries folder These are the components we have used...

www.b4x.com

Mashiane · Jun 22, 2021

TIP: Removing the space between elements.

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.

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.

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.

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

All the best!

magdoz · Jun 23, 2021

Mashiane said:
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

magdoz · Jun 23, 2021

magdoz said:
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 !)

Mashiane · Jun 23, 2021

Mashiane said:
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.

[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. All the components are custom view based and...

www.b4x.com

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 · Jun 23, 2021

magdoz said:
"The latest working source code will always be on the latest tutorial."

The latest tutorial is Part 72 and not Part 5.

magdoz said:
... 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 · Jun 23, 2021

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 ...

LJG · Jun 23, 2021

magdoz said:
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 · Jun 24, 2021

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

[BANanoVuetifyAD3] WebApps / Websites Free Source Code GiveAway

Ola Download This will the host for all BANanoVuetify Free Source Code Giveaways. BVAD3 was birthed many moons ago here. For now this entails everything we have done and published here in the forum. More is coming.. Anyone who wants to, can create VueJS based WebApps/Websites using the B4X...

www.b4x.com

Mashiane · Jun 24, 2021

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.

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 · Jun 26, 2021

The dreaded process of fixing bugs. There is an issue with the booleans on layouts being translated to strings, busy updating all the layouts.

We will be updating the library soon.

Mashiane · Jun 26, 2021

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.

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!

Mashiane · Jun 26, 2021

The Kitchen Sink has been updated.

Calendar

Mashiane · Jun 26, 2021

Real-Time Updates to the data-table..

Mashiane · Jun 26, 2021

Dialogs and Message Boxes with VMsgBox

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Member

Member

Expert

Expert

Member

Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Similar Threads