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

Mashiane · Sep 18, 2023

Mashiane · Sep 19, 2023

PlugIns: Color Picker

Mashiane · Sep 20, 2023

SithasoIONIC7 Demo is now hosted on DigitalOcean, powered by PocketBase WebServer.

SithasoIonic: Ionic WebApps using B4X.

144.126.202.27

Mashiane · Sep 21, 2023

Item Sliding...

Reference: https://ionicframework.com/docs/api/item-sliding

We define each item using the abstract designer:

we then use banano.loadlayoutarray to create each item...

B4X:

Sub edit_category_click(e As BANanoEvent)
    Dim editOption As SHIonItemOption = Sender
    app.ShowToastSuccess("", editOption.Tag)
End Sub

Sub delete_category_click(e As BANanoEvent)
    Dim delOption As SHIonItemOption = Sender
    app.ShowToastSuccess("", delOption.Tag)
End Sub


Sub MountCategories
    'clear the list
    PageList.Clear
    'define the items to add to the list
    Dim lstCategories As List
    lstCategories.Initialize 
    lstCategories.Add(CreateMap("id":"1", "color":"#fe4a49", "name":"Holidays"))
    lstCategories.Add(CreateMap("id":"2", "color":"#2ab7ca", "name":"Tournaments"))
    lstCategories.Add(CreateMap("id":"3", "color":"#fed766", "name":"Birthdays"))
    lstCategories.Add(CreateMap("id":"4", "color":"#e6e6ea", "name":"Meetings"))
    
    
    'loop through each category
    For Each cat As Map In lstCategories
        'number for the layout
        Dim Ret As Long
        'add the views in the layout
        Dim AllViews As Map
         'load the first item and not clear the parent
        Ret = banano.LoadLayoutArray(PageList.here, "categorylayout", False)
        Log(Ret)
        
        ' ret returns a unique number you can use to get all views
        AllViews = banano.GetAllViewsFromLayoutArray(Me, "categorylayout", Ret)
         'get the color of the item
        Dim categorycolor As SHLabel = AllViews.Get("categorycolor")
        'change the background color
        categorycolor.BackgroundColor = cat.Get("color")
        Dim categoryname As SHIonLabel = AllViews.Get("categoryname")
        categoryname.Text = cat.Get("name")
        Dim categoryedit As SHIonItemOption = AllViews.Get("categoryedit")
        categoryedit.Tag = cat.Get("id")
        'assign event
        categoryedit.OnEvent("click", Me, "edit_category_click", Null)
        Dim categorydelete As SHIonItemOption = AllViews.Get("categorydelete")
        categorydelete.Tag = cat.Get("id")
        categorydelete.OnEvent("click", Me, "delete_category_click", Null)
        'change the text of the label
        'assign events to the options
    Next
    
    'mount event categories
    'save To users collection
    'Dim rsCategories As SithasoFireBaseCollection = fb.collection("categories")
    'get the data model
    'rsCategories.SetSchemaFromDataModel(app.DataModels)
    
    
    'add categories to the list
    
    
End Sub

Mashiane · Sep 23, 2023

SithasoIONIC7 Pages - A multiple pages b4xtemplate

Demo on Vercel

Now available from the download.

vividpixel · Oct 15, 2023

This is exactly what I've been looking for to start my first substantial project that I am wanting put on both web and mobile. Wow!

Mashiane · Nov 2, 2023

Upcoming Updates: Google Map

Mashiane · Nov 17, 2023

[Web] Extended BLACK FRIDAY SALE @ 50% Off (SithasoDaisy & SithasoIONIC7)

Hi For Black Friday, we are offering both SithasoDaisy & SithasoIONIC7 @ 50% off discount. SithasoIONIC7 - emphasis on Mobile Hybrid WebApps with Native Feel https://www.b4x.com/android/forum/threads/web-sithasoionic7-ionic7-framework-powered-by-b4x-and-banano.149902/#content SithasoDaisy -...

www.b4x.com

Mashiane · Nov 24, 2023

SithasoIONIC7 1.12 Now Available

What's new..

