B4J Tutorial [Web] Mashy Teaches Mobile App Development using SithasoIONIC7 powered by b4x & BANano

Mashiane · Feb 4, 2024

Creating Multiple Swiper Cards

Demo (Open on Mobile Device)

We use the new template structure to create a template for each slider and then use an array to build our slides.

B4X:

app.AddMyLayout("slides", $"<div id="swiperslide1" class="swiper-slide"><ion-card id="card1" mode="ios"><img id="img1" src="{image}" style="height:8rem"><ion-card-content id="cardcontent1" mode="ios"><ion-card-title id="cardtitle1" mode="ios" style="font-size:1rem">{title}</ion-card-title><ion-note id="note1" mode="ios">{subtitle}</ion-note></ion-card-content></ion-card></div>"$)

    Dim slides As List
    slides.Initialize
    '
    slides.Add(CreateMap("title": "Road", "subtitle": "Long road", "image": "./assets/road.jpeg"))
    slides.Add(CreateMap("title": "Mountains", "subtitle": "Big mountains", "image": "./assets/mountains.jpeg"))
    slides.Add(CreateMap("title": "Unknown", "subtitle": "This is unknown", "image": "./assets/unknown.jpeg"))
    '
    For Each item As Map In slides
        Dim itemPos As Int = app.LoadMyLayout("swiper1slides", "slides", item)
        Dim components As Map = app.GetMyViews("slides", itemPos, item)
        Dim swiperslide1 As BANanoElement = components.Get("swiperslide1")
        swiperslide1.On("click", Me, $"swiperslide1_click"$)
    Next
    swiper1.Refresh

Source code for app on the SI7 Download.

Enjoy!

skillpersian · Feb 4, 2024

Mashiane said:

Lesson 03 - Designing Drawers

You will learn how to create a drawer with a list and list items that shows an icon & label. Each list item is clickable and can fire events. You will also add a button to the menu with click functionality. The final output will look like this. This also includes adding a toast on the page and showing it at each click event.

You will also explore how to customize the elements with css files and styling. This tutorial continues from the previous one.

View attachment 145454

The complete code for this example is:

B4X:

'Static code module
'https://ionic.io/ionicons
'https://ionicframework.com/docs/
#IgnoreWarnings:12
Sub Process_Globals
    Public app As IonicApp                                'ignore
    Private BANano As BANano                            'ignore
    Private apppage As SHIonPage                        'ignore
    Private apppageheader As SHIonHeader                'ignore
    Private apppagetoolbar As SHIonToolbar                'ignore
    Private apppagestartbuttons As SHIonButtons            'ignore
    Private apppagemenubutton As SHIonMenuButton        'ignore
    Private apppagetitle As SHIonTitle                    'ignore
    Private apppagecontent As SHIonContent                'ignore
    Private appmenu As SHIonMenu                        'ignore
    Private appmenucontent As SHIonContent                'ignore
    Private appmenulist As SHIonList                    'ignore
    Private apptoast As SHIonToast                        'ignore
    Private css As SithasoCSSRules                        'ignore
End Sub

Sub Initialize
    'initialize the app, show ios mode
    BANano.Await(app.Initialize(Me, "md"))
'    'add a toast notification
    apptoast = app.Root.AddToast("apptoast", True)
'    'link the toast notification to the app
    app.SetToastController(apptoast)
'    '** APP PAGE
'    'add a page To the app
    apppage = app.Root.AddPage("apppage")
'    'add header To the page
    apppageheader = apppage.Root.AddHeader("apppageheader")
'    'add toolbar To the page
    apppagetoolbar = apppageheader.Root.AddToolbar("apppagetoolbar")
'    'add the start buttons
    apppagestartbuttons = apppagetoolbar.Root.AddButtons("apppagestartbuttons", "start")
'    'add menu button To start buttons And link it To the appmenu
    apppagemenubutton = apppagestartbuttons.Root.AddMenuButton("apppagemenubutton", "appmenu")
    apppagemenubutton.AutoHide = False
'    'add title To the page
    apppagetitle = apppagetoolbar.Root.AddTitle("apppagetitle", Main.AppName)
