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

Hi there

Live Demo

We did it again... Now you can create beautiful and awesome native looking mobile apps using SithasoIONIC7, a wrap of the Ionic 7 framework using vanilla JS.

See our Learning Channel.
Please ask your questions here:

A certificate of appreciation is $25 for the b4xlib, you can send it to Paypal and please include a note that says SithasoIONIC7.

Here are some demos, more are coming..



You get the b4xlib, the demo applications featured above and support in developing your apps.

Have fun and enjoy!

Yours

Anele 'Mashy' Mbanga

PS: You can run the complete demo fro your own webserver, download it from GitHub!

Related Content:




 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
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
 

vividpixel

New Member
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

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
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.



Enjoy!
 

Mashiane

Expert
Licensed User
Longtime User
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







The SplitPane is useful when you want to develop Desktop WebApps





Updated Sithaso7 Demo WebApp

Download Wireframe App

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

Enjoy
 

Mashiane

Expert
Licensed User
Longtime User
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.
 

Attachments

  • countryitemlayout.zip
    2 KB · Views: 112

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates - ChartKick

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


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

 

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates: How to use HTML templates / layouts

Example Project

 

Mashiane

Expert
Licensed User
Longtime User
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]
 
Cookies are required to use this site. You must accept them to continue using the site. Learn more…