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:

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
@Johan Hormaza

I forgot to highlight that. Please correct the config.properties to point to the test.db on your exact path in your Objects folder. The path should match exactly, mine is rather long.

View attachment 116263

SQLite jRDC is active because I was running tests.

Thanks for the heads up!

Hello. I have changed the path to the location of the database, but I am still unable to add records, or obtain any that may already exist in the database itself.
The log I get is the following.

Scavenger running... (1 page(s) cached)
Scavenger running... (1 page(s) cached)
SERVERIndex.JRDCOnServer...
{"command":"select","query":"SELECT * FROM `animals` ORDER BY `name`","args":null,"types":null,"jrdccommand":"select_animals"}
jul 13, 2021 9:31:38 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@55cc87fd -- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed more than the maximum number of allowed acquisition attempts (30). Last acquisition attempt exception:
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at com.mysql.cj.jdbc.exceptions.SQLError.createCommunicationsException(SQLError.java:174)
at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:64)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:832)
at com.mysql.cj.jdbc.ConnectionImpl.<init>(ConnectionImpl.java:456)
at com.mysql.cj.jdbc.ConnectionImpl.getInstance(ConnectionImpl.java:240)
at com.mysql.cj.jdbc.NonRegisteringDriver.connect(NonRegisteringDriver.java:207)
at com.mchange.v2.c3p0.DriverManagerDataSource.getConnection(DriverManagerDataSource.java:175)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:220)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:206)
at com.mchange.v2.c3p0.impl.C3P0PooledConnectionPool$1PooledConnectionResourcePoolManager.acquireResource(C3P0PooledConnectionPool.java:203)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquire(BasicResourcePool.java:1138)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquireAndDecrementPendingAcquiresWithinLockOnSuccess(BasicResourcePool.java:1125)
at com.mchange.v2.resourcepool.BasicResourcePool.access$700(BasicResourcePool.java:44)
at com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask.run(BasicResourcePool.java:1870)
at com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread.run(ThreadPoolAsynchronousRunner.java:696)
Caused by: com.mysql.cj.exceptions.CJCommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at sun.reflect.GeneratedConstructorAccessor15.newInstance(Unknown Source)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:61)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:105)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:151)
at com.mysql.cj.exceptions.ExceptionFactory.createCommunicationsException(ExceptionFactory.java:167)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:91)
at com.mysql.cj.NativeSession.connect(NativeSession.java:152)
at com.mysql.cj.jdbc.ConnectionImpl.connectOneTryOnly(ConnectionImpl.java:952)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:822)
... 12 more
Caused by: java.net.ConnectException: Connection refused: connect
at java.net.DualStackPlainSocketImpl.connect0(Native Method)
at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)
at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
at java.net.Socket.connect(Socket.java:589)
at com.mysql.cj.protocol.StandardSocketFactory.connect(StandardSocketFactory.java:173)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:65)
... 15 more
jul 13, 2021 9:31:38 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: Having failed to acquire a resource, com.mchange.v2.resourcepool.BasicResourcePool@28d38e60 is interrupting all Threads waiting on a resource to check out. Will try again in response to new client requests.
(ConnectException) java.net.ConnectException: Connection refused: connect
Command: , took: 1705ms, client=127.0.0.1
ResponseError. Reason: java.net.ConnectException: Connection refused: connect, Response: <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="cache-control" content="no-cache, no-store" />
<meta http-equiv="expires" content="0" />
<meta http-equiv="pragma" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<title>500 - Internal Server Error. :(</title>
<style type="text/css">html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}body,html{width:100%;height:100%;background-color:rgba(155,155,155,0.3)}body{color:#000;text-align:left;padding:0;min-height:100%;display:table;font-family:"Open Sans",Arial,sans-serif}h1{font-family:inherit;font-weight:500;line-height:1.1;color:inherit;margin:.37em 0}h1 span{border-right:solid 2px #e64320;padding-right:3px}.paused{border-right:solid 1px transparent}a{text-decoration:none;color:#333;border-bottom:dotted 1px #707070;background-color:transparent}a:active,a:hover{outline:0}.lead{color:#333;margin-top:0}.wrapper{display:table-cell;vertical-align:middle;padding:0 20px}@media (max-width:601px){.border{width:2%}.wrapper{width:96%}h1{font-size:1.4em}.lead,a{font-size:14px;line-height:1}}@media (max-width:901px) and (min-width:602px){.border{width:5%}.wrapper{width:90%}h1{font-size:1.6em}.lead,a{font-size:16px;line-height:1.1}}@media (max-width:1440px...
</head>
<body>
<div class="border"></div>
<div class="wrapper">
<div class="cover">
<h1 id="title"><span id="titlespan">Internal Server Error. :( </span></h1>
<p class="lead">Error 500: An unexpected condition was encountered.<br />Our support team has been dispatched to fix it.</p>
<a href="/www/">You can go back to the homepage by clicking here!</a>
</div>
</div>
<div class="border"></div>
</body>
<script type="text/javascript">
var p=document.getElementById("title"),ps=document.getElementById("titlespan"),n=0,str=ps.innerHTML,i=40;p.innerHTML='<span id="titlespan"></span>';var myVar=setInterval(function(){n+=1,p.innerHTML='<span id="titlespan">'+str.slice(0,n)+"</span>",p.innerHTML==='<span id="titlespan">'+str+"</span>"&&(clearInterval(myVar),document.getElementById("titlespan").className+=" paused")},i);
</script>
</html>
jul 13, 2021 9:31:39 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@6a7ecbcd -- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed more than the maximum number of allowed acquisition attempts (30). Last acquisition attempt exception:
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at com.mysql.cj.jdbc.exceptions.SQLError.createCommunicationsException(SQLError.java:174)
at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:64)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:832)
at com.mysql.cj.jdbc.ConnectionImpl.<init>(ConnectionImpl.java:456)
at com.mysql.cj.jdbc.ConnectionImpl.getInstance(ConnectionImpl.java:240)
at com.mysql.cj.jdbc.NonRegisteringDriver.connect(NonRegisteringDriver.java:207)
at com.mchange.v2.c3p0.DriverManagerDataSource.getConnection(DriverManagerDataSource.java:175)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:220)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:206)
at com.mchange.v2.c3p0.impl.C3P0PooledConnectionPool$1PooledConnectionResourcePoolManager.acquireResource(C3P0PooledConnectionPool.java:203)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquire(BasicResourcePool.java:1138)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquireAndDecrementPendingAcquiresWithinLockOnSuccess(BasicResourcePool.java:1125)
at com.mchange.v2.resourcepool.BasicResourcePool.access$700(BasicResourcePool.java:44)
at com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask.run(BasicResourcePool.java:1870)
at com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread.run(ThreadPoolAsynchronousRunner.java:696)
Caused by: com.mysql.cj.exceptions.CJCommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at sun.reflect.GeneratedConstructorAccessor15.newInstance(Unknown Source)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:61)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:105)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:151)
at com.mysql.cj.exceptions.ExceptionFactory.createCommunicationsException(ExceptionFactory.java:167)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:91)
at com.mysql.cj.NativeSession.connect(NativeSession.java:152)
at com.mysql.cj.jdbc.ConnectionImpl.connectOneTryOnly(ConnectionImpl.java:952)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:822)
... 12 more
Caused by: java.net.ConnectException: Connection refused: connect
at java.net.DualStackPlainSocketImpl.connect0(Native Method)
at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)
at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
at java.net.Socket.connect(Socket.java:589)
at com.mysql.cj.protocol.StandardSocketFactory.connect(StandardSocketFactory.java:173)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:65)
... 15 more
jul 13, 2021 9:31:39 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask@271183e3 -- Acquisition Attempt Failed!!! Clearing pending acquires. While trying to acquire a needed new resource, we failed to succeed more than the maximum number of allowed acquisition attempts (30). Last acquisition attempt exception:
com.mysql.cj.jdbc.exceptions.CommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at com.mysql.cj.jdbc.exceptions.SQLError.createCommunicationsException(SQLError.java:174)
at com.mysql.cj.jdbc.exceptions.SQLExceptionsMapping.translateException(SQLExceptionsMapping.java:64)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:832)
at com.mysql.cj.jdbc.ConnectionImpl.<init>(ConnectionImpl.java:456)
at com.mysql.cj.jdbc.ConnectionImpl.getInstance(ConnectionImpl.java:240)
at com.mysql.cj.jdbc.NonRegisteringDriver.connect(NonRegisteringDriver.java:207)
at com.mchange.v2.c3p0.DriverManagerDataSource.getConnection(DriverManagerDataSource.java:175)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:220)
at com.mchange.v2.c3p0.WrapperConnectionPoolDataSource.getPooledConnection(WrapperConnectionPoolDataSource.java:206)
at com.mchange.v2.c3p0.impl.C3P0PooledConnectionPool$1PooledConnectionResourcePoolManager.acquireResource(C3P0PooledConnectionPool.java:203)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquire(BasicResourcePool.java:1138)
at com.mchange.v2.resourcepool.BasicResourcePool.doAcquireAndDecrementPendingAcquiresWithinLockOnSuccess(BasicResourcePool.java:1125)
at com.mchange.v2.resourcepool.BasicResourcePool.access$700(BasicResourcePool.java:44)
at com.mchange.v2.resourcepool.BasicResourcePool$ScatteredAcquireTask.run(BasicResourcePool.java:1870)
at com.mchange.v2.async.ThreadPoolAsynchronousRunner$PoolThread.run(ThreadPoolAsynchronousRunner.java:696)
Caused by: com.mysql.cj.exceptions.CJCommunicationsException: Communications link failure
The last packet sent successfully to the server was 0 milliseconds ago. The driver has not received any packets from the server.
at sun.reflect.GeneratedConstructorAccessor15.newInstance(Unknown Source)
at sun.reflect.DelegatingConstructorAccessorImpl.newInstance(DelegatingConstructorAccessorImpl.java:45)
at java.lang.reflect.Constructor.newInstance(Constructor.java:423)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:61)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:105)
at com.mysql.cj.exceptions.ExceptionFactory.createException(ExceptionFactory.java:151)
at com.mysql.cj.exceptions.ExceptionFactory.createCommunicationsException(ExceptionFactory.java:167)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:91)
at com.mysql.cj.NativeSession.connect(NativeSession.java:152)
at com.mysql.cj.jdbc.ConnectionImpl.connectOneTryOnly(ConnectionImpl.java:952)
at com.mysql.cj.jdbc.ConnectionImpl.createNewIO(ConnectionImpl.java:822)
... 12 more
Caused by: java.net.ConnectException: Connection refused: connect
at java.net.DualStackPlainSocketImpl.connect0(Native Method)
at java.net.DualStackPlainSocketImpl.socketConnect(DualStackPlainSocketImpl.java:79)
at java.net.AbstractPlainSocketImpl.doConnect(AbstractPlainSocketImpl.java:350)
at java.net.AbstractPlainSocketImpl.connectToAddress(AbstractPlainSocketImpl.java:206)
at java.net.AbstractPlainSocketImpl.connect(AbstractPlainSocketImpl.java:188)
at java.net.PlainSocketImpl.connect(PlainSocketImpl.java:172)
at java.net.SocksSocketImpl.connect(SocksSocketImpl.java:392)
at java.net.Socket.connect(Socket.java:589)
at com.mysql.cj.protocol.StandardSocketFactory.connect(StandardSocketFactory.java:173)
at com.mysql.cj.protocol.a.NativeSocketConnection.connect(NativeSocketConnection.java:65)
... 15 more
jul 13, 2021 9:31:39 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: Having failed to acquire a resource, com.mchange.v2.resourcepool.BasicResourcePool@28d38e60 is interrupting all Threads waiting on a resource to check out. Will try again in response to new client requests.
jul 13, 2021 9:31:39 AM com.mchange.v2.resourcepool.BasicResourcePool
ADVERTENCIA: Having failed to acquire a resource, com.mchange.v2.resourcepool.BasicResourcePool@28d38e60 is interrupting all Threads waiting on a resource to check out. Will try again in response to new client requests.

