B4J Tutorial [Web][SithasoDaisy5] Designing Web Forms with SDUIPreferences - Part 1

Hi Fam

SithasoDaisy5 Demo incl Preferences Dialog Forms Builder

SithasoDaisy5 Open Source

Before you start this tutorial, please ensure that your dev environment is setup by following this tutorial.

[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

With SithasoDaisy5 coming soon, one of the easy wins is creating Web Forms without touching code. With the power of the Preferences Dialog Forms Builder, you will be soon able to create a Web bases User Interface for your web apps, all powered by b4x and banano.

This part deals with how to create your web forms, we will later get to learn how to set and get data from the form, including validation and the save this to a database.

By the end of this, you will be able to create a dialog that looks like this below. The one below is based on all components we have working so far. These are.

• Dialer / Number Spinner
• Plus Minus
• TextBox / Number / Telephone TextBoxGroup (with prepend & append icon)
• Select + SelectGroup (with prepend & append icon)
• Password + PasswordGroup (with prepend & append icon)
• DatePicker
• DateTimePicker
• TimePicker
• ColorWheel aka ColorPicker
• TextArea
• FileInput / Progress / Camera / Video / Voice
• Range
• CheckBox
• Toggle
• Rating
• Group Select
• CheckBoxGroup
• ToggleGroup
• RadioGroup
• Filter
• Avatar
• AvatarPlaceholder
• AvatarGroup
• Image
• Progress
• Link
• Label
• RadialProgress

And many many more functionalities... Here is a preview of what you have

 

[Mashiane]

Preference Dialog Forms Builder

The Preferences Dialog Forms Builder will help you create your Web Forms easily. You select a component, set its properties, are also able to preview it.
Also the b4x source code to create it will be shown. You can play with this designer right now.

Here is a free eBook of how this works when designing your web-forms. We will delve deeper in Part 2 of this thread.