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

LJG · Jun 26, 2021

Mashiane said:
Dialogs and Message Boxes with VMsgBox

View attachment 115520

The VDialog seems much more complicated than I thought. I am trying to create a VDialog box that contains other VElements (checkboxes, buttons, labels, selectors, etc) but I cannot get it to work. The goal is to create a dialog box that allows the end-user to access, view, and change setting parameters, etc for a page (VueComponent). It appears that the VDialog within BAVD3 has a built-in card and other things that may not allow the customization of the VDialog Box (I may be wrong). When you have time, please consider providing an example of how to build a VDialog Box that contains other VElements, thank you.

Mashiane · Jun 27, 2021

Please note that the first post has been updated with very important information

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

Ola ************************************************** Feb 2024: BVAD3 RoadMap https://www.b4x.com/android/forum/threads/bananovuetifyad3-2024-roadmap.159326/ ************************************************* Download Additional Libraries Download BANanoVuetifyAD3Core Library OR Download...

www.b4x.com

Thanks.

Mashiane · Jun 27, 2021

Version 5.46 is out with a lot of bug fixes and enhancements.

Please check it out and kindly report any bugs found.

Ta!

aeric · Jun 27, 2021

Mashiane said:
Please note that the first post has been updated with very important information

Maybe you can add a section for What's New

Mashiane · Jun 27, 2021

LJG said:
The VDialog seems much more complicated than I thought. I am trying to create a VDialog box that contains other VElements (checkboxes, buttons, labels, selectors, etc) but I cannot get it to work. The goal is to create a dialog box that allows the end-user to access, view, and change setting parameters, etc for a page (VueComponent). It appears that the VDialog within BAVD3 has a built-in card and other things that may not allow the customization of the VDialog Box (I may be wrong). When you have time, please consider providing an example of how to build a VDialog Box that contains other VElements, thank you.

Noted with thanks. I will add a blank vdialog in the next release.

In the mean time... Check the family age distribution project, we have a dialog that is created using load layout and the load layout append method.

Update: I've added VDialog0 and VCard0 for both empty dialog and empty card. Please re-download.

Mashiane · Jun 27, 2021

Upcoming Tasks (in no particular order)

1. Leaflet Intergration (we already have google, will showcase that too)
2. BANanoServer Intergration - 2nd try
3. FireStore (uploading files to Firebase - update)
4. Firebase Messaging - update
5. MQTT Intergration

If there is anything else you'd like me to look at please indicate as the plan is to work on support for this going forward.

Ta!

Mashiane · Jun 27, 2021

So far going well. The map is finally displaying.

This was so easy when it was one for ABM (Leaflet)

Let me continue playing around...

Watch this space!!

Vuetify Leaflet

magdoz · Jun 28, 2021

Mashiane said:
Upcoming Tasks (in no particular order)

1. Leaflet Intergration (we already have google, will showcase that too)
2. BANanoServer Intergration - 2nd try
3. FireStore (uploading files to Firebase - update)
4. Firebase Messaging - update
5. MQTT Intergration

If there is anything else you'd like me to look at please indicate as the plan is to work on support for this going forward.

Ta!

Will be fun to

Mashiane said:
Ola

Getting Started

Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

View attachment 115528

What's Next?

You will find the most up to date content from this post

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

Enjoy

Nov 15, 2020

Add bookmark

?

magdoz · Jun 28, 2021

Mashiane said:
Ola

Getting Started

Please read my Article on Medium

1. Download and Copy these files to your B4J External Libraries Folder
2. Download this b4x template and put it in your B4J Internal Libraries Folder
3. Download and run the Awesome Kitchen Sink WebApp

You also can

Explore the Awesome Kitchen Sink WebApp Online hosted on GitHub

Creating a new Project

3. In B4J, click File > New > BVAD3EDS to create a new project

View attachment 115528

What's Next?

You will find the most up to date content from this post

For MySQL Back-Ends

Run the Connection Tester WebApp
https://www.b4x.com/android/forum/threads/banano-bvad3-php-connection-tester.131014/page-2

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

BTW we are on Social Media

Join our Telegram: https://t.me/bananovuematerial
Twitter handle: @mashymbanga

Open Source Code (MIT License)

Here is the Library Source Code (THIS IS OPEN-SOURCE)
Here is the Source Code for the Extensions we have used

Freebies - BVAD3 Projects

Download

Enjoy

Confusing... What is the latest Dear solution ?
Zoltan

magdoz · Jun 28, 2021

magdoz said:
Confusing... What is the latest Dear solution ?
Zoltan

thanks... just early morning around here..

magdoz · Jun 28, 2021

Thanks Dear ! New steps...

