B4J Library [Web][SithasoDaisy5] - Create WebSites & WebApps with the power of the Abstract Designer (OpenSource)

DISCLAIMER - TO AVOID CONFUSION, THIS IS A NEW B4XLIB AND NOT SITHASODAISY 2, THIS IS OPEN-SOURCE, SITHASODAISY 2 IS NOT
PLEASE NOTE THAT ALL REFERENCES TO THIS B4XLIB WILL BE [SithasoDaisy5] OR [SDV5]

​

1736854785728.png


SithasoDaisy5 is a wrap of the MIT based DaiyUI TailwindCSS Component library to be used on top of BANano to bring you the best of worlds when creating your websites and webapps.

Why we chose DaisyUI...

Supercharges Tailwind CSS

DaisyUI takes the power of Tailwind and simplifies it with pre-built, customizable components. You get the best of both worlds: the utility-first approach of Tailwind and the rapid prototyping ability of a component library.

Ready-to-Use Components
With DaisyUI, you have access to a wide range of components like buttons, cards, modals, alerts, and more. These are pre-styled, responsive, and look amazing right out of the box.

Themeable by Design
DaisyUI makes theming effortless. Whether you’re building a light or dark mode, or customizing your brand's palette, DaisyUI supports themes with simple, intuitive configuration.

Customizable
Unlike rigid libraries, DaisyUI components are built with Tailwind classes, so you can easily tweak them to fit your exact design needs without fighting against predefined styles.

Developer-Friendly
Its intuitive syntax is easy to learn and integrate, even for teams new to Tailwind CSS. Plus, it's well-documented, making the development process smooth and hassle-free.

Lightweight & Performant
No unnecessary bloat. DaisyUI is lightweight, keeping your bundle sizes in check and your app’s performance top-notch.

Active Community and Regular Updates
Backed by a vibrant community and maintained actively, DaisyUI is always evolving with the latest best practices and features.

Why reinvent the wheel when you can save time, effort, and resources? With DaisyUI, you can build modern, responsive, and stunning web applications faster than ever.

Don’t just take our word for it—try it out today and experience the difference!, https://daisyui.com/

Now, using the b4j abstract designer, you can now enjoy all the DaisyUI functionality using your favorate IDE. You drag and drop components, set up properties and using LoadLayout, are able to see your UI in no time, just the way you designed it.

There is still a long way to go though before we finalize SDV5.

What's New?

1. SithasoDaisy5 is a NEW b4xlib and not an update to SithasoDaisy2.
2. SithasoDaisy5 is NOT backward compatible with SithasoDaisy2.
3. The component names start with SDUI5.
4. This b4xlib cannot be used in Production Apps as yet. Things might change and code cleanups will be done.
5. FontAwesome is no longer used, for icons one should use SVG icon files.
6. Supports both Abstract Designer & Code for building the UI. The abstract designer is a low code mode of creating your UI whilst writing code to create the UI can be cumbersome. To ease this one uses getters and setters. These getters and setters match 99% of the names used in the DaisyUI documentation.
7. Works well with the latest version of BANano i.e. 9+
8. SithasoDaisy5 is OPEN-SOURCE, compared to all the previous versions of SithasoDaisy. All previous versions of SithasoDaisy are commercial products.

Try the Demo (Open Source)

1. Download BANano
2. Download SithasoDaisy5. Copy the b4xlib to your b4j additional libraries folder.
3. Open and run the Demo project.

Have fun!

Here is a YT video...


Related Thread:

[Web] The Journey towards SithasoDaisy5, a [NEW] BANano b4xlib

Hi Fam Demo SithasoDaisy 2 is currently being maintained using TailwindCSS 3 and DaisyUI 2. When we finished wrapping up the b4x version, the DaisyUI team was working on DaisyUI 3. Currently DaisyUI4 is stable, however, updating our offering to version 4 meant rewriting some of the crucial...
www.b4x.com www.b4x.com

[BANano] v2: (2) B4J Abstract Designer

DOWNLOAD THE LATEST VERSION OF BANANO: https://www.b4x.com/android/forum/threads/banano-progressive-web-app-library.99740/#post-627764 Check out part 1 of this tutorial here: https://www.b4x.com/android/forum/threads/banano-v2-b4j-abstract-designer-part-1.101531/#post-637557 INTRODUCTION Now...
www.b4x.com www.b4x.com


Tutorials

[Web] Beginning WebApp/WebSite Development with SithasoDaisy5

Hi Fam Demo Open Source B4xLib https://www.b4x.com/android/forum/threads/web-sithasodaisy5-create-websites-webapps-with-the-power-of-the-abstract-designer-opensource.165095/#content Faster, cleaner, easier, Tailwind CSS development using the Abstract Designer & b4x code You want to develop...
www.b4x.com www.b4x.com


PLEASE DO NOT ASK QUESTIONS ON THIS THREAD. WHEN YOU ASK QUESTIONS, PLEASE PREFIX YOUR QUESTION WITH [WEB][SITHASODAISY5]

​
 
Last edited:
Click to expand...
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Repo

Demo

The latest demo is now available. Please note that some components have been flagged, for example.

bugs - the component exists but has known bugs
wip - the component exists and is still being wrapped
badge - the component has not been wrapped
everything else - the component UI is complete, events could be pending.

1737569662219.png
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
The DaisyUI team is moving forward in earnest to launch...

1739441624576.png


See DaisyUI in action

We are also on their heels making sure that SithasoDaisy will be launching soon.

