Inhaltsverzeichnis

1. Über Theme+
   • Was ist Theme+ • Idee & Geschichte
   • Was kann Theme+ • Funktionen
2. Theme+ im Einsatz
   • Installation
   • Variablen
   • Dateien
   • Zuweisen von Dateien
   • Minimierung und Komprimierung
   • LessCSS Support
   • Bilder in CSS einbetten
   • Was man noch wissen sollte?!
3. Theme+ für Template Entwickler
   • Insert-Tags
   • Dateien und Snippets im Template definieren
   • Zusätzliche globale Variablen
4. Optimierung
   • Automatische gzip Komprimierung
   • Framework Wrapper
   • JavaScript Load Blocking verhindern
   • JavaScript Execution Blocking verhindern
5. API für Entwickler
   • Die Klassen
   • Dateien und Snipptes im Template einbinden
   • Verfügbare HOOKs

Über Theme+

Was ist Theme+?

• Theme+ ist eine Erweiterung des Core Framework.
• Theme+ soll den Umgang mit CSS und JavaScript Dateien vereinfachen.
• Theme+ soll CSS und JavaScript Dateien zusammenführen, minimieren und komprimieren.

Über Theme+

Die Idee

• CSS und JavaScript Dateien sollen möglichst einfach über das Backend verwaltet werden können.
• CSS und JavaScript Dateien sollen automatisch komprimiert werden (gzip).
• CSS und JavaScript Dateien sollen automatisch minimiert werden (cssmin/jsmin/yui).
• CSS und JavaScript Dateien sollen automatisch zusammengeführt werden.
• Umfangreiche API für Entwickler sollte vorhanden sein.

Über Theme+

Die Entstehungsgeschichte

Theme+ ist der Nachfolger von layout_additional_sources.

Über Theme+

Funktionen

• Lokale/Externe CSS und JavaScript Dateien oder Snippets definierem und einem Layout zuweisen.
• Dateien Filtern mit Media Queries, Conditional Comments oder Server Side Browser Filter.
• Filtern von CSS/JS Dateien aus Erweiterungen.
• WYSIWYG Integration der Dateien.

Über Theme+

Funktionen

• Code Minimierung mit
  cssMinimizer (cssmin),
  jsMinimizer (jsmin),
  Dean Edwards Packer (DeanEdwardsPacker),
  YUI Compressor (yui-compressor).
• Code Komprimierung mit gzip.
• Zusammenführen mehrere Dateien zu einer.

Über Theme+

Funktionen

• Deaktivieren der Contao Core CSS.
• JavaScript Lazy Load Support.
• YAML Integration mit xYAML
  (andere Frameworks modular möglich).
• Unterstützung mehrerer JavaScript Frameworks
  (jquery Integration mit theme_plus_jquery).

Über Theme+

Funktionen

• Bilder in CSS Dateien automatisch einbetten.
• Less CSS Support
  (mit lessphp oder less.js, auch via Node.js).
• Variablen in CSS und JavaScript Dateien verwenden.
• Insert-Tags in CSS und JavaScript Dateien verwenden.
• Objekt Orientierte API für Entwickler.

Theme+ im Einsatz

Installation

• über das ER: theme_plus
• layout_additional_sources für Contao < 2.10
• Version 2.2 stable für Contao = 2.10
• Version 3.0 rc1 für Contao ≥ 2.10
• über github: github.com/InfinitySoft/ThemePlus

Theme+ im Einsatz

Variablen

• werden pro Theme festgelegt (nicht pro Datei)
• Zugriff in Datei: $variablename
• Verwendung in CSS und JavaScript möglich

Theme+ im Einsatz

Dateien

• werden pro Theme festgelegt
• können Themeübergreifend verwendet werden
  (nutzen aber die Variablen des Themes, in dem sie definiert wurden)
• 3 Arten von Dateien:
  • Lokale Datei (aus tl_files, änderbar via DCA)
  • Externe URL
  • Code Snippet

Theme+ im Einsatz

Zuweisen von Dateien

• Dateien können auf 3 Ebenen zugewiesen werden:
  • im Layout
  • pro Seite (nur eine Seite)
  • pro Seitenzweig (eine Seite zzgl. ihrer Unterseiten)

Theme+ im Einsatz

Minimierung und Komprimierung

• Wird global in den Systemeinstellungen aktiviert.
• Die Minimierung benötigt weitere Pakete mit einem Minimizer.
• (Zusammenführen ist immer aktiviert und kann nicht global deaktiviert werden).

Theme+ im Einsatz

LessCSS Support

• Ermöglicht den Einsatz von LessCSS Syntax.
• Dateien mit der Endung *.less werden evaluiert.
• Benötigt einen Less Compiler, dieser wird über weitere Pakete (lesscss und phpless) bereitgestellt.

Theme+ im Einsatz

LessCSS Syntax (Details siehe lesscss.org)

section {
  background: #000;
  padding: 20px;
  border-radius: 10px;

  article {
    background: #fff;

    .blue {
      color: #00f;
    }
  }
}

Theme+ im Einsatz

LessCSS Support

