So Freunde, nach dem letzten Teil - dem <b:section/>
Tag - geht es heute um den Inhalt eines solchen Tags, nämlich den Widgets!
Die Widgets sind in Blogger für sämtliche 'dynamische' Inhalte zuständig. Das Verständnis über Aufbau und Funktion von Widgets ist insofern zentral.
Ich sage es gleich, ab jetzt werden wir uns längere Zeit mit Widgets beschäftigen - unser Ziel ist, eigene Widgets zu schreiben.
Schauen wir uns heute als erstes die Struktur und Syntax von Widgets an.
Gültigkeit
Damit ein Widget gültig ist, muss es eine Reihe von Bedingungen erfüllen. Zunächst einmal muss wohlformuliert sein, d.h. ihr müsst es richtig schreiben.
Schreibweise
Ein Widget ist ein Layout-Seiten-Tag. Ihr leitet Widgets mit dem Präfix <b:
ein und dann kommt der Tag-Name, nämlich 'widget'.
<b:widget [...Eigenschaften...] />
Kurzschreibweise - Langschreibweise
Wie schon öfter erwähnt, schreibt ihr einen XML Tag ohne Inhalt in der Kurzschreibweise:
<b:widget [...Eigenschaften...] />
Mit Inhalt schreibt ihr einen solchen Tag in der Langschreibweise:
<b:widget [...Eigenschaften...]> <!--Inhalt--> </b:widget>
Einbau
Ein Widget darf nur innerhalb eines <b:section/>
Tags liegen. Der <b:section/>
Tag ist für Widgets also ein Wrapper, d.h. ein 'Mantel', der es umhüllt.
<b:section id='main' class='main' > <b:widget [...Eigenschaften...]> <!--Inhalt--> </b:widget> </b:section>
Attribute
Ein Widget muss zwingend als spezifischer 'Typ' klassifiziert werden. Folgende zulässige Typen sind dokumentiert:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- Videobar
- Newsbar
Blogger dokumentiert die Typen leider nicht besonders gut unterirdisch schlecht :).
Es gibt weitere, undokumentierte Widget-Typen. Am wichtigsten wird für uns ein allgemeiner, 'freier' Typus werden, nämlich der Typ Gadget.
Schauen wir uns das mal in einem Beispiel an.
Beispiel
Ausgangspunkt ist unser Basis-Layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section class='main' id='main'/>
</body>
</html>
In dem rot markierten <b:section/>
Tag möchten wir ein Widget vom Typ 'Gadget' einbauen:
<b:section id='main' class='main' > <b:widget type='Gadget' > <!--Inhalt--> </b:widget> </b:section>
Das Basis-Layout schaut damit so aus:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='main' class='main' >
<b:widget type='Gadget' >
<!--Inhalt-->
</b:widget>
</b:section>
</body>
</html>
Inhalt eines Widgets
Ein Widget muss immer einen Inhalt besitzen. Dieser Inhalt besteht aus verschiedenen Code-Blöcken, den so genannten Includable.
Includable sind - ihr ahnt es vielleicht :) - ein weiterer Layout-Seiten-Tag. Ihr leitet ein Includable mit dem Präfix <b:
ein und den Tag-Name 'includable'.
<b:section id='main' class='main' > <b:widget type='Gadget' > <b:includable> <!--beliebiger Code--> </b:includable> </b:widget> </b:section>
Jedes Includable muss eine eindeutige id
besitzen. Innerhalb eines Widgets muss ein Includable mit der id='main'
existieren.
<b:section id='main' class='main' > <b:widget type='Gadget' > <b:includable id='main'> <!--beliebiger Code--> </b:includable> </b:widget> </b:section>
Darüber hinaus kann ein Widget beliebig viele Includable enthalten.
Bauen wir das ganze in unser Beispiel ein:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='main' class='main' >
<b:widget type='Gadget' >
<b:includable id='main'>
<!--beliebiger Code-->
</b:includable>
</b:widget>
</b:section>
</body>
</html>
Attribute
Ein Widget kann bestimmte Eigenschaften haben - hier eine [unvollständige] Übersicht
- id
- [erforderlich] Eine eindeutige Identifikation für ein Widget. Die id muss gleich dem Gadget-Typ sein und dann eine Zahl - für mehrere Gadgets des gleichen Types müsst ihr jeweils um eins nach oben zählen.
- locked
- [optional] Beschreibt, ob ihr ein Widget über Dashboard > Layout löschen könnt oder nicht. Kann die Werte 'yes' oder 'no' besitzen.
- title
- [optional] Der Titel eines Widgets.
- pageType
- [optional] Beschreibt, auf welchem Seitentyp ihr ein Widget anzeigen lassen könnt - über Seitentypen später mehr. Das Attribut wird mit den Werten 'all', 'archive', 'main' oder 'item' dokumentiert. Achtung: Funktioniert aktuell im März 2013 nicht!
- mobile
- [optional] Diese Eigenschaft legt fest, ob ihr ein Widget auf mobilen Seiten anzeigt oder nicht. Das Attribut besitzt die Werte 'yes', 'no', ‘only’ und 'default'.
Beispiel
Daraus ergibt sich, dass wir für ein gültiges Widget unser Beispiel noch um eine ID ergänzen müssen:
<b:section id='main' class='main' > <b:widget id='Gadget1' type='Gadget' > <b:includable id='main'> <!--beliebiger Code--> </b:includable> </b:widget> </b:section>
Das ganze im Basis-Layout:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<title><data:blog.pageTitle/></title>
<b:skin><![CDATA[
]]></b:skin>
</head>
<body>
<b:section id='main' class='main' >
<b:widget type='Gadget' >
<b:includable id='main'>
<!--beliebiger Code-->
</b:includable>
</b:widget>
</b:section>
</body>
</html>
Ihr könnt nun das Basis-Layout mit Widget in euerem Test-Blog einbauen und speichern. Wenn keine Fehlermeldung kommt, hat alles geklappt.
Falls ihr nun eueren Blog aufruft, seht ihr -- nichts :D. Das ist logischerweise der Fall, weil ihr in dem Widget noch keine Inhalte habt.
<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html> <html> <head> <title><data:blog.pageTitle/></title> <b:skin><![CDATA[ ]]></b:skin> </head> <body> <b:section class='main' id='main'> <b:widget id='Gadget1' locked='false' title='Gadget' type='Gadget'> <b:includable id='main'> <!--beliebiger Code--> </b:includable> </b:widget> </b:section> </body> </html>
- 1. Einführung
- 2. Struktur und Aufbau der XML Datei
- 3. Hello World
- 4. Der <b:section/> Tag
- 5. Einführung in Widgets I
- 6. Einführung in Widgets II
- 7. Einführung in Widgets III
- 8. Einführung in Widgets IV
- 9. Blog Widget I
Ausblick
Soweit nun dieser Post - im nächsten Teil kommt Butter bei die Fische und wir schreiben unsere erstes Widget!
Könnte spannend werden - schaut doch wieder vorbei :)