Christoph Hautzinger's Blog - Javascript

Webseitenüberschriften mittels Filter "verschönern"

nospam@example.com (Christoph Hautzinger) — Sat, 06 Oct 2007 17:25:00 +0200

Heute will ich etwas über Symfony Filter zum Besten geben. Vorab eine kleine Einführung zum sfTextReplacementPlugin, welches es ermöglicht Text auf einer Website in einer beliebigen TTF-Schriftart als (cachbare) Grafik auszugeben um so beispielsweise h1/h2-Überschriften zu ersetzen. Die Einbindung erfolgt über einen simplen Funktionsaufruf, der an jeder gewünschten Stelle gemacht werden muss, hier ein Beispiel:

<?php use_helper('TextReplacement') ?>
<?php echo graphical_text('Dies ist meine Überschrift') ?>
<p>hier fängt dann der Content der Seite an...</p>

Das Plugin bietet von Haus aus die Möglichkeit, die Seite nach dem Laden mit Hilfe des der js_replace_text()Helper-Methode per Javascript zu durchsuchen um gewisse Tags durch die entsprechenden Bilder ersetzen zu lassen - doch was, wenn der Browser Javascript deaktiviert hat? Zudem wird hierbei ein zusätzliches Javascript File includiert was auch nicht unbedingt sein muss.
Für einen naiven Programmierer ist es natürlich ärgerlich, diese Replacements in ein großes Projekt zu integrieren weil er jede einzelne Überschrift durch den entsprechenden Funktionsaufruf ersetzt - viel eleganter geschieht dies mittels Filter. Da ich die Ersetzungen nur im Content Bereich der Webseite (also in dem Bereich, der auf jeder Seite anders ist) vorgenommen werden sollen, liegt es auf der Hand, eine abstrakte Klasse zu definieren, die eben diesen Bereich isoliert um ihn dann von einer Subklasse ersetzen zu lassen (eine zusätzliche Anforderung in diesem Projekt war nämlich das Ersetzen einzelner Wörter duch Wikipedia Links). Die (Super-)Klasse sieht in meinem Fall so aus:

<?php
/**
* abstract class to extract contents of template
*
* @author Christoph Hautzinger <mail at hautzinger.info>
*/
abstract class ContentFilter extends sfFilter
{
protected $content;
/**
* extracts pages main content and passes it to self::replace()
*
* @param sfFilter $filterChain
*/
public function execute($filterChain)
{
// Execute next filter
$filterChain->execute();
$timer = sfTimerManager::getTimer(get_class($this).' Filter');
$response = $this->getContext()->getResponse();
$content = $response->getContent();
$startMark = '';
$stopMark = '';
// determine section where replacementes are done
$startPos = strpos($content, $startMark);
$stopPos = strpos($content, $stopMark, $startPos) + strlen($stopMark);
$this->content = substr($content, $startPos, $stopPos - $startPos);
// do replacements
$this->replace();
$response->setContent(
substr($content, 0, $startPos) . $this->content . substr($content, $stopPos)
);
$timer->addTime();
}
/**
* should be overwritten in subclass
*/
abstract protected function replace();
}

Zu beachten ist hierbei, dass der Content im dem die Ersetzungen vorgenommen werden sollen im Template durch die beiden Kommentare  und  eingeschlossen werden muss. Der Code enthält keinerlei Magic und sollte auch ohne PHP-Kenntnisse leicht verständlich sein.

Nun aber wieder zurück zum eigentlichen Problem: Wir haben nach einer Lösung gesucht, diese Ersetzungen global vorzunehmen und die sieht wie folgt aus:

