Besteht die Anforderung, dass bestimmte HTML Eingaben erlaubt sein sollen, so ist der Einsatz einer Bibliothek an dieser Stelle unbedingt notwendig. Es gibt zahlreiche Angriffsmöglichkeiten, mit der ein Filter zurecht kommen muss und so kann man nur davon abraten selbst etwas zu bauen (z.b. Textersetzung mittels Regulären Ausdrücken).

Für Java habe ich eine sehr einfache und gute Bibliothek gefunden, die ich an dieser Stelle nur weiterempfehlen kann. jsoup heißt die schlanke Library, die unter der MIT Lizenz zur Verfügung steht und auch für die Manipulation von HTML Dokumenten zahlreiche Funktionen mit bringt. Zudem wird HTML5 und auch invalides HTML unterstützt.

Die Funktionsweise ist schnell erklärt. Will man jegliches HTML entfernen, so geschieht das mit folgenden Aufruf

String userText = "Beispieltext <script>alert('xyz');
        </script> Beispieltext";
String cleanText = Jsoup.clean(userText, Whitelist.none());
// cleanText == "Beispieltext  Beispieltext"

Wie man sieht, dient ein Whitelist Objekt zur Definition, was erlaubt ist und was nicht. So kann man genau festlegen, welche Tags und welche Attribute zugelassen werden und welche nicht. Folgendes Beispiel erlaubt nur <i> und <b> Tags:

String userText = "<a href='beispiel.de'>xyz</a>
          Bla <i>Blub</i> Bl<b>ub</b>";
String[] allowedTags = {"i","b"};
Whitelist whitelist = new Whitelist();
whitelist.addTags(allowedTags);
String cleanText = Jsoup.clean(userText, whitelist);
// cleanText == "xyz Bla <i>Blub</i> Bl<b>ub</b>"

Die Dokumentation und das JAR File sind auf der Webseite von jsoup zu finden:
jsoup Website

Herzlichen Dank an Nils, dass er mir die Möglichkeit gegeben hat, selfoss in seinem Blog vorzustellen.

Neu verfügbar ist nun neben MySQL ein Datenbankbackend für Sqlite und MongoDB (danke Harald). Zudem habe ich noch ein paar Bugs entfernt. Vielen Dank an alle Betatester. Euer Feedback war echt super!

Auf selfoss.aditu.de ist nun auch eine Dokumentation zu finden. Dort ist auch eine kurze Erklärung, wie eigene spouts, also andere Anwendungen und Quellen an Selfoss angeschlossen werden können. Dazu habe ich hier im Blog ja auch schon einmal ein Tutorial geschrieben.

Tja, sonst kann ich nur sagen: schaut euch selfoss einfach einmal an. Ich nutze es ja schon seit einigen Monaten und schätze die schlichte und übersichtliche Art, News zu lesen sehr.

Manchmal möchte man aber auch nur einzelne Einträge von RSS Feeds um zusätzliche Informationen anreichern. Ich mache das beim RSS Feed von heise, wo der Inhalt des News Beitrages nicht mitgeliefert wird. Diesen lade ich dann einfach in einer speziellen Datenquelle, die sich um diese Funktion von einem gewöhnlichen RSS Feed unterscheidet, nach.

Nun gibt es eine Schritt-für-Schritt Anleitung, wie so eine Datenquelle erstellt werden kann.

Eine Datenquelle, eine Klasse

selfoss stellt ein kleines Framework zur Verfügung, das es erlaubt recht einfach neue Datenquellen hinzuzufügen. Dazu muss nur eine einzelne PHP Datei unter
/spouts/your_spouts/your_spout.php
abgelegt werden (your_spouts und your_spout kann frei durch einen anderen Namen ersetzt werden). Diese PHP Datei muss eine einzelne Klasse enthalten, welche von der abstrakten Klasse \spouts\spout abgeleitet ist (man beachte, dass selfoss PHP 5.3 voraussetzt und \spouts der Namespace für alle Datenquellen ist).

Datenelemente der Klasse

Die eigene Klasse muss drei Datenelemente definieren:

• name: der Name der Datenquelle
• description: eine Beschreibung
• params: hier werden die Optionen der Datenquelle festgelegt. Soll z.B. ein Benutzername eingegeben werden, so kann dies hier vorgegeben werden.

