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

Hi Fam.

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

21-May-2024


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.

1715960258782.png


Let's watch an Introductory Video...


Let's go!.

Related Content

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
1. Creating a Page - SDUIPage

wireframe 1715961183624.png


In the abstract designer, one uses the SDUIPage Component.

In the wireframes app, click Pages > Page

1715960480068.png


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..

1715960700242.png


Also change the Paddings property to be

B4X:
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
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
2. Adding a ToolBar to a Page - SDUIToolBar

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

1715961693414.png


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.

1715961790177.png

1715961739790.png


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.

1715961882848.png


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

FinalPage.png




Have fun!

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

Mashiane

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

MashyTeachesMWA01.gif


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

Mashiane

Expert
Licensed User
Longtime User
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
 
Last edited:
Top