Beispielseite anlegen

Mit Hilfe des PagePresenter lassen sich Webseiten mit unterschiedlichen Elementen abbilden. Dazu werden unterschiedliche Komponenten über die Konfiguration der Route definiert und in die auszuliefernde HTML-Datei integriert.

Zuerst legt man im Verzeichnis /config/route eine neue Route mit dem gewünschtem Presenter und der zu verwendenden URL an. Außerdem muss man noch den Namen des Templates angeben. Dies erfolgt mit dem Tag configuration/view/template

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<definition>
    <routes>
        <group>
            <route id="ROUTE-65">
                <!-- HTTP-Methode; Route kann nur über einen GET-Request aufgerufen werden -->
                <method>GET</method>

                <!-- Der für die Zusammenstellung der Seite verantwortliche PagePresenter -->
                <presenter>\Alvine\Application\Web\Presenter\Page</presenter>

                <!-- Dieses Pattern (Regex) gibt die URL an --> 
                <pattern><![CDATA[^/my-test$]]></pattern>

                <!-- Template der Route-URL um die Route in Seiten zu integrieren
                  -- Es handelt sich hier nicht um das HTML-Template -->
                <template>/my-test</template>

                <!-- Konfiuration der Route --> 
                <configuration>
                    <view>
                        <template>default</template>
                    </view>
                </configuration>
            </route> 


        </group>
    </routes>
</definition>

Die Route definiert einen PagePresenter der für alle GET-Request mit der URL /my-test an die Anwendung geschicht werden. Als Template wird die Datei default.html geladen. Dazu sucht der PagePresenter an folgenden Stellen nach dieser Datei:

application\resource\template\alvine\application\web\presenter\page\default.html 
application\resource\template\alvine\application\web\view\default.html 
application\resource\template\alvine\application\web\default.html 
application\resource\template\alvine\application\default.html 
application\resource\template\alvine\default.html 
application\resource\template\default.html

Dieses Such-Verhalten kann auch überschrieben werden, indem man den Tag um das Attribute resourcepath ergänzt.

<template resourcepath="/var/resource/template/">default</template>

Jetzt wird die Templatedatei nur noch unter dem Pfad /var/resource/template/default.html gesucht.

Hinweis

Der Pfad muss in diesem Fall immer absolut und nicht relativ angegeben werden.

Der Pfad kann Platzhalter aus der folgenden Tabelle verwenden.

Platzhalter Beschreibung
CONFIGPATH Pfad zu den Konfigurationsdateien
DEFAULTPATH Pfad zu den Standardwerten der Konfiguration
CUSTOMISATIONPATH Pfad zu Anpassungen
ASSETSPATH Pfad zu den Assets
BASEPATH Pfad zu Hauptverzeichnis der Anwendung (muss nicht das Webroot sein)
LICENCEPATH Pfad zu den Lizenzen
REPOSITORYPATH Pfad zum Repository
VENDORPATH Pfad zu Systembibliotheken
RESOURCEPATH Pfad zu den Resourcen
TEMPPATH Temporäres Verzeichnis des Systems
LOGPATH Pfad zum Logverzeichnis
APPLICATIONID UUID der Anwendung
ENV:KEY Environmentvariable $_ENV['KEY']

Container

Nachdem eine Seite definiert wurde, können Inhalte definiert werden. Zuerst braucht man ein einfaches Template. 

<!DOCTYPE html>
<html lang="en" dir="ltr">
    <head>
        <meta charset="utf-8">
        <title>${title}</title>
    </head>
    <body>
        <header>
        ${header}
        </header>

        <div class="container">
            <div class="row">
                <div class="col-12">
                ${content}      
                </div>
            </div>
        </div>

        <footer>
        ${footer}
        </footer>
    </body>
</html>

Dieses Template enthält vier Platzhalter: ${title}, ${header}, ${content} und ${footer}.

Hinweis

Die Zeichenketten ${name} werden durch die in der Route definierten Inhalte ersetzt. Die Platzhalter heißen heißen im Kontext des PagePresenters Container-Platzhalter, die Sammlung der Inhalte pro Platzhalter heißen Container.

In der Route lässt sich nun über containers/container-Tags verschiedene Inhalte definieren. Dazu muss zuerst für jeden der vier Container ein container-Tag definiert werden.

<containers>
    <container placeholder="title"><!-- ... --></container>
    <container placeholder="header"><!-- ... --></container>
    <container placeholder="content"><!-- ... --></container>
    <container placeholder="footer"><!-- ... --></container>
</containers>

Innerhalb der einzelnen Container werden im nächsten Schritt die Inhalte definiert. Die Anordnung der Inhalte im Container der HTML-Datei erfolgt in der Reihenfolge der Definition in der Route.

Titel

Als erstes soll der Titel gesetzt werden. Hierzu verwenden wir einen statischen in der Route definierten Text.

<container placeholder="title">
    <content><![CDATA[Meine Seite]]></content>
</container>

Es lassen sich auch mehrere Texte kombinieren. Die folgende Definition führt zum selben Ergebnis.

<container placeholder="title">
    <content><![CDATA[Meine]]></content>
    <content><![CDATA[ ]]></content>
    <content><![CDATA[Seite]]></content>
</container>
Eine bessere Alternative ist es jedoch den Text in eine Sprachdatei auszulagern und an dieser Stelle den Schlüssel des Textes anzugeben.

my.text=Meine Seite

Jetzt kann in der Konfiguration der Schlüssel statt dem statischen Text definiert werden. Damit lässt sich die Seite einfach in andere Sprachen übersetzen.

<container placeholder="title">
    <content><![CDATA[i18n{my.text}]]></content>
</container>

Als nächstes soll eine Navigation im Header eingebunden werden. Hierzu wird das Tree-Plugin verwendet.

<container placeholder="navigation">
    <content><![CDATA[<h2>Navigation</h2>]]></content>
    <plugin class="\Alvine\Application\Web\Presenter\Page\Plugin\Navigation\Tree">
        <navigation>
            group.headline=MyHeadline
            group.4.label=A14
            <!-- ... -->
        </navigation>
    </plugin> 
</container>

Content

Im Hauptteil soll zuerst eine H1-Überschrift ausgegeben werden. Das kann entweder wie in den folgenden Beispielen über einen Content Tag oder über das H1-Element-Plugin erfolgen.

<container placeholder="content">
    <content><![CDATA[<h1>Headline</h1>]]></content>
</container>

Element-Plugin

<container placeholder="content">
    <plugin class="\Alvine\Application\Web\Presenter\Page\Plugin\UI\Element">
         <h1>Headline</h1>
    </plugin>
</container>

Ausserdem definieren wir noch einen Paragraphen mit einem Text.

<container placeholder="content">
    <plugin class="\Alvine\Application\Web\Presenter\Page\Plugin\UI\Element">
         <paragraph>Lorem Ipsum ...</paragraph>
    </plugin>
</container>

Im Footer soll nun wieder ein statischer Text ausgeben werden. Hierzu wird der Container footer folgendermassen definiert:

<container placeholder="footer">
    <content><![CDATA[(c) 2019 schukai GmbH]]></content>
</container>

Ergebnis

Als Ergebnis wird durch den Aufruf der URL /my-test eine HTML-Datei mit einer Navigation, einem Inhaltsblock und einem Footer ausgegeben.