Dev Panel
Vue d'ensemble
Le Dev Panel est l'interface de développement visuel de BWEB. Il permet de créer et modifier des pages web directement dans le navigateur, sans écrire de code HTML.
Ouverture du Dev Panel
Le Dev Panel s'ouvre via l'icône en haut à droite de l'écran lorsque vous êtes connecté en tant qu'administrateur. Il se referme automatiquement quand la souris quitte la zone.
- Épingler : gardez le panneau ouvert en permanence
- Verrouiller : fixez la largeur du panneau
- Grille : affichez le quadrillage des conteneurs et blocs
Les 27 types de blocs
BWEB propose 27 types de blocs natifs pour construire vos interfaces :
| Usage | ||
|---|---|---|
| Structure | wrapper, tabs, accordion | |
| text, title, richText (Quill), code, html | ||
| image, video, icon, carousel | ||
| Navigation | button, link, menu, breadcrumb | |
| formField, fieldInput, fieldSelect, fieldTextarea, fieldCheckbox, fieldRadio, fieldInputFile | ||
| listbox, repeat/forEach, renderPage | ||
| renderFile, map, chart |
Propriétés d'un bloc
Chaque bloc dispose de propriétés configurables dans le panneau latéral :
- CSS Properties : styles visuels par breakpoint (xs, sm, md, lg, xl, 2xl)
- HTML Properties : attributs HTML (id, class, data-*)
- Object Properties : données et contenu du bloc
- Block Properties : comportement spécifique au type de bloc
- Events : interactions (onClick, onChange, onLoad)
- Constraints : règles de validation
- Conditional Display : conditions d'affichage du bloc
Drag and Drop
Réorganisez vos blocs par glisser-déposer. Le Dev Panel affiche la hiérarchie des blocs sous forme d'arborescence, et vous pouvez déplacer un bloc d'un conteneur à un autre.
Responsive Design
Le Dev Panel intègre un sélecteur de breakpoints pour prévisualiser et ajuster le design à chaque taille d'écran :
| Breakpoint | ||
|---|---|---|
| xs | < 640px | Mobile portrait |
| sm | 640px+ | |
| md | 768px+ | |
| lg | 1024px+ | Desktop |
| xl | 1280px+ | |
| 2xl | 1536px+ |
Undo/Redo
Le Dev Panel dispose d'une fonction d'annulation (Ctrl+Z) et de rétablissement (Ctrl+Y) pour revenir en arrière sur vos modifications.
Aperçu instantané
Chaque modification est visible en temps réel dans la page. Le Dev Panel communique avec le serveur 4D via WebSocket pour appliquer les changements sans rechargement de page.