Folgend gleich ein Beispiel für so eine Klasse. Natürlich fehlen hier noch die Methode, auf die ich gleich eingehe. Es wird eine Datenquelle für einen Email Account via IMAP definiert. Der Benutzer muss, wenn er eine solche neue Email IMAP Quelle definiert, die Email Adresse, das Passwort und den Server eintragen. $params beschreibt diese drei Parameter, legt fest, was für ein Typ diese darstellen und wie die Eingabe des Benutzers validiert wird.

<?PHP
namespace spouts\mail;
class imap extends \spouts\spout {
    public $name = 'Email';
    public $description = 'email imap account as source';
    public $params = array(
            "email" => array(
            "title"      => "Email",
            "type"       => "text",
            "default"    => "",
            "required"   => true,
            "validation" => array("email")
        ),
        "password" => array(
            "title"      => "Password",
            "type"       => "password",
            "default"    => "",
            "required"   => true,
            "validation" => array("notempty")
        ),
        "host" => array(
            "title"      => "URL",
            "type"       => "text",
            "default"    => "",
            "required"   => true,
            "validation" => array("notempty")
        )
    );
}

Methoden der Klasse

Durch die abstrakte Elternklasse \spouts\spout muss die Datenquelle einige Funktionen implementieren. Diese werden dann im laufenden Betrieb von selfoss aufgerufen. Folgendes UML Diagramm gibt einen Überblick über die Struktur:

Die Klasse muss drei Dinge implementieren:

• Sie muss eine Funktion load($params) für das Laden der Informationen zur Verfügung stellen. Diese wird während der Aktualisierung einmal aufgerufen und erhält als Parameter die aktuellen Einstellungen. load($params) muss von der Datenquelle implementiert werden und holt die Daten von der entfernten Quelle (z.B. führt einen IMAP Zugriff aus und lädt aktuelle Emails).
• Sie muss das Interface Iterable implementieren. selfoss iteriert, nachdem load() ausgeführt wurde, dann über die einzelnen Einträge (mit Hilfe der Funktionen, die das Interface Iterable vorgibt: rewind, current, key, next, valid). Die einzelnen Einträge könnten z.B. neue Emails sein.
• Während selfoss über die einzelnen Einträge iteriert, werden dann die Informationen dieser einzelnen Einträge abgerufen. Dies geschieht über Funktionen, welche durch die abstrakte Klasse \spouts\spout vorgegeben werden. Informationen sind z.B. Betreff einer Email, Email Body usw.

Der Ablauf ist dann folgender:

1. Im Beispiel würde load($params) von selfoss mit der vom Benutzer eingegebenen Email, Passwort und Host aufgerufen.
2. Diese Methode würde dann die Emails vom IMAP Account herunterladen und zwischenspeichern.
3. selfoss iteriert über die einzelnen Emails (mit rewind, current, key, next, valid).
4. Bei jedem einzelnen Iterationsschritt (also für jede Email) werden die Email-Informationen abgerufen (Inhalt, Betreff, Datum usw.) und zwar mit Hilfe der Funktionen: getId(), getTitle(), getContent(), getIcon(), getLink(), getDate().
5. Um den Rest kümmert sich selfoss (prüfen ob es den Eintrag schon gibt, alte Einträge löschen usw.)

Eine Implementierung für diese Funktionen liegt natürlich völlig in der Hand des Entwicklers einer Datenquelle. Daher verweise ich an dieser Stelle auf die vorhandenen Datenquellen. \spouts\spout\feed (\spouts\rss\feed.php) stellt ein gutes Beispiel dar. Wer diese als Vorlage nimmt, kommt recht schnell sehr weit, denn dort werden alle Funktionen genutzt. Soll nur ein Standard RSS Feed um Funktionen erweitert oder angepasst werden, dann verweise ich auch die Klasse \spouts\spout\heise (\spouts\rss\heise.php). Hier wird lediglich die getContent() überschrieben und ansonsten verhält sich die Datenquelle wie ein gewöhnliches RSS Feed.

Thumbnails

Soll anstelle eines Textes ein Vorschaubild angezeigt werden, so muss die Methode getThumbnail() implementiert werden. Diese liefert für einen einzelnen Eintrag das Vorschaubildchen (die URL auf das Bild). \spouts\spout\images (\spouts\rss\images.php) ist ein Beispiel dafür. Diese Datenquelle geht von einem gewöhnlichen RSS Feed aus, durchsucht es nach Bilder (entweder ausgezeichnete Thumbnails im XML des Beitrages, oder das erste Bild im Content des Beitrages) und liefert die URL an selfoss. Das Laden, Verkleinern, Speichern und Aufräumen der Bilder übernimmt selfoss.

