So setzen Sie ein Element mit unterschiedlichen Darstellungsarten um

Veröffentlichungsdatum: 28. Dezember 2010
Änderungsdatum: 14. Mai 2012

element strukturelement struktureditor ausgabe klasse container

Dieser Artikel beschreibt, wie Sie ein Strukturelement umsetzen, das mit unterschiedlichen Darstellungen ausgegeben werden soll.

In der BASE Projektbasis liefern wir diverse Elemente mit, bei denen die Ausgabe über die Bearbeitung definiert werden kann. Am Beispiel des Strukturelementes "container.box" zeigt Ihnen dieser Artikel, wie dies in älteren Projekten umgesetzt ist (aktuelle Projekte nutzen zudem die Definition der Klassen über die Projektkonfiguration).

Innerhalb der Bearbeitung ermöglichen Sie dem Benutzer die Auswahl der verschiedenen Darstellungsarten. Dies definieren Sie über eine Auswahlbox (Texteditor mit editor="select"). Dieser Auswahlbox geben Sie die gewünschten Werte mit. Im Beispiel (siehe unten) wird dies über Variablen eingelesen, die in den beiden Zeilen oberhalb des Text-Pflegekommentares definiert sind.
Eingepflegt wird dieser Wert in das Fragment mit der id='display'.

Für die Ausgabe des Inhaltscontainers wird auf den display-Wert zurückgegriffen. Abhängig davon wird dem DIV-Container über xsl:attribute eine andere Klasse zugewiesen (zusammengesetzt über das Prefix "elementBox" und dem eingepflegten Wert (ergibt z.B. "elementBoxSheet"). Diese Klasse definieren Sie in der verwendeten CSS-Datei (meist design.css). Dort können Sie z.B. eine Hintergrundfarbe, Hintergrundbild, einen Rahmen oder dergleichen für die Ausgabe definieren.

Beispiel: Inhalt der /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/container.box.wItem.php

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:wsl="http://weblication.de/5.0/wsl" xmlns:wd="http://weblication.de/5.0/wd" xmlns:php="http://php.net/xsl" exclude-result-prefixes="wd wsl php" version="1.0">
<!-- Source: base.standard, 001.000.318.000 (2011-12-21 10:30:18)-->

<wd:extension type="weblication" version="5.0" uid="8749dcd97cb5e8bd4e4432f2990cb192">
  <wd:meta>
    <wd:title>Inhaltsbox</wd:title>
    <wd:description/>
    <wd:modification name="admin" time="1292234420"/>
    <wd:creation name="admin" time="1252018717"/>
    <wd:icon src="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/images/element-icons/element_box.gif"/>
  </wd:meta>
  <wd:status>
    <wd:online from="" status="on" to=""/>
    <wd:type value=""/>
  </wd:status>
  <wd:version value="17"/>
    <wd:cache expires="{wGetValueOfDefaultExtension()}"/>
  </wd:extension>
        
  <xsl:template match="wd:item[@type = 'container.box']">
    <!-- web:item:start name="Inhaltsbox (mit weiteren Elementen befüllbar)" en:name="Box to include further elements" iconStyle="" display="user" pathEditMastertemplate="/[IHR-LAYOUT-PROJEKT]/wGlobal/mastertemplates/items/container.box.wItemMastertemplate.php" pathEditXslt="/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/container.box.wItem.php" type="container.box"-->
    
    <xsl:if test="$wIsInEditor and @wEditorId">
      <div id="wConfigMask_{@wEditorId}" class="wEditorStructureElementConfigurationSmart">
        <xsl:if test="php:functionString('wRequest::getCookie', 'showStructureEditor') = '0'"><xsl:attribute name="style">display:none</xsl:attribute></xsl:if>
        <!-- 
          Weitere individuelle auswählbare Klassen können über die zwei folgenden Variablen definiert werden. 
          Die in der Webseite ausgegebene Klasse setzt sich aus elementBox + der ausgewählten Variable $selectableClasses zusammen, also z.B. class="elementBoxSheet"
          Der Redakteur sieht alle in der Variable $selectableCaptions angegebenen Werte in seiner Sprache zur Auswahl
        -->
        <xsl:variable name="selectableClasses">Sheet|Blank</xsl:variable>
        <xsl:variable name="selectableCaptions"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Sheet', 'Box', 'Champs de saisie')"/>|<xsl:value-of select="php:functionString('wTexts::showTextUser', 'Default', 'Neutral', 'Défaut')"/></xsl:variable>        
        <!--web:text:start editor="select" onchange="wEditor.saveDraftAndReload()" values="<xsl:value-of select="$selectableClasses" />" texts="<xsl:value-of select="$selectableCaptions" />" styles="" inputStyle="float:right;width:auto;background-color:#EBEBEB"--><xsl:value-of select="wd:fragment[@id = 'display']/text()"/><!--web:text:stop-->
        <div class="wEditorElementHeadline"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'Box', 'Inhaltsbox', 'Champs de saisie contenu')"/></div>   
      </div>                          
    </xsl:if>       
    
    <div>                     
      <xsl:attribute name="class">elementBox<xsl:value-of select="php:functionString('ucfirst', wd:fragment[@id = 'display']/text())" /></xsl:attribute>         
      <xsl:apply-templates select="wd:group[@id = 'box']"/>
    </div>      
    <!-- web:item:stop -->
  </xsl:template>
  
  <xsl:template match="wd:group[@id='box']">
    <!-- web:group:start itemsInclude="" itemsExclude="container.standard|container.box" name="<xsl:value-of select="ancestor::wd:group/@id"/>" display="user"-->
      <xsl:apply-templates select="wd:item[php:function('wOutput::isViewableItem', ., $wViewMode)]"/>
    <!-- web:group:stop -->
  </xsl:template>   
  
