5202

25.3.13

Blogger: Ein eigenes Template entsteht - Teil 6 - Einführung in Widgets II

Wir angekündigt, geht es mit den Widgets weiter und zwar bauen wir heute unser erstes, einfaches Widget.

Basis-Layout

Als Erinnerung vom letzten Post - das hier ist das Basis-Layout, in der die Grundstruktur eines Widgets liegt.

<?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 id='Gadget1' type='Gadget' >
      <b:includable id='main'>
         <!--beliebiger Code-->
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Um das ganze übersichtlich zu halten, diskutieren wir im folgenden nur den rot markierten Bereich:

   <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
         <!--beliebiger Code-->
      </b:includable>
   </b:widget>

Includes

Wir haben gesagt, die Includes von Widgets sind als 'Blöcke' aufgebaut. In einem Includes könnt ihr HTML, CSS, Javascript, Layout-Seiten-Tags oder weitere Includes schreiben.

Beispiel

Schreiben wir uns nun unser erstes, eigenes Widget - und zwar wollen wir ein Widget, der uns den Namen unseres Blogs zurück gibt.

Fangen wir mit einem simplen HTML-Tag an - wir schreiben das Tag in das Includes:

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
      </b:includable>
   </b:widget>

Nehmt euer Basis-Layout und schaut euch das Ergebnis im Blog an:

<?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 id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Ihr habt auf eurem Blog nun einen einen Inhalt: Mein Blog heißt. Toll ... jetzt wollen wir diesen Ausdruck noch um euren Blog Namen erweitern.

Wir könnten natürlich den Namen unseres Blogs direkt in den Ausdruck schreiben. Mein Blog heißt 5202.de und so weiter.

Aber wir sind faul und wollen den Blog-Namen aus der Blogger Datenbank nehmen. Dazu müssen wir einem Layout-Data-Tag formulieren.

Aufbau eines Layout-Data-Tags

Schauen wir uns ein Layout-Data-Tag näher an. Ein solcher Tag besteht aus drei Teilen: Einem Präfix, einer Referenz und dem Tag-Namen.

Präfix

Ein Präfix ist so etwas wie eine Vorwahl bei einer Telefonnummer. Bei einem Layout-Data-Tag lautet der Präfix ausnahmslos <data:.

Referenz

Eine Referenz erklärt, auf welches Element sich ein bestimmter Tag bezieht. Ein Blog-Titel ist etwas anderes als ein Post-Titel. Es gibt zwei Arten von Referenzen:

Globale Referenz

Solche Referenzen sind überall gültig. Die globale Referenz lautet immer blog

Locale Referenz

Eine solche Referenz ist nur innerhalb eines Gadgets gültig! Damit werden wir uns in späteren Posts beschäftigen.

Tag-Name

Es gibt - analog zur Referenz - globale Tag-Namen und lokale Tag-Namen. Folgende dokumentierte globale Tag-Namen sind für uns zunächst einmal wichtig:

title

Der Blog Titel

pageType

Der Seitentyp - im einzelnen sind das 'index', 'item', 'static_page', 'archiv', label' und 'error_page'.

url

Die Adresse der aktuellen Seite.

homepageUrl

Die Adresse das Blogs.

pageTitle

Der Titel der aktuellen Seite.

Weitere Regel

Ein Layout-Data-Tag ist ein XML Tag und muss dementsprechend Wohlgeformt sein. Das bedeutet unter anderem, dass ihr für jedes öffnende Tag auch ein schließendes Tag schreiben müsst.

Versuchen wir uns nun an unser erstes Layout-Data-Tag und zwar für den Blog-Titel.

Präfix

<data:

plus Referenz

<data:blog

plus Tag-Name

<data:blog.title

Wohlgeformt

<data:blog.title></data:blog.title>

Kurzschreibweise

<data:blog.title />

Widget

Wir haben nun das Layout-Data-Tag fertig formuliert - bauen wir es in das Widget ein:

  <b:widget id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
          <data:blog.title />
      </b:includable>
   </b:widget>

Alles zusammen 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 id='Gadget1' type='Gadget' >
      <b:includable id='main'>
          <span>Mein Blog heißt:</span>
          <data:blog.title />
      </b:includable>
   </b:widget>
</b:section>
</body>

</html>

Fertig! Testet das nun in eurem Test-Blog. Falls alles geklappt hat, bekommt ihr als Ausdruck Mein Blog heißt: und dann der Name eures Blogs.

Mission accomplished!

Euer erstes Widget ist fertig, gratuliere! Das ist ein wichtiger Schritt auf dem Weg zum eigenen Layout.

Im nächsten Post werden wir das Widget komplexer aufbauen und zwar indem wir weitere Includes schreiben und ineinander verschachteln.

Ich würde mich freuen, wenn ihr wieder dabei seit!