Any idea of the origin of the problem?
Thanks.
 

Mashiane

Expert
Licensed User
Longtime User
Hi

I have checked your logs and I'm really not sure what the cause is, it seems your connection is being refused. Have you ran the handlers first to see if you are able to connect to MySQL back-end.

If you have not created the MySQL backend, find the test.sql script on the root of github and create the back-end and also update the config.properties files with your MySQL connection parameters.

The SQLite example is not necessary used at the moment but was just included as part of the example in case one would like to use SQLite and MySQL in the same app. We will talk about it later.

In terms of the code in main, these are the handlers that you can run first to see if all is good.

B4X:
Server.AddHandler("/test", "TestHandler", False)
    Server.AddHandler("/rdc", "RDCHandler", False)
    Server.AddHandler("/sqliterdctest", "SQLiteTestHandler", False)
    Server.AddHandler("/sqliterdc", "SQLiteRDCHandler", False)
    Server.AddHandler("/hello", "HelloHandler", False)

So it will be https://localhost:55056/test etc. The /rdc one checks if your connection to MySQL jRDC is possible. Perhaps start there.

All the best!

PS: Remember to always do a HARD REFRESH of your browser each time you run your BANanoServer App, otherwise it will give you stuff from the cache.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Tip: Customizing Menu Items

