Die erste Ansicht im Frontend

Nachdem du ein funktionierendes Backend für deine Komponente hast, implementierst du das Frontend. Aktuell ist es mit der Erweiterung möglich, einen statischen Text anzuzeigen. Wir haben bisher keine dynamischen Daten. Aber das wird sich bald ändern. Zunächst bauen wir die grobe Struktur auf. Nachfolgend siehst du die simple Ansicht.

Joomla Ansicht im Frontend

Für Ungeduldige

Sieh dir den geänderten Programmcode in der Diff-Ansicht an und übernimm diese Änderungen in deine Entwicklungsversion.

// https://github.com/astridx/boilerplate/compare/t1c...t2.diff

diff --git a/src/administrator/components/com_foos/foos.xml b/src/administrator/components/com_foos/foos.xml
index dda576de..e24d1127 100644
-- a/src/administrator/components/com_foos/foos.xml
++ b/src/administrator/components/com_foos/foos.xml
@@ -11,6 +11,11 @@
 	<description>COM_FOOS_XML_DESCRIPTION</description>
 	<namespace path="src">FooNamespace\Component\Foos</namespace>
 	<scriptfile>script.php</scriptfile>
	<!-- Frond-end files -->
	<files folder="components/com_foos">
		<folder>src</folder>
		<folder>tmpl</folder>
	</files>
 	<!-- Back-end files -->
 	<administration>
 		<!-- Menu entries -->
diff --git a/src/components/com_foos/index.html b/src/components/com_foos/index.html
deleted file mode 100644
index 2efb97f3..00000000
-- a/src/components/com_foos/index.html
++ /dev/null
@@ -1 +0,0 @@
<!DOCTYPE html><title></title>
diff --git a/src/components/com_foos/src/Controller/DisplayController.php b/src/components/com_foos/src/Controller/DisplayController.php
new file mode 100644
index 00000000..d544b77b
-- /dev/null
++ b/src/components/com_foos/src/Controller/DisplayController.php
@@ -0,0 +1,57 @@
<?php
/**
* @package     Joomla.Site
* @subpackage  com_foos
*
* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/

namespace FooNamespace\Component\Foos\Site\Controller;

\defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;

/**
* Foos Component Controller
*
* @since  __BUMP_VERSION__
*/
class DisplayController extends BaseController
{
	/**
	 * Constructor.
	 *
	 * @param   array                $config   An optional associative array of configuration settings.
	 * Recognized key values include 'name', 'default_task', 'model_path', and
	 * 'view_path' (this list is not meant to be comprehensive).
	 * @param   MVCFactoryInterface  $factory  The factory.
	 * @param   CMSApplication       $app      The JApplication for the dispatcher
	 * @param   \JInput              $input    Input
	 *
	 * @since   __BUMP_VERSION__
	 */
	public function __construct($config = array(), MVCFactoryInterface $factory = null, $app = null, $input = null)
	{
		parent::__construct($config, $factory, $app, $input);
	}

	/**
	 * Method to display a view.
	 *
	 * @param   boolean  $cachable   If true, the view output will be cached
	 * @param   array    $urlparams  An array of safe URL parameters and their variable types, for valid values see {@link \JFilterInput::clean()}.
	 *
	 * @return  static  This object to support chaining.
	 *
	 * @since   __BUMP_VERSION__
	 */
	public function display($cachable = false, $urlparams = array())
	{
		parent::display($cachable);

		return $this;
	}
}
diff --git a/src/components/com_foos/src/View/Foo/HtmlView.php b/src/components/com_foos/src/View/Foo/HtmlView.php
new file mode 100644
index 00000000..fabeaa3a
-- /dev/null
++ b/src/components/com_foos/src/View/Foo/HtmlView.php
@@ -0,0 +1,34 @@
<?php
/**
* @package     Joomla.Site
* @subpackage  com_foos
*
* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/

namespace FooNamespace\Component\Foos\Site\View\Foo;

\defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

/**
* HTML Foos View class for the Foo component
*
* @since  __BUMP_VERSION__
*/
class HtmlView extends BaseHtmlView
{
	/**
	 * Execute and display a template script.
	 *
	 * @param   string  $tpl  The name of the template file to parse; automatically searches through the template paths.
	 *
	 * @return  mixed  A string if successful, otherwise an Error object.
	 */
	public function display($tpl = null)
	{
		return parent::display($tpl);
	}
}
diff --git a/src/components/com_foos/tmpl/foo/default.php b/src/components/com_foos/tmpl/foo/default.php
new file mode 100644
index 00000000..661ed99b
-- /dev/null
++ b/src/components/com_foos/tmpl/foo/default.php
@@ -0,0 +1,11 @@
<?php
/**
* @package     Joomla.Site
* @subpackage  com_foos
*
* @copyright   Copyright (C) 2005 - 2020 Open Source Matters, Inc. All rights reserved.
* @license     GNU General Public License version 2 or later; see LICENSE.txt
*/
\defined('_JEXEC') or die;
?>
Hello Foos

