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 ecrire de code HTML.
Ouverture du Dev Panel
Le Dev Panel s'ouvre via l'icône en haut à droite de l'écran lorsque vous etes connecte en tant qu'administrateur. Il se referme automatiquement quand la souris quitte la zone.
- Epingler : 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 :
| Categorie | Types de blocs | Usage |
|---|---|---|
| Structure | wrapper, tabs, accordion | Organiser et grouper les éléments |
| Contenu | text, title, richText (Quill), code, html | Afficher du texte et du contenu riche |
| Medias | image, video, icon, carousel | Elements visuels et multimedia |
| Navigation | button, link, menu, breadcrumb | Actions et navigation |
| Formulaires | formField, fieldInput, fieldSelect, fieldTextarea, fieldCheckbox, fieldRadio, fieldInputFile | Saisie de données |
| Données | listbox, repeat/forEach, renderPage | Affichage de données ORDA |
| Avance | renderFile, map, chart | Composants specialises |
Proprietes 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 : regles de validation
- Conditional Display : conditions d'affichage du bloc
Drag and Drop
Reorganisez vos blocs par glisser-deposer. 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égré un selecteur de breakpoints pour previsualiser et ajuster le design à chaque taille d'écran :
| Breakpoint | Largeur | Cible |
|---|---|---|
| xs | < 640px | Mobile portrait |
| sm | 640px+ | Mobile paysage |
| md | 768px+ | Tablette |
| lg | 1024px+ | Desktop |
| xl | 1280px+ | Grand écran |
| 2xl | 1536px+ | Tres grand écran |
Undo/Redo
Le Dev Panel dispose d'une fonction d'annulation (Ctrl+Z) et de retablissement (Ctrl+Y) pour revenir en arriere sur vos modifications.
Aperçu instantane
Chaque modification est visible en temps reel dans la page. Le Dev Panel communique avec le serveur 4D via WebSocket pour appliquer les changements sans rechargement de page.