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

Ola

**************************************************
Feb 2024: BVAD3 RoadMap

[BANanoVuetifyAD3] 2024 RoadMap

Hi Fam BVAD3 is currently based on VueJS 2 and Vuetify 2. As you might be aware, VueJS 3 is now the standard and VueJS 2 has come to end of life when it comes to support. Vuetify 2 will also be coming to end of life when it comes to support. There has not been any upgrades to BVAD3 to work...
www.b4x.com www.b4x.com
*************************************************

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

[WebApps] Using Laragon as your development web server

Ola I just ran into this link, https://www.keycdn.com/blog/web-development-tools And besides XAMPP, which I have been using for my personal web development projects, there is Laragon. With XAMPP, I remember I had to manually edit my php.ini file to locate the extension for SQLite3 to be...
www.b4x.com www.b4x.com

[BANanoVuetifyAD3] Using a real device to debug your localhost running webapp

Hi there You are developing your app and want to see it running on your device instead of your machine from localhost. The easier method: 1. Enable hotspot on your phone. 2. Connect your PC to your phones hotspot. 3. Execute cmd > ipconfig > note the IP4 IP Address 4. Enter this IP address on...
www.b4x.com www.b4x.com


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:
Click to expand...
A

Anser

Well-Known Member
Licensed User
Longtime User
Hi,

I am trying to understand BVAD3 using the Sample BVAD3SignIn provided in the post https://www.b4x.com/android/forum/t...-with-bananovuetifyad3-the-new-series.132305/

The MySQL server on my PC is working fine. I am able to connect to it using HeidiSQL via localhost, 127.0.0.1 and also with my PC's LAN IP ie 192.168.0.xxx.
My MySQL server is accessible to my colleagues from the LAN ie they can connect to the MySQL server on my PC from their PC

I have made the necessary changes regarding the MySQL credentials, port, username password etc on the regsiterDS (BananoDataSource) in the Login Form as per the Sample so that the Webapp connects to the MySQL database on the same PC itself. By the way, I am ussing Laragon. I already had MySQL (running on a different port) installed on my PC even before installing Laragon. The Laragon comes with a MySQL 5.7 version which I am not using.

Unfortunately, I never get the value of the variable Success as True from the callback events Sub registerDS_SelectWhere and Sub registerDS_Exists. It is always says False. I understand that it is not getting connected to the database itself because both the events ie Sub registerDS_SelectWhere and Sub registerDS_Exists are not fired/executed

Here is the screen snapshot of the console
No database connectivity.png


Any hint ?

Regards

Anser
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Anser said:
Hi,

I am trying to understand BVAD3 using the Sample BVAD3SignIn provided in the post https://www.b4x.com/android/forum/t...-with-bananovuetifyad3-the-new-series.132305/

The MySQL server on my PC is working fine. I am able to connect to it using HeidiSQL via localhost, 127.0.0.1 and also with my PC's LAN IP ie 192.168.0.xxx.
My MySQL server is accessible to my colleagues from the LAN ie they can connect to the MySQL server on my PC from their PC

I have made the necessary changes regarding the MySQL credentials, port, username password etc on the regsiterDS (BananoDataSource) in the Login Form as per the Sample so that the Webapp connects to the MySQL database on the same PC itself. By the way, I am ussing Laragon. I already had MySQL (running on a different port) installed on my PC even before installing Laragon. The Laragon comes with a MySQL 5.7 version which I am not using.

Unfortunately, I never get the value of the variable Success as True from the callback events Sub registerDS_SelectWhere and Sub registerDS_Exists. It is always says False. I understand that it is not getting connected to the database itself because both the events ie Sub registerDS_SelectWhere and Sub registerDS_Exists are not fired/executed

Here is the screen snapshot of the console
View attachment 116991

Any hint ?

Regards

Anser
Click to expand...
Can you please log(Error), thats the second arguement I think that _SelectAll and _SelectWhere gives, perhaps that can give green lights in terms of whats not working well.
 
A

Anser

