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

joulongleu · Jan 3, 2021

Hi: @Mashiane :Your teaching is ok, Thank You.

joulongleu · Jan 3, 2021

Hi:

@Mashiane: MySQLCRUD --> ViewMySQLUsers-->CreateDialog An error occurred

code:

Sub CreateDialog
    'create a container
    Dim dlgUser As VueElement = vuetify.AddDialogInput(Me, userc.Here, "dlgUser", True, "600", "User", "Save", "primary", "Cancel", "error")
    userc.BindVueElement(dlgUser)
    'get the container
    Dim UserCont As VueElement = userc.DialogContainer("dlgUser")
    UserCont.AddRows1.AddColumns12
    UserCont.BuildGrid
    Dim id As VueElement = vuetify.AddTextField1(Me, UserCont.MatrixID(1, 1), "id", "user.id", "id", Null)
    id.VShow = "idshow"
    userc.BindVueElement(id)
    Dim user2 As VueElement = vuetify.AddTextField1(Me, UserCont.MatrixID(2, 1), "user", "user.user", "user", Null)
    userc.BindVueElement(user2)
    Dim age As VueElement = vuetify.AddTextField1(Me, UserCont.MatrixID(3, 1), "age", "user.age", "age", Null)
    userc.BindVueElement(age)

    userc.BindVueElement(UserCont)
    userc.BindVueElement(dlgUser)
    'initialize the User
    Dim user1 As Map = CreateMap()
    user1.put("id","" )
    user1.put("user", "")
    user1.put("age", "")
    user1.put("age", "")

    userc.SetData("user", user1)
End Sub

Mashiane · Jan 4, 2021

You need to fix this line, so that it builds the grid you have defined when adding the items.

B4X:

UserCont.AddRows1.AddColumns12
    UserCont.BuildGrid

Your grid has 3 rows, the last item being age.

joulongleu · Jan 4, 2021

Thank you so much, it has been resolved,change UserCont.AddRows4.AddColumns12 is OK

Mashiane · Jan 4, 2021

joulongleu said:
UserCont.AddRows4.AddColumns12

Sure. But dont add extra rows that you dont need hey.

joulongleu · Jan 4, 2021

Mashiane said:
Sure. But dont add extra rows that you dont need hey.

Hi: @Mashiane:Below is a new question with the following picture and attachment, thanks

Mashiane · Jan 5, 2021

joulongleu said:
Below is a new question with the following picture and attachment, thanks

1. Log the map variable that you need to be adding / updating to the database.
2. Check that the map keys match the field names in the database table.
3. If one of the columns in the database table is auto-increment, remove its key from the map for Create???
4. Rather log(strError) so that you can see the complete error so that you are able to fix it.

In most cases this error is causes by a mismatch of field names and the auto-increment field issues.

Good luck!

joulongleu · Jan 5, 2021

Hi:@Mashiane Thank you very much for your assistance, the problem has been solved

Mashiane · Jan 7, 2021

Tip: Using locally hosted resources i.e. CSS and JS files

You might want to do this during the development of your project... In release mode, rather use the CDN versions of the resources (if available)

In case you are in a place with an erratic internet connection, and one would rather host the library resources themselves.

1. Open the BVAD3 library, go to main. You will see this...

B4X:

BANano.Header.AddCSSFile("https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900")
BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css")
BANano.Header.AddCSSFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css")
BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.min.js")
BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.js")
BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/vue-router@3.x/dist/vue-router.min.js")
BANano.Header.AddJavascriptFile("https://cdn.jsdelivr.net/npm/dayjs@1.9.6/dayjs.min.js")
BANano.Header.AddJavascriptFile("https://cdnjs.cloudflare.com/ajax/libs/numeral.js/2.0.6/numeral.min.js")
BANano.Header.AddJavascriptFile("https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.20/lodash.min.js")

2. Copy each CDN link and then download each file to your PC.
3. After you have downloaded the resources, copy and paste them to your BVAD3 library project, if the library is opened, ensure you refresh the "Files" tab.
4. For the font files, you will need to also download the relevant font files. For example, for roboto, you get a css.css file.

You will get the URL links inside the files... copy and then download each of the files referenced inside css.css. Then update your css.css file to reflect. Save this file as roboto.css

The file names provided here are "other" names, I have renamed them for brevity. You can then rename the files accordingly. Also ensure you change the URL to point to ../assets

Copy the font files to your BVAD3 project "Files" also and sync your "Files"

5. Head over to https://materialdesignicons.com/ to download the font files.
6. Copy the materialdesignicons.min.css to your "Files",
7. Copy the contents of the "fonts" folder from your download also to the "Files"
8. The next step is to update the URL inside the materialdesignicons.min.css. These have ../fonts, you needs to rename this to be ../assets

9. Save your file.
10. Update the Header.AddCSS and AddJavascripLinks. This should now reflect.

When in production mode, you can then switch between locally hosted resources and CDN based versions by toggling the comments below.

All the best.

#SharingTheGoodness

Mashiane · Jan 14, 2021

Part 43.b (This is Part 43 on YT therefore our next tutorial number here will still be part 44, then 45 etc)