Los gehts…

Das war sie, die kurze und knackige Einführung, wie Datenquellen für selfoss entwickelt werden können. Gerne könnt ihr mir dazu Fragen stellen und bei Problemen schreiben (am besten hier im Blog, so dass auch andere von den Antworten profitieren können). Sehr freue ich mich auch über fertige Datenquellen. Gerne nehme ich neue in selfoss auf.

Hierfür habe ich die hervorragende Java Bibliothek Pdf-renderer entdeckt. Die unter LGPL stehende OpenSource Library ermöglicht es, PDF Dateien zu rendern und als Bild auszugeben. Ursprünglich wurde die Bibliothek von Sun Labs entwickelt, welche einen PDF Viewer für ihre mit OpenOffice erzeugten Ausgaben benötigten. 2007, als der Pdf-renderer nicht mehr benötigt wurde, hat man sich entschlossen das Projekt als OpenSource Lösung zu veröffentlichen (Quelle).

Einbinden

Der Pdf-renderer kann einfach als Maven Dependency eingebunden oder als JAR Datei heruntergeladen werden.

<dependency>
	<groupId>org.swinglabs</groupId>
	<artifactId>pdf-renderer</artifactId>
	<version>1.0.5</version>
</dependency>

PDF laden und Bild erzeugen

Ein kurzes Codebeispiel zeigt, wie einfach aus einem PDF ein Bild erzeugt werden kann. In einem ersten Schritt wird aus der Datei als java.io.File Objekt ein ByteBuffer erzeugt. Dieser dient als Grundlage für den Zugriff auf den Inhalt der PDF Datei durch die pdf-renderer Klasse PDFFile.

import com.sun.pdfview.PDFFile;
import com.sun.pdfview.PDFPage;
…
File file = new File("c:\\tmp\\test.pdf");
RandomAccessFile raf = new RandomAccessFile(file, "r");
FileChannel channel = raf.getChannel();
ByteBuffer buf = channel.map(FileChannel.MapMode.READ_ONLY, 0,
channel.size());
PDFFile pdffile = new PDFFile(buf);

EIn PDFFile Objekt liefert Informationen über die PDF Datei (Metadaten, Anzahl Seiten usw.). In einem zweiten Schritt kann dann auf die einzelnen Seiten zugegriffen werden.

int numPgs = pdffile.getNumPages();

PDFPage page = pdffile.getPage(0);
Rectangle rect = new Rectangle(
	0,
	0,
	(int) page.getBBox().getWidth(),
	(int) page.getBBox().getHeight()
);
Image img = page.getImage(rect.width, rect.height,
	rect,
	null, // null = kein ImageObserver
	true, // Hintergrund weiß
	true // synchron
);

Es wird die erste Seite geholt und ein Image aus der Java 2D API erzeugt. Dieses kann dann beliebig weiter verarbeitet werden.

Zum Download der Bibliothek: http://java.net/projects/pdf-renderer

Das Prinzip von diesem JavaScript Skript ist recht simpel: Wo es geht, soll man aufgrund von Kompatibilität nicht auf neue Features von HTML5 und CSS3 verzichten. Aber es sollen auch nicht Besucher ausgeschlossen werden, die nicht mit den neuesten Browser-Versionen ausgestattet sind (dabei denke ich nicht an IE6 Benutzer, sondern auch an alternative Browser; accessibility ist hier ein Thema). Die Idee ist also, dass Benutzer, welche mit aktueller Software eine Seite besuchen, alle Effekte und Funktionen zu sehen bekommen, wohingegen bei fehlenden Features einfach auf eine Fallbacklösung zurückgeschalten wird.

Ein Beispiel aus meinem aktuellen Projekt: Besitzt der Benutzer ein Touch-Device, dann werden zusätzliche Elemente geladen, wodurch ein Touch-Display besser unterstützt wird.

Dabei kann man sehr einfach feststellen, welche Features unterstützt werden. Modernizr setzt beim Aufruf der Seite für das html Element CSS Klassen, die beschreiben, was möglich ist und was nicht:

Zusätzlich steht auch ein JavaScript Objekt zur Verfügung. Aus meiner Sicht eine feine Sache. Manchmal kann man durchaus auf die neuen Features verzichten und dann ist Modernizr eine ganz gute Lösung.

