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

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 28, 2023

Mashiane · Aug 29, 2023

Mashiane · Aug 29, 2023

The Demo hosted on Vercel has been updated.

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic.vercel.app

The complete API for SithasoIONIC7 is now available in light of the documentation. It is based on the Ionic Website documentation, adopted for b4x.

Enjoy!

PS: The helper functions will be removed as these can be executed by using BANanoCSSUtils, these are

.AddClass, AddAttr, AddStyle etc.

Mashiane · Aug 30, 2023

Lesson 01

By the end of this lesson, you should be able to create your first app. It will look like this and is based on a blank template.
This is just to ensure that you are ready to start.

With this lesson, you will create a page, a header, a toolbar, a toolbar title, a page content and then place the page content at the center of the page. You will also add a link to a page which will open another page.

Ensure that in your project you have loaded the SithasoIONIC7 and BANano b4xlibs.

Using the abstract designer, you will create 2 layouts for this, one named applayout and the other named appcontent

applayout

appcontent

Step1 : creating the applayout.

1. Open the abstract designer and place SHIonPage, SHIonToast and SHIonLoading, save it as applayout.
2. Change the names to be SHIonPage > apppage, SHIonToast > apptoast and SHIonLoading > apploading.
3. Update the properties for apppage to be...

This changes the default properties for the page...

2.Creating the appcontent

Create a blank layout, save it as appcontent, you will use the SHLabel component for this.

2.1 place an SHLabel on this container, change the name to be container. Enlarge it so that you can place some components inside it.
2.2 change the size of this component to be div.
2.3 Place an SHLabel inside the "container" component in the abstract designer, leave it as SHLabel1, change its properties to be..

2.4 Place another SHLabel inside the "container" component below SHLabel2, leave it as SHLabel2, change the Text property to be "Start with "
2.5 Place another SHLabel inside SHLabel2, leave it as SHLabel3, update its properties to be

and also set the target to be _blank.

You can style any component in your app by using the SHStyle component. This expects the target that you want to style and then you can indicate the classes, styles, attributes that need to be added to that component.

2.6. Drop a SHStyle component on the layout, change the name to be containerstyle update its properties to be

We want whatever styles specified here to be applied to an element with target id "container", i.e. our SHLabel we named "container" just above. So we specify the target id as "container". We want to change the top margin, so in the margins we specify t=50%.

a means all margins, i.e being margin-top, margin-right, margin-bottom, margin-left.
x means left & right margins ie margin-left and margin-right
y means top & bottom margins i.e. margin-top and margin-bottom
t means top margin i.e. margin-top
b means bottom margin i.e. margin-bottom
l means left margin i.e margin-left
r means right margin ie. margin-right.

The same applies to the Padding property (which is not used here)

Now let's update the code in pgIndex

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 apptoast As SHIonToast                        'ignore
    Private apploading As SHIonLoading                    'ignore
    Private apppage As SHIonPage                        'ignore
End Sub

Sub Initialize
    'initialize the app, show material design mode (ios|md)
    app.Initialize(Me, "md")
    'load our layout
    BANano.LoadLayout(app.Here, "applayout")
    'load this layout inside the content of the page
    BANano.LoadLayout(apppage.PageContent.Here, "appcontent")
    'set up controllers
    app.SetToastController(apptoast)
    app.SetLoadingController(apploading)
End Sub

We initialize our app. This can be in ios/md modes, we will use md (material design mode). Remember, you can generate members for the Process_Globals variables..

If you do, add 'Ignore at their end, this is kind of a false positive, we dont want any warnings in our b4j IDE.

In our code, we load the main layout, which "has content" i.e an ion-content component inside it. We then load another layout to load components inside that content component. This results in the design you finally see.

I have attached the source code of the Lesson 01 here for reference.

You can get SithasoIONIC7 b4x with a certificate of appreciation to the cost of $25 from PayPal. Please add a note for SithasoIONIC7 when sending.

Happy Mobile App Development!

Mashiane · Aug 31, 2023

Lesson 02 - Coding your app.

By the end of this lesson, you would have created a base app with a drawer, all via code. We have avoided a lot of pre-defined code / templates for SithasoIONIC7 so that the developer can use their own creativity. Nothing is set in stone.

This is what you will create...

This uses the SHIonPage, SHIonMenu, SHIonMenuButton, SHIonHeader, SHIonToolbar, SHIonTitle, SHIonButtons and SHIonContent components. As seen above, both the drawer and page have headers. These headers have a toolbar and title. The header for the page also has a menu button, which is added inside a collection of SHIonButtons.

The code to produce this "page" and "drawer" is straightforward as...

B4X:

Sub Initialize
    'initialize the app, show ios mode
    app.Initialize(Me, "md")
'    '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", "SithasoIONIC7")
'    '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. "
'    'add a menu To the app And link it To the apppage
    appmenu = app.Root.AddMenu("appmenu", "apppage")