NB: The source code for this is coming soon.

Published Part 43 of a tutorial on beginning websites/webapps with Vuetify using BANanoVuetifyAD3. BANanoServer (Jetty) Websockets on port 55056.

Mashiane · Jan 30, 2021

Building VuetifyAD3 BANanoSERVER Applications.

Check the explanation here.

Mashiane · Jan 30, 2021

Part 44 of our amazing tutorials is out - BANanoServer + SQLite CRUD on port 55056.

We look at creating a CRUD application using SQLite as a backend, a BANanoServer Web App running on port 55056.

Go on download now and check it out, https://github.com/Mashiane/BANanoVuetifyAD3

Ta

Related Content

BVAD3 - Creating Server Applications with BANanoServer

Mashiane · Jan 31, 2021

Part 45 of our amazing tutorials is out - BANanoServer + MySQL CRUD on port 55056

We look at creating a CRUD application using MySQL as a backend, a BANanoServer Web App running on port 55056

Go and download now and check it out, https://github.com/Mashiane/BANanoVuetifyAD3

Ta!

Related Content

BVAD3 - Creating Server Applications with BANanoServer

Mashiane · Feb 2, 2021

BVAD3 is now out of BETA and ready for production use.

Download now.

Johan Hormaza · Feb 2, 2021

Mashiane said:
BVAD3 is now out of BETA and ready for production use.

Download now.

I have this problem when adding a user, and in the end it does not add it.
Thank!

Mashiane · Feb 2, 2021

@Johan Hormaza I have not released any tutorial for the jrdc2 but only asked a question as I had issues with it also. Im sorry I cannot comment or help you on any jrdc2 related issues.

Until the question I asked is resolved I am not at liberty to talk about this particular issue.

So please don't use any jrdc related stuff on this library.

Update:

The same question was posted on Sunday and have not been resolved:

[BANanoServer] [SOLVED] Request assistance with jRDC2 error with ResumableSub

Ola Download I'm attempting to implement jRDC2 with my test project with the BANanoServer. I am able to perform CREATE, UPDATE, DELETE calls, however each of them results in an error. Line 41203 has this kind of code. // [26] Public Sub Initialize _B.initialize=function() { // [29] If...

www.b4x.com

Johan Hormaza · Feb 2, 2021

Mashiane said:
@Johan Hormaza I have not released any tutorial for the jrdc2 but only asked a question as I had issues with it also. Im sorry I cannot comment or help you on any jrdc2 related issues.

Until the question I asked is resolved I am not at liberty to talk about this particular issue.

So please don't use any jrdc related stuff on this library.

Okay, hope it can be fixed soon. Thank you!
Reserve army !!

Mashiane · Feb 3, 2021

Tip: Using BANanoPromise with CallInlinePHPWait

NB: The promise.CallSub is LOWERCASE sensitive for methodname

We want to execute a database command and this should work via a promise call. So this returns True/False depending on whether the record exists or not.

B4X:

'user is registering
Sub btnSignUpDo_click(e As BANanoEvent)        'IgnoreDeadCode
    login.refs = vuetify.GetRefs
    Dim fValid As Boolean = login.FormValidate("createform")
    'If fValid = true Then Return
    '
    Dim userm As Map = login.GetData("signup")
    Dim stel1 As String = userm.Get("tel1")
    
    Dim res As Boolean
    Dim err As Object
    Dim uf As BANanoPromise        'ignore
    uf.CallSub(Me, "getuserbytel1", Array(stel1))
    uf.Then(res)
    Log(res)
    uf.Else(err)
    uf.End
End Sub


Sub GetUserByTel1(suserid As String) As Boolean
    Dim rsUsers As BANanoMySQLE
    rsUsers.Initialize("db", "user", "tel1", "")
    'add field types
    rsUsers.SchemaAddText(Array("tel1"))
    rsUsers.Read(suserid)
    rsUsers.JSON = banano.CallInlinePHPWait(rsUsers.MethodName, rsUsers.Build)
    rsUsers.FromJSON
    If rsUsers.result.Size > 0 Then
        banano.ReturnThen(True)
    Else
        banano.ReturnThen(False)
    End If
End Sub

alwaysbusy · Feb 3, 2021

Mashiane said:
Until the question I asked is resolved I am not at liberty to talk about this particular issue.

I've answered it here: https://www.b4x.com/android/forum/t...ce-with-jrdc2-error-with-resumablesub.127155/

But next time make a small test project identifying the problem. I will not download a 160MB+ project any more to try to figure out what was wrong.

Alwaysbusy

Mashiane · Feb 10, 2021

Version 3.15 is released.

This fixes a bug with google maps and some other things

Tip: MSSQL Database Connections with BANanoMSSQLE.

The best option is to use PHP 7.3
The extension should be php_pdo_sqlsrv_73_nts_x64.dll

See the WebServerTools folder for more details.

Enjoy!

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

Active Member

Active Member

Attachments

Expert

Active Member

Expert

Active Member

Attachments

Expert

Active Member

Expert

Expert

Expert

Expert

Expert

Expert

Well-Known Member

Expert

Well-Known Member

Expert

Expert

Expert

Similar Threads