See SithasoDaisy5 in action

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD. WHEN YOU ASK QUESTIONS, PLEASE PREFIX YOUR QUESTION WITH [WEB][SITHASODAISY5]​
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Custom Build Components & Functionality

  • PlayGround - TailwindCSS Grid Builder
  • Date & Time Picker
  • Bottom Drawer
  • Date Timeline Picker
  • Checkbox Group
  • Toggle Group
  • Radio Group
  • Group Select
  • Validations
  • Preferences Dialog
  • Bug Fixes





PLEASE DO NOT ASK QUESTIONS ON THIS THREAD. WHEN YOU ASK QUESTIONS, PLEASE PREFIX YOUR QUESTION WITH [WEB][SITHASODAISY5]​
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Hi Fam

The company that has built the MIT based component library for TailwindCSS named DaisyUI5, which is the basis for our SithasoDaisy5 has now released DaisyUI5.



We have been on a drive to build SithasoDaisy5, the next COMPLETELY NEW iteration of SithasoDaisy with speed and perfection in line with what TailwindCSS 4 has to offer. This new BANano based b4xlib is not an update but a completely new way of developing your Single Page Application (SPA) and or Progressive Web App (PWA). This takes the full power of BANAno to the next level like RemoveDeadCode, making your apps faster and lighter. Don't just take our word for it. Check it out now with this Vercel Demo.

99.9% of what you see in the demo app is based on designs done using the b4j Abstract Designer. We will also be launching SithasoDaisy5 soon. Remember it's open source, use as you please. Have fun and enjoy this next level.

Stay blessed

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD. WHEN YOU ASK QUESTIONS, PLEASE PREFIX YOUR QUESTION WITH [WEB][SITHASODAISY5]​
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Forms & Validation

We created a form using the abstract designer and added validation to it.

Abstract Designer

1741076507507.png


RealLife Form

1741076455440.png


Validation & Getting Form Contents

B4X: 
'Static code module
Sub Process_Globals
    Private BANano As BANano        'ignore
    Private app As SDUI5App            'ignore
    Private btnCancel As SDUI5Button
    Private btnSave As SDUI5Button
    Private cboQualification As SDUI5Select
    Private chkAgree As SDUI5CheckBox
    Private chkBreakfast As SDUI5CheckBoxGroup
    Private fpImage As SDUI5FileInput
    Private gsActivities As SDUI5GroupSelect
    Private pgTasks As SDUI5Progress
    Private rdGender As SDUI5RadioGroup
    Private rgSalary As SDUI5Range
    Private rtService As SDUI5Rating
    Private txtdob As SDUI5TextBox
    Private txtfirstname As SDUI5TextBox
    Private txtlastname As SDUI5TextBox
    Private txtPersonalDetails As SDUI5TextArea
End Sub


Sub Show(MainApp As SDUI5App)
    app = MainApp
    BANano.LoadLayout(app.PageView, "validationview")
    pgIndex.UpdateTitle("Validation")
End Sub


Private Sub btnSave_Click (e As BANanoEvent)
    'begin validation of components
    app.ResetValidation
    'validate each of the elements
    app.Validate(txtfirstname.IsBlank)
    app.Validate(txtlastname.IsBlank)
    app.Validate(txtdob.IsBlank)
    app.Validate(chkBreakfast.IsBlank)
    app.Validate(gsActivities.IsBlank)
    app.Validate(rdGender.IsBlank)
    app.Validate(rgSalary.IsBlank)
    app.Validate(rtService.IsBlank)
    app.Validate(cboQualification.IsBlank)
    app.Validate(txtPersonalDetails.IsBlank)
    app.Validate(chkAgree.IsBlank)
    app.Validate(fpImage.IsBlank)
    
'    app.Validate(txtEmail.IsBlank)
'    app.Validate(txtTelephone.IsBlank)
'    app.Validate(txtAddress.IsBlank)
'    app.Validate(radGender.IsBlank)
    'check the form status
    If app.IsValid = False Then
        app.ShowToastError("Please specify all required information!")
        Return
    End If
    '
    Dim rec As Map = CreateMap()
    rec.Put("firstname", txtfirstname.Value)
    rec.Put("lastname", txtlastname.Value)
    rec.Put("date_of_birth", txtdob.Value)
    rec.Put("breakfast", chkBreakfast.Value)
    rec.Put("activities", gsActivities.Value)
    rec.Put("gender", rdGender.Value)
    rec.Put("salary", rgSalary.Value)
    rec.Put("rate_service", rtService.Value)
    rec.Put("qualification", cboQualification.Value)
    rec.Put("personal_details", txtPersonalDetails.Value)
    rec.Put("agree", chkAgree.Checked)
    rec.Put("profile_image", fpImage.GetFile)
    Log(rec)
End Sub

Private Sub btnCancel_Click (e As BANanoEvent)
    
End Sub

PLEASE DO NOT ASK QUESTIONS ON THIS THREAD. WHEN YOU ASK QUESTIONS, PLEASE PREFIX YOUR QUESTION WITH [WEB][SITHASODAISY5]​
 
You must log in or register to reply here.

Similar Threads

Mashiane
  • Article
B4J Tutorial [Web] Beginning WebApp/WebSite Development with SithasoDaisy5
Replies
1
Views
205
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mashy Teaches Mobile WebApp Development using SithasoDaisy Wireframes
Replies
6
Views
2K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy] Mastering Server Progressive Web Apps
Replies
1
Views
1K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web] [SithasoDaisy2]- Installing SithasoDaisy and creating you first TailwindCSS & DaisyUI WebApp using b4x
Replies
0
Views
1K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [BANanoVuetifyAD3] Designing WebApps/Websites/SPA/PWA with BANano+Vuetify
Replies
0
Views
2K
Mashiane
Mashiane
Top