'    'add content To the page
    apppagecontent = apppage.Root.AddContent("apppagecontent")
    apppagecontent.IonPadding = True
    apppagecontent.Text = " Tap the button in the toolbar to open the menu. "
'    '**** APP MENU
'    'add a menu To the app And link it To the apppage
    appmenu = app.Root.AddMenu("appmenu", "apppage")
    'add menu content
    appmenucontent = appmenu.Root.AddContent("appmenucontent")
    'add menu header image & name
    Dim menuheaderbg As SHLabel = appmenucontent.Root.AddDiv("menuheaderbg", "")
'    'apply a style to the div
    menuheaderbg.AddStyle(CreateMap("background": "#7590d6"))
'    'add a class to the div
    menuheaderbg.AddClass("menuheaderbg")
    'define the class
    css.Initialize(".menuheaderbg", True)
    css.Add("height", "180px")
    css.Add("width", "350px")
    css.Add("background", "linear-gradient (90deg, #7590d6 0%, #4d71d7 100%)")
    css.Add("box-shadow", "0px 1px 10px rgba(98, 140, 255, 0.5)")
    css.Add("transform", "rotate(-15deg)")
    css.Add("border-radius", "10px 10px 10px 50px")
    css.Add("margin-left", "-18px")
    css.Add("margin-top", "-50px")
    css.Add("margin-bottom", "60px")
    css.apply
'  
'    'menu header content
    Dim headercontent As SHLabel = appmenucontent.Root.AddDiv("headercontent", "")
    headercontent.AddClass("headercontent")
    css.Initialize(".headercontent", True)
    css.Add("position", "absolute")
    css.Add("top", "30px")
    css.Add("left", "15px")
    css.Add("display", "flex")
    css.Add("align-items", "center")
    css.Apply
'    '
'    'add an image to the headercontent
    Dim headerimg As SHImg = headercontent.Root.AddImg("headerimg", "./assets/sponge.png", "", "", "")
    headerimg.AddClass("headerimg")
    css.Initialize(".headerimg", True)
    css.Add("width", "80px")
    css.Add("height", "80px")
    css.Add("border", "7px solid #5e7ccc")
    css.Add("border-radius", "50%")
    css.Add("margin-right", "14px")
    css.Apply
'    '
'  
'  
    'add a label to the headercontent
    Dim headerlbl As SHIonLabel    = headercontent.Root.AddLabel("headerlbl","")
    Private headerH2 As SHLabel    = headerlbl.Root.AddH2("headerH2", "Anele 'Mashy' Mbanga")
    headerH2.AddClass("headerh2")
    css.Initialize(".headerh2", True)
    css.Add("font-weight", "300")
    css.Add("color", "#fff")
    css.Apply
'  
    Private headerP As SHLabel = headerlbl.Root.AddParagraph("headerP", "Software Engineer")
    headerP.AddClass("headerp")
    css.Initialize(".headerp", True)
    css.Add("font-size", "12px")
    css.Add("color", "#e4e4e4")
    css.Add("font-weight", "100")
    css.Add("letter-spacing", "0.4px")
    css.apply
'  
    'menu action button
    Private actionButton As SHLabel    = appmenucontent.Root.AddDiv("actionbutton","")
    actionButton.AddClass("actionbutton")
    css.Initialize(".actionbutton", True)
    css.Add("display", "flex")
    css.Add("justify-content", "center")
    css.Add("margin-bottom", "20px")
    css.Apply
  
    'add a ion-button (ion-icon + ion-label)
    Dim btnAddBranch As SHIonButton    = actionButton.AddButtonIconLabel("btnAddBranch", "add", "Add Branch")
    btnAddBranch.AddClass("addbranch")
    css.Initialize(".addbranch", True)
    css.Add("text-transform", "capitalize")
    css.Add("font-weight", "300")
    css.Add("--background", "#628cff")
    css.Add("--border-radius", "7px")
    css.Add("--box-shadow", "none")
    css.Apply
'  
'    'get the icon inside the button and add a style to it
    btnAddBranch.GetIonIcon.AddStyle(CreateMap("margin-right": "1px"))
