MetaModels Backend: Ausgabevorgaben: Unterschied zwischen den Versionen

Aus Contao Community Documentation
K (→‎Templates für einzelne Attrute)
 
(66 dazwischenliegende Versionen von 4 Benutzern werden nicht angezeigt)
Zeile 1: Zeile 1:
−
{{stub}}
+
[[Category:MetaModels|M2]]
−
[[Category:MetaModels]]
+
=Allgemeines zu den Ausgabevorgaben (aka Rendereinstellungen)=
−
{{ExtInfo
+
−
| Dev=Metamodels Team
+
−
| DevSite=
+
−
| Version=ab 2.11.X
+
−
| ERLink=
+
−
| VCSLink=https://github.com/MetaModels/core
+
−
| TrackerLink=https://github.com/MetaModels/core/issues
+
−
| Depending=[[MetaModels]]
+
−
}}
+
−
 
+
−
=Allgemeines zu den Ausgabevorgaben=
+
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Attribute| MetaModels Attribute]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
 
# [[MetaModels_Backend:_Ausgabevorgaben| MetaModels Ausgabevorgaben]]
−
# [[MetaModels_Backend:_Paletteneinstellungen| MetaModels Paletteneinstellungen]]
+
# [[MetaModels_Backend:_Eingabemaske| MetaModels Eingabemaske]]
 
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
 
# [[MetaModels_Backend:_Filter| MetaModels Filter]]
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
 
# [[MetaModels_Backend:_Ansichtseinstellungen| MetaModels Ansichtseinstellungen]]
  
 
==Was sind eigentlich Ausgabevorgaben?==
 
==Was sind eigentlich Ausgabevorgaben?==
 +
[[File:icons_ausgabevorgaben.png|left|32px]]
 +
Mit dem Ausgabevorgaben kann man bestimmen, welche Attribute (und in welcher Reihenfolge) in einer Ansicht gezeigt werden sollen. Z.B. möchte man in einer Liste nicht alle, sondern nur die wichtigsten vier Attribute anzeigen. Im Backend sind die Ausgabevorgaben nur für die Liste relevant. Die Eingabemaske (Formular) wird über die Paletteneinstellung gesteuert.
 +
 +
=Einstieg=
 +
[[File:mm_backend_ausgabevorgaben.png|thumb|365px]]
 +
Nachdem man über '''Neu''' einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:
 +
# Ausgabe bearbeiten: Erstellen und organisieren von Ansichten
 +
# Attributseinstellungen bearbeiten: Hinzufügen und organisieren von Attributen
 +
'''Hinweis'''<br>
 +
