Soweit so einfach. Das kann man natürlich im Template verankern und das Logo hinterlegen, aber was passiert wenn tt_news Beiträge geteilt werden? Die besitzen meistens auch ein Bild was wesentlich aussagekräftiger ist als das normale Seitenlogo.

Dieser Artikel erklärt wie ein dynamisches link-Tag gebaut wird um in allen Lebenslagen gut zu arbeiten.

Standardbild

Wenn man eine beliebige Seite teilt, dann wird das Logo der Seite angeboten. Nichts leichter als das mit ein paar Zeilen Typoscript. Damit es später einfach ersetzt werden kann, sollte man folgende Struktur übernehmen.

page.headerData.20 = TEXT
page.headerData.20.value = http://meine-domain.de/fileadmin/template/img/logo.png
page.headerData.20.wrap = <img rel="image_src" href="|" />

Damit wird das Logo aus dem Fileadmin Ordner hinterlegt, Facebook nimmt es sich automatisch raus. Zur Sicherheit gebe ich die absolute URL an. Variabler bleibt es natürlich wenn man die Baseurl in eine Konstante verlagert und einbindet, aber zum angucken reichts.

Mit tt_news überschreiben

Teilt man die Single Ansicht eines tt_news Eintrags soll das ausgewählte Newsbild angezeigt werden. Dazu legt man ein Extensiontemplate auf der entsprechenden Seite an und überschreibt die Eigenschaft in page.headerData.20.value mit dem Wert aus dem Eintrag.

Das Problem ist, der Redakteur kann beliebig viele Bilder mit dem tt_news Eintrag verknüpfen. Für Facebook soll nur das erste angegeben werden. Was muss getan werden?

1. Aktuellen tt_news Eintrag auslesen
2. Das Feld image abfragen
3. Inhalte anhand vom Komma , auseinander schneiden
4. Ersten Wert auswählen
5. Absolute URL zum Upload erzeugen

Und Typoscript wäre nicht Typoscript wenn das nicht "ohne Problem" möglich wäre. Wenn man weiß wie:

page.headerData.20 = RECORDS
page.headerData.20 {
    source = {GPvar:tx_ttnews|tt_news}
    source.insertData = 1
    tables = tt_news
    conf.tt_news >
    conf.tt_news = TEXT
    conf.tt_news.field = image
    conf.tt_news.split {
        token = ,
        cObjNum = 1
        returnKey = 0
    }
    conf.tt_news.wrap = http://meine-domain.de/uploads/pics/|
}

Über das Element RECORDS wird eine Datenbankabfrage gestartet. Als Quelle wird die übergebene News ID benutzt. Anschließend wird mit Hilfe vom split Befehl das Ergebnis auseinander geschnitten und das erste Ergebnis zurück gegeben (returnKey).

Fazit

Wenn man weiß wie, ist Typoscript eine sehr mächtige und umfassende Sprache um alle möglichen und unmöglichen Aufgaben zu lösen.

Nach vielen Stunden der Übung kommt man auch irgendwann dahinter. Nur nicht aufgeben!

Wenn man selbst Applikationen programmiert die auf Javascript basieren und später noch diverse Erweiterungen ermöglichen sollen, dann macht es durchaus Sinn eigene Callbacks anzubieten. Sei es in einer jQuery Extension oder einer eigenen Applikation.

Die Anforderung

Zur Erfüllung meiner aktuellen Anforderung habe ich eine Javascript Klasse erstellt die mit dem Operator new erstellt werden kann:

var myObject = new FunkyObject();

Perfekt für die erste Anforderung, aber sobald weitere Entwickler involviert werden oder man Teile der Applikation sogar als OpenSource Software veröffentlicht, wäre es ja schön wenn nicht jeder im eigenen Code rum macht sondern ordentlich in seinem Script bleibt:

var myObject = new FunkyObject({
  onLoad: function() {
    //do crazy custom things
  }
});

Sieht ordentlich aus und ist ohne Kommentare selbsterklärend: Beim laden werden verrückte Sachen getan. Aber was tut das FunkyObject um die Callbacks aufzurufen?

Eine Javascript Klasse

Genau genommen ist eine Javascript Klasse nichts weiter als eine Funktion die sich selbst zurück gibt und über den new Operator erstellt wird. Meine Grundlage sieht so aus:

var FunkyObject = function(args) {
  var defaults = {};
  this.args = $.extend(defaults, args);
  this.goCrazy();
  return this;
};

Dieser Code setzt jQuery voraus, das die Funktion $.extend mitbringt. Damit wird das übergebene args Objekt durch die in defaults angegebenen Werte aufgefüllt, sofern sie nicht vorhanden sind. Man kann also für das onClick Event ein Standardverhalten hinterlegen:

