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

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User

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.


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



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

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.



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



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





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!
 
Last edited:

Gabino A. de la Gala

Well-Known Member
Licensed User
Longtime User

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.




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

Well-Known Member
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 )
 

Mashiane

Expert
Licensed User
Longtime User
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 )
Click to expand...
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!
 
You must log in or register to reply here.

Similar Threads

  • Article
Share My Creation BANano File Sharer Dashboard
Replies
2
Views
2K
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
61K
NGUYEN TUAN ANH
  • Article
Share My Creation [BANanoWebix] An OpenSource Webix UX Wrapper for BANano
2 3
Replies
58
Views
20K
Mashiane
  • Article
Share My Creation [BANano] WebSites, WebApps, Frameworks Created with BANano
2 3
Replies
43
Views
7K
Mashiane
  • Article
B4J Tutorial [BANano] v2: (2) B4J Abstract Designer
Replies
0
Views
5K
alwaysbusy
Menu
Log in
Register
Cookies are required to use this site. You must accept them to continue using the site. Learn more…