Ausgabe eines Widgets

In dieser Anleitung wird erläutert, wie ein einfaches Widget erzeugt werden kann, in dem der Text “Hello, World!” und optional noch weiterer von einem Benutzer eingegebener Text angezeigt wird.

Mit Widgets werden in Elgg die Komponenten der Oberfläche bezeichnet, die Du zu Deinem Profil oder dem Admin-Dashboard hinzufügen kannst.

Diese Anleitung setzt voraus, dass Du mit einigen grundlegenden Konzepten von Elgg bereits vertraut bist, wie beispielsweise:

Du solltest Dir diese Abschnitte der Elgg-Dokumentation nochmals durchlesen, falls Du beim Durcharbeiten der folgenden Schritte dieser Anleitung Verständnisschwierigkeiten hast.

Hinzufügen der Widget-View

Elgg automatically scans particular directories under plugins looking for particular files. Views make it easy to add your display code or do other things like override default Elgg behavior. For now, we will just be adding the view code for your widget. Create a file at /views/default/widgets/helloworld/content.php. “helloworld” will be the name of your widget within the hello plugin. In this file add the code:

<?php

echo "Hello, world!";

Im Widget werden dann diese Worte ausgegeben werden. Das Laden des Widgets selbst wird dabei automatisch von Elgg übernommen.

Registrieren des Widgets

Elgg needs to be told explicitly that the plugin contains a widget so that it will scan the widget views directory. This is done by calling the elgg_register_widget_type() function. Edit /start.php. In it add these lines:

<?php

function hello_init() {
    elgg_register_widget_type([
        'id' => 'helloworld',
        'name' => 'Hello, world!',
        'description' => 'The "Hello, world!" widget',
    ]);
}

return function() {
    elgg_register_event_handler('init', 'system', 'hello_init');
}

Gehe jetzt zu Deiner Profilseite innerhalb Deiner Elgg-Seite und füge das “hello, world”-Widget hinzu. Im Widget sollte nun “Hello, world!” angezeigt werden.

Bemerkung

Bei einem produktiv eingesetzten Widget ist es immer empfehlenswert, Internationalization-Unterstützung zu implementieren.

Benutzer-spezifische Anpassungen erlauben

Klicke auf den Bearbeiten-Link in der Titelzeile Deines Widgets. Wie Du siehst, ist die einzige standardmäßig angebotene Option die Anpassung des Zugangslevels (wer das Widget angezeigt bekommt).

Suppose you want to allow the user to control what greeting is displayed in the widget. Just as Elgg automatically loads content.php when viewing a widget, it loads edit.php when a user attempts to edit a widget. Put the following code into /views/default/widgets/helloworld/edit.php:

<div>
    <label>Message:</label>
    <?php
        //This is an instance of the ElggWidget class that represents our widget.
        $widget = $vars['entity'];

        // Give the user a plain text box to input a message
        echo elgg_view('input/text', array(
            'name' => 'params[message]',
            'value' => $widget->message,
            'class' => 'hello-input-text',
        ));
    ?>
</div>

Beachte den Zusammenhang zwischen den Werten, die den ‚name‘- und ‚value‘-Feldern von input/text übergeben werden. Der Name des Texteingabefeldes ist params[message], weil Elgg automatisch Widget-Variablen verarbeitet, die der Feldvariablen params übergeben werden. Der eigentliche Name der PHP-Variablen ist allerdings message. Wenn wir dem Feld stattdessen den Namen greeting anstatt message geben wollten, würden wir die Werte params[greeting] und $widget->greeting übergeben.

Das ‚value‘-Attribut in der Feldvariable setzen wir, damit die Edit-View anzeigen kann, was der Benutzer beim letzten Mal eingegeben hatte als der Text editiert wurde.

Now to display the user’s message we need to modify content.php to use this message variable. Edit /views/default/widgets/helloworld/content.php and change it to:

<?php

$widget = $vars['entity'];

// Always use the corresponding output/* view for security!
echo elgg_view('output/text', array('value' => $widget->message));

Es sollte nun möglich sein, eine Nachricht in die Textbox einzugeben, die dann im Widget angezeigt wird.