'    'add a header To the menu
    appmenuheader = appmenu.Root.AddHeader("appmenuheader")
'    'add toolbar To the menu
    appmenutoolbar = appmenuheader.Root.AddToolbar("appmenutoolbar")
'    'add title To the menu toolbar
    appmenutitle = appmenutoolbar.Root.AddTitle("appmenutitle", "BANano")
'    'add the menu content To the menu
    appmenucontent = appmenu.Root.AddContent("appmenucontent")
    appmenucontent.IonPadding = True
    appmenucontent.Text = "Powered by b4x"
End Sub

Mashiane · Sep 1, 2023

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.

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

Mashiane · Sep 2, 2023

Lesson 04 - Creating a tree-like structure on the Drawer/Menu

By the end of this lesson, you would have been able to create a tree-like structure on the drawer. This is items with child items. To be able to do this we need to use and accordion group and each accordion item will have a header and a list.

This is the final result.

We continue on lesson 03 and remove the rest of the content and then from the menu add the accordion group and accordion items.

B4X:

'    '**** APP MENU
'    'add a menu To the app And link it To the apppage
    appmenu = app.Root.AddMenu("appmenu", "apppage")

We add the first parent child items

B4X:

'add an accordion to the menu
    Dim appmenutree As SHIonAccordionGroup = appmenu.Root.AddAccordionGroup("appmenutree")
    Dim node1 As SHIonList = appmenutree.Root.AddAccordionHeaderContentList("node1", "Accounting")
    node1.AddItemIconLabel("account1", "accessibility-outline", "Account 1")
    node1.AddItemIconLabel("account2", "add-circle-outline", "Account 2")
    node1.AddItemIconLabel("account3", "airplane-outline", "Account 3")

and then we add the rest...

B4X:

'add an accordion item with a header which is a list
    Dim node2 As SHIonList = appmenutree.Root.AddAccordionHeaderContentList("node2", "Human Resources")
    node2.AddItemAvatarLabel("hr0", "./assets/sponge.png", "Employee 0")
    node2.AddItemAvatarLabel("hr1", "./assets/1.jpg", "Employee 1")
    node2.AddItemAvatarLabel("hr2", "./assets/2.jpg", "Employee 2")
    node2.AddItemAvatarLabel("hr3", "./assets/3.jpg", "Employee 3")
    '
    Dim node3 As SHIonList = appmenutree.Root.AddAccordionHeaderContentList("node3", "Mathematics")
    node3.AddItemBadge("semester1", "10", "Semester 1")
    node3.AddItemBadge("semester2", "20", "Semester 2")
    node3.AddItemBadge("semester3", "30", "Semester 3")
    node3.AddItemBadge("semester4", "40", "Semester 4")
  
    Dim node4 As SHIonList = appmenutree.Root.AddAccordionHeaderContentList("node4", "Education")
    node4.AddItemCheckbox("task1", "Task 1")
    node4.AddItemCheckbox("task2", "Task 2")
    node4.AddItemCheckbox("task3", "Task 3")
    node4.AddItemCheckbox("task4", "Task 4")
  
    'bind item click events
    'important if you want to trap click events on the list items
    appmenu.BindItemClickEvent(Array("account1", "account2", "account3","hr0", "hr1", "hr2", "hr3"))
    appmenu.BindItemClickEvent(Array("semester1", "semester2", "semester3","semester4"))

You will notice that there is a BindItemClickEvent added to the list. We need this to trap the click event of each item via the menu and not via the individual list. This we just need 1 event handler and not node1_itemclick, node2_itemclick, node3_item click etc, as it is normally.

We then trap the item click events on the menu, and display the clicked item on a toast.

B4X:

Private Sub appmenu_ItemClick (e As BANanoEvent)
    Dim itemID As String = e.ID
    itemID = SDUIShared.MvField(itemID, 1, "_")
    app.ShowToastSuccess("", itemID)
End Sub

The last items of the menu have check boxes. We can trap each change of the checkbox with

B4X:

Sub task1_ionchange (value As Boolean)
    app.ShowToastSuccess("Task 1", value)
End Sub

Sub task2_ionchange (value As Boolean)
    app.ShowToastSuccess("Task 2", value)
End Sub

Sub task3_ionchange (value As Boolean)
    app.ShowToastSuccess("Task 3", value)
End Sub

Sub task4_ionchange (value As Boolean)
    app.ShowToastSuccess("Task 4", value)
End Sub

Happy Coding

Mashiane · Sep 2, 2023

Lesson 05 - Add items to the ToolBar e.g. button & toggle button - we change the theme to dark.

In this lesson we add a button to the toolbar including a toogle button, we change the app theme to be dark.

The toolbar has a section to add buttons on both sides. Currently the left part has the menu button, that we click to activate the menu. We can also add a section to hold the right buttons. We will add an add button and a toggle element to these.

We first define them.

B4X:

Private tglDark As SHIonToggle                        'ignore
    Private apppageendbuttons As SHIonButtons            'ignore
    Private btnAdd As SHIonButton                        'ignore