Well-Known Member
Licensed User
Longtime User
Mashiane said:
Can you please log(Error), thats the second arguement I think that _SelectAll and _SelectWhere gives, perhaps that can give green lights in terms of whats not working well.
Click to expand...
When I wrote my previous post, actually the code execution was not even entering the SelectWhere Sub because I had already put Log() inside this SelectWhere sub to find out whether somehow this sub is getting executed or not and as per my finings it was not getting executed and the Log() where not displayed and that's why I assumed that there was something wrong with the database connectivity. Then when you asked me to Log the value of the error, I added Log(Error) and then compiled the project, then suddenly it started working. I don't know what miracle is this. For the past 3 days I was trying to make the SignIn/Signup work :). Only when I was tired I wrote my previous post :)

Thank you for the SignIn tutorial with video, this is helping me to understand how things are working in BVAD3. Expecting more such videos for dummies like me.

Now I am exploring more with this specific sample project ie still trying to understand how to deal with database works like SQL queries, calling STORED Procedures etc. What if we need to deal with more than one table in a form, do we need to place BANanoDataSource for each and every table OR just one BANanoDataSource for all the database related activities in a form. I have not understood completely the concepts hence trying to learn.

By the way, is it a must to provide the DB Server, Username, password etc from the designer itself ? On a later date, if we ever need to change the DB server's domainName/IP or username, password etc it is going to be a tedious work to go to each and every BANanoDataSource and change these values manually. This is going to happen when we move the project from the development PC to production environment where the real Database may be on different server with a different username and password. In a small project with 5 or 10 tables or 5 to 10 pages it may not be a big problem but then in a real life project with 100's of tables and 100's of pages this may become a bottleneck. Its just my observation, ignorant as of now, I am learning. Can these values be read from MySQLConfig.php ? Any downside by doing so ?
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Anser said:
For the past 3 days I was trying to make the SignIn/Signup work
Click to expand...
My, sorry about that. Im happy that everything is working for you now. Usually its always better just to re-run the BVAD3 library source code to generate the b4x lib. We have noted that at times, getting the compiled version of the b4xlib that I generate, usually it does not work for other people.

Anser said:
What if we need to deal with more than one table in a form,
Click to expand...
My recommendation for this is to create individual DS controls for each table. It makes your code easier to maintain and cleaner. I did this with the ICT Asset Manager. A DS is just a class and nothing else as it never gets rendered to the UI, its the same as dim tblUsers as BANAnoDataSource, dim tblProducts as BANanoDataSource etc.

Anser said:
By the way, is it a must to provide the DB Server, Username, password etc from the designer itself ?
Click to expand...
Not at all. You can also set these via code or just once in the config file. If you follow the config approach, just uncheck "dynamic" in your DS and it will use the config file details.
 
