[Web][SithasoDaisy2]: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane

Mashiane

Expert
Licensed User
Longtime User
Creating a Multi Product Card using a single SDUICard

Screenshot_1.jpg


The above product listing is created from a single SDUICard, unlike the other example.

1. create a page... (use layout)

1670357824891.png


2. Add a div to the page

1670357903204.png



3. Add a SDUICard

1670359421530.png


We load the layout and then add thee button icons

B4X: 
banano.LoadLayout(app.PageViewer, "admulticardlayout")
    btnLike = pcard.AddActionButtonIcon("like", "fa-solid fa-thumbs-up", app.COLOR_GHOST)
    btnLike.Circle.Icon.SizeXLarge.Color = "success"
    '
    btnComment = pcard.AddActionButtonIcon("comment", "fa-solid fa-comment", app.COLOR_GHOST)
    btnComment.Circle.Icon.SizeXLarge.Color = "warning"
    '
    btnShare = pcard.AddActionButtonIcon("share", "fa-solid fa-share", app.COLOR_GHOST)
    btnShare.Circle.Icon.SizeXLarge.Color = "accent"
    '
    btnWish = pcard.AddActionButtonIcon("wish", "fa-solid fa-heart", app.COLOR_GHOST)
    btnWish.Circle.Icon.SizeXLarge.Color = "red"
    '
    btnBuy = pcard.AddActionButton("buy", "Buy", "")

We then load the template and bind the action buttons..

B4X: 
'save the template to the app and hide it
    app.AddTemplateFromLayout("pcard", True, pcard.Children)
    
    'template:
    '{{image}}
    '{{title}}
    '{{price}}
    '{{pricecolor}}
    '{{description}}
    'create list with same fields
    
    Dim products As List
    products.Initialize
    products.Add(CreateMap("id":"p1", "image":"./assets/banner_7.jpg", "alt":"","title":"Amazing Product 1", "price":"3.00", "pricecolor":"success","description":"This product is..."))
    products.Add(CreateMap("id":"p2", "image":"./assets/10.jpg", "alt":"","title":"Amazing Product 2", "price":"29.00", "pricecolor":"accent","description":"This product is..."))
    products.Add(CreateMap("id":"p3", "image":"./assets/9.jpg", "alt":"","title":"Amazing Product 3", "price":"35.00", "pricecolor":"neutral","description":"This product is..."))
    products.Add(CreateMap("id":"p4", "image":"./assets/banner_8.jpg", "alt":"","title":"Amazing Product 4", "price":"360.00", "pricecolor":"secondary","description":"This product is..."))
    products.Add(CreateMap("id":"p5", "image":"./assets/nature_01.jpg", "alt":"","title":"Amazing Product 5", "price":"530.00", "pricecolor":"info","description":"This product is..."))
    products.Add(CreateMap("id":"p6", "image":"./assets/nature_09.jpg", "alt":"","title":"Amazing Product 6", "price":"333.00", "pricecolor":"warning","description":"This product is..."))
    products.Add(CreateMap("id":"p7", "image":"./assets/12.jpg", "alt":"","title":"Amazing Product 7", "price":"100.00", "pricecolor":"error","description":"This product is..."))
    
    'update the parent fom the template using the list
    app.SetItemsFromTemplate(Me, "dprojects", "pcard", "", products)
    'bind the action buttons
    pcard.BindActions(products)

See demoMultiCard code module

Happy Coding!

 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
SupaBase (Firebase Alternative) crud example with SSE

[BANano] SupaBase (FireBase Alternative) crud example with SSE

Hi Supabase is an open source Firebase alternative. It provides all the backend services you need to build a product. Supabase uses Postgres database with real-time capabilities. Basically, supabase provides an interface to manage postgres database that you can use to create table and insert...
www.b4x.com www.b4x.com

This class is part of SithasoDaisy.
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
CallMeBot & WhatsApp Messages

Use your full number including country code...

1671456695985.png


B4X: 
Private Sub btnSend_Click (e As BANanoEvent)
    'save settings
    Dim ls As Map = CreateMap()
    ls.Put("phone", txtTelephone.Value)
    ls.Put("api", txtAPIKey.Value)
    banano.SetLocalStorage2("callmebot", banano.ToJson(ls))
    '
    btnSend.Loading = True
    Dim api As SDUIFetch
    api.Initialize("https://api.callmebot.com/whatsapp.php")
    api.AddParameter("source", "web")
    api.AddParameter("phone", txtTelephone.Value)
    api.AddParameter("apikey", txtAPIKey.Value)
    api.AddParameter("text", txtMessage.Value)
    banano.Await(api.GetWait)
    btnSend.Loading = False
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
CallMeBot: Send to Facebook Messenger

