Tutorial: Jumbo_NoCodeBuilder

This project, Jumbo_NoCodeBuilder, is a tool for visually designing forms without writing code. Users can drag and drop various building blocks (Controls) onto a canvas, customize their settings in a Properties Panel, and instantly preview the final form's appearance and behavior on different devices. The Questionnaire abstraction serves as the central data structure holding the entire form definition, managed by a dedicated Context. Special Container Controls like Tabs and Accordions help organize complex layouts.

Visual Overview

flowchart TD
    A0["Questionnaire
"]
    A1["Control
"]
    A2["ControlType
"]
    A3["QuestionnaireContext
"]
    A4["Drag and Drop System
"]
    A5["Properties Panel
"]
    A6["Preview Tab
"]
    A7["Container Controls
"]
    A3 -- "Manages state of" --> A0
    A3 -- "Manages" --> A1
    A1 -- "Is of type" --> A2
    A4 -- "Manipulates" --> A1
    A4 -- "Updates state via" --> A3
    A4 -- "Uses to create" --> A2
    A5 -- "Configures" --> A1
    A5 -- "Reads/Updates state via" --> A3
    A5 -- "Renders based on" --> A2
    A6 -- "Displays" --> A0
    A6 -- "Renders" --> A1
    A7 -- "Holds" --> A1

Chapters

1. ControlType
2. Control
3. Questionnaire
4. QuestionnaireContext
5. Drag and Drop System
6. Properties Panel
7. Container Controls
8. Preview Tab