<?php
/**
* replaces all h1, h2 tags with its adequate graphical_text()-call replacements
*
* @author Christoph Hautzinger <mail at hautzinger.info>
*/
class TextReplacementFilter extends ContentFilter
{
/**
* searches for all h1 and h2 tags and passes result to self::callbackHeadline()
*/
protected function replace()
{
sfLoader::loadHelpers(array('TextReplacement'));
$this->content = preg_replace_callback('@<(h[12])>([^<]+)</\\1>@i', array($this, 'callbackHeadline'), $this->content);
}
/**
* replace all matches with a specific h1 tag and our textreplacement-call
* @return string
*/
protected function callbackHeadline($matches)
{
return '<h1>Google Searchword1, Google Searchword2: '.$matches[2].'</h1>' . PHP_EOL .
graphical_text($matches[2], 'headline') .'<br/>';
}
}

Zusätzlich wird noch eine h1-Überschrift in das Dokument eingefügt, um eine bessere Indizierung durch Suchmaschinen zu gewährleisten - man darf natürlich nicht vergessen, sämtliche dieser "speziellen" h1 Tags per CSS auf display: none zu setzen und den Filter in der filters.yml zu aktivieren.

Und wir sehen: Mit relativ wenig Code haben wir wieder sehr viel erreicht, wenn man die Vorzüge eines hervorragenden Frameworks nutzt. Sicherlich sind reguläre Ausdrücke langsam und preg_replace_callback noch langsamer - dennoch finde ich den Einsatz hier angebracht, zumal die Ausführung des Filters auf eine mittelgroße Seite angewandt nur ca. 6ms in Anspruch nimmt - und sollte sich später die gesamte Anwendung einmal wegen diesen 6ms aufhängen, so kann man immer noch ein Refactoring in Betracht ziehen und auf triviale Stringmanipulation umsteigen .

Javascript? Das ist doch Kindergeburtstag! Oder doch nicht!?

nospam@example.com (Christoph Hautzinger) — Fri, 21 Sep 2007 13:42:00 +0200

Mir fällt immer wieder auf, dass es viele Web Developer gibt, die den Funktionsumfang von Javascript nicht kennen/nutzen, bzw. diese Sprache komplett unterschätzen - "Ist ja nur eine kleine eingebettete Skriptsprache". Soeben bin ich auf den Blog von Ola Bini gestossen, in dem er sich wundert, dass man in Javascript beispielsweise über den Array-Operator auf die Methoden eines Objektes zugreifen kann.

Bei Javascript handelt es sich (wie auch beispielsweise bei Lisp) um eine Funktionale Sprache, was u.a. impliziert, dass Funktionsreferenzen als Parameter übergeben werden können, oder eine Funktion eine andere Funktion als Rückgabewert haben kann, wozu ich ein cooles Codebeispiel habe:

var Configuration = Class.create();
Configuration.prototype = {
_config : null,
initialize: function(config) {
this._config = config;
},
get: function(key) {
return function(vars) {
return (new Template(this._config[key])).evaluate(vars);
}.bind(this);
}
};

Hierbei handelt es sich um ein der Anschaulichkeit vereinfaches Beispiel einer kleinen Template Engine in Javascript, da ich nach einer Möglichkeit gesucht habe, serverseitige Daten initial elegant an ein includiertes Javascriptfile zu übergeben. Aber ich will nicht vom Thema abschweifen...

Schauen wir uns die Configuration::get() Methode an - sie nimmt einen Parameter, der das Template mit einem sog. Hash (oder einem Schlüssel) identifiziert und sofort eine anonyme Funktion zurückgibt, die als Parameter ein JSON Objekt nimmt, welches der evaluate() Methode aus Prototypes Template-Klasse übergeben wird.

Die anonyme Funktion tritt also erst in Aktion, nachdem sie explizit ausgeführt wird, wozu sie sich den Wert von key in einem internen Funktionsenvironment speichern muss.

Angenommen, wir hätten die Configuration bereits mit einem trivialen Template initialisiert, so können wir die anonyme Funktion über den entsprechenden Key abrufen und diese dann mit den Ersetzungswerten aufrufen:

var cfg = new Configuration({say_hallo: 'Hallo #{firstname} #{lastname}, wie gehts?'});
// fetch anonymous function
var fn = cfg.get('say_hallo');
// call anonymous function
var text = fn({firstname: 'Marc', lastname: 'Kreibich'});