'    'add a list to the menu content
    appmenulist = appmenucontent.Root.AddList("appmenulist")
    'no lines
    appmenulist.Lines = appmenulist.LINES_NONE
    appmenulist.AddClass("menuitems")
    css.Initialize(".menuitems", True)
    css.Add("margin", "0px")
    css.Apply
    '
    css.Initialize(".menuitems ion-icon", False)
    css.Add("margin-right", "20px")
    css.Add("color", "#86979f")
    css.Apply
    '
    css.Initialize(".menuitems ion-item", False)
    css.Add("padding-left", "20px")
    css.Add("margin-bottom", "10px")
    css.Apply
'    'add items to the menu list
    AddMenuListItems
End Sub


Private Sub appmenulist_ItemClick (e As BANanoEvent)
    e.PreventDefault
    'get the item id from the event
    Dim itemID As String = appmenulist.GetItemIDFromEvent(e)
    'show a toast
    app.ShowToastSuccess("", itemID)
End Sub

Private Sub btnAddBranch_Click (e As BANanoEvent)
    e.PreventDefault
    'show a toast
    app.ShowToastSuccess("", "Branch button clicked!")
End Sub

Sub AddMenuListItems
    'add an item with an icon & label
    appmenulist.AddItemIconLabel("dashboard", "pie-chart-outline", "Dashboard")
    appmenulist.AddItemIconLabel("postsessions", "browsers-outline", "Post sessions")
    appmenulist.AddItemIconLabel("livesessions", "flash", "Live sessions")
    appmenulist.AddItemIconLabel("messages", "chatbubble-ellipses-outline", "Messages")
    appmenulist.AddItemIconLabel("library", "heart-outline", "Locum library")
    appmenulist.AddItemIconLabel("signout", "exit-outline", "Sign out")
'    'set the active item by adding the active class To it
    appmenulist.SetActive("messages", True)
    'NB: the active class should be prefixed by the ion-list name
    css.Initialize(".appmenulistactive", True)
    css.Add("border-left", "5px solid")
    css.Add("color", "#628cff")
    css.Add("padding-left", "15px")
    css.Apply
    'when the item Is active, also change the icon color
    css.Initialize(".appmenulistactive ion-icon", True)
    css.Add("color", "#628cff")
    css.Apply
End Sub

From Iran ✋️ Hello, have a good time, dear friend, don't get tired, thank you for your effort and hard work, I need your books for this project, please send them via email.

my Email is : mohamadrezapirzade@gmail.com

Mashiane · Feb 4, 2024

skillpersian said:
From Iran ✋️ Hello, have a good time, dear friend, don't get tired, thank you for your effort and hard work, I need your books for this project, please send them via email.

my Email is : mohamadrezapirzade@gmail.com

Thank you for your kind words. SithasoIONIC7 is a commercial product available for a certificate of appreciation amounting to $25. You need that to create mobile apps with SithasoIONIC7.

Here is the b4xlib details, https://www.b4x.com/android/forum/t...kit-powered-by-b4x-and-banano.149902/#content

You can get it via PayPal, https://paypal.me/anelembanga?country.x=ZA&locale.x=en_US

I have been running sales throughout the year and the next one is coming out soon.

It comes with a free Wireframe Application also to enable anyone to create their mockups.

More details are here, https://www.b4x.com/android/forum/t...l-ionic-7-mobile-apps-designs.157607/#content

Mashiane · Feb 4, 2024

Creating DropDown Menu

Demo

This is created using a popover which is triggered by the button click. Inside the popover we have a list and we add items in the list.
Each item has an icon on the start slot and a label.

B4J Tutorial [Web] Mashy Teaches Mobile App Development using SithasoIONIC7 powered by b4x & BANano

[Web] SithasoIONIC7 Wireframes: A Step-by-Step Guide to Professional Ionic 7 Mobile Apps Designs

[Web][SithasoIONIC7] Ionic7 Framework MobileKit Powered by B4x and BANano

[Web] SithasoIONIC7 Mobile WebApp Development Q & A

[Web] Mashy Teaches Mobile App Development using SithasoIONIC7 powered by b4x & BANano

Mashiane

Expert

skillpersian

New Member

Attachments

Mashiane

Expert

Mashiane

Expert

Attachments

Similar Threads