Nexpell Builder – Entwicklerübersicht

Der Nexpell Builder ist das zentrale System zur visuellen Erstellung und Verwaltung von Websites ab Nexpell 1.0.4. Für Entwickler stellt der Builder eine strukturierte Umgebung bereit, in der Layouts, Widgets, Templates und Inhalte voneinander getrennt verarbeitet werden.

Diese Dokumentation richtet sich an Entwickler, die den Builder erweitern, eigene Widgets entwickeln, Templates erstellen oder bestehende Builder-Funktionen anpassen möchten.

Grundlagen des Builders

Der Builder ermöglicht die visuelle Zusammenstellung einer Website aus einzelnen Bereichen und Widgets. Änderungen können direkt innerhalb der Builder-Oberfläche vorgenommen und anschließend gespeichert werden.

Für Entwickler ist wichtig, dass der Builder nicht einfach fertigen HTML-Code als komplette Seite behandelt. Die einzelnen Bestandteile werden strukturiert verwaltet und beim Aufruf der Website für das Frontend verarbeitet.

Dadurch können Inhalte, Layout und Funktionalität unabhängig voneinander weiterentwickelt werden.

Builder-Verzeichnis

Die zentralen Komponenten des Builders befinden sich im Verzeichnis /builder.

/builder
├── actions/
├── core/
├── renderer/
├── storage/
├── templates/
├── widgets/
└── assets/
    ├── css/
    ├── js/
    └── images/

/builder/actions

Der Bereich /builder/actions enthält Aktionen, die innerhalb des Builders ausgeführt werden.

Dazu können beispielsweise Speichervorgänge, Änderungen an Builder-Inhalten oder weitere Benutzeraktionen gehören.

/builder/core

Im Core befinden sich zentrale Funktionen des Builders. Funktionen, die ausschließlich für den visuellen Builder benötigt werden, sollten möglichst in diesem Bereich bleiben und nicht unnötig in den allgemeinen Nexpell-Core verschoben werden.

/builder/renderer

Der Renderer ist für die Verarbeitung und Ausgabe gespeicherter Builder-Inhalte verantwortlich.

Er bildet damit die Verbindung zwischen den im Builder gespeicherten Informationen und der tatsächlichen Darstellung im Frontend.

/builder/storage

Dieser Bereich enthält Funktionen für die Speicherung und das Laden von Builder-Daten.

Änderungen an der Speicherstruktur sollten besonders vorsichtig vorgenommen werden, da sie Auswirkungen auf bereits vorhandene Builder-Seiten und Templates haben können.

/builder/templates

Hier befinden sich die vom Builder verwendeten Templates. Sie können als Ausgangspunkt für neue Websites verwendet und anschließend visuell angepasst werden.

/builder/widgets

Das Verzeichnis enthält die zentralen Core-Widgets des Builders. Widgets bilden die eigentlichen Bausteine, aus denen eine Seite zusammengestellt werden kann.

/builder/assets

/builder/assets
├── css/
├── js/
└── images/

Hier befinden sich Stylesheets, JavaScript-Dateien und Bilder, die speziell für die Builder-Oberfläche benötigt werden.

Widgets

Widgets sind die zentralen Bausteine einer mit dem Nexpell Builder erstellten Website. Ein Widget stellt einen bestimmten Inhalt oder eine bestimmte Funktion innerhalb einer Seite bereit.

Der Benutzer kann Widgets im Builder auswählen, auf der Seite platzieren und anschließend konfigurieren.

Core-Widgets

Core-Widgets werden direkt von Nexpell bereitgestellt und befinden sich im zentralen Widget-Bereich des Builders.

/builder/widgets/

Plugin-Widgets

Plugins können eigene Widgets für den Builder bereitstellen. Diese Widgets bleiben Bestandteil des jeweiligen Plugins und werden nicht grundsätzlich in das zentrale /builder/widgets-Verzeichnis verschoben.

Layout und Seitenaufbau

Eine Builder-Seite besteht aus verschiedenen Bereichen, in denen Widgets und Inhalte platziert werden können.

Für Entwickler ist dabei wichtig, Layout und Inhalt möglichst getrennt zu behandeln. Dadurch können bestehende Inhalte auch nach späteren Designänderungen weiterverwendet werden.

Responsive Layouts

Builder-Komponenten sollten grundsätzlich für unterschiedliche Bildschirmgrößen entwickelt werden.