Tja... und da Javascript wirklich so eine schöne Sprache ist, geht das natürlich auch noch einfacher, indem wir die anonyme Funktion direkt aufrufen, ohne sie in einer temporären Variablen zwischenzuspeichern:

var text = cfg.get('say_hallo')({firstname: 'Marc', lastname: 'Kreibich'});

Einer der vielen Gründe, wieso es sich lohnt sich mit Javascript einmal richtig auseinanderzusetzen!

Google Maps Coordinate Picker

nospam@example.com (Christoph Hautzinger) — Sun, 13 May 2007 17:38:16 +0200

Lets have a look at one diginights location-detail page: There is a Google Map on the bottom of the page which displays the locations' accurate position. The database-table therfore holds three columns: The two coordinate values for lattitude an longitude and the zoom factor.

Our problem was the missing userfriendly admin interface, so i wrote a little class for this purpose which uses the Google Maps API to select a coordinate by double clicking the map. Additionaly an adress can be looked up which uses Google's Geocoder class internally.

See the code in actionlattitude:
longitude:
zoom:

Zoom in first and then double click map to set coordinate!

Feel free to download all necessary files here: GMapsCoordPicker.zip. The zip-archive contains 4 files:

GMapsCoordPicker.class.js
Put this file in your project's javascript directory (/web/js), it handls client side logic.

GoogleMapsHelper.php
Put this file in your project's helper dir (/lib/helper). It supplies a helper function google_maps_coord_picker(). The following example shows the usage in a symfony template:

<?php use_helper('GoogleMaps') ?>
longitunde: <?php echo input_tag('lon') ?><br />
lattitude: <?php echo input_tag('lat') ?><br />
zoom: <?php echo input_tag('zoom') ?><br />
<?php echo google_maps_coord_picker('lon', 'lat', 'zoom'); ?>

This helper includes the Google Maps API, thus an API key has to be generated and set up in the application configuration (/apps/[appname]/config/app.yml):

_google_maps_coordinate_picker.php
To simply integrate in the admin generator, we need a tremplate that includes the helper showed above and displays the map. You have to replace the parameters passed to google_maps_coord_picker() with the input field ids of your form. Note that symfony uses object_input_tag() for its form elements which builds unconvenional form-field-ids.

generator.yml
This file displays the integration of _google_maps_coordinate_picker.php in the admin generator.

Schnelle Webanwendungen mit Prototype und JSON

nospam@example.com (Christoph Hautzinger) — Mon, 08 Jan 2007 01:38:33 +0100

Da es ja heutzutage keine Webanwendung mehr ohne AJAX auskommt, will ich auch hierzu einen kleinen Blog-Eintrag verfassen. Das Prinzip, das hinter AJAX steht sollte ja allgemein geläufig sein: Man kann mittels Javascript eine Anfrage an den Server stellen ohne die komplette Seite neu laden zu müssen. Diese Art des Requests macht eine Webseite viel dynamischer - die Antwortzeiten werden kürzer da auch die übertragene Datenmenge abnimmt. Das "A" im Namen steht hierbei für "asynchron", was soviel heißt, dass die JS-Anwendung nach Absetzen eines AJAX-Requests normal weiterarbeit und nicht direkt auf die Antwort des Servers wartet.

Als fertiges Javascript Framework bietet sich Prototype an, welches auch Ajax Funktionalität kapselt - hierzu seien die Klassen Ajax.Request und Ajax.Updater erwähnt - genauere Infos hierzu und zum gesamten Framework findet sich in der inoffiziellen Dokumentation.

Hm... im Titel stand doch was von JSON?

Angenommen wir haben eine komplexe Datenstruktur auf der Serverseite, die wir clientseitig verfügbar machen wollen, so kann dies sehr einfach mit Hilfe von JSON geschehen. Doch was ist JSON eigentlich? In der Wikipedia findet sich dieser Artikel darüber. Es ist also eine Art Objektbeschreibung, mit der in Javascript (und auch in jeder anderen Sprache, die JSON unterstützen) direkt gearbeitet werden kann - viel einfacher und kleiner als ein XML-File mit selbem Inhalt.