The V-Menu has a child V-List element and this can be customised. Currently, on the V-Menu page, one can view a menu..

1626171274785.png


The menu name is VMenu1. After customization, we are able to make the same menu appear differently, e.g.

1626171326745.png


1. We have made the menu V-List to be dense and we have made the items to be "rounded" on selection.
2. To do this, add a VMenu and then inside it drop a VList element. The name of the VList should be the name of the VMenu suffixed by list e.g. your menu is "menuabc", the child v-list should be "menuabclist"

Then customize the VList to suit your needs. You can see this update on the menus page. PS. The VList element is the same elements used in the navigation drawer in our examples to build our navigation items.

1626171548366.png


Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Tip: Customizing the VList

The VList is currently uses in the Navigation Drawer and Menu Examples, and it can be used inside any component as its just a listview.

During Initialization, you can also change some attributes.

1626172363447.png


For example, we wanted to decrease the size of the avatars to 24.

B4X:
VMenu2.MenuItems.ListItemAvatar.Size = "24"

Ta!
 

Mashiane

Expert
Licensed User
Longtime User
Creating a TODO task manager, as easy as ABC - Conditional Formatting

Tasks.gif


Example Source Code and layout:

1626212705072.png


B4X:
'Static code module
Sub Class_Globals   
    Public vuetify As VuetifyApp
    Public about As VueComponent
    Public path As String
    Public name As String = "adsimpletable"
    Private banano As BANano
    Private simpletable As VSimpleTable
    Private stcont As VContainer