Nexpell verwendet Bootstrap 5.3 als Grundlage. Entwickler können deshalb das Bootstrap-Grid und die vorhandenen responsiven Klassen für eigene Builder-Komponenten verwenden.

<div class="row">

    <div class="col-lg-8">
        Hauptinhalt
    </div>

    <div class="col-lg-4">
        Sidebar
    </div>

</div>

Sidebar und Widget-Bereiche

Widgets müssen nicht ausschließlich innerhalb des normalen Hauptinhalts verwendet werden. Der Builder kann auch Bereiche für Seitenleisten bereitstellen.

Eine Sidebar kann beispielsweise links oder rechts neben dem eigentlichen Seiteninhalt positioniert werden.

Sidebar links

┌───────────────┬──────────────────────────────┐
│               │                              │
│   Sidebar     │       Hauptinhalt            │
│               │                              │
│   Widgets     │       Builder-Inhalte        │
│               │                              │
└───────────────┴──────────────────────────────┘

Sidebar rechts

┌──────────────────────────────┬───────────────┐
│                              │               │
│       Hauptinhalt            │   Sidebar     │
│                              │               │
│       Builder-Inhalte        │   Widgets     │
│                              │               │
└──────────────────────────────┴───────────────┘

Die Position sollte über die Layout-Konfiguration bestimmt werden und nicht fest innerhalb eines Widgets hinterlegt sein. Dadurch bleiben Widgets unabhängig von ihrer späteren Position.

Templates

Templates stellen vorbereitete Ausgangspunkte für neue Nexpell-Websites bereit.

Ein Template kann bereits Layouts, Bereiche, Widgets und Designvorgaben enthalten. Nach dem Laden kann der Benutzer sämtliche Bestandteile im Builder weiter bearbeiten.

Templates bearbeiten

Für die Erstellung eines eigenen Templates kann zunächst ein vorhandenes Template geladen und anschließend an das eigene Projekt angepasst werden.

Templates exportieren

Fertiggestellte Layouts können über die Exportfunktion des Builders als eigenes Template gespeichert werden.

Beim Export können unter anderem Name, Version und Kurzbeschreibung vergeben werden. Anschließend kann das Template in der eigenen Bibliothek bereitgestellt und später erneut geladen werden.

Speicherung der Builder-Daten

Änderungen innerhalb des Builders müssen so gespeichert werden, dass die Seite später unabhängig von der Bearbeitungsoberfläche wiederhergestellt und gerendert werden kann.

Die dafür benötigten Funktionen befinden sich im Bereich /builder/storage.

Builder
   │
   │ Änderungen
   ▼
Builder Storage
   │
   │ Speichern
   ▼
Builder-Daten
   │
   │ Laden
   ▼
Renderer
   │
   ▼
Frontend

Rendering im Frontend

Der Builder selbst ist die Bearbeitungsumgebung. Besucher der Website benötigen diese Oberfläche jedoch nicht.

Beim normalen Seitenaufruf werden die gespeicherten Builder-Informationen geladen und über den Renderer für das Frontend ausgegeben.

Gespeicherte Builder-Seite
             │
             ▼
      Builder Renderer
             │
             ▼
        Frontend
             │
             ▼
          Browser

Dadurch bleiben Bearbeitungsoberfläche und öffentliche Website voneinander getrennt.

Integration in das Frontend

Das Nexpell-Frontend bildet die äußere Umgebung für die vom Builder erzeugten Seiten.

/frontend
├── index.php
├── header.php
├── footer.php
├── assets/
└── views/

Der Builder liefert den eigentlichen Seiteninhalt, während das Frontend die grundlegende Website-Struktur und weitere systemweite Komponenten bereitstellt.

Dadurch können Builder-Seiten gemeinsam mit klassischen Nexpell-Modulen und Plugins innerhalb derselben Website verwendet werden.

Hinweise für Entwickler

Bei Erweiterungen des Builders sollte darauf geachtet werden, die vorhandene Struktur konsequent beizubehalten.

• Builder-spezifische Funktionen gehören nach /builder.
• Allgemeine Nexpell-Core-Funktionen gehören nach /system.
• Core-Widgets gehören nach /builder/widgets.
• Plugin-Widgets sollten Bestandteil des jeweiligen Plugins bleiben.
• Builder-spezifische CSS- und JavaScript-Dateien gehören nach /builder/assets.
• Frontend-Ressourcen gehören nach /frontend/assets.
• Eigene Komponenten sollten responsive entwickelt werden.
• Änderungen an der Speicherung sollten möglichst abwärtskompatibel bleiben.