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

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

Click to expand...

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

Click to expand...