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

Asking Questions

[Web][SithasoDaisy5] Questions & Answers

Hi Fam This thread is for asking any question related to SithasoDaisy5. When posting a question, please provide as much information as possible to reproduce your question especially when reporting a bug. Here is the template: SithasoDaisy5 Version Number (e.g. 5.23): Browser e.g Chrome: B4J...
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
PLEASE DO NOT POST QUESTIONS ON THIS THREAD. IF YOU WANT TO ASK A QUESTION, PLEASE START A NEW THREAD WITH [SITHASODAISY5] PREFIXING THE SUBJECT OF YOUR QUESTION. THANKS IN ADVANCE FOR YOUR CO-OPERATION.


SithasoDaisy5 Question & Answers

Please use this thread to ask your questions:

[Web][SithasoDaisy5] Questions & Answers

Hi Fam This thread is for asking any question related to SithasoDaisy5. When posting a question, please provide as much information as possible to reproduce your question especially when reporting a bug. Here is the template: SithasoDaisy5 Version Number (e.g. 5.23): Browser e.g Chrome: B4J...
www.b4x.com www.b4x.com
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates - SDUI5Modal

Fixed a bug on the modal when displaying HTML content.

More Modal Types have been added and new events

B4X: 
#Event: Ok_Click (e As BANanoEvent)
#Event: Retry_Click (e As BANanoEvent)
#Event: Abort_Click (e As BANanoEvent)
#Event: Ignore_Click (e As BANanoEvent)

These are the action types that you can now choose

B4X: 
cancel|no|yes|yes-no|yes-no-cancel|ok-cancel|retry-cancel|abort-retry-ignore

  • Cancel - will show cancel button only. Use Cancel Event
  • No - will show no button only. Use No Event
  • Yes-No - will show Yes and No button. Use Yes & No Event
  • Yes-No-Cancel - will show Yes, No and Cancel, Use Yes, No and Cancel Events
  • Ok-Cancel - will show Yes and Cancel buttons. Update the YesCaption to Ok, use Ok and Cancel Events
  • Retry-Cancel - will show Yes and Cancel buttons. Update the YesCaption to be Retry, use Retry and Cancel Events
  • Abort-Retry-Ignore - will show Yes, No and Cancel Buttons. Update the YesCaption to be Abort, NoCaption to be Retry and CancelCaption to be Ignore, Use Abort, Retry and Ignore Events
 
  • Like
Reactions: byz
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates

SDUI5DropZone - this is useful to upload files via PHP. We have upload.php file included in SIthasoDaisy5. This will be stored in assets. Ensure there is a files folder created in your deployment. This fires an event each time a file is completed uploading.

B4X: 
Private Sub SDUI5DropZone1_Complete (FileObj As Object)
    Log(FileObj)
    
    Dim fd As FileObject = BANano.Await(app.GetFileDetails(FileObj))
    Log(fd)
    Dim sDataURL As String = BANano.Await(app.readAsDataURLWait(FileObj))
    Log(sDataURL)
End Sub


 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Changes

Video & Music Player

Play YouTube, Vimeo & Music Files



PLEASE DO NOT POST QUESTIONS ON THIS THREAD.

To ask questions, visit this thread below.

[Web][SithasoDaisy5] Questions & Answers

Hi Fam This thread is for asking any question related to SithasoDaisy5. When posting a question, please provide as much information as possible to reproduce your question especially when reporting a bug. Here is the template: SithasoDaisy5 Version Number (e.g. 5.23): Browser e.g Chrome: B4J...
www.b4x.com www.b4x.com
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates...

Dynamic Treeview (work in progress)

For this component I decided to try Github Copilot. Its amazing. Its been a couple of days and the output is finally close to what I need this to do. I like that it feels so much at home with other components.

Runtime Features

  • Add nodes
  • Update nodes
  • Check nodes recursively
  • Uncheck nodes
  • Delete nodes recursively
  • Inline Editing
  • Etc

TreeNodeEdit1.gif
TreeCollapseExpand.gif
TreeNodeEdit.gif
TreeCheckNode.gif


github.com

GitHub - Mashiane/DaisyUI-TreeView: A DaisyUI TreeView Component

A DaisyUI TreeView Component. Contribute to Mashiane/DaisyUI-TreeView development by creating an account on GitHub.
github.com github.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
The treeview has been tested and is doing well..

[Web][SithasoDaisy5] Exploring the SDUI5TreeView

Hi Fam Demo DaisyUI TreeView is a customizable tree view component that supports features like drag-and-drop, inline editing, multi-selection, and dynamic node management. It allows developers to create interactive and accessible tree structures. The SDUI5TreeView is a new custom component...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates

Advanced CheckBoxGroup - this component is useful when you have a lot of options to choose from for CheckBoxes, Radios and Toggles. It creates columns that you can specify, for example here is 3.

1746759418650.png


Here is the code to initialize and trap events