Update of the core js / css files to Ionic 7.5.6
Support for SithasoIONIC7 Wireframes FreeWare, this now includes a custom view guide i.e. a printout of how to use the Abstract Designer to create your wireframes in the abstract designer.
New b4xtemplate with code (no layout), to create 3 pages with bottom navigation & drawer

NB: You will need to re-save your layouts.

[Web] SithasoIONIC Wireframes - A free tool for the b4x community - (Canva/Figma Alternative)

Hi there b4x community family. FUNCTIONALITY Ability to create different types of applications (Blank, SideMenu, Tab Bar (bottom navigation), Split Pane) Scrape HTML and Import into the wireframe App Download of Abstract Designer View Guide - this is a step by step instructions of how to...

www.b4x.com

Enjoy!

Mashiane · Dec 12, 2023

SithasoIONIC7 V1.17 Now Available

What's New

Component Styling / Themes - We have created custom views to help styling / theming the various components. These uses styled components for the components based on the CSS Styles provided per component.
CSS Utilities - a css utilities component has been created which can be applied to any component. This helps in adding style classes to components.
Animation - an animation component has been added which helps in applying animation to any component.
SithasoIONIC7 API Updated with the latest changes
SithasoIONIC7 Demo Updated with the latest updates
SithasoIONIC7 Wireframes App Updated with latest changes
Other Bug fixes and minor improvements

New Style /Theme Components - applicable to each component. You link the target component by specifying its "target-id"

SHIonActionSheetStyle
SHIonAlertStyle
SHIonAvatarStyle
SHIonBackButtonStyle
SHIonBadgeStyle
SHIonBreadcrumbStyle
SHIonButtonStyle
SHIonCardStyle
SHIonCardSubtitleStyle
SHIonCardTitleStyle
SHIonCheckboxStyle
SHIonChipStyle
SHIonColStyle
SHIonContentStyle
SHIonDatetimeStyle
SHIonFabButtonStyle
SHIonGridStyle
SHIonInputStyle
SHIonItemDividerStyle
SHIonItemOptionStyle
SHIonItemStyle
SHIonLabelStyle
SHIonListHeaderStyle
SHIonLoadingStyle
SHIonMenuButtonStyle
SHIonMenuStyle
SHIonModalStyle
SHIonNoteStyle
SHIonPickerStyle
SHIonPopoverStyle
SHIonProgressBarStyle
SHIonRadioStyle
SHIonRangeStyle
SHIonRouterLinkStyle
SHIonSearchbarStyle
SHIonSegmentButtonStyle
SHIonSegmentStyle
SHIonSelectStyle
SHIonSkeletonTextStyle
SHIonSpinnerStyle
SHIonSplitPaneStyle
SHIonTabBarStyle
SHIonTabButtonStyle
SHIonTextareaStyle
SHIonThumbnailStyle
SHIonTitleStyle
SHIonToastStyle
SHIonToggleStyle
SHIonToolbarStyle
SithasoStyle - universal & can be applied to any component
SHCSSUtilities - universal & can be applied to any component

SithasoIONIC7 Wireframes App (FreeWare)

Ability to create different types of applications (Blank, SideMenu, Tab Bar (bottom navigation), Split Pane)
Scrape HTML and Import into the wireframe App
Download of Custom View Guide - this help one create the app using the abstract designer. This has very detailed instructions of how to reproduce your wireframe
Wireframe JSON files to import and play with.
Automatic Update of PocketBase Back-End
Ability to archive / set in-active components
Drag n Drop components (on the treeview)
Ability to Animate & Style components & add inline classes
Ability to view only changes made on the component
Scrape HTMP and import to wireframe
Download & Upload wireframe as JSON file
Download Abstract Designer Guide

The Playlist for SithasoIONIC7 Wireframes is here.

Example Demo Apps (These are Optimized for Mobile Devices)
These apps were first built with the SithasoIONIC7 FREE Wireframe App and then coded into b4j Apps

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-prepend-append-input-icons-in-ionic7.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-anime-js-login-with-ionic7.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-beginning-login-screen-in-ionic7.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-key-pad-ui-with-ionic-7.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-ionic7-custom-bottom-sheet.vercel.app