Mashiane · Jun 28, 2021

Morning yall. This is taking longer that I expected. I ran into issues of leaflet not playing well with Vuetify. Fortunately the issues were raised as far as 2017. It was a relief to find solutions after a long while of googling and trying out various proposals.

The other issue is its not normal Javascript, it's vuejs, so one has to do things the vuejs way. We prevail though.

I'm sure a beta version to play will will be available later today.

Ta!

magdoz · Jun 28, 2021

Mashiane said:
Morning yall. This is taking longer that I expected. I ran into issues of leaflet not playing well with Vuetify. Fortunately the issues were raised as far as 2017. It was a relief to find solutions after a long while of googling and trying out various proposals.

The other issue is its not normal Javascript, it's vuejs, so one has to do things the vuejs way. We prevail though.

I'm sure a beta version to play will will be available later today.

Ta!

Just Relax Dear !!! We can wait !!! Thanks !!!

Mashiane · Jun 28, 2021

Markers and Circles with tooltips in the bag!

Mashiane · Jun 28, 2021

PopUp Window / Information Windows in the bag!

magdoz · Jun 28, 2021

Mashiane said:
Markers and Circles with tooltips in the bag!

View attachment 115567

go for some things!

magdoz said:
Just Relax Dear !!! We can wait !!! Thanks !!!

Thank !

magdoz · Jun 28, 2021

Relaxing... Everything going well ... Thanks !

Mashiane · Jun 28, 2021

Behind The Scenes of Intergrating LeafLet into BANanoVuetifyAD3.

1. First we needed the CSS and Javascript files. We downloaded these and imported them into our BANano library project on AppStart sub.

B4X:

BANano.Header.AddCSSFile("leaflet.css")
    BANano.Header.AddJavascriptFile("leaflet.js")
    BANano.Header.AddJavascriptfile("vue2-leaflet.min.js")

When the project app is being built, these are added to the header section of your page. The files are then copied to both the styles and scripts folder of your Publish folder.

2. Secondly we need to tell VueJS/Vuetify that we are using VueLeafLet (ie a wrap of Leaflet for VueJS)

This is called imports. The LeafLet object for the vuejs is stored in the window object of our javascript project. So we get it there and tell our project that we will use those components.

B4X:

Sub ImportLeafLet
    'get the leaflet map from the windows object
    Dim Vue2Leaflet As BANanoObject = BANano.Window.GetField("Vue2Leaflet")
    Dim LMap As BANanoObject = Vue2Leaflet.GetField("LMap")
    Dim LTileLayer As BANanoObject = Vue2Leaflet.GetField("LTileLayer")
    Dim LMarker As BANanoObject = Vue2Leaflet.GetField("LMarker")
    Dim LPopup As BANanoObject = Vue2Leaflet.GetField("LPopup")
    Dim LTooltip As BANanoObject = Vue2Leaflet.GetField("LTooltip")
    Dim LPolyline As BANanoObject = Vue2Leaflet.GetField("LPolyline")
    Dim LCircle As BANanoObject = Vue2Leaflet.GetField("LCircle")
    Dim LPolygon As BANanoObject = Vue2Leaflet.GetField("LPolygon")
    Dim LRectangle As BANanoObject = Vue2Leaflet.GetField("LRectangle")
    '
    components.Put("l-map", LMap)
    components.Put("l-tile-layer", LTileLayer)
    components.Put("l-marker", LMarker)
    components.Put("l-tooltip", LTooltip)
    components.Put("l-popup", LPopup)
    components.Put("l-polyline", LPolyline)
    components.Put("l-circle", LCircle)
    components.Put("l-polygon", LPolygon)
    components.Put("l-rectangle", LRectangle)
End Sub

So in each page of your BVAD3 project, if it will have a leaflet map, you need to call ImportLeaflet on the Initialize Sub.

3. We create a BANano custom view with these components, the parent component being l-map in the expected structure.

You can see how this has been done here, https://vue2-leaflet.netlify.app/

Internally we are using a v-for directive to loop through each marker, polygon, polyline, circle, rectangle. For each we add clickable tooltips and clickable popups.

As an example...

B4X:

