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

Anele Mbanga
3 min readNov 27, 2023

--

Some time ago I spoke about Unboxing SithasoIONIC7 Wireframes, a Web App that I have been working on that runs inside PocketBase to create wireframes / mock ups for Ionic7 mobile apps.

Figure 1: SithasoIONIC7 Wireframes

The SithasoIONIC7 Wireframes WebApp is free to use and you can download it here. After you download it, unzip the file and double click the file named run_server_9090.bat. You will also need to ensure that port 9090 is not firewall blocked.

This will start PocketBase and then open your default web browser. If all goes well, you will see the Figure 1 depicted above in your browser.

Figure 1 above shows a reproduction of the ion-tabs example from the ionic documentation here.

Figure 2: ion-tabs (Source: Ionic Documentation)

The wireframes webapp is being built to help anyone who wants to build their Ionic wireframes. One can be a beginner who is learning Ionic. The app itself is built using vanilla javascript, using the best of ionic framework components.

One can also download their wireframes as images for later use and also is able to get a custom view guide for using SithasoIONIC, a b4x library to develop Ionic mobile apps using the b4x rapid application development framework. The b4x rapid application development framework allows anyone to develop Android, iOS, Arduo, Desktop Apps (Java) using a simple programming language called b4x, which is similar to visual basic and very powerful. All the code you write is transpiled to native code i.e. java, xcode and or javascript depending on what you are doing.

Due to this WebApp evolving, we have now included a guiding document for starters. This can be used with the Abstract Designer and is also applicable to use on the SithasoIONIC7 Wireframes app.

Instructions in the document are as simple as…

1. maincontent

The maincontent (ion-content) element will host your whole application. It will contain the ion-menu and ion-page (div with ion-page) class. This component is not visible to the eye.

1. In the B4J IDE, click the ‘Designer’ menu option.

2. Click ‘Open Internal Designer.

3. Close the ‘Form (WYSIWYG Designer)’ if its open.

4. Right click on the layout and click ‘Add View’.

5. Select ‘Custom View’. This is the menu item that you will use to add the components defined below. Clicking an item will place the component in the layout.

6. When adding components to the layout designer, you might need to resize them to fit or shrink. Usually the first item should be enlarged to fit the area where more components will be added.

7. Now, let’s start adding the components to the layout. To add each component, you will use ‘Add View’ > ‘Custom View’ and then select the component from the menu.

8. NB: It’s not compulsory to specify the ‘ParentID’ property. It has been added for very specific few cases.

********** 1 **********

Right click ‘Add View’, then ‘Custom View’, then click ‘SHIonContent’.

Change the following properties for the ‘SHIonContent.maincontent’ component.

Name -> maincontent

Ion Page -> false

Please note that the instructions above might not make a lot of sense as yet, however, if you have read my article about using the b4x Abstract Designer, you might be on familiar ground. You can however quicky dive into this old article: Introduction: Develop Cross Platform Apps using B4X for reference.

There are 2 videos that I have completed to take you through how to start creating your wireframes for Ionic.

Thank you so much for taking time to read the article. If you are using Ionic Framework, please give the tool a try and send me your feedback. I appreciate any kind of feedback that’s helpful.

Check me out on Github and on my YT Channel for more content.

Happy Ionic coding!

--

--