SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane · Dec 6, 2022

Creating a Multi Product Card using a single SDUICard

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

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

2. Add a div to the page

3. Add a SDUICard

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!

Mashiane · Dec 11, 2022

SithasoDaisy: PocketBase - Chatroom using Server Side Events (SSE)

Hi Using Pocketbase subscriptions, we create a chatroom, trapping the SSE.

www.b4x.com

Mashiane · Dec 13, 2022

Crypto AES Ciphering

Mashiane · Dec 15, 2022

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

This class is part of SithasoDaisy.

Mashiane · Dec 17, 2022

[BANano] SupaBase (FireBase Alternative) User SignUp & SignIn Process

Hi This is a continuation of this thread. https://www.b4x.com/android/forum/threads/banano-supabase-firebase-alternative-crud-example-with-sse.144817/ In this tutorial, we look at user sign up and the sign in process using email.

www.b4x.com

Mashiane · Dec 19, 2022

Use CallMeBot to send personal messages.

- register on CallMeBot

- sending to Telegram (use your handle)

output:

Mashiane · Dec 19, 2022

CallMeBot & WhatsApp Messages

Use your full number including country code...

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 · Dec 19, 2022

CallMeBot: Send to Facebook Messenger

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

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 · Dec 19, 2022

Update: Product Listing with Selects of Different Items

SithasoDaisyDemo CodeModule: demoGridY

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"

We set these props for it.

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.

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

Mashiane · Dec 20, 2022

What's New in Version 1.18

Have fun!

Mashiane · Dec 21, 2022

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

Mashiane · Dec 21, 2022

[SithasoDaisy] - PocketBase - How to create a Web Push Notification Server with PocketBase SSE

Hi there By the end of this, you should be able to have your own Web Push Notification Server running. Below is an example of a notification coming from a cloud deployed PocketBase server. Related Topics...

www.b4x.com

Mashiane · Dec 23, 2022

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..

alwaysbusy · Dec 23, 2022

Mashiane said:
This is possible using the setTimeOut.

There is no need to use this function. You can just use a normal B4X Timer to do that.

Alwaysbusy

Mashiane · Dec 23, 2022

I'm well aware and there are many ways to skin a cat.

Mashiane · Dec 30, 2022

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)

Brian Michael · Jan 5, 2023

Hi, i pay by paypal.
@Inside Code

Mashiane · Jan 5, 2023

Brian Michael said:
Hi, i pay by paypal.
@Inside Code

Hi Brian, thank you so much for your subscription for the webapps.

Happy New Year and stay blessed!

Mashiane · Jan 9, 2023

Coming to V1.19 Using the SDUITreeView (with DnD)

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

Mashiane · Jan 9, 2023

Adding Icons To SDUITreeView

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

SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Active Member

Expert

Expert

Expert

Similar Threads

Privacy & Transparency

Privacy & Transparency