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

Gabino A. de la Gala · Jul 13, 2021

Mashiane said:
@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 · Jul 13, 2021

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.

Mashiane · Jul 13, 2021

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

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

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.

Ta!

Mashiane · Jul 13, 2021

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.

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

B4X:

VMenu2.MenuItems.ListItemAvatar.Size = "24"

Ta!

Mashiane · Jul 13, 2021

Creating a TODO task manager, as easy as ABC - Conditional Formatting

Example Source Code and layout:

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:

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.

Mashiane · Jul 13, 2021

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 · Jul 14, 2021

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

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.

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

Ta!

Mashiane · Jul 14, 2021

Tip: Radio Groups using VRadioGroup

Besides adding items via code, you can also specify the values and texts for the radio group. Adding items via code should be done when you expect the radio items to keep changing / sourced from a database.

Produces...

Ta!

Mashiane · Jul 14, 2021

Tip: Theming Radio Groups

You can also from the abstract designer indicate the color to use for each of the radio group items:

Mashiane · Jul 14, 2021

Tip: Multiple Switches

The same principle is applicable for Switches..

We have a couple of items with their key values and colors.

The return value when running .GetChecked will be a list of the keys selected/checked.

You can call .SetChecked to set checked items using keys of the switches.

Mashiane · Jul 14, 2021

Tip: Multiple CheckBoxes using VCheckBox.

Based on the examples above, you can also create multiple checkboxes. The returned value will be an array of the keys retrieved from the v-model,

This displays...

Gabino A. de la Gala · Jul 15, 2021

Mashiane said:
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 · Jul 15, 2021

Tip: Just released a video of how to add VTables inside VTabs

Mashiane · Jul 15, 2021

Tips: VTabs

As per video above, one can add tab-items to the vtabs via the abstract designer. This is above the AddItem calls that one can do during .Initialize of the component.
NB: Adding items to vtabs can only happen at design time in the Initialize call.

Ta!

Mashiane · Jul 15, 2021

Tip: Just released a video of how to add VTable inside VExpansionPanel i.e. Accordion.

The methodology has been explained in the previous video...

Layout Configuration:

Mashiane · Jul 15, 2021

Just pushed BANanoVuetifyAD3 to ProductHunt...

Please check it out, your votes count!

Product Hunt – The best new products in tech.

Product Hunt is a curation of the best new products, every day. Discover the latest mobile apps, websites, and technology products that everyone's talking about.

www.producthunt.com

Thanks in advance!!!!

Mashiane · Jul 15, 2021

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.

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 · Jul 16, 2021

Mashiane said:
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 · Jul 16, 2021

Gabino A. de la Gala said:
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!

Mashiane · Jul 16, 2021

Updates to the BindVueElement/BindState Builder

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

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Expert

Similar Threads