HTML
Erstelle eine View mit der Endung ".html.php", damit sie als HTML-View erkennt wird.
View Helper
In HTML-Views sind zusätzlich die Helper $html (n2n\ui\html\HtmlBuilder) und $formHtml (n2n\ui\html\FormHtmlBuilder) verfügbar. $formHtml wird im Kapitel [Thomas, Link]Forms[/Thomas, Link] erklärt. $html bietet verschiedene Methoden, um das Arbeiten mit HTML-Elementen zu vereinfachen. Die meisten dieser Methoden generieren ein HTML-Element und geben dieses aus, jedoch gibt es zu jeder dieser Methoden auch eine get-Methode, die das Html-Element nur generiert und zurückgibt.
Maskieren
Der HTML Builder bietet verschiedene Helfermethoden um das Arbeiten in den Views zu vereinfachen. $html->out() maskiert Ausgaben und gibt diese aus. Dadurch erhöht sich die Sicherheit deiner Anwendung, denn dies verhindert Crosssite-Scripting in deiner Applikation.
Mit $html->esc() wandelst du Sonderzeichen in HTML-Codes um. $html->escP() und $html->escBr() sind Helfer um einen Zeilenumbruch in <p> Tags beziehungsweise <br/> Tags umzuwandeln.
Lokalisierung
Die Methode $html->text() kann dazu genutzt werden, Textbausteine zu übersetzen. Diese müssen im Modulorder im Untervezeichnis lang/{languagekey} abgelegt werden. Dabei ist es möglich, dynamischen Inhalt von einer Variablen zu übergeben.
Die folgenden zwei Beispiele sollen dies verdeutlichen:
Wir möchten einen Textteil in ein deutsches Sprachfile auslagen. Hierzu legen wir im Modulordner "Atusch" das Unterverzeichnis "lang" an. In diesem erstellen wir eine Datei für deutschsprachige Textblöcke (de.ini). Der Name dieser Datei ist dabei der "Lanuagekey", für welchen man die Übersetzungen speichern möchte. In unserem Falle ist das "de". Darin erstellen wir nun einen Schlüssel und weisen diesem einen Wert wie folgt zu:
textblock_info_language = "dieser Text ist deutschsprachig."
In einer View des gleichen Moduls kann dann wie folgt auf diesen Textblock zugegriffen werden:
<?php $html->text('textblock_info_language') ?>
Es gibt allerdings auch Anwendungsfälle, bei denen zusätzlich dynamischer Inhalt ausgegeben werden soll. Dieser kann auch an einen Textblock übergeben werden. Nehmen wir an, wir möchten eine Begrüssungsnachricht ausgeben und dabei eine Person ansprechen, können wir dies wie folgt lösen:
Im Sprachfile erstellen wir eine neue Zeile.
welcome_message = "Willkommen zurück, {name}."
Das Wort in den geschweiften Klammern {name} dient dabei als Platzhalter für den zu übergebenen Inhalt. In der View können wir dann als Parameter einen Wert für diesen Platzhalter übergeben:
<?php $html->text('welcome_message', array('name' => 'Max Musterman')) ?>
Dieses Beispiel würde nun foglende Ausgabe erzeugen:
"Willkommen zurück, Max Musterman."
Zahlen- und Datumsformate
Um dir lokalisierte Formatierungen ausgeben zu lassen, kannst du $html->l10nCurrency(), $html->l10nDatetime() und $html->l10nNumber() verwenden.
| Methode | Hinweis |
|
|
Gibt eine Zahl in einem Währungsformat (zum Beipsiel CHF 30.35) aus. |
|
|
Gibt ein lokalisiertes Datum (zum Beispiel 10.12.2014 oder 12/10/14) aus. |
|
|
Gibt einen lokalisierten Zahlenwert (zum Beispiel 1.245,00) aus. |
Navigieren
Um Links in deiner Applikation zu erzeugen kannst du $html->link() nutzen. Dieser Methode kannst du den Zielort, das Label und Attribute übergeben. Um auf den aktuellen Controller zuzugreifen, kannst du mit $html->linkToController() arbeiten. Um auf andere Pfade deiner Applikation zu verweisen nutzt du $html->linkToContextPath(). Diese Methode gibt den Root-Pfad deiner Applikation aus.
Bilder
Um Bilder in deiner View auszugeben kannst du folgende Methoden nutzen:
$html->image() erzeugt ein Image Tag. Hierfür muss der Methode ein Objekt vom Typ n2n\io\fs\File übergeben werden. Optional kannst du angeben, welche Dimensionen das Bild besitzen und ob dieses zugeschnitten werden soll.
Mit $html->imageAsset() kannst du Bilder aus dem Assets-Order deiner Applikation ansteuern und ausgeben. Erwartet wird die Angabe des Pfades ab Modul-Level im Assets-Order. Standardmässig wird das Modul tmpl gewählt. Du kannst der Methode jedoch auch übergeben, in welchem Modul deine Bilddatei liegt.
Template anpassen
Ersetze in deinem Template die Tags <head>, </head>, <body> und </body> wie im nachstehenden Beispiel, damit du die Werkzeuge der Html-View vollumfänglich nutzen kannst:
<!DOCTYPE html>
<html>
<?php $html->headStart() ?>
<meta charset="utf-8" />
<?php $html->headEnd() ?>
<?php $html->bodyStart() ?>
<h1>Site Heading</h1>
<div>
<?php $view->importContentView() ?>
</div>
<?php $html->bodyEnd() ?>
</html>
Damit ermöglichst du n2n an diesen Positionen weitere HTML-Elemente einzufügen (z. B. <meta>, <style>, <link>, <script> usw.).
Dazu gibt es folgende Alternative:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<?php $html->headContents() ?>
</head>
<body>
<?php $html->bodyStartContents() ?>
<h1>Site Heading</h1>
<div>
<?php $view->importContentView() ?>
</div>
<?php $html->bodyEndContents() ?>
</body>
</html>
Assets
Assets sind zum Beispiel CSS-, Javascript- oder auch Bild-Dateien usw., die sich im Ordner [n2n-public]/assets/[module-namespace] befinden und in Html-Views eingebunden werden können.
[general] page.assets_dir = "assets"
Assets kannst du zum Beispiel über $html->meta()->addCss() oder $html->meta()->addJS() einbinden:
<?php
$html->meta()->addCss('css/style.css');
$html->meta()->addJs('js/funciton.js');
$view->useTemplate('view\template.html');
?>
<h2>View Heading</h2>
<p>View Content</p>
Gehen wir davon aus, dass sich diese View im Modul "atusch" befindet, wird im Template vor dem </head>-Tag [n2n-public]/assets/atusch/css/style.css und [n2n-public]/assets/atusch/js/function.js eingebunden. "\" von Modul-Namespaces werden in "." umgewandet. Würde der Modul-Namespace der View im obstehenden Beispiel also ch\atusch lauten, würde [n2n-public]/assets/ch.atusch/css/style.css eingebunden werden.
Libraries (Thomas, ich brauch da ein h3)
..
HtmlBuilder
... to be continued