We update our code for the app toolbar. In additions to the buttons on the "start" slot, we add buttons for the "end" slot. In the start buttons we have a menu button, then for the "end" ones we have a button icon with + and a toggle.

B4X:

apppagestartbuttons = apppagetoolbar.Root.AddButtons("apppagestartbuttons", "start")
    'add the end buttons
    apppageendbuttons = apppagetoolbar.Root.AddButtons("apppageendbuttons", "end")
'    'add menu button To start buttons And link it To the appmenu
    apppagemenubutton = apppagestartbuttons.Root.AddMenuButton("apppagemenubutton", "appmenu")
    apppagemenubutton.AutoHide = False
    'add an add button to the right buttons
    btnAdd = apppageendbuttons.Root.AddButtonIconOnly("btnAdd", "add-outline")
    'set the right margin for the button
    BANanoCSSUtils.AddStyle(btnAdd.Element, "margin-right", "4px")
    'add a toggle to the right buttons
    tglDark = apppageendbuttons.Root.AddToggle("tglDark", "")
'    'add title To the page
    apppagetitle = apppagetoolbar.Root.AddTitle("apppagetitle", Main.AppTitle)

we then trap the events for the add button and the toggle element..

B4X:

'trap the click event of the add button in the toolbar
Private Sub btnAdd_Click (e As BANanoEvent)
    e.PreventDefault
    app.ShowToastSuccess("Add", "The click button has been clicked!")
End Sub

'trap the change event of the toogle component in the toolbar
Private Sub tglDark_IonChange (value As Boolean)
    app.ShowToastSuccess("Toggle", value)
    app.DarkTheme(value)
End Sub

Mashiane · Sep 20, 2023

Deploying FrontEnd + BackEnd PocketBase SQLite WebServer WebApp on DigitalOcean.

[Web] Deploy PocketBase SQLite WebServer WebApp on DigitalOcean (FrontEnd + BackEnd)

Hi There is a marketplace available deployment on.. https://marketplace.digitalocean.com/apps/pocketbase Use SHH Option. Ive found that using WinSCP is rather easier to connect to the droplet too. All the best!

www.b4x.com

Mashiane · Sep 23, 2023

Lesson 06: Reproducing Ionic Documentation Header Examples using the Abstract Designer

Good day, by the end of this tutorial, you would have created an ionic page with a header, toolbar, a title and content.
From the ionic documentation, the tree structure of the user interface has been defined, using various components, we will create that with b4x.
The first component is the ionic-header, we also add it in our abstract design.
Inside the header, there is an ionic-toolbar, we also add a toolbar inside our header in the abstract design.
Note that in the abstract design, the toolbar is placed inside the header, to follow the same tree like structure in the documentation.
Inside the toolbar, we have an ionic-title, we also have added that in our abstract design.
As you can see now, we have a header, inside it a toolbar and inside the toolbar, a title. This completes our tree structure just like in the documentation.
Beneath the header, we have an ionic-content component, lets do the same in our abstract design. This has an ion-padding class, we will check the ion-padding property too.
Inside the ion-content, we have a header 1, we will use a label to add this, and select h1- as a size, and place it inside the ion-content component. We set the text of this label as content, just like in the documentation.
Each component in the abstract design has a name, this can be converted into a variable of the same class and also be able to link events to it. This is done via generating members.
The variable names for the components will be defined as global variables under process globals.
To run our app, we first define and initialize an app class. After that we load our abstract design. we then run the app to create the web app.
The b4x I.D.E starts the banano transpiler and creates a javascript version of our code. This will be then be published to our local development webserver and shown in our default browser.
We have successfully re-created our ionic user interface with Sithaso Ionic7.

Enjoy!

Mashiane · Sep 23, 2023

SithasoIONIC7 Pages - A multiple pages b4xtemplate

Now available from the download..

Mashiane · Dec 26, 2023

Hi Fam...

The way forward on learning how to build apps with SithasoIONIC has been made into the Wireframe App. Follow as we create the apps with wireframes, generate the Abstract Designer Guide and reproduce the apps. Wireframes are also available as JSON files from your SithasoIONIC7 Download.

Here is the link..

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

Good day family... ANNOUNCEMENT: 07 Feb 2014 - We welcome the Voice Command KITT (#23) So I tried my first voice recording today. I wanted to make a live recording, will learn how to do that soon enough. Please receive my apologies about the sound quality, Im using my phone earphones and...

www.b4x.com

If you have questions, please post them here>

[Web] SithasoIONIC7 Mobile WebApp Development Q & A

Hi there You have a question about SithasoIONIC7, please hit us up here. If you have a question on an existing project you are working on, please include a simple small project so that I can reproduce the challenge and help you in that project. Kind Regards #Thanks in advance for your...

www.b4x.com

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

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Attachments

Expert

Expert

Attachments

Expert

Expert

Similar Threads