var FunkyObject = function(args) {
  var defaults = {
  onLoad: function() {
    //default behavior
  };
  this.args = $.extend(defaults, args);
  this.goCrazy();
  return this;
};

Die Funktion goCrazy() wird ausgeführt sobald die Klasse initialisiert wird. Um dem nächsten Entwickler die Möglichkeit zu geben auch diese Funktion zu überschreiben, werden alle Grundlagen in der prototype Eigenschaft der Klasse definiert:

var FunkyObject = function(args) { /* ... */ };
FunkyObject.prototype.goCrazy = function() {
  // do the init stuff
};

Mit diesem Konstrukt könnte ein Entwickler im eigenen Script jene Klasse überschreiben ohne in den eigentlichen Quelltext eingreifen zu müssen.

myObject.goCrazy = function() {
  // custom constructor
}

Das als kleine Anmerkung am Rande, das erklärte Ziel ist der komfortable Aufruf des onLoad Events. Natürlich könnte man über this.args.onClick() einfach die entsprechende Funktion aufrufen, aber sieht das schön aus? Ist das variabel?

Die Antwort lautet nein.

Schön und variabel

Viel cooler ist eine total schöne und variable trigger() Funktion zu schreiben, die in den Parametern nach einem Callback sucht und diesen ggf. ausführt.

FunkyObject.prototype.trigger = function(action) {
  var callback = 'on'+this.ucfirst(action);
  if(typeof this.args[callback] == 'function') {
    this.argscallback;
  };
}

In der goCrazy Funktion sieht der Aufruf dann so aus:

var FunkyObject = function(args) { /* ... */ };
FunkyObject.prototype.goCrazy = function() {
  this.trigger('load');
};

Die trigger Funktion baut sich den Eventnamen aus einem on und dem Parameter action zusammen und prüft anschließend ob eine Funktion mit diesem Namen vorhanden ist. Ist dies der Fall wird sie ausgeführt.

Leider gibt es keine Javascript Funktion mit dem Namen ucfirst, aber über die Prototype Eigenschaft kann man das String Objekt entsprechend aufrüsten:

String.prototype.ucfirst = function() {
  return this.substr(0,1).toUpperCase() + this.substr(1,this.length);
};

Mit diesen zwei Funktionen baut man sich sehr schnell eine Grundlage um variable Scripte zu schreiben die komplett erweitert werden können.

Parameter für den Callback

Oft muss der Callback über einen gewissen Zustand informiert werden. Für das benutzte Beispiel könnte es die Information sein ob das Laden erfolgreich war. Bei der Definition des Callbacks muss ein Parameter akzeptiert werden:

var myObject = new FunkyObject({
  onClick: function(success) {
    alert(success ? 'hat geklappt!' : 'fehler');
  }
});

Die goCrazy Funktion muss den Status an die trigger Funktion weitergeben:

FunkyObject.prototype.goCrazy = function() {
  success = true;
  this.trigger('load', success);
};

Wir gehen mal von einem grundlegenden Erfolg aus. Das wird es auch sofern die trigger Funktion beigebracht bekommt was sie mit zusätzlichen Parametern anfangen soll:

FunkyObject.prototype.trigger = function(action) {
  var callback = 'on'+this.ucfirst(action);
  if(typeof this.args[callback] == 'function') {
    this.argscallback;
  };
}

Viele Änderungen sind es nicht. In der vordefinierten Variable arguments sind sämtliche Parameter vom Aufruf der Funktion gespeichert. Die Array Funktion shift entfernt das erste Element aus dem Array und gibt den Rest zurück. So wird nicht der Callbackname sinnloser Weise an den Callback gegeben sondern alle andere Parameter. So kann man auch mehr als ein Wert an den Callback schicken:

FunkyObject.prototype.goCrazy = function() {
  success = true;
  this.trigger('load', success, 'ready', {hello: 'world'});
};

Fazit

Ich mag Callbacks. Wenn man ein gutes Grundgerüst hat kann man auf alle Events individuell reagieren. Sollte es ein Callback nicht geben den man wirklich dringend und sofort benötigt kann man mit dem Überschreiben der prototype Funktion kurzfristig neue Callbacks hinzufügen und später in die Core Anwendung übernehmen.

Wichtig ist aber darauf zu achten keine unendlichen Scripte in den Callbacks unterzubringen. Spätestens nach 20 Zeilen sollte man sich überlegen den Code in einzelne Häppchen aufzuteilen.

Und in eigener Sache noch die Warnung vor gedankenlosem Copy and Paste: Durch Unterschrift auf dem NDA musste ich alle Funktionen umbenennen. Also nachdenken und gute Funktionsnamen benutzen.

Um dem geneigten Leser bzw. mir selbst beim nächsten Computer die Arbeit zu erleichtern präsentiere ich hier meine Liste mit unverzichtbaren Programmen für den Webentwickler unter Mac OS X. Ergänzungen sind herzlich willkommen.

Google Chrome

Durch die Adresszeile in der man suchen kann und den mittlerweile wirklich großartigen Entwicklertools ein unverzichtbares Werkzeug für den täglichen Gebrauch.

http://www.google.com/chrome

Adblock Plus für Google Chrome

Ohne Werbeblocker ist das Internet so voll und unübersichtlich, das hält man nicht lange aus. Allerdings sollte man nicht vergessen den Werbeblocker zu deaktivieren wenn man für einen Kunden die Werbeintegration testet.

https://chrome.google.com/webstore/detail/cfhdojbkjhnklbpkdaibdccddilifddb

ClipMenu

Verlauf für die Zwischenablage. Ohne ClipMenu kann man eigentlich nicht arbeiten. Einfach mit CMD + Umschalt + V ein Kontextmenü aufrufen in dem die letzten 20 Inhalte der Zwischenablage angezeigt werden. Sofort installieren!

http://www.clipmenu.com/

Quicksilver

Programme sofort öffnen und viele weitere Funktionen mehr. Nach dem Quicksilver installiert ist, kann das Dock einpacken und zeigt nur noch die offenen Programme an. Sehr interessant ist auch die Plugin Seite auf der die Integration für viele weitere Programme ermöglicht wird.

http://qsapp.com/

Dropbox

Mittlerweile unverzichtbar. Viele Programme unterstützen das Speichern ihrer Einstellungen in einer Datei, wenn man den Speicherort in den Dropbox Ordner legt erhält man eine astreine Synchronisierung über mehrere Rechner hinweg.

http://www.dropbox.com

MAMP

Mac, Apache, MySQL und PHP. Der klassische, komfortable Unterbau um schnell und einfach Webseiten zu erstellen.

http://www.mamp.info/de/index.html

Coda

Ein guter Editor, FTP Client und Browser der die Webentwicklung enorm erleichtert. Ganz zufrieden bin ich nicht, aber es ist ein solider Editor und Version 2.0 wird bald kommen.

http://panic.com/coda/

Transmit

Obwohl Coda einen FTP Client eingebaut hat, brauche ich für einige Anwendungsfälle ein eigenständiges FTP Programm. Transmit kostet zwar Geld, ist es aber aufjedenfall wert!

http://panic.com/transmit/

Git

Mit diesem praktischen Installationsprogramm muss man sich keine großen Gedanken machen außer über die Doppelklick Geschwindigkeit.

http://code.google.com/p/git-osx-installer/

OpenOffice

Aus irgendeinem Grund gibt es kein wirklich brauchbares Textverarbeitungsprogramm. Gerade im Hinblick auf die Kollegen mit Windows oder Linux führt leider kein Weg an OpenOffice vorbei.

http://download.openoffice.org/

UnRarX

Schnell, zuverlässig und kostenlos Rar Archive entpacken

http://www.unrarx.com/

VLC

Der Videoplayer der so gut wie jedes Videoformat abspielt. Unverzichtbar.

http://www.videolan.org/

Sykpe

Ohne Skype keine Kommunikation auf dem Rechner. Verdammt einsam ohne.

http://www.skype.com/

HexPicker

Erweitert den OSX Farben Dialog um einen weiteren Reiter der den Hexcode für die gewählte Farbe ausgeben kann. Interessante Alternative ist der Picker von Panic: http://www.panic.com/~wade/picker/

http://wafflesoftware.net/hexpicker/

SpotColor

Das war ein grandioses Programm das den OSX Farben Dialog als separates Programm zur Verfügung gestellt hat. Trauriger Weise in ein neues, kostenpflichtes Programm transformiert. Aber der Code befindet sich auf Github für den interessierten Entwickler (https://github.com/0xced/SpotColor).

http://zachwaugh.com/spotcolor/

Archiver

Nettes, gut aussehendes Programm um alle möglichen und unmöglichen Programme zu Packen und entpacken. Kostet eine Kleinigkeit, gab es mal für einen Tweed umsonst.

http://archiverapp.com/

CoRD

Nettes Programm um auf die per RDP verbundenen Rechner zuzugreifen. In unserem Fall sind das die Internet Explorer Testmaschinen die fernab von Sonnenlicht im Serverraum versteckt sind.

http://cord.sourceforge.net/

Notational Velocity

Grandios schnelles und einfach zu bedienendes Snippets Programm. Darauf ausgelegt ausschließlich über die Tastatur bedient zu werden. Im Zusammenspiel mit Quicksilver und Dropbox ein starkes Tool auf allen zur Verfügung stehenden Rechnern.

http://notational.net/

Skitch

Das perfekte Screenshot Tool um die entschiedenen Teile einer Applikation für die Kunden oder die Familie hervor zu heben.

http://skitch.com/

Adressbuch und Kalender

Netter Weise schon von OSX Lion mitgeliefert, aber was die sich bei dem Design gedacht haben bleibt verborgen. Zum Glück gibt es einen komfortablen Installier um sich ein etwas ansehnlicheres Aluminium Design zurück zu holen: http://macuser-dresden.de/archives/2011/07/adressbuch-und-ical-vom-leder-zuruck-zu-aluminium-fur-mac-os-x-lyon/

Fazit

Es gibt so viele schöne Programme für OS X, alle hier aufgeführten funktionieren auch ohne weiteres auf OS X Lion.

Vorweg bleibt zu sagen das neben der On-Site-Optimierung die Off-Site-Optimierung eine bedeutende Rolle spielt. Aber die ist wie Rudern gegen den Strom. Wenn man nachlässt wird man zurück getrieben. Irgendwer hat das gesagt, ich weiß leider nicht mehr wer, aber es stimmt.

Für dauerhafte, erfolgreiche Suchmaschinenoptimierung muss man also wohl oder übel in die Taschen greifen und eine gute Agentur damit beauftragen. Für das kleine Budget gibt es aber auch schon einige Tricks.

RealURL oder CoolURI

Sprechende Urls sind natürlich wahnsinnig wichtig und die Grundlage für jede Optimierung. Anleitungen und Tutorials bieten die Extension Manuals oder Google mehr als genug.

Da mich RealURL in der Vergangenheit schon öfters zur Weißglut gebracht hat bevorzuge ich für überschaubare Internetauftritte im Moment CoolURI.

CoolURI hat seine komplette Konfiguration in einer XML Datei. Die Grundlage dafür befindet sich in typo3conf/ext/cooluri/test/CoolUriConf.xml und muss von dort in den typo3conf/ Ordner geschoben werden. Die Konfiguration ist recht überschaubar, mit Kommentaren versehen und ordentlich voreingestellt.

Auf Root Ebene muss die von TYPO3 mitgelieferte _.htacces Datei in .htaccess umbenannt werden. Anschließend im Typoscript die Extension aktivieren:

config.baseURL = http://www.deineseite.de/
config.tx_cooluri_enable = 1
config.redirectOldLinksToNew = 1

Anschließend Cache leeren und das Frontend neuladen - fertig. Wunderschöne Urls.

Google Sitemap

Extension mc_googlesitemap installieren. Nach dem Import und dem Update der Datenbank muss eine neue Seite angelegt werden und darauf ein Inhaltselement "Menü / Sitemap".

Ist dieses ausgewählt wählt man den Typ Google Sitemap für Seiten und die Root Seite als Ausgangspunkt. So einfach! Über Google Webmaster Tools kann man die Sitemap überprüfen lassen und direkt in das hungrige Spidermaul vom Suchmaschinenriesen werfen.

Google Webmaster Tools

Um sich vom allmächtigen Internetriesen helfen zu lassen, sollte man sich bei den Google Webmaster Tools anmelden und die eigene Seite hinzufügen. Hier findet man nützliche Informationen über Fehler, Suchanfragen und Spiderresultate. https://www.google.com/webmasters/tools/

Metatags

Diverse Quellen behaupten zwar, dass Google die Daten nicht mehr zum Indexieren benutzt, trotzdem erscheinen sie als Beschreibungstext in den Suchergebnissen oder wenn die Seite bei Facebook geteilt wird. Um dem Redakteur ein bearbeiten zu ermöglichen stehen schon Felder in den Seiteneigenschaften bereit. Man muss diese nur mit ein paar Zeilen Typoscript in die HTML Ausgabe bringen:

page.meta.keywords.field = keywords
page.meta.description.field = description

Seitentitel

Je weiter vorne ein Begriff steht umso höher wird die Wichtigkeit von jenem eingeschätzt. In TYPO3 gibt es zwei Wege das Standardverhalten im Seitentitel "Projektname: Seitenname" zu ändern.

Entweder über eine Typoscript Eigenschaft:

config.pageTitleFirst = 1

Oder in dem man die Standardausgabe unterdrückt und das Title-Tag selbst generiert:

config.noPageTitle = 2
page.headerData.10 = TEXT
page.headerData.10.field = subtitle // title
page.headerData.10.wrap = <title>| &nbsp; - deinedomain.com</title>

Um den Seitentitel mit Keywords zu füllen und das Menü trotzdem nicht explodieren zu lassen findet man im Backend die Felder "Page Title" und "Alternative Navigation Title". Ersteres wird im Title Tag ausgegeben, letzteres im Menü benutzt.

RealURL bietet darüber hinaus noch das Feld "Speaking URL path Segment" an über den die URL beeinflusst wurden kann.

Fazit

Suchmaschinenoptimierung ist ein langes und aufwendiges Thema. Wir verkaufen immer "suchmaschinenfreundliche" Webseiten. Neben der Umsetzung der oben genannten Tipps ist eine saubere HTML Struktur und eine bestätigte Fehlerfreiheit durch den W3C Validator unverzichtbar.

Neben dem Sammeln von Links von Außen, welche Maßnahmen ergreift ihr um eure TYPO3 Projekte weiter nach vorne zu bringen?

Mit jQuery.Deferred lassen sich Objekte erzeugen, die beim erreichen eins Zustandes bescheid geben, damit andere Objekte darauf reagieren können. Klingt verworren ist aber ganz einfach, zum Beispiel sollen die Bilder angezeigt werden wenn sie fertig geladen sind.

Ohne $.Deferred

Vor jQuery 1.5 musste man sich mit Callbacks oder window.setTimeout() helfen um auf Ereignisse zu reagieren.

$('#elem').fadeIn(function() {
  // do something when #elem is visible
});

Bei einem Element ist das leicht, aber wenn es sich um mehrere Elemente handelt, oder man nicht genau sagen kann wann ein Element einen Status erreicht hat, dann wirds kritisch.

Mit $.Deferred

Die großartigen Funktionen heißen $.when() und $.then(). In meinem letzten Projekt musste ich warten bis mehrere Bilder geladen wurden. So sieht der Aufruf aus:

$.when(loadImg('#img1')).then(function() {
  //do stuff, the image is loaded
});

Zugegeben, das kann auch leichter haben mit $('#img1').load(function() { /* action */ }), richtig schön wird es auch bei mehreren Bildern:

$.when(
  loadImg('#img1'),
  loadImg('#img2'),
  loadImg('#img3'))
.then(function() {
  //do stuff, all images are loaded
});

Die Funktion $.then() wird erst ausgeführt wenn alle Funktionen in $.when() ihr okay gegeben haben. Genial oder?

Die Funktion loadImg() muss natürlich entsprechend vorbereitet werden, damit sie okay sagen kann.

function loadImg(selector) {
  var dfd = $.Deferred();
  $(selector).load(function() { dfd.resolve(); });
  return dfd.promise();
}

In der Variable dfd wird ein neues Deferred Objekt erzeugt. Die Rückgabe der Funktion muss von diesem Objekt die Funktion promise() ausgeben.

Und wenn die Funktion ihr erklärtes Ziel erreicht hat, wird die Funktion resolve() aufgerufen. Damit ist der Funktion $.when() klar das sie ggf. weitermachen kann.

Fazit

jQuery Magic vom feinsten! Das war ein sehr kleiner Einstieg in dieses großartige Konzept, Deferred kann noch einiges mehr und die offizielle jQuery Dokumentation verrät was.

Ich wünsche viel Spaß beim programmieren und coole neue Scripte.

Beim Auslesen werden die Ergebnisse so zusammen gefasst, dass es für den normalen Programmierer kein Unterschied gibt. Die neuste Version findet man auf GitHub, die Erklärung zur Installation und Nutzung in diesem Eintrag.

Voraussetzungen

Das Expandable Behavior erwartet zwei Tabellen Keys und Values:

CREATE TABLE IF NOT EXISTS 'keys' (
  'id' int(3) unsigned NOT NULL AUTO_INCREMENT,
  'model' varchar(25) COLLATE utf8_bin NOT NULL,
  'key' varchar(50) COLLATE utf8_bin NOT NULL,
  PRIMARY KEY ('id')
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

CREATE TABLE IF NOT EXISTS 'values' (
  'id' int(6) unsigned NOT NULL AUTO_INCREMENT,
  'key_id' int(3) NOT NULL,
  'model_id' int(6) NOT NULL,
  'value' text COLLATE utf8_bin NOT NULL,
  PRIMARY KEY (id)
) ENGINE=InnoDB  DEFAULT CHARSET=utf8 COLLATE=utf8_bin;

Außerdem sollte man das Containable Behavior für das Model aktiviert haben. Ansonsten fehlt nur noch die Datei aus dem Repository auf GitHub.

Installation

Ein schönes Beispiel ist das Model Document. In meinem Projekt gibt es die Möglichkeit beliebige Dateien hochzuladen, jede Datei hat dabei andere Eigenschaften die dazu mit gespeichert werden sollen. Jetzt könnte man alle Spalten anlegen und nur die benötigten ausfüllen, was aber zu einer äußerst unangenehmen Tabelle führt. Da doch lieber das Expandable Behavior. Die Tabelle documents besitzt folgende Spalten:

ID
created
modified
user_id
title
file
extension
is_hidden

Für ein OpenOffice Dokument soll der Benutzer jetzt die Anzahl Seiten eintragen können. Das macht für ein Video natürlich keinen Sinn. Jetzt kommt das Expandable Behavior ins Spiel.

class Document extends AppModel {
  var $actsAs = array('Containable', 'Expandable');
}

Fertig!

Speichern

Im View kann man jetzt ein Formular mit beliebigen Feldern anlegen, zum Beispiel für ein neues OpenOffice Dokument:

<?php
echo $this->Form->create('Document');
echo $this->Form->input('title');
echo $this->Form->input('file', array('type' => 'file'));
echo $this->Form->input('pages');
echo $this->Form->end('Save');
?>

Das Feld pages wird beim Speichern erkannt, eventuell in der Datenbank keys ein neuer Eintrag erzeugt und in values die Inhalte gespeichert. So einfach.

Neue Felder werden nur angelegt, wenn debug größer als 0 ist.

Validierung

Es lassen sich wie gewohnt alle Cake Validierungsregeln auf die dynamischen Felder anwenden.

class Document extends AppModel {
  $validate = array('pages' => array('rule' => 'numeric'));
}

Auslesen

Hier muss man auf eine Sache achten. Normalerweise sieht die Abfrage so aus:

$document = $this->Document->find('first', array(
  'conditions' => array('Document.id' => $document_id),
));

Da erhält man jetzt für jeden dynamisch angelegten Key einen leeren Eintrag weil die Inhalte nicht automatisch geladen werden. Das muss beim auslesen noch mit angegeben werden:

$document = $this->Document->find('first', array(
  'conditions' => array('Document.id' => $document_id),
  'contain' => array('Value')
));

Über das Containable Behavior werden alle zugehörigen Inhalte ausgelesen, das Expandable Behavior kümmert sich um den Rest.

$this->Document->getKeys();

Die Funktion getKeys() aus dem Behavior liefert ein Array mit allen dynamisch angelegten Schlüsseln. Ganz praktisch um dynamische Formulare aufzubauen.

ToDo

Ganz fertig ist die Arbeit noch nicht.

• Ich habe im beforeFind() Callback alles versucht, aber ich kriege Cake einfach nicht dazu die Inhalte automatisch mit auszulesen.
• Es wäre natürlich nett die values auch im Paginator nutzen zu können. Das muss noch untersucht werden.
• Die Keys sollten verschiedene Typen ermöglichen, z.B. für Zahlen, Text oder Floats. Im Moment wird einfach alles in einem Feld vom Typ Text gespeichert.

Fazit

Das Behavior funktioniert bisher super, ist allerdings noch in einer sehr frühen Entwicklungsphase. Wer einen Fehler findet ist herzlich eingeladen einen Patch über GitHub zu schicken.

Bisher macht es großen Spaß neue Felder anzulegen ohne sich über die Datenbank Gedanken zu machen. Mal sehen was daraus noch wird.

CakePHP vorbereiten

Um in allen Teilen der Applikation zu erkennen, ob ein mobiles Endgerät auf die Seite zugreift, definiert man im AppController eine Variable $isMobile.

class AppController extends Controller {
  var $isMobile = false;
}

In der Funktion beforeFilter() wird mit Hilfe des RequestHandlers das mobile Endgerät erkannt:

function beforeFilter() {
  if($this->RequestHandler->isMobile() || isset($this->params['url']['mobile'])) {
    $this->layout = 'mobile';
    $this->isMobile = true;
  }
  $this->set('is_mobile', $this->isMobile);
}

Die Variable isMobile wird auf true gesetzt und das Layout mobile genutzt. Um es in der gewohnten Umgebung zu testen, erlaube ich auch den URL Parameter mobile, mit dem jeder View per ?mobile=1 im mobilen Layout angezeigt werden kann.

Bei einer richtig guten Applikation ist die Arbeit damit getan und alle Views funktionieren auch in der mobilen Version. Realistischer ist aber das man in der mobilen Version anderen HTML Code braucht und nur einen Teil der Funktionalität zur Verfügung stellt. Das erreicht man über angepasste Views.

In der Funktion beforeRender() kann der View verändert werden. Meine Lieblingsfunktion sieht so aus:

function beforeRender() {
  if($this->isMobile) {
    $this->action = 'mobile/'.$this->action;
  }
}

Entweder man fügt diese Funktion im AppController ein und leitet für die gesamte Applikation alle Views in den mobile Ordner weiter, oder nur in den betreffenden Controllern.

Nach dem abarbeiten der Funktion im Controller wird der View in den mobile Ordner weiter geleitet. Cake sucht jetzt für den Aufruf von /users/login den View in app/views/users/mobile/login.ctp.

jQuery Mobile im CakePHP Layout

Jetzt kommt der schöne Teil! Eine mobile Applikation mit jQuery mobile bauen. Grundlage ist ein HTML5 Grundgerüst:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Gerüst</title>
    <meta charset="utf8">
  </head>
  <body>
    <h1>Hallo Welt</h1>
  </body>
</html>

Die üblichen Variablen aus dem CakePHP View können natürlich nach belieben eingesetzt werden, ich denke da an $title_for_layout und $content_for_layout. Wirklich entscheidend ist aber jQuery mobile.

Auf der Downloadseite gibt es ein praktisches Copy Paste Snippet um jQuery und jQuery Mobile aus dem CDN einzubinden:

<!DOCTYPE html>
<html>
  <head>
    <title>HTML5 Gerüst</title>
    <meta charset="utf8">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>Hallo Welt!</h1>
      </div>
      <div data-role="content">
        <p>Meine erste mobile Seite</p>
      </div>
    </div>
  </body>
</html>

Bei jQuery Mobile läuft sehr viel über das data Attribut eines Elements. Seite, Kopf und Inhalt werden darüber deklariert. In jQuery ließt man diese Eigenschaften übrigens sehr einfach über die data() Funktion aus.

$('div').data('role'); // returns string
$('div').data(); // returns object

Konfiguration

Es gibt Standardeinstellungen, Callbacks und Events auf die man in Javascript reagieren kann. Allerdings muss man den eigenen Code vor dem Einbinden von jQuery Mobile anlegen! So siehts aus:

<script src="jquery.min.js"></script>
<script>
  $(document).bind("mobileinit", function(){
    //apply overrides here
  });
</script>
<script src="jquery.mobile.min.js"></script>

Formulare

jQuery Mobile erwartet einen Container der das Label und das Inputfeld umschließt. Kein Problem sagt der Cake Entwickler erst, dann bemerkt er aber das der Container das Data Attribut fieldcontainer braucht. Zum Glück auch kein Problem, da man dem FormHelper beim erstellen des Formulars Standardeigenschaften mitgeben kann:

echo $this->Form->create('User', array(
  'action' => 'login',
  'inputDefaults' => array(
    'div' => array('data-role' => 'fieldcontain')
  ),
));

jQuery Mobile kümmert sich jetzt von selbst um die korrekte Darstellung. Bei viel Platz werden Label und Inputelement nebeneinander, bei weniger Platz untereinander dargestellt. Submitbuttons werden automatisch schick dargestellt.

Fazit

Es gibt eine Menge Dinge man beim Arbeit mit jQuery Mobile entdecken kann. Es macht großen Spaß und funktioniert gut über die meisten mobilen Endgeräte hinweg. Die Dokumentation von jQuery Mobile ist mit jQuery Mobile erstellt. Dazu ein Trick: Wenn man die Seite gefunden hat, die genau das darstellt was man sucht, dann entfernt man die Raute aus der URL und öffnet anschließend den Quelltext der Seite um zu verstehen wie das Feature aufgebaut ist.

Da alles dynamisch geladen wird, vom Framework angepasst und erweitert wird, wird man im Firebug durch jede Menge Kram abgelenkt. Will man also herausfinden wie durchsuchbare Listen aufgebaut sind, navigiert man auf die entsprechende Seite in der Doku:

http://jquerymobile.com/demos/1.0a2/#docs/lists/lists-search.html

Und entfernt die Raute:

http://jquerymobile.com/demos/1.0a2/docs/lists/lists-search.html

Und erkennt das es äußerst einfach, genial und zukunftsfähig aufgebaut ist:

<div data-role="page">

  <div data-role="header">
    <h1>Search filter bar</h1>
  </div><!-- /header -->

  <div data-role="content">
      <ul data-role="listview" data-filter="true">
        <li><a href="index.html">Acura</a></li>

        <li><a href="index.html">Audi</a></li>
        <li><a href="index.html">BMW</a></li>
        <li><a href="index.html">Cadillac</a></li>
        <li><a href="index.html">Chrysler</a></li>
        <li><a href="index.html">Dodge</a></li>
        <li><a href="index.html">Ferrari</a></li>

        <li><a href="index.html">Ford</a></li>
        <li><a href="index.html">GMC</a></li>
        <li><a href="index.html">Honda</a></li>
        <li><a href="index.html">Hyundai</a></li>
        <li><a href="index.html">Infiniti</a></li>
        <li><a href="index.html">Jeep</a></li>

        <li><a href="index.html">Kia</a></li>
        <li><a href="index.html">Lexus</a></li>
        <li><a href="index.html">Mini</a></li>
        <li><a href="index.html">Nissan</a></li>
        <li><a href="index.html">Porsche</a></li>
        <li><a href="index.html">Subaru</a></li>

        <li><a href="index.html">Toyota</a></li>
        <li><a href="index.html">Volkswagon</a></li>
        <li><a href="index.html">Volvo</a></li>
      </ul>
  </div><!-- /content -->
</div><!-- /page -->

Ist das nicht schön?

Beim schreiben sind mir eine ganze Menge Themen aufgefallen die unbedingt noch behandelt werden müssen: Links, Ajax und Maps.

Wie sind deine Erfahrungen mit jQuery Mobile?

In meinem aktuellen Projekt kann der Benutzer unter einer großen Auswahl Elementen wählen. Jedes Element gehört in eine Kategorie. Also wäre es doch nett oben eine Kategorie anzuklicken und anschließend nur die Einträge dieser Kategorie zu sehen.

Nichts leichter als das! Es gibt natürlich großartige und weniger gute Plugins zu dem Thema, aber es ist in einer Zeile selbst geschrieben. Macht Spaß und verdeutlicht die Verkettung in jQuery.

Das HTML Gerüst

Damit fängt es immer an. So sieht es leicht gekürzt aus:

<div class="categories">
  <ul>
    <li data-id="1">Kategorie 1</li>
    <li data-id="2">Kategorie 2</li>
  </ul>

  <div id="category_1" class="category">
    <!-- jede Menge Inhalt -->
  </div>
  <div id="category_2" class="category">
    <!-- noch  mehr Inhalt in Kategorie 2 -->
  </div>
</div>

Es gibt also einen umfassenden Container, darin befindet sich eine unsortierte Liste als Menü und darunter die einzelnen Kategorien. Die Listenpunkte sind mit dem HTML5 Attribut data-id ausgestattet um klar zu machen, welchen Punkt sie einblenden.

jQuery arbeitet auf grandiose Art und Weise damit zusammen, dazu gleich mehr.

Eine Zeile jQuery

Hier kommt sie:

$('.categories>ul li').live('click', function() { $(this).closest('.categories').find('.category').hide().filter('#category'+$(this).data('id')).show().end().end().end().siblings('li').removeClass('active').end().addClass('active');}).filter(':first').click();

Auch wenn ich große Töne gespuckt habe von wegen eine einzige Zeile, würde ich doch empfehlen ein paar Zeilenumbrüche einzubauen. In Javascript müssen die Zeilen nicht mit einem Simikolon beendet werden, deshalb kann man diese Zeile auch übersichtlicher notieren:

$('.categories>ul li')
    .live('click', function() {
      $(this)
        .closest('.categories')
          .find('.category')
            .hide()
            .filter('#category'+$(this).data('id'))
              .show()
            .end()
          .end()
        .end()
        .siblings('li')
          .removeClass('active')
          .end()
        .addClass('active');
    })
    .filter(':first')
    .click();

Einzelerklärung

Jetzt gehts los! jQuery basiert immer auf einem Elementstack. Das bedeutet man wählt per CSS Selektor eine beliebige Anzahl Elemente aus und wendet darauf beliebig viele Befehle an. In diesem Beispiel werden alle Listenelemente ausgewählt die sich in einer Liste befindet, welche wiederum ein direktes Kindelement eines Elements mit der Klasse .categories ist.

$('.categories>ul li')

Würde man das > Zeichen weglassen, würden sich die folgenden Anweisungen auf alle Listen im Element .categories beziehen, was natürlich nicht gewünscht ist.

Jedem Listenelement wird der Eventhandler click zugewiesen:

.live('click', function() {

Die großartige Funktion live(event, callback) arbeitet im Gegensatz zu click(callback) auch mit Elementen die nachträglich dem Dom hinzugefügt wurden.

Innerhalb eines Callbacks bezieht sich $(this) auf das spezifische Element welches den Funktionsaufruf ausgelöst hat. Sprich: das angeklickte Listenelement. Das dient als Ausgangspunkt um das umfassende Element .categories in den Elementstack zu laden:

$(this).closest('.categories')

Vom Ausgangspunkt $(this) wird das nächstgelegene Element ausgewählt. Sollten sich mehrere Elemente mit der Klasse .categories auf der Seite befinden können wir so sicherstellen, dass das richtige Element behandelt wird.

Aus dem richtigen Element werden alle Elemente der Klasse .category gesucht und ausgeblendet:

.find('.category').hide()

Mit find(selector) wird innerhalb der Objekte im Elementstack gesucht. Im Gegensatz zu der Funktion filter(selector) welche die Elemente im Stack durchgeht und nur jene zurück liefert auf die der Selector zutrifft.

Die großartige Methode data(key, value) greift automatisch auf das data Attribut aus dem HTML zu und stellt es zur Verfügung.

Mit diesem Wissen müsste der nächste Schritt klar sein:

.filter('#category'+$(this).data('id')).show()

Aus allen ausgewählten und versteckten .category Elementen wird das mit der ID des angeklickten Listenelements ausgewählt und angezeigt.

Mit end() setzt man einen veränderten Elementstack wieder zurück. Wir haben jetzt drei mal end(), für filter(), find() und closest(). Also befinden wir uns wieder beim angeklickten Listenelement.

.siblings('li')

Damit werden alle Nachbarn des Listenelements ausgewählt, also alle Einträge in der Liste. Egal welches, keines darf mehr die Klasse active besitzen:

.removeClass('active').end()

Im gleichen Zug wird auch die Veränderung durch siblings(selector) zurück gesetzt. Fehlt nur noch das hinzufügen der Klasse zum angeklickten Element:

.addClass('active');

Das war es innerhalb des Callbacks. Beim laden der Seite werden alle Kategorien angezeigt, das ist nicht Ziel des Tab Widgets, aber auch leicht zu lösen. Zur Erinnerung: Es wurden alle Listenelemente ausgewählt und jedem Element ein Clickhandler zugewiesen.

$('.categories>ul li').live('click', function() { /* lange zeile */ })

Auch die live() Funktion gibt den Elementstack zurück, deshalb brauchen wir nur noch zwei grandiose Funktionen anzuhängen:

.filter(':first').click();

In jQuerysprache heißt das: Nimm das erste Element aus deinem Stack und klicke es an. Was dann passiert haben wir gerade ausführlich besprochen. Alle Kategorien werden ausgeblendet, die erste wieder ein und das erste Listenelement mit der Klasse active gekennzeichnet.

Fertig! Das war ein Tab Widget in mehr oder weniger einer Zeile.

Das Theme wurde von unserem Grafiker Tim Herzog entwickelt und von mir umgesetzt. Sehr hilfreich dafür war natürlich mein Eintrag wie ein Entwickler einen WordPress Blog aufsetzt. Aber es gibt auch ein paar neue Funktionen. Ein paar Highlights und deren Umsetzung will ich natürlich nicht für mich behalten.

Sticky Posts

Über die Visibility lässt sich im Backend ein Post als "sticky" markieren. Die Posts kriegt man über die Funktion get_option('sticky_posts') - den Rückgabewert übergibt man dann dem WP_Query Object. Zum Beispiel so:

$sticky = new WP_Query(array(
  'post__in' => get_option( 'sticky_posts' ),
  'caller_get_posts' => 1,
  'orderby' => 'modified',
  'showposts' => 6
));

Fragt man die neusten Einträge ab, werden die Sticky Posts allerdings unabhängig von ihrem Datum ganz oben in der Liste angezeigt. Das kann man verhindern:

$newest = new WP_Query(array(
  'showposts' => 15,
  'ignore_sticky_posts' => 1,
  'caller_get_posts' => 1
));

Eigentlich sollte ignore_sticky_posts reichen, aber bei mir hat es nur mit caller_get_posts die erhofte Wirkung erzielt.

Code und Quelltext

Der Quelltext wird jetzt schöner dargestellt. Realisiert mit dem Google Code Prettify. Zeilennummern und Syntaxhighlighting wird direkt dynamisch erstellt.

function code_func($atts, $content = null) {
  $content = strip_tags($content, 'a,strong');
  $content = "<pre>".$content."</pre>";
  while(stristr($content, '  ')) {
    $content = do_shortcode($content);
  }
  return $content;
}
add_shortcode('code', 'code_func');

Mit jQuery wird jedem pre Element die Klasse prettify zugewiesen und anschließend der Syntaxhighlighter gestartet.

$('article.single pre').addClass('prettyprint linenums');
prettyPrint();

Ein anderer lang gehegter Traum habe ich mir mit dem Shortcode [ pre ] erfüllt, mit dem ich endlich Quelltext innerhalb des Fließtextes einbinden kann. Die Umsetzung ist sehr simpel, definiert in der functions.php Datei.

function pre_func($atts, $content = null) {
  return '<pre>'.$content.'</pre>';
}
add_shortcode('pre', 'pre_func');

Der Affe

In der Einzelansicht steht unter der Sidebar unser kleines Maskotchen und macht den Besucher auf unsere Firma aufmerksam. Scrollt der Benutzer nach unten, heftet er sich an den unteren Bildschirmrand, bis die Kommentare erreicht sind, auf denen er sich nieder lässt. Ein super Effekt, realisiert mit jQuery.

Der Trick liegt im Scroll Event und dem Wechsel zwischen position:relative und fixed. Ich habe eine Funktion geschrieben die den Affen positioniert:

function posTheApe() {
  bottom = $(window).scrollTop()+$(window).height();
  if(bottom-336-45 <= aside_y) {
    $nav.css({
      position: 'absolute',
      top: aside_y+350
    });
  }    
  else if(bottom >= footer_y) {
    $nav.css({
      position: 'relative',
      top: ''
    });
  }
  else if($nav.css('position') != 'fixed') {
    $nav.css({
      position: 'fixed',
      bottom: 0,
      top: ''
    });
  }
}

In Zeile 2 wird der Abstand der unteren Fensterkante zum Seitenanfang gemessen. footer_y und aside_y wurden vorher gesetzt und beinhalten den Abstand des Footers, bzw. der Seitenleiste, zum Seitenanfang. Alles andere ist dann nur noch ein abgleich der Werte.

Twitter

In der Seitenleiste werden dynamisch meine neusten Twitter Nachrichten angezeigt. Realisiert mit dem großartigen Plugin Tweet! Interessant finde ich die Implementierung der Callbacks. Gewöhnt ist man an die Übergabe einer Funktion im Konfigurationsobjekt:

$("body").plugin({
  callback: function() {
    //do something
  }
});

Bei Tweet! gibt es diese Option allerdings nicht. Im Quelltext habe ich aber mehrere Aufrufe von trigger('loaded') gefunden, so funktionierts:

$("body")
  .plugin()
  .bind('loaded', function() {
    //do something
  });

Und funktioniert! Mit dem Callback loaded wird die Höhe der Seitenleiste neu bestimmt um den Affen richtig positionieren zu können. Funktioniert einwandfrei!

Fazit

Ein paar Kleinigkeiten hatte Tim noch vorgesehen die ich im Laufe der Zeit anpassen werde. Als nächstes will ich endlich wieder ein paar neue und aktualisierte TYPO3 Extensions veröffentlichen, darunter auch der lang ersehnte Kiwi Slider 2.0!

Man darf also gespannt sein und den RSS Feed abonnieren. Und nicht vergessen Feedback in den Kommentaren zu hinterlassen!

Installation

Wer keine Zeit oder Lust hat etwas über die Technik dahinter zu lesen, lädt sich alle Dateien bei GitHub herunter und schiebt sie in einen Ordner den er über seinen Webserver erreicht. Anschließend in der index.php den Zugang zur Datenbank und den Pfad zur lokalen phpMyAdmin Installation eintragen.

Fertig! Aber vorsicht: Es sind absolut keine Sicherheitsmaßnahmen vorhanden, eine Installation auf einem Server würde ich tunlichst vermeiden!!

Die Technik

Die komplette Seite besteht aus der index.php Datei. Im oberen Teil sind ein paar Einstellungen zu treffen. Darunter werden mit mysql_connect und mysql_list_dbs alle Datenbanken ausgelesen und in $db_list gespeichert. Die Funktion mysql_list_dbs gibt ein Objekt zurück das mit einer while() Schleife durchlaufen werden kann. In Kurzform:

Das eigentlich schöne passiert mal wieder mit jQuery: das geniale Plugin Quicksearch erlaubt das blitschnelle durchsuchen während der Eingabe. Das einzige was der Entwickler tun muss ist ein Formularfeld mit einer zu durchsuchenden Datenmenge (z.B. einer Tabelle) verknüpfen:

Damit das Formularfeld beim Aufruf der Seite den Fokus erhält erweitert man die Zeile noch um einen einfachen Aufruf:

Fazit

Nach dem der erste Schritt geschafft ist, drängen sich natürlich eine ganze Reihe weiterer Ideen auf:

• Navigation mit Pfeiltasten
• Automatische Vervollständigung
• Anlegen von neuen Datenbanken

Wer Lust hat mitzumachen, ist dazu herzlich auf GitHub herzlich eingeladen. Neue Ideen und Verbesserungsvorschläge gerne in den Kommentaren.