Eine Komponente in OctoberCMS erstellen

Beim Verwenden von OctoberCMS werden sogenannte Komponenten (Components) verwendet. Wenn man ein Plugin für OctoberCMS entwickelt, kommt man meistens nicht drum herum, das Plugin mit einer oder mehreren Komponenten zu versehen.

Eine neue Komponente wird durch das Kommando

php artisan create:component <AuthorName>.<PluginName> <ComponentName>

erzeugt. Hat man auf diese Weise eine Komponente erzeugt, muss man es in der Plugin.php in der Funktion registerComponents() registrieren:

public function registerComponents()
{
    return [
        '<AuthorName>\<PluginName>\Components\<ComponentName>' => '<default_component_alias>',
    ];
}Code-Sprache: PHP (php)

Hat man eine Komponente registriert, kann man diese mit Inhalt füllen. Dafür gibt es ein paar wichtige Funktionen.

componentDetails

Die Funktion componentDetails definiert ein paar informative Eigenschaften über die Komponente wie den Namen oder die Beschreibung. Beispiel:

public function componentDetails()
{
    return [
        'name' => 'ShowRandomCat Component',
        'description' => 'This plugin shows a random cat.'
    ];
}Code-Sprache: PHP (php)

defineProperties

Die Funktion defineProperties definiert Eigenschaften, die der User später beim Nutzen der Komponente anpassen kann. Hat man z.B. eine Komponente, die eine Überschrift anzeigen soll, kann man hier eine entsprechende Eigenschaft definieren. Beispiel:

public function defineProperties()
{
    return [
        'ueberschrift' => [
            'title' => 'Überschrift der Komponente',
            'description' => 'Setzt eine Überschrift, die über der Komponente angezeigt wird',
            'type' => 'string'
        ]
    ];
}Code-Sprache: PHP (php)

Im Backend im Editor würde der Nutzer der Komponente die Eigenschaft Überschrift der Komponente dann folgendermaßen sehen:

onRender

Wenn man eine Komponente entwickelt, die auch im Frontend (also auf der Webseite) etwas zeigen soll, dann nutzt man die Funktion onRender. Hier kann man ein Partial rendern und diese wird dann im Frontend angezeigt.

Ein Partial einer Komponente ist eine .htm-Datei mit HTML Code und Twig-Kommandos. Die Partials liegen im Ordner <AuthorName>/<PluginName>/components/<ComponentName>.

Eine onRender-Funktion kann z.B. so aussehen:

public function onRender()
{
    $content = $this->renderPartial('@default.htm', [
        'cat_url' => $this->cat_url,
        'ueberschrift' => $this->property('ueberschrift')
    ]);
    return $content;
}Code-Sprache: PHP (php)

In diesem Beispiel wird auch gezeigt, wie der Wert ($this->property('ueberschrift')) der in der Funktionert defineProperties definierten Eigenschaft ueberschrift an das Partial default.htm weitergegeben wird. Damit der Wert auch angezeigt wird, muss das Partial default.htm dies entsprechend ausgeben. Das kann dann z.B. so aussehen:

<div class="card">
    <div class="card-body">
        <h5 class="card-title">{{ ueberschrift }}</h5>
        <div class="card-body">
            <img src="{{ cat_url }}" />
        </div>
    </div>
</div>Code-Sprache: HTML, XML (xml)

Dies waren jetzt die wichtigsten Funktionen und Schritte um ein Plugin mit einer Komponente zu versehen. Je nach Bedarf braucht es natürlich noch andere Funktionen.