Gabino A. de la Gala

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
I'm trying to use jsPDF page, but, when I press PREVIEW button, I get this error:
B4X: 
app.js:5431 TypeError: Cannot read property 'text' of null
    at banano_bananovuetifyad3_bananojspdf._B.settext2 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'setFont' of null
    at banano_bananovuetifyad3_bananojspdf._B.setfontstyleweight (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'setFontSize' of null
    at banano_bananovuetifyad3_bananojspdf._B.setfontsize (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'text' of null
    at banano_bananovuetifyad3_bananojspdf._B.settext2 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:14 TypeError: Cannot read property 'addPage' of null
    at banano_bananovuetifyad3_bananojspdf._B.addpage1 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopage (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)

What can I be doing wrong or missing to install?

Thanks.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Gabino A. de la Gala said:
I'm trying to use jsPDF page, but, when I press PREVIEW button, I get this error:
B4X: 
app.js:5431 TypeError: Cannot read property 'text' of null
    at banano_bananovuetifyad3_bananojspdf._B.settext2 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'setFont' of null
    at banano_bananovuetifyad3_bananojspdf._B.setfontstyleweight (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'setFontSize' of null
    at banano_bananovuetifyad3_bananojspdf._B.setfontsize (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:5431 TypeError: Cannot read property 'text' of null
    at banano_bananovuetifyad3_bananojspdf._B.settext2 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betotext (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)
app.js:14 TypeError: Cannot read property 'addPage' of null
    at banano_bananovuetifyad3_bananojspdf._B.addpage1 (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopage (app.js:5431)
    at banano_bananovuetifyad3_bananojspdf._B.betopagechildren (app.js:5431)
    at banano_bananovuetifyad3_jspdfdoc._B.go (app.js:5446)
    at banano_bvad3kitchensink_viewjspdf.btnprint_click (app.js:5545)
    at a._cb (app.js:5527)
    at He (app.js:14)
    at a.n (app.js:14)
    at He (app.js:14)
    at a.e.$emit (app.js:14)

What can I be doing wrong or missing to install?

Thanks.
Click to expand...
Thanks for the heads up, will be fixed in the next release.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
cklester said:
Is that just for prototyping the UI, or can we somehow import what we design there into our BANanoVuetifyAD3 app?
Click to expand...

Found it today and still exploring it. It should be easy to import to BVAD3 without hustles and a few HTML mods. I guess I can only do that when i've done all the tests. For now the creator does not have all elements there so thats another issue.
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Tip: Updating VTab Badge Color and Counter

In our previous example, our badge counter started at 12, with a blue color. We now update it to:

1627413284203.png


Because we want to do this when the page is fully loaded, we will do it on Mounted. You can also do this on a button click etc.

We define the callback to call when the page is fully loaded/mounted

B4X: 
about.SetMounted(Me, "updatebadges", Null)

On that callback, we want to change the badge color and also update the counter:

B4X: 
Sub updatebadges            'ignoreDeadCode
    VTabs1.UpdateBadge(about, "olo", 3)
    VTabs1.UpdateBadgeColor(about, "olo", "red")
End Sub

Ta!
 
  • Like
Reactions: LJG
Mashiane

Mashiane

Expert
Licensed User
Longtime User
UPDATE: VUE-TABLE BREAKING CHANGES

This deals with 2 properties, sortable and filterable of the vuetable columns. These were set to true. This means that all your data-table columns will be sortable and filterable (i.e when you type of search, all rows and columns will be searched for your search string). However, this should be developer specific.

This was also creating a conflict with the VueTable abstract designer as it has props to specify which columns should be sortable & filterable, these were applied when specified, but still all columns would be either way. We have changed this. All columns are not sortable and not filterable, up until you specify that they are.

1627413780704.png


What is the consequence?

For all apps that are running, and the vuetable search was working, it wont work anymore unless column filterable (;)is specified and or column sortable (;) is specified to the relevant columns.

We are also fixing some booleans related bugs that have creeped up, this happens between the abstract designer & generated code.
 
  • Like
Reactions: LJG
Mashiane

Mashiane

Expert
Licensed User
Longtime User

BANanoVuetifyAD3 - New Form Builder Concept

Ola Update on 14 July 2022: You might want to check the VFlexDialog Download the BVAD3 Library Source & Run Concept Form Builder Project This new form builder concept has been born due to the intensity of work that is necessary at times to create forms. You have containers, form, rows...
www.b4x.com www.b4x.com

Source code of the project in the video attached to play with.

Later then, until we finish the form builder.

Ta!
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
TIP: Using your own buttons with the VMsgBox

The VMsgBox (Dialog) comes with prebuilt buttons for OK and Cancel on the VCardActions section (buttom part).

If you rather want to use your own buttons. You will have to add a VRow > VCols > VBtn to do that, you can check the CustomActions property on the VMsgBox.

1627571879822.png


Checking this options will "remove" the bottom buttons.

Ta!
 
Last edited:
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] WhatsApp CRM
Replies
2
Views
2K
Dave G
D
Mashiane
  • Article
Share My Creation BANanoVuetifyAD3 - New Form Builder Concept
Replies
18
Views
4K
joulongleu
J
Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
42K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANAnoVuetifyAD3] Creating CRUD based WebApps free eBook (for those in a hurry)
2
Replies
25
Views
6K
Mashiane
Mashiane
Mashiane
  • Article
Share My Creation [BANanoVuetifyAD3] Organogram Lite FireBase WebApp Source Code @ $11
Replies
11
Views
2K
Mashiane
Mashiane
Top