B4X: 
'Static code module
Sub Process_Globals
    Private BANano As BANano        'ignore
    Private app As SDUI5App            'ignore
    Private grp1 As SDUI5AdvancedCheckGroup
    Private grp2 As SDUI5AdvancedCheckGroup
    Private grp3 As SDUI5AdvancedCheckGroup
End Sub


Sub Show(MainApp As SDUI5App)
    app = MainApp
    BANano.LoadLayout(app.PageView, "advancedcheckgroupview")
    pgIndex.UpdateTitle("SDUI5AdvancedCheckBox")
    '
    Dim iCnt As Int = 0
    Dim nm As Map = CreateMap()
    For iCnt = 0 To 19
        Dim k As String = $"key${iCnt + 1}"$
        Dim v As String = $"Option ${iCnt + 1}"$
        nm.Put(k, v)
    Next
    grp1.SetOptionsMap(nm)
    grp2.SetOptionsMap(nm)
    grp3.SetOptionsMap(nm)
End Sub


Private Sub grp3_Change (e As BANanoEvent)
    Dim checked As List = e.Detail
    Log(checked)
End Sub

Private Sub grp2_Change (e As BANanoEvent)
    Dim checked As List = e.Detail
    Log(checked)
End Sub

Private Sub grp1_Change (e As BANanoEvent)
    Dim checked As List = e.Detail
    Log(checked)
End Sub
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Upcoming Updates

Context Menu

TreeViewContextMenu.gif


B4X: 
const contextMenu = document.getElementById("contextMenu");
  // Add root menu items
  contextMenu.addItem("", "openFile", "", "Open File");
  contextMenu.addItem("", "myFiles", "", "My Files");
  // Add submenu items under "My Files"
  contextMenu.addItem("myFiles", "file1", "", "File 1");
  contextMenu.addItem("myFiles", "file2", "", "File 2");
  // Add another root menu item
  contextMenu.addItem("", "settings", "", "Settings");
// Listen for the custom ItemClick event
  // Listen for the custom ItemClick event
  contextMenu.addEventListener("ItemClick", (event) => {
    console.log("Item clicked:", event.detail.node);
    console.log("Triggered by element ID:", event.detail.elementId);
  });
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
5.37 Updates...

WhatsApp component now accepts html tags on message. e.g. <br> for line break, <b> for making content bold etc.

1747741459367.png


You can download it now..

Update: Above HTML tags, one is now able to use WhatsApp Text Formatting

*bold this content*
_make this text italic_
~make text subscript~

and

\n (line break / br
 
Last edited:
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Leaflet Map with SithasoDaisy

[Web] [SithasoDaisy5] Using LeafLet Maps

Hi Fam The next update of SithasoDaisy will have Leaflet Maps. These will be available via the abstract designer... One will be able to trap both map and marker events... So far, we have these events #Event: BaseLayerChange (e As BANanoEvent) #Event: OverlayAdd (e As BANanoEvent) #Event...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Office Ribbon with SithasoDaisy5

[Web] [SithasoDaisy5] Using the Office Ribbon Component in your projects.

Hi Fam I've found this amazing Office Ribbon component from Syncfusion... been exploring how to add it in an easy fashion to SithasoDaisy5. Fortunately one is able just to select the components they need and include them in their app. One needs to get a free account and license to use the...
www.b4x.com www.b4x.com
 
Mashiane

Mashiane

Expert
Licensed User
Longtime User
Version 5.57 is out...

What's New

1. Table Title can now have icon.
2. NavBar can have a search input with trappable events. Trap search click, key up and search clear events

B4X: 
Sub GetSearchValue As String
    Dim searchString As String = appnavbar.SearchValue
    Return searchString
End Sub

Sub SetSearchValue(s As String)
    appnavbar.SearchValue = s
End Sub

Private Sub appnavbar_SearchClick (Value As String)
    App.ShowSwalSuccess($"You entered search: '${Value}'"$)
End Sub

Private Sub appnavbar_SearchKeyUp (Value As String)
    Log(Value)
End Sub

Private Sub appnavbar_SearchClear (e As BANanoEvent)
    App.ShowSwalSuccess($"Search was cleared!"$)
End Sub

3. Fixed some other bugs..

1758180431485.png


4. Low Code Folder with Examples..

Have Fun!
 
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
1K
Mashiane
Mashiane
Mashiane
  • Article
B4J Tutorial [Web][SithasoDaisy5] Designing Forms with the Abstract Designer
Replies
0
Views
640
Mashiane
Mashiane
Mashiane
[Web][SithasoDaisy2]: Mashy Teaches TailwindCSS using b4x (with eBook)
4 5 6
Replies
119
Views
41K
Mashiane
Mashiane
Mashiane
  • Article
B4J Library [BANanoVueMaterial]: The first complete opensource VueJS UX based framework for BANano
16 17 18
Replies
351
Views
91K
NGUYEN TUAN ANH
NGUYEN TUAN ANH
Top