Eigene Strukturelemente umsetzen

10. Nov 2014

Erstellen Sie Ihre eigenen Struktur-Elemente für den Einsatz von wiederverwendbaren Seiten-Funktionen.

Eigene Funktionen und Programmierungen können Sie Ihren Redakteuren über den gewohnten Struktureditor zur Verfügung stellen. In den meisten Fällen bietet es sich an, ein vorhandenes Strukturelement als Grundlage für ein eigenes Strukturelement heranzuziehen. Suchen Sie sich hierzu das Weblic® als Grundlage aus, das Ihren Vorstellungen des individuellen Strukturelementes am nächsten kommt.

Vergewissern Sie sich vor Erstellen eines eigenen Strukturelementes, ob nicht bereits ein Weblic® bzw. eine CSS-Only-Variante hierzu besteht, welche Ihre geplante Umsetzung bereits abbildet! Gerne können Sie hierzu beim Weblication® Support nachfragen (siehe Link "Support" auf der rechten Seite).

Eigenes Strukturelement auf Basis des Horizontale Linie Weblics®

Auf Basis des Weblics® "Horizontale Linie" soll dieses Beispiel zeigen, wie Sie ein eigenes Strukturelement umsetzen. Einem Redakteur soll in der Bearbeitung ermöglicht werden, über eine Auswahlbox die Farbe aufgrund von CSS-Only-Definitionen zu bestimmen.

In den folgenden Quelltextbeispielen wird im linken Beispiel das Strukturelement "Horizontale Linie" (Standard) und im rechten Beispiel das individuell angepasste Strukturelement "Horizontale Linie (mit Farbauswahl)" angezeigt (Stand: November 2014).

layout.hr.wItem.php (Standardauslieferung)

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/Transform" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" 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 wslEditorPre wslPre wslPost wsl php" version="1.0">
<!-- Source: base.standard, 002.001.449.000 (2014-11-03 16:26:04)-->
  
<wd:extension type="weblication" version="5.0" uid="f0796051868d6bb322b56d0fa60ef254">
  <wd:meta>
    <wd:title>Horizontale Linie</wd:title>
    <wd:description/>
    <wd:modification name="admin" time="1382449764"/>
    <wd:creation name="admin" time="1252018717"/>
    <wd:icon src="/baseGlobal/wGlobal/layout/images/element-icons/element_hr.gif"/>
  </wd:meta>
  <wd:status>
    <wd:online from="" status="on" to=""/>
    <wd:type value=""/>
  </wd:status>
  <wd:version value="3"/>
</wd:extension>    
    
  <xsl:template match="wd:item[@type = 'layout.hr']" wChecksum="f37b70488fded31c00740a394f218f04">
    <!-- web:item:start name="Horizontale Linie" en:name="Horizontal line" iconStyle="" copy="1" delete="1" drag="1" display="" active="<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'wUseStructureEditor')" />" pathEditMastertemplate="/baseGlobal/wGlobal/mastertemplates/items/layout.hr.wItemMastertemplate.php" pathEditXslt="/baseGlobal/wGlobal/layout/templates/items/layout.hr.wItem.php" type="layout.hr"-->
    <hr/>
    <xsl:if test="$wIsInEditor and @wEditorId and php:functionString('wEnv::getGlobalValue', 'wUseEditor') != '0'"><br /></xsl:if>
    <!-- web:item:stop -->
  </xsl:template>    
   
</xsl:stylesheet>

Auszug aus der design.css (Standard)

/* ... */
hr                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}
/* ... */

layout.hr.custom.wItem.php (Individuell angepasst)

<?php $version="1.0"; $encoding="UTF-8"; ?>
<?php exit; ?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:xslIfIsInEditor="http://www.w3.org/1999/XSL/Transform" xmlns:wslPre="http://weblication.de/5.0/wsl" xmlns:wslPost="http://weblication.de/5.0/wsl" xmlns:wslEditorPre="http://weblication.de/5.0/wsl" 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 wslEditorPre wslPre wslPost wsl php" version="1.0">
<!-- Source: base.standard, 002.001.449.000 (2014-11-03 16:26:04)-->
  
<wd:extension type="weblication" version="5.0" uid="f0796051868d6bb322b56d0fa60ef255">
  <wd:meta>
    <wd:title>Horizontale Linie (mit Farbwahl)</wd:title>
    <wd:description/>
    <wd:modification name="admin" time="1382449764"/>
    <wd:creation name="admin" time="1252018717"/>
    <wd:icon src="/baseGlobal/wGlobal/layout/images/element-icons/element_hr.gif"/>
  </wd:meta>
  <wd:status>
    <wd:online from="" status="on" to=""/>
    <wd:type value=""/>
  </wd:status>
  <wd:version value="3"/>
