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.min.html
application\resource\template\alvine\application\web\default.min.html
application\resource\template\alvine\application\default.min.html
application\resource\template\alvine\default.min.html
application\resource\template\default.min.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.
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>
Header¶
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>
8d8ec4bb-ce73-44fe-eab8-afeff210e5bd
<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>
Footer¶
Im Footer soll nun wieder ein statischer Text ausgeben werden. Hierzu wird der Container footer
folgendermassen definiert:
<container placeholder="footer">
<content><![CDATA[(c) 2017 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.