HTML-Element

Über das HTML-Element kann ein generisches HTML an einer beliebigen Stelle in der Anwendung definiert werden. Im generischen HTML stehen folgende Variablen zur Verfügung : “application” (Entity Application), “entity” (Entity HTMLElement) und “configuration”. Damit kann beispielsweise ein Bild in die Anwendung eingefügt werden.

../../../_images/html_result_application.png

Configuration

Einfügen eines Bildes in Ihre Anwendung:

<img src='http://mapbender.org/sites/default/files/OSGeo_project.png' height='60px'>
../../../_images/html.png
  • Title: Titel des HTML-Elements. Dieser wird in der Layouts Liste angezeigt und ermöglicht, mehrere HTML-Elemente voneinander zu unterscheiden.
  • Content: Inhalt des HTML-Elements, z.B. Bild oder Link. Content kann Variablen: “application”, “entity” und “configuration” beinhalten.
  • Classes: html-element-inline, CSS-Klasse

Konfigurationsbeispiele

Logo mit hinterlegtem Link einbinden:

Im Mapbender besteht die Möglichkeit Variablen in Anwendungen zu verwenden. Als Beispiel wird gezeigt, wie der Titel der Anwendung und des Elements mithilfe eines HTML-Elements eingebunden werden kann.

Die Variable “application.title”

Die Anwendung, für die dieses Element konfiguriert wird, sieht im Anwendungsmanager des Mapbender wie folgt aus:

../../../_images/html_example_application.title_application.png

Zuerst muss ein HTML-Element, wie vorher beschrieben über das + -Zeichen, hinzugefügt werden. Um den Titel der Anwendung einzubinden, wird die Variable “application.title” benötigt.

../../../_images/html_example_application.title_dialog.png

In diesem Beispiel ist die Bezeichnung (Title) des HTML-Elements “Titel”. Im Content wurde folgender Code verwendet:

<b><span style="font-size:25px;color:#b6dd18;margin-right:50vw"> Anwendung {{  application.title }} </span></b>

Der Titel der Anwendung wurde mit dem Textzusatz “Anwendung” eingebunden. Dieser Zusatz ist unabhängig vom Titel der Anwendung und wird vor diesen gesetzt (D.h.: Anwendung + Titel der Anwendung). Durch den Style-Block (style=) wurden die Schriftgröße (font-size:25px), die Schriftfarbe (color:#b6dd18) und die Position (margin-right:50vw) des Titels angepasst. Außerdem wird der Titel fett (<b></b>) angezeigt. Die Variable für den Anwendungstitel wird durch diesen Ausdruck eingebunden: {{ application.title }}

Für das Anwendungsbeispiel sieht das Ergebnis des HTML-Elements wie folgt aus:

../../../_images/html_example_application.title.png

Variable “entity”

Die Variable “entity” bindet Parameter des HTML-Elements ein. Wurde beispielsweise die Variable {{ entity }} eingebunden, wird die ID des HTML-Elements angezeigt. Wurde die Variable {{ entity.title }} eingebunden, wird in der Anwendung die Bezeichnung (Title) des Elements ausgegeben.

Die Konfiguration für das HTML-Element “Titel” und die Variable {{ entity.title }} mit dem Textzusatz “HTML-Element” sieht zum Beispiel wie folgt aus:

../../../_images/html_example_entity.title_dialog.png

Die Parameter für das Styling entsprechen der Konfiguration für das vorherige Beispiel des HTML-Elements mit der Variable application.title. Für entity.title wurden lediglich Textzusatz, Variable und Position (margin-right) angepasst.

Dieses Element sieht in der Anwendung wie folgt aus:

../../../_images/html_example_entity.title.png

YAML-Definition:

title: 'HTML-Element'
class: Mapbender\CoreBundle\Element\HTMLElement
content: <p>Hello, World!</p><p>Application: {{ application.title |trans }}</p> # content kann Variablen: "application", "entity" und "configuration" beinhalten.
classes: my-special-css-class

Class, Widget & Style

  • Class: Mapbender\CoreBundle\Element\HTMLElement
  • Widget: mapbender.mbHTMLElement

HTTP Callbacks

None.

Beispiele

Einfügen eines Bildes

<img src='http://mapbender.org/sites/default/files/OSGeo_project.png'>

Einfügen eines Links

<a href='http://mapbender.org' target='_blank'>Go to the Mapbender Website</a>