B4J Tutorial [Web][SithasoDaisy] Mashy Teaches Mobile WebApp Development using SithasoDaisy Wireframes

Hi Fam.

NB: PLEASE DO NOT POST QUESTIONS ON THIS THREAD, RATHER START A NEW THREAD WITH YOUR QUESTION

21-May-2024

• The first beta (tryout) version of SithasoDaisy Wireframes it out. Catch it here
• Download, unzip the file and double click the ".bat" file to start the app.

First, think Abstract Designer.

The same steps indicated here are the same steps you will take when using the abstract designer. You will achieve the same outcomes.

You have (a) a tree view that shows how your HTML tree looks like, (2) properties to change an elements properties (just like in the abstract designer) and (3) resources - images and files you will use in your project.

Let's watch an Introductory Video...


Let's go!.

Related Content

[Web][SithasoDaisy Wireframes]: Unleash the Force of Ultimate Web MobileApp Design

Hi Fam Download (unzip the file and double click the .bat file to start the app) ***** PRE LAUNCH ***** Hey there, fellow web enthusiasts! Are you tired of the cumbersome process of designing mobile web applications? Do you wish there was a tool that could streamline your workflow and unleash...

www.b4x.com

 

[Mashiane]

1. Creating a Page - SDUIPage

In the abstract designer, one uses the SDUIPage Component.

In the wireframes app, click Pages > Page

The "name" / "component name" will be the next available page name. You can change this to be any page name you prefer. Also change the "Page Name" property to reflect this page name.

Update the property bag to reflect these changes..

Also change the Paddings property to be

a=?; x=?; y=?; t=?; b=?; l=?; r=?

These CSS properties mean

a=padding
x= left & right padding
y=top & bottom padding
t=top padding
b=bottom padding
l=left padding
r=right padding

NB: In b4j, the "ParentID" is built in as "pageview". For our purposes of the wireframe app, we will use devicedynamic i.e. show the design inside the "device" view.

The properties you see here are only the ones that we have changed in our property bag. This creates a page with a full width and full height with a background as per image as indicated in the first post.

NB: If you dont want your page to have a background image, just blank out the BackgroundImage property.

NB: PLEASE DO NOT POST QUESTIONS ON THIS THREAD, RATHER START A NEW THREAD WITH YOUR QUESTION

 

[Mashiane]

2. Adding a ToolBar to a Page - SDUIToolBar

To add a page to our page, we will use this menu combination..

We then update the properties of this toolbar to reflect this.. NB. There are some properties that are already set by default, so we wont update those, but just change these ones.

Has Logo - our toolbar will have a logo
Logo Shape - the shape of our logo will be squircle
Bg Color - the background color of the toolbar will be transparent
Text Color - the text color of our toolbar will be white.

You can also use your own image by updating the Logo URL property.

As noted above, the ParentID of the logo is "page1". This means its placed inside the page component.

When using the abstract designer, whilst you can place the SDUILogo anywhere, specifying its parent will ensure that the HTML tree is built to follow that approach.

You are encouraged to play around with other properties in the property bags to see what they will achieve.

Remember, there is no expectation to remember everything, however with practice you will be closer to perfection.

Final Output - this should be your final output

Have fun!

NB: PLEASE DO NOT POST QUESTIONS ON THIS THREAD, RATHER START A NEW THREAD WITH YOUR QUESTION

 

[Mashiane]

3. Exploring Other Components

All the components in the wireframe application are based on already existing SDUI components. These are accessible from the various menus. 1. One selects a component, 2. Updates its properties (just like one would do in the abstract designer) and 3. Save the component. The component will be placed inside the "ParentID" component.

NB: PLEASE DO NOT POST QUESTIONS ON THIS THREAD, RATHER START A NEW THREAD WITH YOUR QUESTION

 

[Mashiane]

4. An Introductory Video..

Hi Fam

The first beta (tryout) version of SithasoDaisy Wireframes it out. Catch it here, https://github.com/Mashiane/SithasoDaisy-Wireframes

Download, unzip the file and double click the ".bat" file to start the app.

This is a BANano based project powered by PocketBase



NB: PLEASE DO NOT POST QUESTIONS ON THIS THREAD, RATHER START A NEW THREAD WITH YOUR QUESTION

 

[Mashiane]

5. Wireframing a Numeric KeyPad

The link to the video is below.

SithasoDaisy - Wireframing a TailwindCSS Numeric KeyPad using DaisyUI.mp4 - Shared via TeraBox

TeraBox offers up to 1024GB of free cloud storage. Download the app for secure storage and file sharing anytime, anywhere.

terabox.com

 

[Mashiane]

6. SDUIOffCanvas (Top / Bottom / Left / Right) Sheets

Open this example on your mobile device.

Sithaso Off Canvas

Sithaso Daisy Design System

sithaso-daisy-off-canvas.vercel.app

YouTube

Share your videos with friends, family, and the world

youtube.com