1671457989261.png


The full example and code will be on the update of SithasoDaisy....

1671458177466.png



B4X: 
Private Sub btnSendMessenger_Click (e As BANanoEvent)
    'save settings
    Dim ls As Map = CreateMap()
    ls.Put("phone", txtTelephone.Value)
    ls.Put("api", txtAPIKey.Value)
    banano.SetLocalStorage2("callmebot", banano.ToJson(ls))
    '
    btnSendMessenger.Loading = True
    Dim api As SDUIFetch
    api.Initialize("https://api.callmebot.com/facebook/send.php")
    api.AddParameter("apikey", txtAPIKey.Value)
    api.AddParameter("text", txtMessage.Value)
    banano.Await(api.GetWait)
    btnSendMessenger.Loading = False
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Update: Product Listing with Selects of Different Items

SithasoDaisyDemo CodeModule: demoGridY

pcad.png


The cards listed here have SDUISelects. The selects are loaded different items.

We updated our template to have an additional SDUISelect. We give it a name of "size"

1671471102747.png


We set these props for it.

1671471196437.png


We also set the attributes property to be;

B4X: 
data-id:{{id}}_size; data-name:{{id}}_size

Updated Source Code

B4X: 
'define the child elements
    Dim children As List
    children.Initialize
    children.AddAll(Array("pcard", "pimage", "pcontent", "phead", "pprice", "size"))
    'the select also has children, add these
    children.AddAll(size.Children)
    
    'save the template to the app and hide it
    app.AddTemplateFromLayout("pcard", True, children)
    
    'template:
    '{{image}}
    '{{alt}}
    '{{product}}
    '{{price}}
    '{{size}}
    'create list with same fields
    
    Dim products As List
    products.Initialize 
    products.Add(CreateMap("id":"p1", "image":"./assets/banner_7.jpg", "alt":"","product":"Amazing Product 1", "price":"3.00", "size":"S", "sizecaption":"TShirt"))
    products.Add(CreateMap("id":"p2", "image":"./assets/10.jpg", "alt":"","product":"Amazing Product 2", "price":"29.00", "size":"M", "sizecaption":"TShirt"))
    products.Add(CreateMap("id":"p3", "image":"./assets/9.jpg", "alt":"","product":"Amazing Product 3", "price":"35.00", "size":"L", "sizecaption":"TShirt"))
    products.Add(CreateMap("id":"p4", "image":"./assets/banner_8.jpg", "alt":"","product":"Amazing Product 4", "price":"360.00", "size":"6", "sizecaption":"Shoes"))
    products.Add(CreateMap("id":"p5", "image":"./assets/nature_01.jpg", "alt":"","product":"Amazing Product 5", "price":"530.00", "size":"9", "sizecaption":"Shoes"))
    products.Add(CreateMap("id":"p6", "image":"./assets/nature_09.jpg", "alt":"","product":"Amazing Product 6", "price":"333.00", "size":"10", "sizecaption":"Shoes"))
    products.Add(CreateMap("id":"p7", "image":"./assets/12.jpg", "alt":"","product":"Amazing Product 7", "price":"100.00", "size":"M", "sizecaption":"Trousers"))
    
    'update the parent fom the template using the list
    app.SetItemsFromTemplate(Me, "dprojects", "pcard", "", products)
    'update the selects, define id & label for the selects
    Dim shirts As Map = CreateMap("S":"Small","M":"Medium","L":"Large")
    'for these products, the 'size' select will use shirts
    app.SetSelectItemsFromTemplate(Me, "p1", "size", shirts, products)
    app.SetSelectItemsFromTemplate(Me, "p2", "size", shirts, products)
    app.SetSelectItemsFromTemplate(Me, "p3", "size", shirts, products)
    '
    'for these products, the 'size' select will use shoes
    Dim shoes As Map = CreateMap("1":"1","2":"2","3":"3","4":"4","5":"5","6":"6","7":"7","8":"8","9":"9","10":"10","11":"11","12":"12","13":"13","14":"14")
    app.SetSelectItemsFromTemplate(Me, "p4", "size", shoes, products)
    app.SetSelectItemsFromTemplate(Me, "p5", "size", shoes, products)
    app.SetSelectItemsFromTemplate(Me, "p6", "size", shoes, products)
    
    'for these products, the 'size' select will use shirts
    app.SetSelectItemsFromTemplate(Me, "p7", "size", shirts, products)

