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

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


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

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

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

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

5. Wireframing a Numeric KeyPad

The link to the video is below.

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

Open this example on your mobile device.