Am besten verständlich wird das an einem kleinen Beispiel:

var lottery = {
selectEvent: function(eventid) {
new Ajax.Request('/lottery/selectEvent.html', {
method: 'post',
parameters: 'eventid='+eventid,
onSuccess: function(res, json) {
$('title').value = json.title;
$('description').value = json.description;
}
});
}
}

Wir sehen einen Ajax-Request an /lottery/selectEvent.html, der nach Aufruf von lottery.selectEvent() ausgeführt wird.
Der Server antwortet nun mit einer Response, die von der Funktion, die unter "onSuccess" definiert ist asynchron verarbeitet wird. Als zweiten Parameter nimmt diese Funktion das Json Objekt, das vom Server gesendet wird.

Um die Einfachheit des Ganzen begreifen zu können fehlt allerdings noch der Codeschnipsel, auf den der Frontcontroller den Request delegiert...

public function executeSelectEvent() {
$event = EventPeer::retrieveByPk($this->getRequestParameter('eventid'));
$forJSON = array(
'title' => $event->getEventname(),
'description' => $event->getInformation()
);
return $this->parseJson($forJSON);
}

Hier wird ein assoziatives Array zusammengekleistert, das die Daten enthält mit denen clientseitig gearbeitet werden soll und dieses der Funktion parseJson() übergeben, die in der Superklasse unsrer Action definiert ist:

class myAction extends sfActions
{
protected function parseJson($forJson) {
$json = json_encode($forJson);
$this->getResponse()->setHttpHeader('X-JSON', '('.$json.')');
return sfView::HEADER_ONLY;
}
}

Unfairerweise kommt mein Blog mit PHP-Doc Kommentaren in php-bb-Tags nicht klar, weshalb ich die In-Line Dokumentation zu beiden PHP Codestücken entfernt habe.

Deutlich erkennbar allerdings, dass die parseJSON() Funktion intern json_encode() aufruft, welche man sich für sein PHP selber compilieren kann. Wie das genau geht und weitere Infos finden sich auf der Homepage von Omar Kilani.
Gibts da nicht auch was von PEAR? Sicher gibt es das - allerdings kommt diese Version leider nicht mit ISO-8859-1 (besser gesagt mit "nicht-UTF-8") klar, sodass man dazu noch über utf8_decode() einen Wrapper schreiben müsste.

Unser Encodetes JSON-Objekt wird im Header der Response geliefert, vom Prototype korrekt ausgelesen und weiterverarbeitet wie man im ersten Codefetzen sieht.

Schön nicht?

Javascript Fehlermeldung!?!?

nospam@example.com (Christoph Hautzinger) — Thu, 14 Sep 2006 12:53:20 +0200

Beim Testen eines Scripts im Internet Explorer bekam ich gerade diese Fehlermeldung:

'null' scheint also NULL oder kein Objekt zu sein...

...ahja

Software Engineering Professor nun auch unter den Bloggern

nospam@example.com (Christoph Hautzinger) — Tue, 12 Sep 2006 22:02:36 +0200

Heute will ich auf den Blog unseres coolsten Software Engineering-Profs verweisen - nämlich dem von Herrn Prof. Herzberg.

Neben großer fachlicher Kompetenz hat er auch immer einen lockeren Spruch auf der Lippe, wie im vierten Semester in SEKS (Software Engineering komplexer Systeme):

Use Cases sind wie Selbstbefiedigung: Sie sind zwar schön und gut, bringen aber nichts.

Thematisch geht es in seinem Blog um interessante Geschichten aus der Informatik, worunter sich auch Themen befinden, die in seinen Vorlesungen abgehandelt werden, wie z.B. der Artikel über Design by Contrast.

Hier der Link: denkspuren

Letzte Woche hab ich ein cooles Stückchen Javascript Code geschrieben, den ich hier auch noch bloggen möchte - das folgt diese Woche noch, wenn ich herausgefunden habe, wie man das geschickt machen kann