HTML

Create a view with the extension ".html.php" so that it is recognized as an HTML view.

View Helper​

In HTML views the helpers $html (n2n\ui\html\HtmlBuilder) and $formHtml (n2n\ui\html\FormHtmlBuilder) are additionally available. $formHtml is explained in the [Thomas, Link]Forms[/Thomas, Link] chapter. $html provides various methods to simplify working with HTML elements. Most of these methods generate an HTML element and output it, but for each of these methods there is also a get method that only generates the HTML element and returns it.

Escaping​

The HTML builder provides various helper methods to simplify working in the views. $html->out() escapes output and outputs it. This increases the security of your application, because it prevents cross-site scripting in your application.

With $html->esc() you convert special characters into HTML codes. $html->escP() and $html->escBr() are helpers for converting a line break into <p> tags or <br/> tags respectively.

Localization​

The method $html->text() can be used to translate text blocks. These have to be stored in the module folder in the subdirectory lang/{languagekey}. It is possible to pass dynamic content from a variable.

The following two examples are intended to illustrate this:

We want to outsource a text part into a German language file. For this we create the subdirectory "lang" in the module folder "Atusch". In this directory we create a file for German text blocks (de.ini). The name of this file is the "languagekey" for which you want to save the translations. In our case this is "de". In it we now create a key and assign a value to it as follows:

textblock_info_language = "dieser Text ist deutschsprachig."

In a view of the same module this text block can then be accessed as follows:

<?php $html->text('textblock_info_language') ?>

However, there are also use cases in which additional dynamic content should be output. This content can also be passed to a text block. Let's assume we want to output a welcome message and address a person by name, we can solve this as follows:

In the language file we create a new line.

welcome_message = "Willkommen zurück, {name}."

The word in the curly brackets {name} serves as a placeholder for the content to be passed. In the view we can then pass a value for this placeholder as a parameter:

<?php $html->text('welcome_message', array('name' => 'Max Musterman')) ?>

This example would now produce the following output:

"Willkommen zurück, Max Musterman."

Number and Date Formats​

To have localized formatting output, you can use $html->l10nCurrency(), $html->l10nDatetime() and $html->l10nNumber().

Navigating​

To create links in your application you can use $html->link(). You can pass this method the destination, the label and attributes. To access the current controller you can work with $html->linkToController(). To reference other paths of your application you use $html->linkToContextPath(). This method outputs the root path of your application.

Images​

To output images in your view you can use the following methods:

$html->image() creates an image tag. For this, an object of the type n2n\io\fs\File has to be passed to the method. Optionally you can specify which dimensions the image should have and whether it should be cropped.

With $html->imageAsset() you can access and output images from the assets folder of your application. It expects the path from module level within the assets folder. By default the module tmpl is selected. However, you can also pass to the method in which module your image file is located.

Customizing the Template​

Replace the tags <head>, </head>, <body> and </body> in your template as in the example below, so that you can fully utilize the tools of the HTML view:

<!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>

This allows n2n to insert additional HTML elements at these positions (e.g. <meta>, <style>, <link>, <script>, etc.).

There is the following alternative for this:

<!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 are for example CSS, JavaScript or image files, etc., which are located in the folder [n2n-public]/assets/[module-namespace] and can be included in HTML views.

[general]
page.assets_dir = "assets"

You can include assets for example via $html->meta()->addCss() or $html->meta()->addJS():

<?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>

Let's assume this view is located in the module "atusch", then [n2n-public]/assets/atusch/css/style.css and [n2n-public]/assets/atusch/js/function.js are included in the template before the </head> tag. "" characters of module namespaces are converted to ".". If the module namespace of the view in the example above were ch\atusch, [n2n-public]/assets/ch.atusch/css/style.css would be included.

Libraries (Thomas, I need an h3 here)

..

HtmlBuilder​

... to be continued