5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 5 - Einführung in Widgets I

14. April 2013 /

von

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>
Heads up! Speichert das Layout an der Stelle noch nicht - ihr bekommt nur eine Fehlermeldung!
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>
Heads up! Bitte wartet noch mit dem Speicher - eine Sache fehlt noch!
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.

Heads up! Beim speichern erweitert der neue Blogger-Editor das Gadget: 
<?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>
Außerdem 'klappt' euch der neue Blogger-Editor das Widget ein - mit dem kleinen, schwarzen Dreieck links außen könnt ihr es wieder aufklappen.
Alle Posts der Reihe

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 :)