SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

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

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


This class is part of SithasoDaisy.
 
Last edited:

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

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

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

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

 

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

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

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

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
 
Top