Schritt für Schritt

Im aktuellen Abschnitte kommen drei Datei hinzu und zwei werden geändert.

Übersicht über die Dateien im dritten Kapitel

Neue Dateien

Der Administrationsbereich unserer Komponente ist im Ordner com_foos unter /administrator/component. Jetzt arbeiten wir am Frontend, das im Ordner com_foos direkt unter /components gespeichert ist.

src/components/com_foos/src/Controller/DisplayController.php - Einstiegspunkt ins Frontend

Dies ist der Einstiegspunkt für den Model-View-Controller-Teil im Frontend der Foo-Komponente. Nenne die Klasse DisplayController. Joomla! erwartet das so. Erweitere BaseController, um viele Dinge Out-of-the-Box zu nutzen.

Alles was ich in Kapitel zur ersten Ansicht im Backend geschrieben habe, trifft hier analog zu.

components/com_foos/src/Controller/DisplayController.php

namespace FooNamespace\Component\Foos\Site\Controller;

\defined('_JEXEC') or die;

use Joomla\CMS\MVC\Controller\BaseController;
use Joomla\CMS\MVC\Factory\MVCFactoryInterface;

class DisplayController extends BaseController
{
	public function __construct($config = array(), MVCFactoryInterface $factory = null, $app = null, $input = null)
	{
		parent::__construct($config, $factory, $app, $input);
	}

	public function display($cachable = false, $urlparams = array())
	{
		parent::display($cachable);
		return $this;
	}
}

src/components/com_foos/src/View/Foo/HtmlView.php - Die Ansicht

Im Moment hat unsere Komponente eine rudimentäre Ansicht. Es wird nur ein statischer Text angezeigt. Dies wird sich ändern!

Es gibt mehrere Dateien, die zusammenarbeiten, um die Ansicht im Frontend zu generieren. Beispielsweise der Controller, der sie aufruft. Den erstellen wir im aktuellen Kapitel. Später kommt das Modell hinzu, welches die Daten vorbereitet.

In der Datei HtmlView.php wir das Modell wird aufgerufen, um die Daten für die Ansicht vorzubereiten.

Alles was ich in Kapitel zur ersten Ansicht im Backend geschrieben habe, trifft hier analog zu.

components/com_foos/src/View/Foo/HtmlView.php

<?php
namespace FooNamespace\Component\Foos\Site\View\Foo;

\defined('_JEXEC') or die;

use Joomla\CMS\MVC\View\HtmlView as BaseHtmlView;

class HtmlView extends BaseHtmlView
{
	public function display($tpl = null)
	{
		return parent::display($tpl);
	}
}

src/components/com_foos/tmpl/foo/default.php - Template

In dieser Datei ist der Text, den wir anzeigen. Alles was ich in Kapitel zur ersten Ansicht im Backend geschrieben habe, trifft hier analog zu.

components/com_foos/tmpl/foo/default.php

<?php
\defined('_JEXEC') or die;
?>
Hello Foos

Geänderte Dateien

src/administrator/components/com_foos/foos.xml - XML-Datei (Manifest)

Dies ist die Datei, die Joomla! mitteilt, wie unsere Komponente installiert wird. Deshalb tragen wie die beiden neuen Dateien hier ein, so weiß Joomla bei einer Installatin, dass es die Verzeichnisse src und tmpl gibt und wo components/com_foos es sie hin kopieren soll.

administrator/components/com_foos/foos.xml

...
<files folder="components/com_foos">
  <folder>src</folder>
  <folder>tmpl</folder>
</files>
...

Die Behelfsdatei - components/com_foos/index.html

Diese Datei war nur ein Behelf und sie kann nun gelöscht werden.

Teste deine Joomla-Komponente

  1. Installiere am Ende deine Komponente in Joomla! Version 4, um sie zu testen:

Führe eine neue Installation durch. Dies ist erforderlich, da die neuen Dateien im Frontend sonst nicht erkannt werden. Deinstalliere hierzu deine bisherige Installation und kopiere alle Dateien erneut.

Kopiere die Dateien im administrator Ordner in den administrator Ordner deiner Joomla! 4 Installation.
Kopiere die Dateien im components Ordner in den components Ordner deiner Joomla! 4 Installation.

Installiere deine Komponenten wie in Teil eins beschrieben, nachdem du alle Dateien kopiert hast. Joomla! richtet bei der bei der Installation Namespaces für dich ein.

  1. Öffne dann in einem Browser die Adresse JOOMLA4/index.php?option=com_foos&view=foo. Du siehst die eben erstelle Frontend-Ansicht.

Joomla Ansicht im Frontend

Übersicht

Vor oder zurück ...