</wd:extension>    
    
  <xsl:template match="wd:item[@type = 'layout.hr.custom']" wChecksum="f37b70488fded31c00740a394f218f05">
    <!-- web:item:start name="Horizontale Linie" en:name="Horizontal line" iconStyle="" copy="1" delete="1" drag="1" display="" active="<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'wUseStructureEditor')" />" pathEditMastertemplate="/baseGlobal/wGlobal/mastertemplates/items/layout.hr.custom.wItemMastertemplate.php" pathEditXslt="/baseGlobal/wGlobal/layout/templates/items/layout.hr.custom.wItem.php" type="layout.hr.custom"-->
    
      <xsl:choose>
        <xsl:when test="$wIsInEditor and @wEditorId and php:functionString('wEnv::getGlobalValue', 'wUseEditor') != '0'">
          <div style="white-space:nowrap">
            <div style="position:relative;float:right;">
              <img id="wConfigMaskOpener_{@uid}" src="/weblication/grid5/gui/images/editor/config.gif" title="{php:functionString('wTexts::showTextUser', 'Options', 'Formatierung')}" style="position:absolute;z-index:9;right:0;width:19px;height:20px;cursor:pointer;user-drag:none;-moz-user-select:none;-webkit-user-drag:none;">
                <xsl:choose>
                  <xsl:when test="php:functionString('wVariables::getValue', 'target_configMasks', '/baseGlobal') = 'layer'">
                    <xsl:attribute name="onclick">wEditor.expandConfigMask('wConfigMask_<xsl:value-of select="@wEditorId"/>', this)</xsl:attribute>
                  </xsl:when>
                  <xsl:otherwise>  
                    <xsl:attribute name="onclick">wDocument.toggleDisplay('wConfigMask_<xsl:value-of select="@wEditorId"/>', {'animate' : 'height'})</xsl:attribute>
                  </xsl:otherwise>
                </xsl:choose>
              </img>
            </div>
            <div class="wEditorElementConfiguration" id="wConfigMask_{@wEditorId}" style="display:none;clear:both">
              <div class="wEditorElementConfigurationInner">
                <div class="wEditorElementHeadline"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'color selection', 'Farbauswahl', 'sélection des couleurs')"/></div>
                <div class="wEditorElementLabel"><xsl:value-of select="php:functionString('wTexts::showTextUser', 'color', 'Farbe', 'couleur')"/></div>
                <div class="wEditorElementValue"><table width="100%" cellpadding="0" cellspacing="0"><tr><td style="width:50%"><!-- web:text:start editor="selectCssClassVariant" valueDefault="0" onchange="wEditor.saveDraftAndReload();" pathCss="<xsl:value-of select="$wCSSPath"/>" cssClass="elementLineHorizontal" validator="" inputStyle="width:auto" --><xsl:value-of select="wd:fragment[@id='layout']/text()"/><!-- web:text:stop --></td><td style="width:20px;padding:0 0 0 2px"><wsl:ifIsAdmin><wsl:button onclick="wOpenEditor('{$wCSSPath}', '', '/weblication/grid5/apps/wEditorWd/index.php', '', '', '', 'elementLineHorizontal_var' + wDocument.element('webtag_text_{wd:fragment[@id='layout']/@wEditorId}').value)" showInEditor="1" icon="css_stylesheets" caption="" title="{php:functionString('wTexts::showTextUser', 'Edit CSS', 'CSS anpassen')}" style="" size="small"/></wsl:ifIsAdmin></td></tr></table></div>                        
              </div>
            </div>
            <xsl:variable name="hrClass"><xsl:choose><xsl:when test="wd:fragment[@id='layout']/text() != ''">elementLineHorizontal_var<xsl:value-of select="wd:fragment[@id='layout']/text()"/></xsl:when><xsl:otherwise>default</xsl:otherwise></xsl:choose></xsl:variable>
            <hr class="{$hrClass}"/>
          </div>    
        </xsl:when>
        <xsl:otherwise>
          <xsl:variable name="hrClass"><xsl:choose><xsl:when test="wd:fragment[@id='layout']/text() != ''">elementLineHorizontal_var<xsl:value-of select="wd:fragment[@id='layout']/text()"/></xsl:when><xsl:otherwise>default</xsl:otherwise></xsl:choose></xsl:variable>
          <hr class="{$hrClass}"/>
        </xsl:otherwise>
      </xsl:choose>
    <!-- web:item:stop -->
  </xsl:template>    
   