http://www.modernizr.com/

Eine super Lösung, die sowohl unter iOS als auch Android läuft, ist iScroll. Auf meinem Android Phone läuft es zwar nicht besonders smooth (scheinbar ist es doch etwas anspruchsvoller, was die Ressourcen angeht), aber auf dem iPad funktioniert es super. Vielleicht also ganz nützlich für den ein oder anderen Leser von diesem Blog: zur Webseite von iScroll

Ein String kann ganz einfach mit folgenden Zeilen geparsed werden:

std::string source(
 "<test>"
 "<eintrag id=\"1\">bla</eintrag>"
 "<eintrag id=\"2\">bla2</eintrag>"
 "</test>");
pugi::xml_document doc;
pugi::xml_parse_result result =
     doc.load_buffer_inplace(
         (void*)(source.c_str()),
         source.length()
      );

Um beispielsweise einen Eintrag zu suchen, kann folgender Aufruf ausgeführt werden, wobei hier XPath verwendet wird:

pugi::xpath_node_set entries =
    doc.select_nodes("/test/eintrag[@id='2']");
pugi::xml_node entry = entries[0].node();
std::cout << entry[0].node().child_value(); // bla

Das node_set apps enthält dann alle gefundenen nodes, wobei über den [] Operator auf die einzelnen Elemente zugegriffen werden kann.

Einen guten Überblick bietet der QuickStart-Guide oder die sehr ausführliche und gute Dokumentation.

pugixml steht unter der MIT Lizenz zur Verfügung und nach einem ersten Einsatz kann ich die Bibliothek nur empfehlen. Aus meiner Sicht ein echter Tipp, insbesondere, weil die Einbindung einfach und unkompliziert ist. pugixml hat mich von der hohen Qualität stark an mongoose erinnert.

Zend_Translate bietet hier eine einfache Möglichkeit “Routen” zu erstellen. Das heißt man kann festlegen, welche Sprache alternativ verwendet werden soll. Dabei können sogar Ketten gebildet werden (z.B. wenn Französisch nicht gefunden wurde, dann in der deutschen Übersetzung suchen und wenn dort auch nichts gefunden wird, in der englischen). Wobei sich mir der Sinn von so einer Verkettung nicht ganz erschließt.

Das setzen einer Route ist sehr einfach. Folgendes Beispiel scanned ein übergebenes Verzeichnis nach CSV Dateien und übernimmt deren Inhalt als Übersetzung. Mit dem Key “route” wird definiert, wie die Sprachen verkettet werden sollen. In diesem Beispiel ist Englisch die Fallbacksprache für Deutsch und Französisch.

$language = new Zend_Translate(
            'csv',    // Typ der Quelle: hier csv Dateien
            'locale', // Quell-Verzeichnis
            'en',     // Standard Sprache
            array(    // Optionen
                'scan' => Zend_Translate::LOCALE_DIRECTORY,
                'route'     => array( 'de' => 'en', 'fr' => 'en' )
            ));

Der sauberste Weg ist es natürlich alle Schlüssel auf zu übersetzen. Beim Aufspüren von fehlenden Übersetzungen hilft Zend_Translate ebenfalls.

Bei HeadJS handelt es sich um ein kleines JavaScript Skript, welches in der Lage ist, weitere JavaScript Dateien nachzuladen:

head.js(
 "/path/to/jquery.js",
 "/google/analytics.js",
 "/js/site.js",
 function() {
     // all done
 }
);

Der Vorteil ist die Tatsache, dass die weiteren Skriptdateien kontrolliert parallelisiert heruntergeladen werden. Wird dieser Aufruf am Ende der Website durchgeführt (also vor dem schließenden body Tag), so kann die HTML Seite, sowie die Stylesheets ungehindert geladen und gerendert werden, bevor mit der Verarbeitung von JavaScript Dateien begonnen wird. Das Ergebnis: die Seite wird schneller angezeigt. Mit 2,3 kB ist das Skript auch schön kompakt und klein.

Weitere Features sind eine bessere HTML5 Kompatibilität, automatisch gesetzte CSS Klassen (z.B. für bestimmte Browser) und noch einige weitere Schmankerl. Es lohnt sich also das kleine Skript genauer anzusehen. Im Einsatz habe ich es bei rsslounge (ab Version 1.7, die ich in wenigen Tagen online stellen will).

Zur headJS Webseite: http://headjs.com/