Die Erweiterung phpless-extension erweitert die Funktion des phpless Compiler um automatisches hinzufügen von Browser Prefixen und fügt eine Hilfsfunktionen hinzu, z.B.:

.verlauf {
  gradient: #000000 10% #ffffff 90%;
}

Theme+ im Einsatz

Bilder in CSS einbetten

• Alternative zu Sprites.
• Bei kleinen Dateien sehr effizient.
• Produziert Overhead wenn die gleiche Datei oft wieder verwendet wird.
• InternetExplorer ≤ 7 unterstützt keine eingebetteten Bilder.

Theme+ im Einsatz

Theme+ kompiliert alle Dateien!

• Theme+ setzt einen eigenen @media Block, wenn der Media-Query gesetzt wurde!
• Alle Dateien kommen aus system/scripts/!
• Insert-Tags werden ausgewertet.

Theme+ im Einsatz

Bekannte Probleme

• cssmin versteht kein @media all!
• lessphp versteht kein @media!
• @import wird nicht unterstützt!
• @font-face muss mit bedacht eingesetzt werden! (Stichwort: Media-Query)
• Die Filter funktionieren (noch) nicht in Verbindung mit dem Seitencache!

Theme+ im Einsatz

Entwicklermodus!

• Ist aktiv sobald man im Backend angemeldet ist!
• Wird deaktiviert sobald man sich abmeldet!
• Kein Debug/Entwickler Flag notwendig/vorhanden!

Theme+ für Template Entwickler

Insert-Tags

{{include_theme_file::ID}}

Bindet die Datei mit der ID als externe Referenz ein (link/script Tag).

{{include_theme_file::path/to/file.css|js}}

Bindet die Datei path/to/file.css|js als externe Referenz ein (link/script Tag).

Ursprünglich in LAS:

{{insert_additional_sources::*}}

Theme+ für Template Entwickler

Insert-Tags

{{embed_theme_file::ID}}

Bettet die Datei mit der ID in die Seite ein (style/script Tag).

{{embed_theme_file::path/to/file.css|js}}

Bettet die Datei path/to/file.css|js in die Seite ein (style/script Tag).

Ursprünglich in LAS:

{{include_additional_sources::*}}

Theme+ für Template Entwickler

Dateien und Snippets im Template definieren

<?php
$objFile = new CssCode('body {
  font-family: Verdana, sans;
}', 'BodyFont');

$GLOBALS['TL_CSS'][] = $objFile;
?>

Das funktioniert auch Analog mit den anderen Klassen (sie API für Entwickler).

Theme+ für Template Entwickler

Zusätzliche globale Variablen

$GLOBALS['TL_JAVASCRIPT_BODY'], JavaScripts die geziehlt im <body> anstatt im <head> eingefügt werden sollen.

<?php
$objFile = new LocalJavaScriptFile('tl_files/scripts/script.js');

$GLOBALS['TL_JAVASCRIPT_BODY'][] = $objFile;
?>

Theme+ für Template Entwickler

Zusätzliche globale Variablen

$GLOBALS['TL_JAVASCRIPT_CODE_BODY'], JavaScript Code der geziehlt im <body> anstatt im <head> eingefügt werden sollen.

<?php
$GLOBALS['TL_JAVASCRIPT_CODE_BODY'][] = 'alert("Happy new year?!");';
?>

Optimierung

• Automatische gzip Komprimierung
• Framework Wrapper
• JavaScript Load Blocking verhindern
• JavaScript Execution Blocking verhindern

Optimierung

Automatische gzip Komprimierung

Ladezeit von CSS und JavaScript Dateien ohne höhere Systemlast.

Contao 2.10+ setzt auf mod_deflate.

Optimierung

Automatische gzip Komprimierung

Benötigt Anpassung der .htaccess Datei.

##
# If you cannot use mod_deflate, uncomment the
# following lines to load a compressed .gz version
# of the bigger Contao JavaScript and CSS files.
##
AddEncoding gzip .gz
<FilesMatch "\.js\.gz$">
  AddType "text/javascript" .gz
</FilesMatch>
<FilesMatch "\.css\.gz$">
  AddType "text/css" .gz
</FilesMatch>
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME} \.(js|css)$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

Optimierung

Framework Wrapper

Ermöglicht den (nahezu) konfliktlosen Einsatz mehrerer Frameworks parallel.

Optimierung

Framework Wrapper

MooTools

(function($, $$){
	// Original file content
})(document.id, document.search);

jQuery

(function($) {
	// Original file content
})(jQuery);

Optimierung

JavaScript Load Blocking verhindern

JavaScripts vom HEAD an das Ende der Seite verschieben.

Verhindert Blockieren des Seitenaufbaus beim laden der JavaScript Dateien.

Optimierung

Position im HEAD

<html>
  <head>
    …
    <script src="script.js">
      </script>
  </head>
  <body>
    …
  </body>
</html>

Optimierung

Position am Ende des BODY

<html>
  <head>
    …
  </head>
  <body>
    …
    <script src="script.js">
      </script>
  </body>
</html>

Optimierung

JavaScript Execution Blocking verhindern