</xsl:stylesheet>

Auszug aus der design.css (Erweiterung)

/* ... */
hr                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}

/*@wCssFragment{class:elementLineHorizontal;variant:0;caption:Horizontale Linie Standard;caption-en:Line Default}*/
hr.elementLineHorizontal_var0                   {margin:0 0 10px 0;border-color:$borderColorLines;border-style:solid none none none;height:0px}
/*@wCssFragment{class:elementLineHorizontal;variant:1;caption:Horizontale Linie Blau;caption-en:Line Blue}*/
hr.elementLineHorizontal_var1                   {margin:0 0 10px 0;border-color:blue;border-style:solid none none none;height:0px}
/*@wCssFragment{class:elementLineHorizontal;variant:2;caption:Horizontale Linie Rot;caption-en:Line Red}*/
hr.elementLineHorizontal_var2                   {margin:0 0 10px 0;border-color:red;border-style:solid none none none;height:0px}
/* ... */
 

Schritt-für-Schritt

Es gibt keine allgemeingültige Anleitung für das Erstellen eines eigenen Strukturelementes. Sehen Sie diese Schritt-für-Schritt Anleitung daher als einen Beispiel-Leitfaden an, der sich am o.g. Beispiel orientiert. In der Regel können Sie dies aber auf eine Vielzahl anderer Umsetzungswünsche ebenso anwenden.

Schritt 1: Grundlage für eigenes Strukturelement finden

Besuchen Sie unser Weblics® Portal und suchen Sie nach einem Weblic®, das den Vorstellungen zu Ihrem geplanten Strukturelement am nächsten kommt. Ggf. findet sich sogar eine CSS-Only-Variante eines bestehenden Weblics®, welche direkt von Ihnen eingesetzt werden kann und eine eigene Umsetzung nicht mehr erforderlich macht.

Gerne können Sie das Weblication® Team oder den Support über den Supportweg kontaktieren, um in Erfahrung zu bringen, ob es die geplante Anwendung bereits (in abgewandelter Form) gibt.

Schritt 2: Templates und Steuerungsdateien kopieren

Weblics® Verwaltung - Weblic® Horizontale Liniezoom
Weblics® Verwaltung - Weblic® Horizontale Linie

Ist ein Weblic® als Basis für das individuelle Strukturelement gefunden und installiert, rufen Sie die Weblics®-Verwaltung auf. Durch Klick auf den Aufklapp-Pfeil zum entsprechenden Weblic® (z.B. "Horizontale Linie") werden Ihnen die wichtigsten Templates und Steuerungsdateien angezeigt.

Kopieren Sie diese Dateien und legen Sie diese unter eigenem Namen im jeweils gleichen Verzeichnis ab.

Anhand des Beispieles also:

Basis -> Neu

.../layout.hr.wItem.php                        -> .../layout.hr.custom.wItem.php
.../layout.hr.wItemMastertemplate.php  -> .../layout.hr.custom.wItemMastertemplate.php


Schritt 3: type-Angaben und Quelltext anpassen

Passen Sie als erstes unbedingt die type-Angaben in den Templates an! Diese dienen der eindeutigen Zuweisung der Templates zu den entsprechenden Elementen!

Suchen Sie am besten über die Tastenkombination STRG+F nach der entsprechenden Angabe (im Beispiel: layout.hr) und passen Sie diese auf die von Ihnen definierte Angabe (z.B. layout.hr.custom) an.

Anschließend passen Sie die Templates dahingehend an, damit diese die Funktionen für die von Ihnen gewünschte Anwendung abbildet. Im Beispiel wurde das Strukturelement "Horizontale Linie" im individuellen Template um eine Farbauswahl erweitert.

Prüfen Sie, ob das Strukturelement ggf. auf weitere (Skript-)Dateien zurückgreift und passen Sie diese ebenso an (z.B. CSS, JS, etc.).

Schritt 4: Prüfen der Anwendung

Abschließend prüfen Sie die von Ihnen erstellten Templates auf Funktionalität. Fügen Sie hierzu in einer Seite das neue Strukturelement ein.
Ggf. müssen Sie zuvor im Verzeichnis des Templates den Aktualisieren-Button betätigen, damit der Index aktualisiert wird.

Entwicklerbereich Weblication® CMS - © Scholl Communications AG