Die ID der Rendereinstellung (Tool-Tip bei Icon 'Info) ist nützlich, wenn man den Detail-Link anpassen möchte. Siehe [[MetaModels_Beispiel_2#Detail-Link_anpassen|hier]]
 +
<div style="clear: both"></div>
 +
 +
=Ansicht=
 +
==Einstellungen==
 +
[[File:mm_backend_ausgabevorgaben_formular.png|thumb|365px]]
 +
Hier legt man die Einstellungen fest, die später in den Frontend-Modulen als so genannte '''Anzuwendende Rendereinstellungen''' zum Tragen kommen.
 +
 +
* '''Name''': Name der Ansicht
 +
* '''Als Standard verwenden''': Optional
 +
* '''Template''': Standardmässig stehen 2 Templates zur Verfügung
 +
** metamodel_prerendered (Globaler Gültigkeitsbereich)... nimmt Rücksicht auf die Reihenfolge, die man in den Attributseinstellungen vornimmt
 +
** metamodel_unrendered (Globaler Gültigkeitsbereich) ... ignoriert die Rendersettings, man kann das Template den eigenen Wünschen anpassen
 +
** hier tauchen auch die selbsterstellten metamodel_Templates auf
 +
*'''Ausgabeformat''': HTML5, XHTML, Text
 +
* '''Zielseite''': Wichtig, wenn man von einer Liste zu einer Detailseite springen will
 +
** '''Springe zu Seite''': Interner Link oder URL, der zur Zielseite führt
 +
** '''Filtereinstellungen''': Hier kann man den Filter angeben, der den Link zur Zielseite anzeigt. Gibt man keinen Filter an, wird im Frontend kein "Detail"-Link angezeigt.
 +
* '''Leere Einträge verbergen'''
 +
* '''Labels verbergen'''
 +
* '''Zusätzliche CSS-Dateien'''
 +
* '''Zusätzliche JavaScript-Dateien'''
 +
<div style="clear: both"></div>
 +
 +
==Attribute==
 +
[[File:mm_backend_ausgabevorgaben_liste.png|thumb|365px]]
 +
Über '''Alle hinzufügen''' kann man sich alle verfügbaren Attribute dazuladen. Hier legt man fest, welche Attribute in der Ansicht gezeigt werden sollen (Icon 'Auge'). Falls man oben das Template ''' metamodel_prerendered (global scope)''' gewählt hat, nimmt dieses Template Rücksicht auf die hier gezeigte Reihenfolge.
 +
<div style="clear: both"></div>
 +
 +
==Attribut-Templates==
 +
[[File:mm_backend_ausgabevorgaben_liste_detail.png|thumb|365px]]
 +
Jedes Attribute verfügt über ein eigenes Template. Auf Wunsch kannt man natürlich auch hierauf Zugriff nehmen.
 +
<div style="clear: both"></div>
 +
 +
=Templateanpassungen=
 +
Die grösste Einflussmöglichkeit ein eigenes Design zu implementieren, besteht in der Anpassung des Templates '''metamodels_prerendered.html5'''.
 +
 +
==Original==
 +
<source lang="php">
 +
<?php $strRendersettings = ($this->settings)? 'settings' : 'view'; ?>
 +
<?php if (count($this->data)): ?>
 +
 +
<div class="layout_full">
 +
 +
<?php foreach ($this->data as $arrItem): ?>
 +
<div class="item <?php echo $arrItem['class']; ?>">
 +
 +
<?php foreach ($arrItem['attributes'] as $field => $strName): ?>
 +
<?php if (($strValue = $arrItem[$this->getFormat()][$field]) || ($strValue = $arrItem['text'][$field])): ?>
 +
<div class="field <?php echo $field; ?>">
 +
  <?php if(!$this->$strRendersettings->get('hideLabels')): ?>
 +
    <div class="label"><?php echo $strName; ?>: </div>
 +
  <?php endif; ?>
 +
  <div class="value"> <?php echo $strValue; ?></div>
 +
</div>
 +
<?php endif; ?>
 +
<?php endforeach; ?>
 +
<?php if ($arrItem['jumpTo']['deep']): ?>
 +
<a href="<?php echo $arrItem['jumpTo']['url']; ?>"><?php echo $this->details; ?></a>
 +
<?php endif; ?>
 +
</div>
 +
<?php endforeach; ?>
 +
</div>
 +
<?php else: ?>
 +
<p class="info"><?php echo $this->noItemsMsg; ?></p>
 +
<?php endif; ?>
 +
<?php endif; ?>
 +
 +
</source>
 +
 +
==Mögliches eigenes Templates==
 +
Klassischerweise werden über ein Loop (foreach) die Attribute aus einem Objekt (item) ausgelesen. Diese werden dann in ein field gepackt und über label bzw. value ausgegeben. Wenn man hier mehr Gestaltungsfreiheiten haben möchte, muss man die Attribute eines Items einzelnen ('MeinAttribut') ansprechen:<br>
 +
Der Feldtitel... <?php echo $arrItem['attributes']['MeinAttribut']; ?> bzw. <br>
 +
Der Wert des Feldes... <?php echo $arrItem['text']['MeinAttribut']; ?>
 +
 +
Wer sich mit HTML und CSS auskennt, kann sich hier ein eigenes Template zurecht schustern.
 +
 +
<source lang="php">
 +
 +
<?php if (count($this->data)): /* display only if there is data. */ ?>
 +
<div class="layout_full">
 +
<?php foreach ($this->data as $arrItem): /* loop over all items. */ ?>
 +
 +
<div class="item <?php echo $arrItem['class']; ?>">
 +
<h1><?php echo $arrItem['text']['title']; ?> (<?php echo $arrItem['text']['year']; ?>)</h1>
 +
<div class="content">
 +
  <div class="field composer">
 +
    <span class="label"><?php echo $arrItem['attributes']['composer']; ?></span>
 +
    <span class="value"><strong><?php echo $arrItem['text']['composer']; ?></strong></span>
 +
  </div>
 +
  <div class="field style">
 +
    <span class="label"><?php echo $arrItem['attributes']['style']; ?></span>
 +
    <span class="value"><?php echo $arrItem['text']['style']; ?></span>
 +
  </div>
 +
  <div class="field country">
 +
    <span class="label"><?php echo $arrItem['attributes']['country']; ?></span>
 +
    <span class="value"><?php echo $arrItem['text']['country']; ?></span>
 +
  </div>
 +
  <div class="field description">
 +
    <span class="label"><?php echo $arrItem['attributes']['description']; ?></span>
 +
    <span class="value"><?php echo $arrItem['text']['description']; ?></span>
 +
  </div>
 +
  <div class="field web">
 +
    <span class="label"><?php echo $arrItem['attributes']['web']; ?></span>
 +
    <span class="value"><?php echo $arrItem['html5']['web']; ?></span>
 +
  </div>
 +
  <div class="field images">
 +
    <span class="label"><?php echo $arrItem['attributes']['images']; ?></span>
 +
    <span class="value"><?php echo $arrItem['html5']['images']; ?></span>
 +
  </div>
 +
</div>
 +
<div class="clear"></div>
 +
</div>
 +
 +
<?php if ($arrItem['jumpTo']): ?><a href="<?php echo $arrItem['jumpTo']['url']; ?>">Zurück zur Liste</a><?php endif; ?>
 +
<?php endforeach; /* item loop */ ?>
 +
</div>
 +
 +
<?php else:  /* no items found */ ?><p class="info"><?php echo $this->noItemsMsg; ?></p>
 +
<?php endif; ?>
 +
 +
</source>
 +
 +
==Mögliches Tabellentemplate==
 +
Ein weiteres Umsetzungsbeispiel, dass im [https://community.contao.org/de/showthread.php?39668-Template-f%FCr-Ausgabe-als-Tabelle diesem Thread] behandelt wurde. Bei diesem Beispiel erkennt man auch, dass man gänzlich auf die vorgegebenen CSS-Klassen verzichten und ein komplett eigenes Template erstellen kann.
 +
<source lang="php">
 +
 +
<?php if (count($this->data)): /* display only if there is data. */ ?>
 +
<?php $arrItem = $this->data[0]; /* fetch first item for title columns. */ ?>
 +
 +
<table class="termintabelle">
 +
  <thead>
 +
      <tr>
 +
<th><?php echo $arrItem['attributes']['title']; ?></th>
 +
<th><?php echo $arrItem['attributes']['startdatum']; ?></th>
 +
<th><?php echo $arrItem['attributes']['enddatum']; ?></th>
 +
<th><?php echo $arrItem['attributes']['meldeschluss']; ?></th>
 +
<th><?php echo $arrItem['attributes']['ort']; ?></th>
 +
<th><?php echo $arrItem['attributes']['kontaktperson']; ?></th>
 +
<th><?php echo $arrItem['attributes']['email']; ?></th>
 +
      </tr>
 +
  </thead>
 +
 +
  <tbody>
 +
  <?php?>
 +
  <?php foreach ($this->data as $arrItem): /* loop over all items. */ ?>
 +
 +
    <tr>
 +
<td><?php echo $arrItem['text']['title']; ?></td>
 +
<td><?php echo $arrItem['text']['startdatum']; ?></td>
 +
<td><?php echo $arrItem['text']['enddatum']; ?></td>
 +
<td><?php echo $arrItem['text']['meldeschluss']; ?></td>
 +
        <td><?php echo $arrItem['text']['ort']; ?></td>
 +
        <td><?php echo $arrItem['text']['kontaktperson']; ?></td>
 +
        <td><a href="mailto:<?php echo $arrItem['text']['email']; ?>"><?php echo $arrItem['text']['email']; ?></a></td>
 +
    </tr>
 +
 +
  <?php endforeach; /* item loop */ ?>
 +
  </tbody>
 +
</table>
 +
   
 +
<?php endif; ?>
 +
 +
</source>
 +
==Templates für einzelne Attrute==
 +
Für einzelne Attribute lassen sich ebenfalls eigene Templates anwenden - das ist praktisch, wenn man beispielsweise bestimmte Textattribute als Überschrift ausgeben möchte, ansonsten aber auf die Standardvorgaben zurückgreifen will.
 +
 +
===Beispiel mm_attr_text===
 +
Der Code für das Textattribut sieht wie folgt aus:
 +
<source lang="php">
 +
<span class="text"><?php echo $this->raw; ?></span>
 +
</source>
 +
 +
===Beispiel mm_attr_text_h2===
 +
Ein angepasstes Template für ein einzelnes Attribut könnte man für eine Überschrift zweiter Ordnung unter dem Namen mm_attr_text_h2.html5 dann so anlegen:
 +
<source lang="php">
 +
<h2 class="h2"><?php echo $this->raw; ?></h2>
 +
</source>
 +
Wählt man in den Rendereinstellungen für das Frontend dann für ein einzelnes Textattribut dieses Template aus kann man eine Überschrift ausgeben. Selbstverständlich lassen sich auch alle anderen Attribute so übersteuern.
 +
 +
Die Namenskonvention folgt dem Schema [mm]_[attr]_[attributart]_[beschreibung].[dateiextension]

Aktuelle Version vom 28. Juli 2014, 11:29 Uhr

Allgemeines zu den Ausgabevorgaben (aka Rendereinstellungen)

  1. MetaModels Attribute
  2. MetaModels Ausgabevorgaben
  3. MetaModels Eingabemaske
  4. MetaModels Filter
  5. MetaModels Ansichtseinstellungen

Was sind eigentlich Ausgabevorgaben?

Icons ausgabevorgaben.png

Mit dem Ausgabevorgaben kann man bestimmen, welche Attribute (und in welcher Reihenfolge) in einer Ansicht gezeigt werden sollen. Z.B. möchte man in einer Liste nicht alle, sondern nur die wichtigsten vier Attribute anzeigen. Im Backend sind die Ausgabevorgaben nur für die Liste relevant. Die Eingabemaske (Formular) wird über die Paletteneinstellung gesteuert.

Einstieg

Mm backend ausgabevorgaben.png

Nachdem man über Neu einen Eintrag generiert hat, stehen 2 Funktionen zur Verfügung:

  1. Ausgabe bearbeiten: Erstellen und organisieren von Ansichten
  2. Attributseinstellungen bearbeiten: Hinzufügen und organisieren von Attributen

Hinweis
Die ID der Rendereinstellung (Tool-Tip bei Icon 'Info) ist nützlich, wenn man den Detail-Link anpassen möchte. Siehe hier

Ansicht

Einstellungen

Mm backend ausgabevorgaben formular.png

Hier legt man die Einstellungen fest, die später in den Frontend-Modulen als so genannte Anzuwendende Rendereinstellungen zum Tragen kommen.

  • Name: Name der Ansicht
  • Als Standard verwenden: Optional
  • Template: Standardmässig stehen 2 Templates zur Verfügung
    • metamodel_prerendered (Globaler Gültigkeitsbereich)... nimmt Rücksicht auf die Reihenfolge, die man in den Attributseinstellungen vornimmt
    • metamodel_unrendered (Globaler Gültigkeitsbereich) ... ignoriert die Rendersettings, man kann das Template den eigenen Wünschen anpassen
    • hier tauchen auch die selbsterstellten metamodel_Templates auf
  • Ausgabeformat: HTML5, XHTML, Text
  • Zielseite: Wichtig, wenn man von einer Liste zu einer Detailseite springen will
    • Springe zu Seite: Interner Link oder URL, der zur Zielseite führt
    • Filtereinstellungen: Hier kann man den Filter angeben, der den Link zur Zielseite anzeigt. Gibt man keinen Filter an, wird im Frontend kein "Detail"-Link angezeigt.
  • Leere Einträge verbergen
  • Labels verbergen
  • Zusätzliche CSS-Dateien
  • Zusätzliche JavaScript-Dateien

Attribute

Mm backend ausgabevorgaben liste.png

Über Alle hinzufügen kann man sich alle verfügbaren Attribute dazuladen. Hier legt man fest, welche Attribute in der Ansicht gezeigt werden sollen (Icon 'Auge'). Falls man oben das Template metamodel_prerendered (global scope) gewählt hat, nimmt dieses Template Rücksicht auf die hier gezeigte Reihenfolge.

Attribut-Templates

Mm backend ausgabevorgaben liste detail.png

Jedes Attribute verfügt über ein eigenes Template. Auf Wunsch kannt man natürlich auch hierauf Zugriff nehmen.

Templateanpassungen

Die grösste Einflussmöglichkeit ein eigenes Design zu implementieren, besteht in der Anpassung des Templates metamodels_prerendered.html5.

Original

<?php $strRendersettings = ($this->settings)? 'settings' : 'view'; ?>
<?php if (count($this->data)): ?>
 
<div class="layout_full">
 
<?php foreach ($this->data as $arrItem): ?>
<div class="item <?php echo $arrItem['class']; ?>">
 
<?php foreach ($arrItem['attributes'] as $field => $strName): ?>
<?php if (($strValue = $arrItem[$this->getFormat()][$field]) || ($strValue = $arrItem['text'][$field])): ?>
<div class="field <?php echo $field; ?>">
  <?php if(!$this->$strRendersettings->get('hideLabels')): ?>
    <div class="label"><?php echo $strName; ?>: </div>
  <?php endif; ?>
  <div class="value"> <?php echo $strValue; ?></div>
</div>
<?php endif; ?>
<?php endforeach; ?>
<?php if ($arrItem['jumpTo']['deep']): ?>
<a href="<?php echo $arrItem['jumpTo']['url']; ?>"><?php echo $this->details; ?></a>
<?php endif; ?>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="info"><?php echo $this->noItemsMsg; ?></p>
<?php endif; ?>
<?php endif; ?>

Mögliches eigenes Templates

Klassischerweise werden über ein Loop (foreach) die Attribute aus einem Objekt (item) ausgelesen. Diese werden dann in ein field gepackt und über label bzw. value ausgegeben. Wenn man hier mehr Gestaltungsfreiheiten haben möchte, muss man die Attribute eines Items einzelnen ('MeinAttribut') ansprechen:
Der Feldtitel... <?php echo $arrItem['attributes']['MeinAttribut']; ?> bzw.
Der Wert des Feldes... <?php echo $arrItem['text']['MeinAttribut']; ?>

Wer sich mit HTML und CSS auskennt, kann sich hier ein eigenes Template zurecht schustern. 

<?php if (count($this->data)): /* display only if there is data. */ ?>
<div class="layout_full">
<?php foreach ($this->data as $arrItem): /* loop over all items. */ ?>
 
<div class="item <?php echo $arrItem['class']; ?>">
<h1><?php echo $arrItem['text']['title']; ?> (<?php echo $arrItem['text']['year']; ?>)</h1>
<div class="content">
  <div class="field composer">
    <span class="label"><?php echo $arrItem['attributes']['composer']; ?></span>
    <span class="value"><strong><?php echo $arrItem['text']['composer']; ?></strong></span>
  </div>
  <div class="field style">
    <span class="label"><?php echo $arrItem['attributes']['style']; ?></span>
    <span class="value"><?php echo $arrItem['text']['style']; ?></span>
  </div>
  <div class="field country">
    <span class="label"><?php echo $arrItem['attributes']['country']; ?></span>
    <span class="value"><?php echo $arrItem['text']['country']; ?></span>
  </div>
  <div class="field description">
    <span class="label"><?php echo $arrItem['attributes']['description']; ?></span>
    <span class="value"><?php echo $arrItem['text']['description']; ?></span>
  </div>
  <div class="field web">
    <span class="label"><?php echo $arrItem['attributes']['web']; ?></span>
    <span class="value"><?php echo $arrItem['html5']['web']; ?></span>
  </div>
  <div class="field images">
    <span class="label"><?php echo $arrItem['attributes']['images']; ?></span>
    <span class="value"><?php echo $arrItem['html5']['images']; ?></span>
  </div>
</div>
<div class="clear"></div>
</div>
 
<?php if ($arrItem['jumpTo']): ?><a href="<?php echo $arrItem['jumpTo']['url']; ?>">Zurück zur Liste</a><?php endif; ?>
<?php endforeach; /* item loop */ ?>
</div>
 
<?php else:  /* no items found */ ?><p class="info"><?php echo $this->noItemsMsg; ?></p>
<?php endif; ?>

Mögliches Tabellentemplate

Ein weiteres Umsetzungsbeispiel, dass im diesem Thread behandelt wurde. Bei diesem Beispiel erkennt man auch, dass man gänzlich auf die vorgegebenen CSS-Klassen verzichten und ein komplett eigenes Template erstellen kann. 

<?php if (count($this->data)): /* display only if there is data. */ ?>
<?php $arrItem = $this->data[0]; /* fetch first item for title columns. */ ?>
 
<table class="termintabelle">
  <thead>
      <tr>
	<th><?php echo $arrItem['attributes']['title']; ?></th>
	<th><?php echo $arrItem['attributes']['startdatum']; ?></th>
	<th><?php echo $arrItem['attributes']['enddatum']; ?></th>
	<th><?php echo $arrItem['attributes']['meldeschluss']; ?></th>
	<th><?php echo $arrItem['attributes']['ort']; ?></th>
	<th><?php echo $arrItem['attributes']['kontaktperson']; ?></th>
	<th><?php echo $arrItem['attributes']['email']; ?></th>
      </tr>
  </thead>
 
  <tbody>
  <?php?>
  <?php foreach ($this->data as $arrItem): /* loop over all items. */ ?>
 
    <tr>
	<td><?php echo $arrItem['text']['title']; ?></td>
	<td><?php echo $arrItem['text']['startdatum']; ?></td>
	<td><?php echo $arrItem['text']['enddatum']; ?></td>
	<td><?php echo $arrItem['text']['meldeschluss']; ?></td>
        <td><?php echo $arrItem['text']['ort']; ?></td>
        <td><?php echo $arrItem['text']['kontaktperson']; ?></td>
        <td><a href="mailto:<?php echo $arrItem['text']['email']; ?>"><?php echo $arrItem['text']['email']; ?></a></td>
    </tr>
 
  <?php endforeach; /* item loop */ ?>
  </tbody>
</table>
 
<?php endif; ?>

Templates für einzelne Attrute

Für einzelne Attribute lassen sich ebenfalls eigene Templates anwenden - das ist praktisch, wenn man beispielsweise bestimmte Textattribute als Überschrift ausgeben möchte, ansonsten aber auf die Standardvorgaben zurückgreifen will.

Beispiel mm_attr_text

Der Code für das Textattribut sieht wie folgt aus: 

<span class="text"><?php echo $this->raw; ?></span>

Beispiel mm_attr_text_h2

Ein angepasstes Template für ein einzelnes Attribut könnte man für eine Überschrift zweiter Ordnung unter dem Namen mm_attr_text_h2.html5 dann so anlegen: 

<h2 class="h2"><?php echo $this->raw; ?></h2>

Wählt man in den Rendereinstellungen für das Frontend dann für ein einzelnes Textattribut dieses Template aus kann man eine Überschrift ausgeben. Selbstverständlich lassen sich auch alle anderen Attribute so übersteuern.

Die Namenskonvention folgt dem Schema [mm]_[attr]_[attributart]_[beschreibung].[dateiextension]

Von „https://de.contaowiki.org/index.php?title=MetaModels_Backend:_Ausgabevorgaben&oldid=8233“
Ansichten
Meine Werkzeuge

Contao Community Documentation

<TheTril> Stateless Template, Stateless Elements, Stateless Renderer :)
<TheTril> everything is stateles :D
<leo-unglaub> TheTril: genau wie Ed Snowden *g*

Navigation
Verstehen
Verwenden
Entwickeln
Verschiedenes
Werkzeuge