Es kommt vor, dass du die Ausgabe im Frontend für einen Menüpunkt individuell gestaltest. Hierzu benötigst du eine Variable. In diesem Teil des Tutorials fügen wir eine Textvariable zum Menüpunkt hinzu und nutzen diese für die Anzeige im Frontend.
Für Ungeduldige: Sieh dir den geänderten Programmcode in der Diff-Ansicht[^github.com/astridx/boilerplate/compare/t4...t5] an und übernimm diese Änderungen in deine Entwicklungsversion.
Schritt für Schritt
Neue Dateien
In diesem Kapitel kommt keine neue Datei hinzu. Wir ändern ausschließlich Dateien.
Geänderte Dateien
components/com_foos/ src/Model/ FooModel.php
Im Model änderst du die Methode, in welcher der Text für die Ausgabe berechnet wird. Lösche den folgenden Eintrag:
components/com_foos/ src/Model/FooModel.php
...
if (!isset($this->message))
{
$this->message = 'Hello Foo!';
}
...
Füge die nachfolgenden Zeilen an der Stelle hinzu:
...
$app = Factory::getApplication();
$this->message = $app->input->get('show_text', "Hi");
...
Du kannst bei der neuen Variante auf die Überprüfung
if (!isset($this->message))
verzichten, weil die Anweisungget('show_text', "Hi");
den Fehler abfängt, der auftritt, wenn der Parametershow_text
nicht gesetzt ist. Immer dann, wenn der Wertshow_text
nicht gesetzt ist, wird der zweite Parameter"Hi"
als Standard verwendet.
Die vollständige Datei sieht in der Diff-Ansicht wie folgt aus:
components/com_foos/ src/Model/FooModel.php
\defined('_JEXEC') or die;
use Joomla\CMS\Factory;
use Joomla\CMS\MVC\Model\BaseDatabaseModel;
/**
*/
public function getMsg()
{
if (!isset($this->message))
{
$this->message = 'Hello Foo!';
}
$app = Factory::getApplication();
$this->message = $app->input->get('show_text', "Hi");
return $this->message;
}
Soweit, so gut. Es fehlt noch die Möglichkeit, den Wert für show_text
beim Menüpunkt im Backend zu konfigurieren. Diese implementieren wir jetzt in der Datei default.xml
.
components/com_foos/ tmpl/foo/default.xml
Du bietest in deiner Erweiterung die Möglichkeit einen Wert beim Menüpunkt zu speichern, indem du die XML-Datei um ein Inputelement erweiterst. Der nachfolgende Code zeigt dir, wie du ein Eingabefeld für Text hinzufügst.
components/com_foos/ tmpl/foo/default.xml
<![CDATA[COM_FOOS_FOO_VIEW_DEFAULT_DESC]]>
</message>
</layout>
<!-- Add fields to the request variables for the layout. -->
<fields name="request">
<fieldset name="request">
<field
name="show_text"
type="text"
label="COM_FOOS_FIELD_TEXT_SHOW_LABEL"
default="Hi"
/>
</fieldset>
</fields>
</metadata>
Den XML Eintrag
<field
name="show_text"
type="text"
label="COM_FOOS_FIELD_TEXT_SHOW_LABEL"
default="Hi"
/>
verwandelt Joomla für die Ausgabe im Backendformular in den folgenden HTML-Code:
<div class="control-label">
<label id="jform_request_show_text-lbl" for="jform_request_show_text">
COM_FOOS_FIELD_TEXT_SHOW_LABEL</label
>
</div>
<div class="controls has-success">
<input
type="text"
name="jform[request][show_text]"
id="jform_request_show_text"
value="Hi"
class="form-control valid form-control-success"
aria-invalid="false"
/>
</div>
Wir nutzen mit
type="text"
eines der einfachsten Formularfelder, nämlich das vom Typtext
. Zahlreiche Typen von Formularfeldern sind in Joomla eingebaut. Die Joomla Dokumentation listet diese Standardtypen auf. Sieh dir die Tabelle auf der Website docs.joomla.org/Form_field/de an. Oft kannst du mit einem speziellen Feld eine besondere Anforderung umsetzen.
Teste deine Joomla-Komponente
-
Installiere deine Komponente in Joomla Version 4, um sie zu testen: Kopiere die Dateien im
components
Ordner in dencomponents
Ordner deiner Joomla 4 Installation. Eine neue Installation ist nicht erforderlich. Verwende die aus dem vorhergehenden Teil weiter. -
Wechsele in den Menü Manager und öffne einen Menüpunkt oder erstelle einen neuen. Hier siehst du jetzt ein Textfeld, in das du einen beliebigen Text einfügst.
- Wechsele jetzt in die Frontendansicht. Überzeuge dich davon, dass der von dir beim Menüpunkt eingegebene Text im Frontend in der richtigen Variante ausgegeben wird.
Dir fallen sicher praktischere Beispiele ein. Der Sinn und die Funktion der Variablen werden im Beispiel klar.
- Erstelle mehrere Menüpunkte, die jeweils einen anderen Text oder Typ enthalten. Gibt nicht lediglich den Text im Frontend aus, gestalte die Ausgabe mithilfe von bedingten Anweisungen[^developer.mozilla.org/de/docs/web/javascript/reference/statements/if...else]. Ein beliebter Anwendungsfall ist es, das Design der Ausgabe mithilfe von Variablen zu beeinflussen. Über die Variable fragst du beispielsweise ab, ob der Inhalt in einer Liste oder in einer Tabelle auszugeben ist.
Comments