Weblics® 2.x in BASE 1.x nutzen

Die BASE stellt die grundlegende Architektur zur einfachen Nutzung von Weblics® und CMS-Funktionen dar (siehe auch Weblication® CMS, BASE und Weblics® ).

Eine grundlegende Architekturoptimierung erfolgte mit der BASE in Version 2.x. Die wichtigsten überarbeiteten Bereiche sind nachfolgend genannt:

  • Durchgehende Unterstützung von Responsive Webdesign im Basisprojekt und Weblics®
  • Erweiterte und vereinfachte Funktionen für die Layoutumsetzung (Layoutwizard)
  • Optimierte Bildbreitenberechnung (CSS-Picture-Rendering)
  • Verbesserte Updatefähigkeit und beschleunigte Entwicklung durch CSS-Variablen und CSS-Varianten statt Änderung im Quellcode
  • Anpassung der Weblics® rein über CSS möglich

Diese Architekturoptimierung erfolgte innerhalb der CMS-Version 7.x, womit diese Weblication® CMS-Version zwei unterschiedliche BASE Major-Release-Versionen unterstützt, die parallel betrieben werden können.

Wollen Sie in einem bereits fertiggestellten BASE 1.x Projekt neue Funktionen der BASE 2.x bzw. der Weblics®2.x nutzen, kommt es auf das individuelle Projekt an, wie dies zu realisieren ist:

  • Möglichkeit 1:
    Inhalte Ihres BASE 1.x Projektes in ein neu installiertes BASE 2.x Projekt übernehmen
    BASE Neuinstallation mit Übernahme der Inhalte
  • Möglichkeit 2 (wird in diesem Artikel beschrieben):
    Weblic®s der Version 2.x innerhalb eines Projektes installieren, das auf BASE1.x basiert


Weblic®s der Version 2.x innerhalb eines Projektes installieren, das auf BASE1.x basiert

Lesen Sie sich vor Durchführung bitte zuerst alle Schritte im gesamten durch!

Schritt 1: XSLT Includes/Funktionen in includes.global.php anpassen

Innerhalb des zentralen XSLT-Templates (includes.global.php) sind u.a. die Templates für die Inhaltsbereiche und  für die Bildbreitenberechnung (CSS-Picture-Rendering) definiert. Dies sind die Grundlagen für das CSS-Picture-Rendering.

Templates:

  • content1
  • content2Global
  • content3Global
  • content4Global
  • content5Global
  • content6Global
  • content7Global
  • getWidthCurrentElement

Ersetzen Sie die bestehenden Templates durch die Templates aus der aktuellsten BASE 2.x.

Auszug aus /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/includes.global.php