The SplitPane is useful when you want to develop Desktop WebApps

SithasoIonic: Ionic WebApps using B4X.

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-ionic-7-split-pane.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-login-styling.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-inputs.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-swiper-js.vercel.app

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic-7-select-display-image-using-file-input.vercel.app

Updated Sithaso7 Demo WebApp

SithasoIonic: Ionic WebApps using B4X.

sithaso-ionic.vercel.app

Download Wireframe App

Get SithasoIONIC7 from same link as per email sent during purchase. The download includes the FREE SithasoIONIC7 Wireframe App.

Enjoy

Mashiane · Jan 16, 2024

Hi Fam

It's with pleasure to release SithasoIONIC7 version 1.2

This version works with BANano 8+
This uses Ionic 7.6.4
Bug Fixes and some enhancements
Additional functionality to SI7 Wireframes App.

Get it from same Google Drive Link.

Mashiane · Jan 24, 2024

Hi Fam..

I was exploring embedding layout files in the b4xlib, as a result some of the code in the b4xlib needs this layout file. This layout is used for a country picker dialog.

Please extract and include in your project.

I have raised a question on how to use layouts inside b4xlibs... perhaps with some luck that might be possible.

All the best.

Mashiane · Jan 26, 2024

Upcoming Updates - ChartKick

We once did ChartKick, which was charts using one line of code, here

[BANano] ChartJS charts with 1 line of code using UOECharts

Ola This lib is a wrap of this github The chart framework that has been adopted has been Chart.JS and one can easily create a chart with 1 line of code, as simple as.. 'load the layout to the page BANano.LoadLayout("#body","vCharts") 'line chart UOEChart1.AddXYMap(CreateMap("2017-01-01"...

www.b4x.com

The same code applies and now you can use SHIonChart to build your charts in your SithasoIONIC7 Apps

Mashiane · Feb 1, 2024

Upcoming Updates: How to use HTML templates / layouts

Example Project

[Web][SithasoIONIC7] News App UI

Hi Fam Demo (open on Mobile Device) This wireframe turned demo is inspired by Coding Technyks I have reproduced it using SithasoIONIC7 Wireframe App, been an interesting leaving curve. I had to tweak some components with new functionality to support this design. Been worth it!

www.b4x.com

Mashiane · Feb 3, 2024

Styled Components

There are some components that have computed styles as per documentation. Where ones have a lot of numerous styles, we have created custom layouts for these.
This mean when adding a component to the layout / via code, you can also apply a style to it with the built in component.

The number on the right is the number of different style properties that can be effected.

B4X:

[LIST]
[*]shionactionsheetstyle: 27
[*]shionbackbuttonstyle: 36
[*]shionbreadcrumbstyle: 9
[*]shionbuttonstyle: 27
[*]shioncheckboxstyle: 15
[*]shioncolstyle: 11
[*]shioncontentstyle: 13
[*]shionfabbuttonstyle: 27
[*]shiongridstyle: 16
[*]shioninputstyle: 21
[*]shionitemdividerstyle: 14
[*]shionitemstyle: 39
[*]shionmenubuttonstyle: 17
[*]shionmodalstyle: 16
[*]shionpickerstyle: 17
[*]shionpopoverstyle: 15
[*]shionrangestyle: 15
[*]shionsearchbarstyle: 15
[*]shionsegmentbuttonstyle: 32
[*]shionselectstyle: 19
[*]shionsplitpanestyle: 8
[*]shiontabbuttonstyle: 15
[*]shiontextareastyle: 21
[*]shiontoaststyle: 21
[*]shiontogglestyle: 16
[*]shiontoolbarstyle: 15

[/LIST]

Mashiane · Feb 19, 2024

Upcoming updates

InfoCards

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

Expert

Expert

Expert

Expert

Expert

New Member

Expert

Expert

Expert

Expert

Expert

Expert

Attachments

Expert

Expert

Expert

Expert

Similar Threads