SithasoDaisy: Mashy Teaches TailwindCSS using b4x (with eBook)

Mashiane

Expert
Licensed User
Longtime User
Get SithasoDaisy for $15 here.

Welcome to the SithasoDaisy world.



Check $5 WebApps


Join on Telegram
Get the eBook
See it in action on Netlify or
See it from a FlipBook

SithasoDaisy is a library of components built on top of TailwindCSS and the DaisyUI frameworks to help you create WebApps, WebSites, Single Page Application (SPA) and Progressive Web Apps (PWA) with the power of the b4x programming language.

When it comes to developing anything that works on the internet browser, whether it is a WebApp or a WebSite, one has to use HTML (Hyper Text Markup Language), CSS (Cascading Style Sheet) and JavaScript (a dynamic programming language used for web development).


SithasoDaisy works on top of a programming language called b4x. It is not JavaScript, and for SithasoDaisy to produce web applications, a code transpiler is used. A transpiler converts source code from one programming language to another. For example, when one uses Flutter for web, they use a programming language called Dart. When they build their application, their source code is transpiled / converted to JavaScript for it to work on the interweb. There are many other programming languages that target JavaScript, the Top 10, being:

1. Scala.js
2. Haxe
3. Dart
4. Elm
5. Imba
6. Nim
7. ClojureScript
8. ReasonML
9. Kotlin
10. TypeScript

B4X is a set of programming tools that is developed by Anywhere Software that uses Visual Basic like syntax so that anyone who wants to, can create apps. The developed apps are able to run on Windows, Linux, Mac, Apple Phones, Android Phones and Arduino IoT devices, mostly from the same code base. The family product we will use here is called b4j i.e., Basic4Java. There is also b4a (basic4android), b4i (basic4ios), b4r (basic4arduino).

Our b4x to JavaScript transpiler is called BANano. It is penned by Alain Bailleul, that is the BA in BANano, whilst Nano, you guessed it right, nanotechnology. When creating your web projects with SithasoDaisy, one can use the Abstract Designer and or write b4x code. We will show you how. To show you an idea of the stuff we will be building, let’s take a look at this image, directly from the DaisyUI website.

.....

This is an extract from the eBook.

Happy Coding

Github Link: https://github.com/Mashiane/SithasoDaisyUI

SithasoDaisy TailwindCSS WebApps​


Subscribe to SithasoDaisy TailwindCSS WebApps and get a WebApp each month of the year.

Visit https://sithasoholdings.gumroad.com/l/vwaqj to activate your subscription.

Thank you so much.

Topics

SithasoDaisy TailwindCSS Pocketbase Chatroom using SSE

SithasoDaisy: How to create a Client List Report in MS Word

SithasoDocxTemplator: Creating MS Word Documents from Dynamic Templates in JavaScript

[SithasoDaisy] How to create a Web Push Notification Server with PocketBase SSE

SithasoDaisy: Click Events and event.PreventDefault

[SithasoDaisy] Using EmailJS rest api to send emails

SithasoDaisy TailwindCSS UI Toolkit: Q & A

SithasoDaisy: Crud WebApp on Java Jetty WebServer with Pocketbase Back-End Hosted on PocketHost.IO

Exploring the b4x UltimateWebView with SithasoDaisy, #TailwindCSS + #DaisyUI UI Toolkit

SithasoDaisy WebApps - Subscription Based @ $5 Per Month

SithasoDaisy jSerial (Port) Communication WebApp Source Code

SithasoDaisy: PocketBase Database Schema & Data Sync Source Code @ $10.00

SithasoDaisy: Project Management Unit Source Code @ $5.00

[SithasoDaisy TailwindCSS] Navmenu for Desktop, Navdraw for mobile
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Lesson 1: Let's create a XyloPhone, using repetitive layouts

Source Code

XyloPhone.gif


We will use the AD to design our elements... this we will feed a moustache like structure. A user should hover and will play each key on numeric keypad.

1668128577184.png


Next, we define the keys to be added, load the template, then use that to build the UI