<!-- Auszug aus der includes.global.php (Stand: April 2014) -->
...
  <!-- Inhaltsgruppe 1 (content1): Hier wird der Hauptinhalt eingebunden -->
  <xsl:template name="content1" wChecksum="7a79f357c7b5e1e8b2b8755e3991a02f">

    <!-- Workflow-Box -->
    <xsl:call-template name="workflowBox" wd:pathTemplate="misc/includes.global.php#workflowBox"/>

    <xsl:comment>CONTENT:START</xsl:comment>
      <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent1') != '1'">
        <xsl:variable name="blockName"><xsl:choose><xsl:when test="ancestor::*[@id = 'content3']">blockBefore</xsl:when><xsl:when test="ancestor::*[@id = 'content5']">blockBottom</xsl:when><xsl:otherwise>blockContent</xsl:otherwise></xsl:choose><xsl:value-of select="$wPageDisplayType" /></xsl:variable>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, concat('#', $blockName), '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent1', '1')"/>
      </xsl:if>
      <xsl:apply-templates select="/wd:document/wd:extension/wd:object"/>
    <xsl:comment>CONTENT:STOP</xsl:comment>
  </xsl:template>


  <!-- Globale Inhalte des rechten Bereichs -->
  <xsl:template name="content2Global" wChecksum="6fbaf7c779183141c7d67e3cb09e30cb">

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent2') != '1'">
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, '#blockRight', '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent2', '1')"/>
    </xsl:if>

    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content2" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent2Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent2Global')))/wd:document/wd:extension/wd:object" mode="content2"/>
      </xsl:otherwise>
    </xsl:choose>

    <xsl:if test="not($wIsInEditor) and php:functionString('wRequest::getParameter', 'wIsEmbeddedLanguage') != '1' and ($wUsertype = 'admin' or $wUsertype = 'standard')">
      <wsl:buttonEdit style="position:absolute;right:0;z-index:10" path="{$wProjectPath}/wGlobal/content/contentPortal/default.php" icon="portal_content" markId="areaContent2Global|areaContent3Global|areaContent4Global|areaContent5Global|areaContent6Global|areaContent7Global" title="{php:functionString('wTexts::getTextUser', 'be_edit_global_content')}"/>
    </xsl:if>

  </xsl:template>


  <!-- Globale Inhalte des oberen Bereichs -->
  <xsl:template name="content3Global" wChecksum="4673c536fa9fa439adae5d42a11c3c4b">

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent3') != '1'">   
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, concat('#blockBefore', $wPageDisplayType), '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent3', '1')"/>
    </xsl:if>

    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content3" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent3Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent3Global')))/wd:document/wd:extension/wd:object" mode="content3"/> 
      </xsl:otherwise>
    </xsl:choose>

  </xsl:template>


  <!-- Globale Inhalte des linken Bereichs -->
  <xsl:template name="content4Global" wChecksum="66d2907458d12d63c51fcda229be1e8b">

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent4') != '1'">
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, '#blockLeft', '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent4', '1')"/>
    </xsl:if>

    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content4" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent4Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent4Global')))/wd:document/wd:extension/wd:object" mode="content4"/>
      </xsl:otherwise>
    </xsl:choose>

    <xsl:if test="not($wIsInEditor) and php:functionString('wRequest::getParameter', 'wIsEmbeddedLanguage') != '1' and ($wUsertype = 'admin' or $wUsertype = 'standard')">
      <wsl:buttonEdit style="position:absolute;right:18px;z-index:10" path="{$wProjectPath}/wGlobal/content/contentPortal/default.php" icon="portal_content" markId="areaContent2Global|areaContent3Global|areaContent4Global|areaContent5Global|areaContent6Global|areaContent7Global" title="{php:functionString('wTexts::getTextUser', 'be_edit_global_content')}"/>
    </xsl:if>
  </xsl:template>


  <!-- Globale Inhalte des unteren Bereichs -->
  <xsl:template name="content5Global" wChecksum="a201d5ebeee475d047d2ae447d384d4c">

    <wsl:buttonEdit style="position:absolute;right:0;z-index:10" path="{$wProjectPath}/wGlobal/content/contentPortal/default.php" icon="portal_content" markId="areaContent2Global|areaContent3Global|areaContent4Global|areaContent5Global|areaContent6Global|areaContent7Global" title="{php:functionString('wTexts::getTextUser', 'be_edit_global_content')}"/>

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent5') != '1'">
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, '#blockBottom', '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent5', '1')"/>
    </xsl:if>

    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content5" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent5Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent5Global')))/wd:document/wd:extension/wd:object" mode="content5"/>
      </xsl:otherwise>
    </xsl:choose>
  </xsl:template>


  <!-- Globale Inhalte des unteren inneren Bereichs-->
  <xsl:template name="content6Global" wChecksum="3857965fb1e1299b9a43d17d30d44971">

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent6') != '1'">
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, '#blockContent', '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent6', '1')"/>
    </xsl:if>
    
    <xsl:comment>CONTENT:START</xsl:comment>
    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content6" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent6Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent6Global')))/wd:document/wd:extension/wd:object" mode="content6"/>
      </xsl:otherwise>
    </xsl:choose>
    <xsl:comment>CONTENT:STOP</xsl:comment>
  </xsl:template>
  
  
  <!-- Globale Inhalte des nebenstehenden Bereichs-->
  <xsl:template name="content7Global" wChecksum="ac5d4b41ed2cab16a76d3a83b4a134f2">

    <xsl:if test="php:functionString('wEnv::getGlobalValue', 'hasInitInnerWidthContent7') != '1'">
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'innerWidthCurrentElement', php:functionString('wCSS::getWidthBlock', $wCSSPath, '#blockBeside', '(int)width', concat('object-', /wd:document/wd:extension/wd:object/@type)))"/>
      <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'hasInitInnerWidthContent7', '1')"/>
    </xsl:if>
    
    <xsl:comment>CONTENT:START</xsl:comment>
    <xsl:choose>
      <xsl:when test="/wd:document/wd:extension/wd:object/@type = 'global'">
        <xsl:apply-templates select="/wd:document/wd:extension/wd:object" mode="content7" />
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="php:functionString('wEnv::setGlobalValue', 'wPathIncludeContent7Global', concat($wProjectPath, '/wGlobal/content/contentPortal/default.php'))"/>
        <xsl:apply-templates select="document(concat($wDocumentRoot, php:functionString('wEnv::getGlobalValue', 'wPathIncludeContent7Global')))/wd:document/wd:extension/wd:object" mode="content7"/>
      </xsl:otherwise>
    </xsl:choose>
    <xsl:comment>CONTENT:STOP</xsl:comment>
    
    <xsl:if test="not($wIsInEditor) and php:functionString('wRequest::getParameter', 'wIsEmbeddedLanguage') != '1' and ($wUsertype = 'admin' or $wUsertype = 'standard')">
      <wsl:buttonEdit style="position:absolute;top:10px;right:10px;z-index:10" path="{$wProjectPath}/wGlobal/content/contentPortal/default.php" icon="portal_content" markId="areaContent2Global|areaContent3Global|areaContent4Global|areaContent5Global|areaContent6Global|areaContent7Global" title="{php:functionString('wTexts::getTextUser', 'be_edit_global_content')}"/>
    </xsl:if>    
    
  </xsl:template>