</xsl:stylesheet>

Weiterführende Links

Pflegetag-Referenz - Pflege von textbasierten Daten

SELFHTML: xsl:attribute (Attribut im Ergebnisbaum erzeugen)

FAQs

Wie kann man ein Strukturelement mit unterschiedlichen Darstellungen umsetzen?: Man definiert die möglichen Darstellungsarten in der Bearbeitung über eine Auswahlbox (Texteditor mit editor="select"). Der ausgewählte Wert wird im Fragment mit der id="display" gespeichert. Für die Ausgabe des Inhaltscontainers wird dann auf den display-Wert zurückgegriffen und dem DIV-Container per xsl:attribute eine Klasse zugewiesen.
Wie wird die Auswahl der Darstellungsarten in der Bearbeitung erstellt?: Über eine Auswahlbox (editor="select") werden Werte und Texte bereitgestellt. Im Beispiel wird dies mit Variablen umgesetzt, etwa selectableClasses (z.B. "Sheet|Blank") und selectableCaptions (anzeigen die Auswahltexte in der jeweiligen Sprache).
Wo wird der gewählte Darstellungsmodus gespeichert?: Der ausgewählte Wert der Auswahlbox wird in das Fragment mit der id="display" eingepflegt (z.B. via <xsl:value-of select="wd:fragment[@id = 'display']/text()"/>).
Wie steuert der display-Wert die Ausgabe des DIV-Containers?: Für die Ausgabe wird dem DIV-Container eine Klasse dynamisch zugewiesen: Der Klassenname setzt sich aus dem Prefix "elementBox" und dem großgeschriebenen display-Wert zusammen. Beispiel: elementBox + "Sheet" ergibt class="elementBoxSheet".
Wie lassen sich die Darstellungsvarianten über CSS konfigurieren?: Die so gebildeten Klassen (z.B. elementBoxSheet) werden in der verwendeten CSS-Datei definiert, meist in der Datei design.css. Dort können z.B. Hintergrundfarbe, Hintergrundbild, Rahmen oder andere Stile festgelegt werden.
Welches konkrete Beispiel wird im Artikel verwendet?: Als Beispiel dient das Strukturelement "container.box". Im gezeigten Template wird abhängig vom display-Wert die passende Klasse (z.B. elementBoxSheet) gesetzt, um unterschiedliche Darstellungen umzusetzen.
Wo findet man das Beispiel-Template für container.box?: Im Artikel wird das Beispiel im Pfad genannt: /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/items/container.box.wItem.php. Darin wird u.a. die Klasse elementBox + display-Wert für den DIV-Container gebildet.
Wie sieht die benötigte Klasse-Grundidee für die Darstellung aus?: Die Grundidee ist ein Klassenprefix "elementBox" plus die ausgewählte Variante. Der resultierende Klassenname wird dann in CSS verwendet, um die jeweilige Darstellung (z.B. Sheet vs. Blank) zu definieren.