JavaScripts werden asynchron nachgeladen.

Verhindert Blockieren des Seitenaufbaus beim ausführen der JavaScript Dateien.

API für Entwickler

• Die Klassen
• Dateien und Snipptes im Template einbinden
• Verfügbare HOOKs

API für Entwickler

Klassenhierarchie

API für Entwickler

Klassen für lokale Dateien

• LocalCssFile
• LocalLessCssFile
• LocalJavaScriptFile

API für Entwickler

LocalThemePlusFile

abstract class LocalThemePlusFile
    extends ThemePlusFile {
  public function __construct($strFile);

  public function getOriginFile();
  public function getFile();

  public function setAggregation($strAggregation);
  public function getAggregation();

  public function setAggregationScope($strAggregationScope);
  public function getAggregationScope();

  public function setTheme(Database_Result $objTheme);
  public function getTheme();

  public function isAggregateable();

  public function setCc($strCc);
  public function getCc();

  public function getEmbeddedHtml($blnLazy = false);
  public function getIncludeHtml($blnLazy = false);
}

API für Entwickler

LocalCssFile

class LocalCssFile
    extends LocalThemePlusFile
    implements CssFile {
  public function setMedia($strMedia);
  public function getMedia();

  public function setAbsolutizePage($objAbsolutizePage);
  public function getAbsolutizePage();
}

API für Entwickler

LocalJavaScriptFile

class LocalJavaScriptFile
    extends LocalThemePlusFile
    implements JavaScriptFile {
  const JQUERY = 'jquery';
  const MOOTOOLS = 'mootools';

  public function setPosition($strPosition);
  public function getPosition();

  public function setFrameworkContext($strFrameworkContext);
  public function getFrameworkContext();
}

API für Entwickler

Klassen für externe Dateien

• ExternalCssFile
• ExternalLessCssFile
• ExternalJavaScriptFile

API für Entwickler

ExternalThemePlusFile

abstract class ExternalThemePlusFile
    extends ThemePlusFile {
  public function __construct($strUrl);

  public function getUrl()

  public function setCc($strCc);
  public function getCc();

  public function getEmbeddedHtml($blnLazy = false);
  public function getIncludeHtml($blnLazy = false);
}

API für Entwickler

ExternalCssFile

class ExternalCssFile
    extends ExternalThemePlusFile
    implements CssFile {
  public function setMedia($strMedia);
  public function getMedia();
}

API für Entwickler

ExternalJavaScriptFile

class ExternalJavaScriptFile
    extends ExternalThemePlusFile
    implements JavaScriptFile {
  public function setPosition($strPosition);
  public function getPosition();
}

API für Entwickler

Klassen für Code Snippets

• CssCode
• JavaScriptCode

API für Entwickler

CssCode

class CssCode
    extends LocalCssFile {
  public function __construct($strCode, $strReference = 'undefined');

  public function getCode();
}

API für Entwickler

JavaScriptCode

class JavaScriptCode
    extends LocalJavaScriptFile {
  public function __construct($strCode, $strReference = 'undefined');

  public function getCode();
}

API für Entwickler

Klassen für Aggregation

• FileAggregator
• CssFileAggregator
• JavaScriptCode

API für Entwickler

FileAggregator

abstract class FileAggregator
    extends LocalThemePlusFile {
  public function __construct();
}

API für Entwickler

CssFileAggregator

class CssFileAggregator
    extends FileAggregator {
  public function add(LocalCssFile $objFile);
}

API für Entwickler

JavaScriptFileAggregator

class JavaScriptFileAggregator
    extends FileAggregator {
  public function add(LocalJavaScriptFile $objFile);
}

API für Entwickler

HOOK $GLOBALS['TL_HOOKS']['generateFrameworkCss']

Kann zum Generieren des Framework CSS Codes genutzt werden (Definition von linker/rechter Spalte).

<?php
$GLOBALS['TL_HOOKS']['generateFrameworkCss'][] =
    array('MyClass', 'hookGenerateFrameworkCss');

class MyClass
{
  public function hookGenerateFrameworkCss($objPage, $objLayout, $objPageRegular)
  {
    // generate a new css or return false
    return false;
  }
}
?>

API für Entwickler

HOOK $GLOBALS['TL_HOOKS']['renderVariable']

Rendert eine Variable und gibt den Code zurück mit dem die Variable ersetzt wird.

<?php
$GLOBALS['TL_HOOKS']['renderVariable'][] =
    array('MyClass', 'hookRenderVariable');

class MyClass
{
  public function hookRenderVariable($arrRow, $strPath)
  {
    // generate a new code or return false
    return false;
  }
}
?>

API für Entwickler

HOOK $GLOBALS['TL_HOOKS']['replaceUndefinedVariable']

Wird aufgerufen wenn eine Variable nicht gefunden wurde.

<?php
$GLOBALS['TL_HOOKS']['replaceUndefinedVariable'][] =
    array('MyClass', 'hookReplaceUndefinedVariable');

class MyClass
{
  public function hookReplaceUndefinedVariable($strName)
  {
    // return the missing variable content or false
    return false;
  }
}
?>