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

L

LJG

Member
Mashiane said:
Dialogs and Message Boxes with VMsgBox

View attachment 115520
Click to expand...
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

Expert
Licensed User
Longtime User
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

Expert
Licensed User
Longtime User
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.
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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!
 

magdoz

Member
Licensed User
Will be fun to

Nov 15, 2020
?
 

magdoz

Member
Licensed User
Confusing... What is the latest Dear solution ?
Zoltan
 

Mashiane

Expert
Licensed User
Longtime User
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

Member
Licensed User
Just Relax Dear !!! We can wait !!! Thanks !!!
 

Mashiane

Expert
Licensed User
Longtime User
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!
 
Last edited:

magdoz

Member
Licensed User
Thanks !!! Trying to follow you guys ! Im old and tired !
 

Mashiane

Expert
Licensed User
Longtime User
magdoz said:
Thanks !!! Trying to follow you guys ! Im old and tired !
Click to expand...
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.
 
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…