TYPO3: CSS & JavaScript einbinden

Um CSS & JavaScript im Headerbereich einer Seite einzubinden stehen in TypoScript die Eigenschaften includeCSS und includeJS bereit. Damit liesen sich bisher allerdings nur lokale Dateien, z.B. im fileadmin, einbinden. Seit TYPO3 4.3 existiert nun auch jeweils eine Untereigenschaft external die optional erlaubt eben auch externe Dateien einzubinden. Hier zwei Beispiele:

page.includeCSS {
   file1 = fileadmin/css/page.css
   file1.media = screen
   file2 = http://www.cooliris.com/shared/resources/css/global.css
   file2.media = screen
   file2.external = 1
}

page.includeJS {
   file1 = http://www.google.com/jsapi
   file1.external = 1
   file2 = fileadmin/js/main.js
}

Die Ausgabe sieht dann entsprechend so aus:

<link rel="stylesheet" type="text/css" href="fileadmin/css/page.css" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.cooliris.com/shared/resources/css/global.css" media="screen" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="fileadmin/js/main.js" type="text/javascript"></script>

Die Eigenschaften werden in der TSref näher beschrieben und erlauben zusätzlich z.B. auch einen Wrap für Conditional Comments etc.

Seit TYPO3 4.4 erhalten zusätzlich alle lokal eingebundenen Dateien auch automatisch den Timestamp ihrer letzten Änderung, dieser wird als GET-Parameter an die URI angehängt um Probleme mit dem Cache der Browser zu umgehen. Die finale Ausgabe sieht damit dann so aus:

<link rel="stylesheet" type="text/css" href="fileadmin/css/page.css?1278407468" media="screen" />
<link rel="stylesheet" type="text/css" href="http://www.cooliris.com/shared/resources/css/global.css" media="screen" />
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script src="fileadmin/js/main.js?1278923017" type="text/javascript"></script>

Mit dieser Methode erübrigt sich das Einbinden und manuelle setzen eines Timestamps via headerData.

Cocoa WebView: via JavaScript erzeugte Links im Browser öffnen

Ich schreibe momentan an einer Cocoa App in Objective-C die einen WebView verwendet und bin dabei auf das bereits bei stackoverflow diskutierte Problem gestoßen, dass für Links die via JavaScript generiert werden die decidePolicyForNewWindowAction Delegate nicht greift.

Ob es sich dabei wirklich um einen Bug handelt kann ich nicht beurteilen. Der oben genannte Beitrag zum Thema ist auch schon etwas älter, die Problematik scheint allerdings auch in Mac OS X 10.6 Snow Leopard noch zu bestehen.

Worum geht es?

Ich möchte innerhalb eines WebView’s alle Links die ein target=”_blank” besitzen bzw. irgendwie anders in einem neuen Fenster aufgehen würden im Standard-Browser des Benutzers öffnen.

Folgendes zur Verdeutlichung:

<!-- Wird im WebView angezeigt -->
<a href="foobar.html">foobar</a>
<!-- Wird via decidePolicyForNewWindowAction im Browser angezeigt -->
<a href="http://www.google.com/" target="_blank">foobar</a>
<!-- Soll auch im Browser angezeigt werden -->
<a href="javascript:window.open('http://www.google.com/');">foobar</a>

Das Problem:

Der letzte Link sollte ja eigentlich auch im Browser geöffnet werden, decidePolicyForNewWindowAction greift hier allerdings nicht.

Die Lösung:

Zunächst werden folgende WebView Delegates definiert:

[webView setPolicyDelegate:self];
[webView setUIDelegate:self];

Nun wird das Problem mit einem temporären WebView umgangen:

- (WebView *)webView:(WebView *)sender createWebViewWithRequest:(NSURLRequest *)request {
    WebView *tempWebView = [[WebView alloc] init];
    [tempWebView setPolicyDelegate:self];
    [tempWebView setUIDelegate:self];
    return tempWebView;
}
 