B4X:
'create a schema with {{}} map fields at various places
    app.AddTemplateFromLayout("itemkey", True, Array("itemkeyl1", "itemkeyl2", "itemkeyl3"))
    'define list of items to add
    Dim xkeys As List
    xkeys.Initialize
    xkeys.Add(CreateMap("id":"k_1", "height":"100%", "key":"1", "color":"red", "alpha":"C"))
    xkeys.Add(CreateMap("id":"k_2", "height":"92%", "key":"2", "color":"amber", "alpha":"D"))
    .....
    'feed the template to the parent
    app.SetItemsFromTemplate(Me, "keylist", "itemkey", "", xkeys)

We then test the click events of the keys...

XyloPhoneClickEvents.gif


Play it on Netlify - click on a key to play. Will link numeric key play soon.

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
User Boarding - Part 1

The aim is to create the whole use onboading process until user logs/signs in into the app. And also logs out.

SignIn.jpg


SignUp.jpg


FogotPasswod.jpg


AppInteface.jpg



This will cover

1. Sign In Screen
1.1 Form Validation
1.2 Prepend Icon & its background color
1.3 Append Icons & its background color
1.4. Clickable Links & Changing Color
1.5 Setting page background image
1.6 Checkbox & its color
1.7 Toggling password eye
1.8 Block Buttons & using hex colors
1.9 Flex Grid, aligning items, setting space between items

SithasoDaisyToolkit.png
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Use Boarding - Part 2

Source Code

This covers

2. Sign Up form. This shows when a user selects Sign Up (bottom right) on the screen above.
2. 1 Form validation.
2.2 Prevention of form submission by trapping the "onsubmit" event of the form.
2.3 Using HTML to design the Terms of Use and Privacy Policy in the label.

signup.png


Check it on Netlify
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
Lesson 2: Final Presentation

  • We add a glass effect to our modals
  • We remove the overlay that shows when a modal is shown, making it transparent.
  • We save and retrieve "remember me" user settings from localstorage.
  • We sign in and show the app
  • We sign off and go back to the sign in screen.

This will be converted to a b4xtemplate for multi-user apps.

 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
User Sign Up Process using PocketBase

 

Mashiane

Expert
Licensed User
Longtime User
User Sign In Process using PocketBase

 

Mashiane

Expert
Licensed User
Longtime User
Forgot Password & Password reset request

 

Mashiane

Expert
Licensed User
Longtime User
Enhancing Documentation

Updates to the eBook are being made to ensue that using the Abstract Designer is moe concise.

As an example.. lets create a signature pad. This is what we will have when concluding. The first part of the documentation will show you how to do this with code like before.

1669204013468.png


The second part of the Documentation titled Abstract Designer, will provide you a guide of how to do the same.

1. Create a layout and add a SDUIPage with a name page, then set the listed properties. The listed props indicate only the ones that were changed and the rest are left as default.

1669206899241.png



2. Add a SDUIRow with a name SDUIRow2 inside the sduipage and set these properties.

1669207056572.png


As you have noted above, we indicate the component type and with the parent id, we can learn where to place it in our abstract designer and then set the props as indicated.
1669207173901.png

As all components support the abstract designer, for the provided examples, you will find these kind of guides to help reproduce the examples. The SithasoDaisy API has more details in terms of how each component is structured.

Happy coding..
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
 

Mashiane

Expert
Licensed User
Longtime User
TailwindCSS WebApps using b4x Version 1.16 eBook

The latest single source of truth, the eBook about SithasoDaisy is full of documentation that talks about the examples and guides including the API to bring you up to speed with TailwindCSS based SithasoDaisy.

Get the latest download for yourself now.

The download link is in the first post

Kind regards.

Mashy
 

Mashiane

Expert
Licensed User
Longtime User
SithasoDaisy #TailwindCSS - Saving Base64 Images to MySQL (Crud)

In this lesson one will learn a couple of things using the abstract designer.

1. Create a table and put it inside a col, inside a row.
2. Create a modal using sduirow and sduicol and using input components.
3. Adding, Edit, Update & Delete records in MySQL.
4. Using the data-source (master and slave)
5. Using a confirm dialog
6. Using the SDUIFileInput, get base 64 string of an image
7. Save image to database field & show image field to image.
8. Show records from db table to html table.





PS: Download code from same location...
 
Last edited:

Mashiane

Expert
Licensed User
Longtime User
PocketBase Multi-User Demo Update

This example has now been updated to use the latest version of PocketBase 0.80.

Please note this had breaking changes and the demo code had to be updated for new terminology and use case.

You can download the source code from same location.

I thank you.

PS: The library version is marked as 1.17
 
Top