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

This has been exciting to do:

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


Any hint ?

Regards

Anser

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.

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 ?

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.

I'm trying to use jsPDF page, but, when I press PREVIEW button, I get this error:

What can I be doing wrong or missing to install?

Thanks.

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.

You can prototype your apps here: https://vueground.thomasjacob.de/

Mashiane said:

You can prototype your apps here: https://vueground.thomasjacob.de/

Click to expand...

Great!

Mashiane said:

You can prototype your apps here: https://vueground.thomasjacob.de/

Click to expand...

Is that just for prototyping the UI, or can we somehow import what we design there into our BANanoVuetifyAD3 app?

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.

TIP: VTab Badges




In this case, we just want the 3rd tab to have a badge, we have removed the title of the 3rd element also.

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:



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


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


Ta!

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.



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.

Tip: This GIF shows how tabs automatically provide arrows when the container area is small. This is useful for small devices.

TIP: VCalendar

The calendar is set into month mode by default, however it has 3 modes, 1. Day, 2. Week and 3. Month. You activate these by selecting the mode on the dropdown (top right)

The calendar in DAY mode.



The calendar in WEEK Mode..



Ta!

Version 5.78 is out.

Get your copy of the source code here: https://github.com/Mashiane/BANanoVuetifyAD3/tree/main/Library

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

Later then, until we finish the form builder.

Ta!

An interesting read about making apps work offline:

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.



Checking this options will "remove" the bottom buttons.

Ta!