Heute will ich mal was dazu schreiben, wie man die LATIKA Knowledgebase an seine Bedürfnisse anpassen kann. Als Beispiel habe ich mir überlegt, wie man YouTube Videos in einen Artikel einbetten kann und zwar mit einem eigens "entwickelten" Tag. Aber vielleicht sollte ich erstmal erklären was ein Tag ist.
Für LATIKA haben wir die LATIKA Markup Language (LML) entwickelt, dabei handelt es sich um eine erweiterte Markupsprache, um das Schreiben von Artikeln zu vereinfachen. Beispiele für Standardtags findet man hier.
Ein Tag hat folgenden Aufbau:
[[command:param_1;param_2;...;param_n]subject]
Die Parameter und das Subjekt sind je nach Kommando/Tag optional.
Ein Wiki-Tag im Bearbeitenmodus sieht zum Beispiel so aus:
LATIKA Tags unterstützen auch [[wiki]Javascript].
Im Lesemodus wird dann folgendes generiert:
LATIKA Tags unterstützen auch Javascript.
Die Tag-Konfiguration befindet sich in der Datei ~\Configuration\TagDecrypter\tagdecrypter.config und hat folgenden Aufbau:
| <?xml version="1.0" encoding="utf-8" ?> |
| <Tags> |
| ... |
| <Tag> |
| <Command type="wiki">Verlinkt zu Wikipedia.</Command> |
| <Subject optional="false">Der zu verlinkende Text.</Subject> |
| <Params> |
| </Params> |
| <ErrorReplacement>$subject$</ErrorReplacement> |
| <Transformation type="SimpleTagTransformation" replaceEqualTags="true"> |
| <Html> |
<![CDATA[<a href="http://de.wikipedia.org/wiki/$subject$" title="Definition von
'$subject$' bei Wikipedia nachschlagen" target="_blank">$subject$</a>]]> |
| </Html> |
| <Text>$subject$</Text> |
| </Transformation> |
| </Tag> |
| ... |
| </Tags> |
Diese XML-Datei kann nach belieben verändert und ergänzt werden. Die Tags können von beliebig implementierbaren TagInterpretern verarbeitet werden. Ein TagInterpreter wiederum benutzt verschiedene TagTransformationen um die Tags zu rendern. Standardmässig wird die Knowledgebase nur mit der SimpleTagTransformation ausgeliefert. Mit einer SimpleTagTransformation können wir ein Tag durch einen statischen Inhalt austauschen, der über Parameter angepasst werden kann. Für die Zwecke meines Beispiels reicht eine SimpleTagTransformation aber vollkommen aus.
Ein eigenes Tag erstellen
So, kommen wir nun aber zum Thema: Videos von YouTube einbetten mit einem eigenem Tag.
Dafür hab ich mir mal folgendes Video rausgesucht: http://www.youtube.com/watch?v=U4sjNtH3pRI ...Wer mein Blog schon länger liest weiß warum 
Es gibt auf der YouTube-Seite zu (fast) jedem Video ein Stück HTML-Code das man kopieren kann und somit in seine eigene Seite einbauen kann:
<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/U4sjNtH3pRI&hl=en"></param>
<param name="wmode" value="transparent"></param>
<embed src="http://www.youtube.com/v/U4sjNtH3pRI&hl=en" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed>
</object>
Natürlich könnten wir diesen Code auch nehmen, um ihn direkt in der Codeansicht des Bearbeitenmodus eines Artikels einzufügen. Ein Tag macht das Ganze aber noch etwas "smoother".
Die Basis
Als erstes kopieren wir ein beliebiges Tag aus der Tagkonfiguration und fügen es erneut ein. Nehmen wir zum Beispiel das oben bereits erwähnte wiki-Tag und löschen alle Inhalte:
| <Tag> |
| <Command type=""></Command> |
| <Subject optional="false"></Subject> |
| <Params> |
| </Params> |
| <ErrorReplacement>$subject$</ErrorReplacement> |
| <Transformation type="SimpleTagTransformation" replaceEqualTags="true"> |
| <Html> |
| <![CDATA[...]]> |
| </Html> |
| <Text>$subject$</Text> |
| </Transformation> |
| </Tag> |
Als nächstes geben wir dem Tag einen Namen (youtube) und fügen den HTML-Code von der YouTube-Seite ein:
| <Tag> |
| <Command type="youtube"></Command> |
| <Subject optional="false"></Subject> |
| <Params> |
| </Params> |
| <ErrorReplacement>$subject$</ErrorReplacement> |
| <Transformation type="SimpleTagTransformation" replaceEqualTags="true"> |
| <Html> |
<![CDATA[<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/U4sjNtH3pRI&hl=en"></param>
<param name="wmode" value="transparent"></param>
<embed src=http://www.youtube.com/v/U4sjNtH3pRI&hl=en" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355"></embed>
</object>]]> |
| </Html> |
| <Text>$subject$</Text> |
| </Transformation> |
| </Tag> |
Der Code (U4sjNtH3pRI) über den das Video identifiziert wird, habe ich schwarz markiert. Dies sind die einzigen Stellen an denen sich der Code von den Videos unterscheidet.
Unser Tag könnte also wie folgt aussehen [[youtube:U4sjNtH3pRI]]
Dafür müssen wir aber noch einen erforderlichen Parameter definieren und an den entsprechenden Stellen einsetzen. Da wir kein Subjekt benötigen müssen wir das entsprechende Attribut auf "true" setzen.
Schließlich fügen wir für das Kommando und das Subjekt einen beschreibenden Text ein. Dies ist wichtig, da aus der Konfigurationsdatei auch gleichzeitig der Hilfetext für die Tags generiert wird. Jedes neue Tag das wir erstellen erscheint also auch automatisch in der Taghilfe (siehe Ende des Artikels).
| <Tag> |
| <Command type="youtube">Einbetten eines YouTube-Videos.</Command> |
| <Subject optional="true"></Subject> |
| <Params> |
| <Param id="1" optional="false">Eindeutiger Code des Videos der aus dem URL (Parameter "v=") kopiert werden kann.</Param> |
| </Params> |
| <ErrorReplacement>$subject$</ErrorReplacement> |
| <Transformation type="SimpleTagTransformation" replaceEqualTags="true"> |
| <Html> |
<![CDATA[<object width="425" height="355">
<param name="movie" value="http://www.youtube.com/v/$param_1$&hl=en"></param>
<param name="wmode" value="transparent"></param>
<embed src=http://www.youtube.com/v/$param_1$&hl=en" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355"></embed>
</object>]]> |
| </Html> |
| <Text>$subject$</Text> |
| </Transformation> |
| </Tag> |
Nun können wir das Ganze auch mal testen:
Bearbeitungsmodus
Lesemodus
Funktionalität ergänzen
Um das Tag noch ein bisschen weiter auszubauen, habe ich mir überlegt, dass es ganz gut wäre, wenn man noch einen Textlink zur YouTube-Seite einbauen könnte. Weiterhin sollte man auswählen können, ob man nur das Video, nur den Link oder beides anzeigen lassen möchte. Mit ein bisschen Javascript-Unterstützung sieht das fertige Tag wie folgt aus:
| <Tag> |
| <Command type="youtube">Einbetten eines YouTube-Videos.</Command> |
| <Subject optional="true"></Subject> |
| <Params> |
<Param id="1" optional="false">Eindeutiger Code des Videos der aus dem URL (Parameter "v=") kopiert werden kann.</Param>
<Param id="2" optional="true">0 = Video nicht einbetten.</Param> |
| </Params> |
| <ErrorReplacement>$subject$</ErrorReplacement> |
| <Transformation type="SimpleTagTransformation" replaceEqualTags="true"> |
| <Html> |
<![CDATA[
<script>
if("$subject$"!="") {
document.write('<p><a href="http://www.youtube.com/watch?v=$param_1$" target="_blank">$subject$</a></p>');
}
if("$param_2$"!="0") {
document.write('<object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/$param_1$"></param>
<param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/$param_1$&hl=en" type="application/x-shockwave-flash"
wmode="transparent" width="425" height="355"></embed></object>');
}
</script>]]> |
| </Html> |
| <Text>$subject$</Text> |
| </Transformation> |
| </Tag> |
Die Syntax für die 3 Fälle sieht wie folgt aus:
Nur Video
[[youtube:U4sjNtH3pRI]]
Video und Link
[[youtube:U4sjNtH3pRI]How We Do!]
Nur Link
[[youtube:U4sjNtH3pRI;0]How We Do!]
Zu guter Letzt werfen wir noch einen Blick auf die dynamisch generierte Hilfe:
So, das wars erstmal. Ich denke in einem anderen Blogeintrag werde ich zeigen wie man eine eigene TagTransformation implementieren kann, die etwas mehr kann, als nur statisch Texte auszutauschen.