...
...

  <!-- Allgemeine Funktionen -->

  <!-- Ermittelt die Breite des aktuellen Elementes-->
  <xsl:template name="getWidthCurrentElement" wChecksum="ad4737d4d803cce52001aa0269548a01">
    <xsl:value-of select="php:function('wEnv::setGlobalValue', 'widthCurrentElement', php:functionString('wEnv::getGlobalValue', 'innerWidthCurrentElement'))"/>
    <!--iwce:<xsl:value-of select="php:functionString('wEnv::getGlobalValue', 'widthCurrentElement')" />-->
  </xsl:template>
...

Beachten Sie bitte, dass noch nicht definierte Variablen in der standard.wParams.php noch zu definieren sind (z.B. $wPageDisplayType)! Entnehmen Sie diese dem aktuellen BASE Projekt unter /[IHR-LAYOUT-PROJEKT]/wGlobal/layout/templates/misc/standard.wParams.php).

Schritt 2: Versionsnummer im HTML Seiten-Template hochsetzen

Im HTML Seiten-Template ist die Versionsnummer der BASE hinterlegt, die als Projektgrundlage für Ihr Projekt installiert wurde. Diese Versionsnummer entscheidet, welche Weblics® Installationsmaske aufgerufen wird

Auszug standard.wDocument.php der BASE 1.6.0
Auszug standard.wDocument.php der BASE 1.6.0
Auszug standard.wDocument.php mit manuell angepasster Versionsnummer 2.0.099
Auszug standard.wDocument.php
mit manuell angepasster Versionsnummer 2.0.099

Nach manueller Änderung der Versionsnummer (z.B. 1.6.0 in 2.0.099) erhalten Sie nicht mehr die Weblics® Verwaltung der Versionen 1.x (siehe nachfolgend linker Screen), sondern die Übersicht und Installationsaufrufe der Versionen 2.x (rechter Screen).

Weblics® Verwaltung 1.x
Weblics® Verwaltung 1.x
Weblics® Verwaltung 2.x
Weblics® Verwaltung 2.x

Die Grundlage zur Installation von Weblics® der Version 2.x ist nun gelegt. Damit Sie nun Ihr Projekt mit den wichtigsten Anwendungen versorgen, machen Sie mit dem nächsten Schritt weiter.

Schritt 3: Weblics® auf aktuellen 2.x Stand bringen

Führen Sie für alle Container-Weblics®, die nachfolgend aufgeführt sind und bereits als 1.x Version in Ihrem Projekt im Einsatz sind ein Weblic® Update durch. Evtl. vorgenommene individuelle Anpassungen in den einzelnen Weblics® müssen Sie nach dem Update ggf. nochmals nachziehen.

  • Inhaltsbox
  • Mehrspaltiger Inhaltscontainer
  • Layout-Container
  • Inhaltscontainer mit Registerlaschen
  • Inhaltscontainer mit Akkordeon Effekt

Diese Elemente arbeiten mit der globalen Variable "innerWidthCurrentElement", die für die Breitenanpassungen verwendet wird.
Beim Einsatz des Newsletters sollten Sie auch das Newsletter-Template im Content-Bereich anpassen.

Allgemein empfehlen wir, alle anderen Weblics® auch auf aktuellsten Stand 2.x zu bringen. Dies gilt vor allem für die Weblics® "Bild", "Bildergalerie", "Teaser, Banner, Slider", "Liste" und "Formular".
Beachten Sie dabei, dass ggf. die Bildergalerie- bzw. Teaser-/Banner-Elemente in den Seiten nochmals erneut eingebunden und gegen die bisherigen Elemente ersetzt werden müssen.

Für über das Bild-Element eingebundene Bilder setzen Sie die CSS-Formatierungen in der design.css entsprechend, sofern dies in Ihrem Projekt noch nicht der Fall ist:

/* Beispiel: Auszug aus einer design.css */
 /* .... */
img                  {}
img.picture          {margin:0;height:auto;max-width:100%;vertical-align:bottom}
img.pictureLeft      {float:left;margin:0 24px 4px 0;height:auto;max-width:100%;vertical-align:bottom}
img.pictureRight     {float:right;margin:0 0 4px 24px;height:auto;max-width:100%;vertical-align:bottom}

#blockRight img.picture          {margin:0}
#blockRight img.pictureLeft      {margin:0}
#blockRight img.pictureRight     {margin:0}
 /* .... */

Beachten Sie, dass einige Weblics® CSS-Variablen nutzen, welche Sie ggf. in der design.css nachtragen müssen. Die Notation können Sie jeweils der aktuellsten BASE entnehmen. Beispiel:

/* Beispiel: Auszug aus einer design.css */

$backgroundColorBoxSheet:#F0F0F0; /* Hintergrundfarbe Sheet-Boxen */
 /* .... */
.elementBox_var0  {height:100%;box-sizing:border-box;margin:0 0 20px 0;overflow:hidden;background-color:$backgroundColorBoxSheet;border:none;padding:15px;padding-bottom:5px}

Schritt 4: Prüfen Sie das gesamte Projekt auf Funktionalität

Nach Abschluss der vorangegangenen Schritte sollten Sie alle Seiten Ihres Projektes durchgehen und auf Funktionalität prüfen.

Gerne können Sie bei Problemen auch den Support kontaktieren, um den Aufwand für eine Hilfestellung ungefähr abschätzen zu können.