End Sub

Sub Initialize(v As VuetifyApp)
    'establish a reference to the app
    vuetify = v
    'initialize the component
    about.Initialize(Me, name)
    path = about.path
   
    banano.LoadLayout(about.Here, "mysimpletable")
    '
    stcont.BindState(about)
    simpletable.BindState(about)
    '
    about.SetCreated(Me, "oncreated", Null)
    Dim itm As Map
    about.SetMethod(Me, "isitdone", Array(itm))
    '
    vuetify.AddRoute(about)
End Sub

'we check if the task is done or not
'this will be applied to the name column depending
'on the value of done
Sub isitdone(item As Map) As String
    'read the done status
    Dim bDone As Boolean = item.GetDefault("done", False)
    'parse it just to be save
    bDone = BANanoShared.parseBool(bDone)
    'return the class to apply
    Return vuetify.LineThroughIfTrue(bDone)
End Sub

Sub oncreated
    'add records
    simpletable.Clear(about)
    simpletable.AddRowMap(CreateMap("id":1, "done":True, "name": "Frozen Yogurt", "calories": 159))
    simpletable.AddRowMap(CreateMap("id":2, "done":False, "name": "Ice cream sandwich", "calories": 237))
    simpletable.AddRowMap(CreateMap("id":3, "done":True, "name": "Eclair", "calories": 262))
    simpletable.AddRowMap(CreateMap("id":4, "done":False, "name": "Cupcake", "calories": 305))
    simpletable.SetRows(about)
End Sub