- (void)webView:(WebView *)sender decidePolicyForNavigationAction:(NSDictionary *)actionInformation request:(NSURLRequest *)request frame:(WebFrame *)frame decisionListener:(id <WebPolicyDecisionListener>)listener {
    if ([sender isEqual:webView]) {
        [listener use];
    } else {
        [listener ignore];
        [[NSWorkspace sharedWorkspace] openURL:[request URL]];
        [sender release];
    }
}

Der Rest läuft wie gewohnt:

- (void)webView:(WebView *)sender decidePolicyForNewWindowAction:(NSDictionary *)actionInformation request:(NSURLRequest *)request newFrameName:(NSString *)frameName decisionListener:(id <WebPolicyDecisionListener>)listener {
    [[NSWorkspace sharedWorkspace] openURL:[request URL]];
}

Nun lassen sich auch alle über JavaScript generierten Links im Browser öffnen. Ich habe bisher keine elegantere Lösung gefunden, wer also zufällig eine parat haben sollte kann diese gerne als Kommentar hinterlassen!

HTML5 Header mit TYPO3

Mit TYPO3 ist es bereits jetzt möglich einen validen HTML5 Header in dieser Form auszuliefern:

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="utf-8" />
</head>

Ich verwende hierfür folgendes TypoScript:

page = PAGE
page {
   config.doctype = <!DOCTYPE html>
   config.htmlTag_setParams = lang="de"
}

Einziger Schönheitsfehler, der Meta-Charset-Tag ist leider (noch) fest im TYPO3-Core definiert und lässt sich somit nicht über TypoScript anpassen. Anstatt der kurzen HTML5-Variante spuckt TYPO3 deshalb weiterhin folgendes aus:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

Dies ist zwar grundsätzlich korrekt und hält die Seite nicht vom validieren ab, vom W3C wird jedoch die kurze Variante empfohlen:

<meta charset="utf-8" />

Bis dies auch mit TYPO3-Bordmitteln möglich ist lohnt sich ein Blick auf die Extension html5meta_t3lib_pagerenderer von Dan Untenzu die sich dem Problem annimmt. Es genügt die Extension lediglich im Erw-Manager einzubinden, eine Konfiguration ist nicht nötig.

Update:

Ab TYPO3 4.4 kann man den HTML5 Doctype nun auch direkt setzen:

config.doctype = html_5

jQuery.ready() & google.load()

Wie man jQuery über die Google AJAX Libraries API einbindet hatte ich bereits vor einiger Zeit in einem Beitrag beschrieben, nun möchte ich noch mal genauer auf das Zusammenspiel von jQuery.ready() und google.load() eingehen.

Ich lagere meinen gesamten JS-Code für gewöhnlich in eine eigene Datei aus und möchte entsprechend auch google.load() und jQuery.ready() dort aufrufen. Damit dies korrekt funktioniert muss sichergestellt werden das jQuery vollständig geladen wurde bevor .ready() ausgeführt wird. Hierzu verwende ich folgendes Pattern:

HTML

Im <head> der Seite wird zunächst die Google AJAX Libraries API und danach das eigene JavaScript (hier foobar.js) eingebunden:

<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript" src="js/foobar.js"></script>

JavaScript

Nachdem im JavaScript (foobar.js) nun das Objekt google zur Verfügung steht kann jQuery dynamisch geladen und jQuery.ready() ausgeführt werden:

1
2
3
4
5
6

google.load("jquery", "1.4");
google.setOnLoadCallback(function() {
  $(function() {
    // document ready
  });
});

google.setOnLoadCallback() stellt dabei sicher das jQuery vollständig geladen wurde bevor jQuery.ready() ausgeführt wird. $(function() {}); ist lediglich eine Kurzform von $(document).ready(function() {});.

ImageMagick Support für TYPO3 unter MAMP (OS X)

Wie man ImageMagick in MAMP bzw. MAMP PRO unter OS X zum laufen bekommt beschreibt Bryan Rite in seinem Beitrag Getting Imagemagick (and more) to work with MAMP on OS X.

Aufbauend auf diesen Beitrag habe ich eine Kurzanleitung verfasst die noch mal alles zusammenfasst und zusätzlich auch auf die Verwendung in TYPO3 eingeht.

Weiterlesen »