Contao: Erstellen eines Frontend-Widgets

von Patrick Froch (Kommentare: 0)

Nach dem es projektbedingt einige Wochen etwas ruhig war, möchte ich heute zeigen, wie man ein eigenes Frontend-Widget erstellt. Als Beispiel soll ein Auswahlfeld erstellt werden. Im Unterschied zum normalen Widget, soll es eine Checkbox geben, mit der wir chosen für unser Feld im Frontend aktivieren können.

Damit chosen im Frontend funktioniert muss MooTools im Seitenlayout aktiviert und moo_chosen ausgewählt sein!

Settings

Als erstes registrieren wir das Formularfeld in der Datei system/modules/easywidget/config/config.php, in dem wir folgendes eingetragen:

<?php
$GLOBALS['TL_FFL']['esitselect'] = '\esit\easywidget\classes\contao\EsitSelect';

esitselect muss durch den Namen des Feldes ersetzt werden, dieser ist frei wählbar. \esit\easywidget\classes\contao\EsitSelect muss durch den Namen der Klasse (inkl. Namespace) ersetzt werden, die das Widget rendert.

Ich verwende in diesem Tutorial den Ordner easywidget. Auch dieser Name kann natürlich beliebig gewählt werden!

Des Weiteren benötigen wir noch die obligatorische Autoload-Datei (system/modules/easywidget/config/autoload.php):

<?php
// Register the namespaces
ClassLoader::addNamespaces(array('esit\easywidget'));

// Register the classes
ClassLoader::addClasses(array
(
    'esit\easywidget\classes\contao\EsitSelect' => 'system/modules/easywidget/classes/contao/EsitSelect.php'
));

In Zeile 8 legen wir den Namespace (esit\easywidget\classes\contao\) und den Namen der Klasse (EsitSelect), sowie den Pfad (system/modules/easywidget/classes/contao/EsitSelect.php) zu unserer Klasse fest. Es ist darauf zu achten, dass der Name der Datei (inkl. Namespace) mit dem übereinstimmt, was in der Datei system/modules/easywidget/config/config.php steht.

Palette

Als nächstes sollte im DCA tl_form_field eine Palette für unser Widget angelegt werden. Dies tun wir in der Datei system/modules/easywidget/dca/tl_form_field.php. Es handelt sich hierbei um die Eingabefelder, mit denen im Backend die Einstellungen für das Formularfeld festgelegt werden können. Es bietet es sich an, die Palette des Original-Widgets zu kopieren und ggf. zu modifizieren.

<?php
$strName = 'tl_form_field';

// Palettes
$GLOBALS['TL_DCA'][$strName]['palettes']['esitselect'] = $GLOBALS['TL_DCA'][$strName]['palettes']['select'];
$GLOBALS['TL_DCA'][$strName]['palettes']['esitselect'].= ';{addchosen_legend},addchosen;';

// Fields
$GLOBALS['TL_DCA'][$strName]['fields']['addchosen'] = array
(
    'label'                   => &$GLOBALS['TL_LANG'][$strName]['addchosen'],
    'exclude'                 => true,
    'inputType'               => 'checkbox',
    'eval'                    => array('tl_class'=>'w50 m12'),
    'sql'                     => "char(1) NOT NULL default ''"
);

In Zeile 5 übernehmen wir die Palette des Original-Widgets und erweitern sie in Zeile 6 um unsere Chcekbox. Die Chcekbox definieren wir dann ab Zeile 9.

Übersetzung

Die Übersetzungen für den Namen des Formularfelds, sowie die Checkbox befinden sich in der Datei system/modules/easywidget/languages/de/tl_form_field.php.

<?php
// Set Tablename
$strName                                            = 'tl_form_field';
// FormField
$GLOBALS['TL_LANG']['FFL']['esitselect']            = array('Auswahlfeld mit Chosen', 'Unser Auswahlfeld enthält die Möglichkeit Chosen zu aktivieren');
// Fields
$GLOBALS['TL_LANG'][$strName]['addchosen']          = array('Chosen anzeigen', 'Bitte wählen Sie, ob im Auswahlfeld Chosen angezeigt werden soll.');
// Legends
$GLOBALS['TL_LANG'][$strName]['addchosen_legend']   = 'Chosen';

In Zeile 5 wird der Name festgelegt, der in der Auswahlbox Feldtyp im Formulargenerator angezeigt wird. In Zeile 7 wird der Name unserer Checkbox eingegeben und in Zeile 9 die Beschriftung der Legende im Backend (grüne Überschrift). esitselect muss dem in der Datei config/config.php vergebenen Namen entsprechen.

Klasse des Widgets

Nun fehlt nur noch die Klasse für das Erzeugen des Widgets. Den Namen haben wir bereist weiter oben in der Datei system/modules/easywidget/config/config.php festgelegt. Den Pfad haben wir in der Datei system/modules/easywidget/config/autoload.php bestimmt. Wir erstellen also die Datei system/modules/easywidget/classes/contao/EsitSelect.php. Auch hier beitet es sich an, von der Originalklasse abzuleiten.

<?php
namespace esit\easywidget\classes\contao;

class EsitSelect extends \Contao\FormSelectMenu
{
    /**
     * Parse the template file and return it as string
     * @param array $arrAttributes An optional attributes array
     * @return string The template markup
     */
    public function parse($arrAttributes=null)
    {
        if ($this->addchosen) {
            $this->chosen = true;
        }

        // Widget erstellen
        return parent::parse($arrAttributes);
    }
}

Da wir in Zeile 4 von \Contao\FormSelectMenu erben, kommt es uns zugute, dass die Funktion für das Anzeigen des chosen bereits dort vorhanden ist. Es fehlte nur die Möglichkeit diese auch anzusprechen. Wir müssen also in unserer Klasse nur prüfen, ob unsere Checkbox (addchosen) angehakt ist. Dies tun wir in Zeile 13. Wenn dem so ist, setzen wir in Zeile 14 $this->chosen auf true. Dann übergeben wir mit parent::parse($arrAttributes); die Verarbeitung an die Elternklasse, das Ergebnis wird mir return zurückgegeben.

Das Ergebnis könnte dann im Frontend so aussehen:

Chosem

Zurück

Einen Kommentar schreiben