'build and get the element
    If BANano.Exists($"#${mName}"$) Then
        mElement = BANano.GetElement($"#${mName}"$)
    Else    
        mElement = mTarget.Append($"<v-card id="${mName}card" v-lazy><v-card-title id="${mName}cardtitle" v-text="${xTitle}"></v-card-title><v-card-text><l-map ref="${mName}" id="${mName}"></l-map></v-card-text></v-card>"$).Get("#" & mName)
    End If
    '
    VElement.Initialize(mCallBack, mName, mName)
    VElement.TagName = "l-map"
    VElement.SetOnEventOwn(mCallBack, $"${mName}_ready"$, "ready", Null)
    'detect changes on size
    If SubExists(mCallBack, xresize) Then
        VElement.AddAttr("v-resize", xresize)
        VElement.SetMethod(mCallBack, xresize, Null)
    End If
        '
    VElement.SetOnEventOwn(mCallBack, $"${mName}_updatezoom"$, "update:zoom", "")
    VElement.SetOnEventOwn(mCallBack, $"${mName}_updatecenter"$, "update:center", "")
    VElement.SetOnEventOWn(mCallBack, $"${mName}_updatebounds"$, "update:bounds", "")
    'add the tile later
    VElement.Append($"<l-tile-layer :url="${xurl}"></l-tile-layer>"$)
    'add the markers
    VElement.Append($"<l-marker id="${xmarker}" v-for="item in ${xmarkers}" :key="item.id">
    <l-popup v-if="item.popup"><div @click="${mName}_popup_click(item)">{{ item.popup }}</div></l-popup>
    <l-tooltip v-if="item.tooltip" :options="{ permanent: ${bPermanentTooltips}, interactive: true }"><div @click="${mName}_tooltip_click(item)">{{ item.tooltip }}</div></l-tooltip>
    </l-marker>"$)
    Dim itm As Object
    VElement.SetMethod(mCallBack, $"${mName}_tooltip_click"$, Array(itm))
    VElement.SetMethod(mCallBack, $"${mName}_popup_click"$, Array(itm))
    'empty the markers
    VElement.SetData(xmarkers, markers)
    'get the marker and update its attributes
    Dim vmarker As VueElement = VElement.GetVueElement(xmarker)
    vmarker.Bind("draggable", "item.draggable")
    vmarker.Bind("icon", "item.icon")
    vmarker.Bind("id", "item.id")
    vmarker.Bind("lat-lng", "item.latlng")
    vmarker.Bind("name", "item.name")
    vmarker.Bind("visible", "item.visible")
    vmarker.Bind("item", "item")
    vmarker.RemoveAttr("id")

This code here is part of the bigger picture and is what you see on the abstract designer when you will drag and drop a VLeaflet into the layout designer. That is what happens behind the scenes.

4. We then define some events, with Ready being the most crucial event.

It fires when the map is ready and that is when we can add markers etc etc.

B4X:

#Event: Ready
#Event: UpdateCenter (latLng as Object)
#Event: UpdateZoom (latLng As Object)
#Event: UpdateBounds (bounds as Object)
#Event: Resize
#Event: Tooltip_Click (item As Map)
#Event: PopUp_Click (item As Map)

These you access when you click on Generate Members and then the IDE gets some new events that you can write code for...

Easy isn't it? Now all the custom views in BANanoVuetifyAD3 work in this similar fashion.

Later!

magdoz · Jun 28, 2021

Mashiane said:
Behind The Scenes of Intergrating LeafLet into BANanoVuetifyAD3.

1. First we needed the CSS and Javascript files. We downloaded these and imported them into our BANano library project on AppStart sub.

B4X:

BANano.Header.AddCSSFile("leaflet.css") BANano.Header.AddJavascriptFile("leaflet.js") BANano.Header.AddJavascriptfile("vue2-leaflet.min.js")

When the project app is being built, these are added to the header section of your page. The files are then copied to both the styles and scripts folder of your Publish folder.

2. Secondly we need to tell VueJS/Vuetify that we are using VueLeafLet (ie a wrap of Leaflet for VueJS)

This is called imports. The LeafLet object for the vuejs is stored in the window object of our javascript project. So we get it there and tell our project that we will use those components.

B4X:

Sub ImportLeafLet 'get the leaflet map from the windows object Dim Vue2Leaflet As BANanoObject = BANano.Window.GetField("Vue2Leaflet") Dim LMap As BANanoObject = Vue2Leaflet.GetField("LMap") Dim LTileLayer As BANanoObject = Vue2Leaflet.GetField("LTileLayer") Dim LMarker As BANanoObject = Vue2Leaflet.GetField("LMarker") Dim LPopup As BANanoObject = Vue2Leaflet.GetField("LPopup") Dim LTooltip As BANanoObject = Vue2Leaflet.GetField("LTooltip") Dim LPolyline As BANanoObject = Vue2Leaflet.GetField("LPolyline") Dim LCircle As BANanoObject = Vue2Leaflet.GetField("LCircle") Dim LPolygon As BANanoObject = Vue2Leaflet.GetField("LPolygon") Dim LRectangle As BANanoObject = Vue2Leaflet.GetField("LRectangle") ' components.Put("l-map", LMap) components.Put("l-tile-layer", LTileLayer) components.Put("l-marker", LMarker) components.Put("l-tooltip", LTooltip) components.Put("l-popup", LPopup) components.Put("l-polyline", LPolyline) components.Put("l-circle", LCircle) components.Put("l-polygon", LPolygon) components.Put("l-rectangle", LRectangle) End Sub

So in each page of your BVAD3 project, if it will have a leaflet map, you need to call ImportLeaflet on the Initialize Sub.

3. We create a BANano custom view with these components, the parent component being l-map in the expected structure.

You can see how this has been done here, https://vue2-leaflet.netlify.app/

Internally we are using a v-for directive to loop through each marker, polygon, polyline, circle, rectangle. For each we add clickable tooltips and clickable popups.

As an example...

B4X:

'build and get the element If BANano.Exists($"#${mName}"$) Then mElement = BANano.GetElement($"#${mName}"$) Else mElement = mTarget.Append($"<v-card id="${mName}card" v-lazy><v-card-title id="${mName}cardtitle" v-text="${xTitle}"></v-card-title><v-card-text><l-map ref="${mName}" id="${mName}"></l-map></v-card-text></v-card>"$).Get("#" & mName) End If ' VElement.Initialize(mCallBack, mName, mName) VElement.TagName = "l-map" VElement.SetOnEventOwn(mCallBack, $"${mName}_ready"$, "ready", Null) 'detect changes on size If SubExists(mCallBack, xresize) Then VElement.AddAttr("v-resize", xresize) VElement.SetMethod(mCallBack, xresize, Null) End If ' VElement.SetOnEventOwn(mCallBack, $"${mName}_updatezoom"$, "update:zoom", "") VElement.SetOnEventOwn(mCallBack, $"${mName}_updatecenter"$, "update:center", "") VElement.SetOnEventOWn(mCallBack, $"${mName}_updatebounds"$, "update:bounds", "") 'add the tile later VElement.Append($"<l-tile-layer :url="${xurl}"></l-tile-layer>"$) 'add the markers VElement.Append($"<l-marker id="${xmarker}" v-for="item in ${xmarkers}" :key="item.id"> <l-popup v-if="item.popup"><div @click="${mName}_popup_click(item)">{{ item.popup }}</div></l-popup> <l-tooltip v-if="item.tooltip" :options="{ permanent: ${bPermanentTooltips}, interactive: true }"><div @click="${mName}_tooltip_click(item)">{{ item.tooltip }}</div></l-tooltip> </l-marker>"$) Dim itm As Object VElement.SetMethod(mCallBack, $"${mName}_tooltip_click"$, Array(itm)) VElement.SetMethod(mCallBack, $"${mName}_popup_click"$, Array(itm)) 'empty the markers VElement.SetData(xmarkers, markers) 'get the marker and update its attributes Dim vmarker As VueElement = VElement.GetVueElement(xmarker) vmarker.Bind("draggable", "item.draggable") vmarker.Bind("icon", "item.icon") vmarker.Bind("id", "item.id") vmarker.Bind("lat-lng", "item.latlng") vmarker.Bind("name", "item.name") vmarker.Bind("visible", "item.visible") vmarker.Bind("item", "item") vmarker.RemoveAttr("id")

This code here is part of the bigger picture and is what you see on the abstract designer when you will drag and drop a VLeaflet into the layout designer. That is what happens behind the scenes.

4. We then define some events, with Ready being the most crucial event.

It fires when the map is ready and that is when we can add markers etc etc.

B4X:

#Event: Ready #Event: UpdateCenter (latLng as Object) #Event: UpdateZoom (latLng As Object) #Event: UpdateBounds (bounds as Object) #Event: Resize #Event: Tooltip_Click (item As Map) #Event: PopUp_Click (item As Map)

These you access when you click on Generate Members and then the IDE gets some new events that you can write code for...

Easy isn't it? Now all the custom views in BANanoVuetifyAD3 work in this similar fashion.

Later!

Thanks !!! Trying to follow you guys ! Im old and tired !

Mashiane · Jun 28, 2021

magdoz said:
Thanks !!! Trying to follow you guys ! Im old and tired !

Off course, you dont need to worry about all of this, as long as it just does what its meant to do.

I just decided to share this due to appreciating the kind of engine we are dealing with. Some parts of the whole are easy and some parts not so much.

The beauty of it all is that, you do it once and it works and you move on to something else.

Thanks.

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

Member

Expert

Expert

Expert

Expert

Expert

Expert

Member

Member

Member

Member

Expert

Member

Expert

Expert

Member

Member

Expert

Member

Expert

Similar Threads