1. The select control has child elements, so to avoid conflict, we need to add these to the list of children to process for the template.
2. On the list, we have added the size and sizecaption keys. The size is also the value of each select and sizecaption will be the select label.
3. As each "size" select needs to have different items in its list, we define each select by the "id" & "size", being the id for each record and the select name. This is defined on the attributes where we set the data-id as {{id}}_size. Giving us an "p1_size", "p2_size" ... for each select.

1671471875806.png


4. We have defined shirts and trouses as key values for the select (as an example).
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Web Push Notifications using the Notifications API

Web Push Notifications using the Notifications API

Hi I just had the pleasure of looking at this Notifications API again. Below is my example. You can get more infomation about it here, https://developer.mozilla.org/en-US/docs/Web/API/Notifications_API It could be useful to your web applications. You can also use this lib in your web...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
How to execute a sub after some delayed time?

I wanted to execute a sub exactly after 2 seconds. This is possible using the setTimeOut.

B4X: 
'sub to show the page
Sub Show(duiapp As SDUIApp)            'ignore
    'get the reference to the app
    app = duiapp
    'page.AddPage(Me, name)
    'page.Root.p(6)
    banano.LoadLayout(app.PageViewer, "adxplorelayout")
    'build the page, via code or loadlayouts
    SDUIShared.setTimeOut(Me, "BuildPage", 2000)
End Sub

In this example, the page will show as usual when the .Show method is called. After 2 seconds, the BuildPage sub will be called.

Happy Coding..
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
SDUITable Property Bag Updates for V1.19

This now suppots adding an image, date picker and time picker.

B4X: 
tblProps.AddPropertyImage("img", "Image", "", "12", "12", "squircle", "./assets/mashy.jpg")
tblProps.AddPropertyDatePicker("dp1", "Date Pick", "2022-12-18","",false,"left","Y-m-d","F j, Y")
tblProps.AddPropertyTimePicker("timep", "Time Pick", "14:58","",false,"left",false)

1672408128742.png


1672408150932.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Coming to V1.19 Using the SDUITreeView (with DnD)

SDUITreeView.gif


B4X: 
Private SDUITreeView1 As SDUITreeView

Adding Nodes

B4X: 
SDUITreeView1.Clear
    SDUITreeView1.AddItem("", "page", "Page", "", "", False)
    SDUITreeView1.AddItem("page", "page1", "Page 1", "", "", False)
    SDUITreeView1.AddItem("page", "page2", "Page 2", "", "", False)
    SDUITreeView1.AddItem("page", "page3", "Page 3", "", "", False)
    SDUITreeView1.refresh

Events

B4X: 
Private Sub SDUITreeView1_SelectNode (id As String)
    app.ShowSwalInfo(id)
End Sub

Private Sub SDUITreeView1_UnSelectNode (id As String)
    app.ShowSwalInfo(id)
End Sub

Private Sub SDUITreeView1_NodeDrop (id As String, parentID As String, orderNumber As String)
    app.ShowSwalInfo($"${id}, ${parentID}, ${orderNumber}"$)
End Sub
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Adding Icons To SDUITreeView

1673287431638.png


This uses font-awesome...

B4X: 
'start building the page
private Sub BuildPage
    SDUITreeView1.Clear
    SDUITreeView1.AddItem("", "page", "Page", "", "fa-solid fa-folder", False)
    SDUITreeView1.AddItem("page", "page1", "Page 1", "", "fa-regular fa-file", False)
    SDUITreeView1.AddItem("page", "page2", "Page 2", "", "fa-regular fa-file", False)
    SDUITreeView1.AddItem("page", "page3", "Page 3", "", "fa-regular fa-file", False)
    SDUITreeView1.refresh
End Sub
 
You must log in or register to reply here.

Similar Threads

Mashiane
Mashy Teaches WebApp/Website Development with BANanoVuetifyAD3 - The New Series
7 8 9
Replies
163
Views
75K
Mashiane
Mashiane
wonder
Games [eBook] Game Programming Patterns
Replies
0
Views
4K
wonder
wonder
Top