Beim Programmieren von Extbase-Extensions in TYPO3 kommt es oft vor, dass die Extensions nicht nur aus dem reinen PHP-Sourcecode besteht, sondern dass auch noch externe Ressource wie CSS-Dateien oder JavaScripte mit dem gerenderten HTML-Code ausgeliefert werden m\u00fcssen.
\nAber wie bindet man diese Ressourcen, also die JavaScripte und CSS-Dateien, in die Extbase-Extension ein. Wohin geh\u00f6rt der Sourcecode, der das bewerktstelligt? Gibt es eventuell mehrere M\u00f6glichkeiten die JavaScript- und CSSDateien einzubinden? Und was sind die Vor- und Nachteile der Methoden?
\n<\/p>\n
Wie fast immer gibt es in TYPO3 viele Wege, wie man ein Problem l\u00f6sen kann. Ich m\u00f6chte hier ein paar der g\u00e4ngigsten Methoden vorstellen und gleichzeitig die Vor- und Nachteile beschreiben, die diese Methoden aufweisen.<\/p>\n
Die wohl gebr\u00e4uchlichste Art, eine JavaScript-Datei in TYPO3 einzubinden, so dass sie mit einer Extbase-Extension auf einer TYPO3-Seite an den Browser ausgeliefert wird, ist das Einbinden der JavaScript-Datei im Page-Template. Das kann sowohl im Haupt-Template von TYPO3 als auch in einem speziell daf\u00fcr angelegten Extension-Template auf einer beliebigen Seite im TYPO3-Backend geschehen. M\u00f6glich macht das seit TYPO3 4.5 die Funktion includeJS des PAGE Objekts, die den entsprechenden Link zu der Datei iin den Headerpart des ausgelieferten HTML-Codes einf\u00fcgt.<\/p>\n
Hier ein Beispiel in TYPOScript:<\/p>\n
page.includeJS {\r\n 1 = http:\/\/code.jquery.com\/jquery-latest.min.js\r\n 1.external = 1\r\n 1.forceOnTop = 1\r\n 2 = http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.3\/jquery-ui.min.js\r\n 2.external = 1\r\n 3 = fileadmin\/js\/jquery.cookie.js\r\n 4 = fileadmin\/js\/meine_js_datei.js\r\n}<\/pre>\nder folgendes St\u00fcck HTML-Code im Header der ausgelieferten Seite generiert:<\/p>\n
<script src=\"http:\/\/code.jquery.com\/jquery-latest.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jqueryui\/1.10.3\/jquery-ui.min.js\" type=\"text\/javascript\"><\/script>\r\n<script src=\"fileadmin\/js\/jquery.cookie.js?1421843811\" type=\"text\/javascript\"><\/script>\r\n<script src=\"fileadmin\/js\/meine_js_datei.js?1424942853\" type=\"text\/javascript\"><\/script><\/pre>\nUnter „4“ wird hier die Datei „meine_js_datei.js“ aus dem Ordner „fileadmin\/js“ eingebunden. TYPO3 testet dabei allerdings vorher, ob diese JavaScript-Datei \u00fcberhaupt auf dem Server vorhanden ist. Das kann nat\u00fcrlich zu Problemen f\u00fchren, wenn man JavaScript-Dateien einbinden m\u00f6chte, die auf einem externen Server liegen. F\u00fcr diesen Zweck gibt es, wie man bei „1“ und „2“ sehen kann, den Parameter „external“ der TYPO3 mitteilt, dass die Datei nicht auf dem eigenen Server liegt und auch keine \u00dcberpr\u00fcfung stattfinden soll. In dem Codebeispiel werden hier unter „1“ die neueste Version von jQuery direkt von „jquery.com“ eingebunden. Bei „2“ wird von der domain „googleapis.com“ die User-Interface-Bibliothek „jQuery UI“ eingef\u00fcgt.
\nDamit die Dateien auch in der richtigen Reihenfolge eingebunden werden und etwa nicht zuerst versucht wird eine jQuery-Erweiterung zu initialisieren bevor jQuery \u00fcberhaupt geladen wurde, kann man noch den Parameter „forceOnTop“ angeben, der bewirkt, dass die entsprechende Datei zuerst geladen wird.<\/p>\n
\u00c4hnlich funktioniert das auch mit dem Einbinden von CSS-Dateien. Schreibt man das folgende St\u00fcck Code in ein TYPOScript-Template, vorzugsweise das Haupt-Template, dann wird TYPO3 einen Link in den HTML-Header der ausgelieferten Seite setzen, der die CSS-Datei „meine_css_datei.css“ aus dem Ordner „fileadmin\/templates\/css“ einbindet.<\/p>\n
page.includeCSS {\r\n 1 = fileadmin\/templates\/css\/meine_css_datei.css\r\n}<\/pre>\nAuch hier k\u00f6nnen wieder zus\u00e4tzliche Parameter wie „external“ oder „forceOnTop“ angegeben werden, die es erlauben CSS-Dateien von anderen Servern einzubinden bzw. TYPO3 dazu veranlassen die Datei als erstes einzubinden.<\/p>\n
M\u00f6chte man die Dateien lieber im Footer als im Header einbinden, z.B. um zu verhindern, dass die Seite erst angezeigt wird, nachdem alle Dateien aus dem HTML-Header geladen wurden, dann sollte man die Funktion „includeJSFooter“ bzw. „includeCSSFooter“ benutzen. Eine Referenz der Parameter der vier Funktionen findet man bei „http:\/\/docs.typo3.org\/typo3cms\/TyposcriptReference\/Setup\/Page\/Index.html“<\/p>\n
Vor- und Nachteile beim Einbinden von Dateien im TYPOScript Page-Template<\/h4>\nDie Nachteile:<\/h5>\n
Die CSS-Dateien und JavaScripte werden, weil sie ja im Page-Template stehen, auch dann eingebunden, wenn sie eventuell gar nicht auf der Seite gebraucht werden. Das hei\u00dft es werden auch mehr Dateien bzw. Daten \u00fcber das Internet geladen als eigentlich f\u00fcr die Darstellung der Seite gebraucht werden. Zus\u00e4tzlich ist auch (beim erstmaligen Laden) f\u00fcr jede Datei ein zus\u00e4tzlicher Server-Request notwendig, was die Ladezeit unn\u00f6tig nach oben treibt.<\/p>\n
Die Vorteile:<\/h5>\n
Da TYPO3 alle ben\u00f6tigten CSS-Dateien und JavaScripte als solche bekannt gemacht wurden, k\u00f6nnen diese mit Hilfe von systemeigenen Funktionen verkleinert, zusammengef\u00fcgt und gepackt werden (minified, concatenated and compressed). So ist beim Laden der Seite nur ein Server-Request pro CSS-Datei bzw. JavaScript notwendig und die zu ladenden Dateien sind Dank Compression auch noch sehr klein. <\/p>\n
Externe JavaScript und CSS-Dateien im TS-Setup der Extbase-Extension einbinden<\/h3>\n
Nat\u00fcrlich hat auch Extbase selbst Mechanismen um JavaScript- und CSS-Dateien zusammen mit einer Extension auszuliefern. Wie noch bei den alten PI-Base-Extensions von TYPO3 gibt es auch bei Extbase-Extensions die M\u00f6glichkeit eine TYPOScript-Setup Datei zu schreiben, die beim Laden der Extension ber\u00fccksichtigt wird. Diese TS-Setup Datei findet man gew\u00f6hnlich im Ordner <\/p>\n
\/typo3conf\/ext\/\/Configuration\/TypoScript\/setup.txt<\/pre>\nDort kann man, neben der Grundkonfiguration seiner Extbase-Extension, auch angeben ob und welche Dateien beim Ausliefern der Extension mit auf der Seite eingebunden werden sollen. M\u00f6chte man zum Beispiel eine JavaScript-Datei zusammen mit der Extbase-Extension ausliefern, so legt man sich im Ordner „\/typo3conf\/ext\/\/Resources\/Public“ einen Ordner „JS“ f\u00fcr Javascript-Dateien an und erstellt darin seine Datei. In meinem Beispiel ist es die Datei „meine_js_datei.js“. Jetzt muss nur noch am Ende der TYPOScript-Setup Datei die Zeile<\/p>\npage.includeJS.tx_ = EXT:\/Resources\/Public\/JS\/meine_js_datei.js<\/pre>\neingetragen werden und schon wird jedesmal wenn auf einer Seite die Extbase-Extension angezeigt wird auch die JavaScript-Datei mit ausgeliefert.<\/p>\n
Genau so funktioniert das Ganze auch wieder mit CSS-Dateien. Man erstellt sich im Ordner „\/typo3conf\/ext\/\/Resources\/Public“ einen Ordner „CSS“ und legt seine CSS-Dateien dort hinein. Anschlie\u00dfend tr\u00e4gt man in der TYPOScript-Setup Datei die Zeile zum Einbinden ein:<\/p>\npage.includeCSS.tx_ = EXT:\/Resources\/Public\/CSS\/meine_css_datei.css<\/pre>\nVor- und Nachteile beim Einbinden von Dateien im TS-Setup der Extbase-Extension<\/h4>\nDie Vorteile:<\/h5>\n
Die Vorteile sind nat\u00fcrlich offensichtlich, es werden immer nur die f\u00fcr eine Extension relevanten Dateien mit der Seite ausgeliefert. Diese k\u00f6nnen Dateien k\u00f6nnen nat\u00fcrlich auch verkleinert und gepackt sein (minified and compressed).<\/p>\n
Die Nachteile:<\/h5>\n
Zwar werdem beim Einbinden von CSS-Dateien und JavaScripten im TS-Setup immer nur die Dateien ausgeliefert, die zu den TYPO3-Extensions geh\u00f6ren, die auch wirklich auf der Seite angezeigt werden, aber das muss nicht hei\u00dfen, dass die Dateien auch bei jedem Controller ben\u00f6tigt werden. Das hei\u00dft eventuell wird auch hier \u00fcberfl\u00fcssiger Overhead erzeugt. Als Beispiel k\u00f6nnte man eine einfache Darstellung einer Tabelle nehmen, die die beiden Actions „list“ und „show“ besitzt. Die „show“-Action stellt ein einzelnes Objekt aus der Liste dar, die „list“-Action w\u00fcrde eine Listen-Darstellung bieten, die mit Hilfe eines TableSorter-JavaScripts sortiert und gefiltert werden kann. In diesem Beispiel w\u00fcrde dann auch in der Einzelansicht das JavaScript eingebunden werden, obwohl es nicht ben\u00f6tigt wird. <\/p>\n
Externe JavaScript und CSS-Dateien im Controller einer Extbase-Extension einbinden<\/h3>\n
Die bisher vorgestellten Methoden werden f\u00fcr die meisten Anwendungen reichen, aber gerade bei gro\u00dfen Extbase-Extensions mit vielen Controllern hat man oft das Problem, dass abh\u00e4ngig vom Controller bestimmte JavaScripte geladen werden m\u00fcssen. Zum Beispiel braucht man ein TableSorter-JavaScript zwar bei der Listen-Darstellung der Daten, also der „list“-Action, aber bei der Einzeldarstellung, der „show“-Action, eines Items m\u00fcsste das Script eigentlich nicht geladen werden.
\nDie Idee dabei ist, den Link zu der Datei einfach im TSFE bei den Header-Daten einzutragen.<\/p>\n
public function listAction() {\r\n $items = $this->itemRepository->findAll();\r\n $this->view->assign('items', items);\r\n $GLOBALS['TSFE']->additionalHeaderData['tx_'] = '