Private Sub simpletable_Edit (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Clone (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Delete (item As Map)
    Log(item)
End Sub

Private Sub simpletable_Check (item As Map)
    Log(item)
End Sub

You can then choose whether to persist via CRUD to available back-end methodologies we have!

In the table definition, we have defined conditional formatting:

1626213016217.png


As an example, for the ConditionalClass(es), we are saying, for the name column, run the isitdone callback and apply what that callback returns to the class of the column.

This creates a binding to the class per row and column 'name'. For this to work you need the callback to be registered, thus the .SetMethod call. This enables us to call a method by the string name i.e isitdone.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Tip: LifeCycle CallBacks

1. Use .SetCreated to fetch data from the database before the screen is rendered. A progressbar will not show as HTML DO NOT exists.
2. Use .SetMethod to register a callback i.e. a routine, you execute this with .RunMethod (not BANano.RunMethod). You can see this in the Animals Examples where we registered a method and called it.
3. Use .SetMounted to fetch data from a database when your screen is rendered. A progress bar will show as HTML exists.
 

Mashiane

Expert
Licensed User
Longtime User
BANanoVuetifyAD3 Version 5.67 is now available.

It features that JRDC SQLite CRUD functionality. So you can access multiple database engines at the same time.

New BANanovuetifuAD3 Awesome Kitchen Sink
New BANanovuetifuAD3 BANanoServer Awesome Kitchen Sink

jRDCSQLite.jpg


jRDCMySQL.jpg


PS:

Here is the script to create the database: https://github.com/Mashiane/BANanoVuetifyAD3/blob/main/test.sql

Also ensure you update the config.properties files to point to the right Object folder for SQLite and also your MySQL connection settings.

1626220734900.png


Should you be stuck and have questions, please dont hesitate to ask on this thread. Its a tutorial thread!

Ta!
 
Last edited:

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
Hi

I have checked your logs and I'm really not sure what the cause is, it seems your connection is being refused. Have you ran the handlers first to see if you are able to connect to MySQL back-end.

If you have not created the MySQL backend, find the test.sql script on the root of github and create the back-end and also update the config.properties files with your MySQL connection parameters.

The SQLite example is not necessary used at the moment but was just included as part of the example in case one would like to use SQLite and MySQL in the same app. We will talk about it later.

In terms of the code in main, these are the handlers that you can run first to see if all is good.

B4X:
Server.AddHandler("/test", "TestHandler", False)
    Server.AddHandler("/rdc", "RDCHandler", False)
    Server.AddHandler("/sqliterdctest", "SQLiteTestHandler", False)
    Server.AddHandler("/sqliterdc", "SQLiteRDCHandler", False)
    Server.AddHandler("/hello", "HelloHandler", False)

So it will be https://localhost:55056/test etc. The /rdc one checks if your connection to MySQL jRDC is possible. Perhaps start there.

All the best!

PS: Remember to always do a HARD REFRESH of your browser each time you run your BANanoServer App, otherwise it will give you stuff from the cache.

Thanks to your help and that of @ José J. Aguilar, I have finally managed to make it work.

I had to correctly configure the Server part of MySql and then I had to tweak the connection string a bit to set the time zone, otherwise it would throw me another exception.

B4X:
JdbcUrl=jdbc:mysql://localhost/test?characterEncoding=utf8&useTimezone=true&serverTimezone=Europe/Madrid
 

Mashiane

Expert
Licensed User
Longtime User
Tip: Creating NavigationLess "Pages"

You can create "pages" that you can "navigate" to without moving away from your active page.

To do this you can use:

1. The Bottom Sheets: these appear from the bottom of your screen and can fill the whole screen area.

BottomSheet.gif



2. The second option is to use the VMsgBox and set if to FullScreen via the abstract designer properties.

Ta!

PS: To navigate from one page to another use Vuetify.NavigateTo("/???") where ??? is the name of your page to.
 

Gabino A. de la Gala

Active Member
Licensed User
Longtime User
BANanoVuetifyAD3 Version 5.67 is now available.

Also ensure you update the config.properties files to point to the right Object folder for SQLite and also your MySQL connection settings.

View attachment 116382

Should you be stuck and have questions, please dont hesitate to ask on this thread. Its a tutorial thread!

Ta!

One thing to keep in mind if the Sqlite version is used, is that you have to be careful not to use the www / assets / test.db file as it is overwritten every time the server is started (not only every time it is compiled )
 

Mashiane

Expert
Licensed User
Longtime User
One thing to keep in mind if the Sqlite version is used, is that you have to be careful not to use the www / assets / test.db file as it is overwritten every time the server is started (not only every time it is compiled )
Thanks for the heads up..

This is because the test.db file is included in the Files tab of the project as an asset. If you remove it there, click sync, then the existing file on your www/assets/test.db file will be the default used.

Also, the transpiler option to not delete assets in www should be turned on, currently it is off and thus deletes everything everytime you run the app.

All the best!
 
Top