5202

ein Blog über technische Fragen zu Blogger

Blogger: Ein eigenes Template entsteht - Teil 7 - Einführung in Widgets III

von

Last uns weiter an unserem Widget arbeiten :)!

Im letzten Post haben wir ein Basis-Widget geschrieben - heute wird daraus etwas komplexeres und zwar bauen wir in das Widget weitere Includable ein.

Basis Widget

Zur Erinnerung - das ist das Basis-Layout mit unserem Widget:

<?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>

Im folgenden diskutieren wir nur das Widget selber:

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

Includable

Wir haben gesagt, ein Widget muss mindestens ein Includable mit der id='main' enthalten. Für einfache Widgets reicht euch das locker aus.

Komplexeren Widgets - wie das Blog-Widget - werden wir aber modular aufbauen, d.h. aus verschiedenen Includable 'Blöcken' zusammensetzen.

Bauen wir in unserer Widget nun so einen zusätzlichen Includable Block ein:

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

Das neue Includable mit der id='new' ist gleich aufgebaut wie das Includable mit der id='main'. Schreibt diese Erweiterung in euren Test-Blog und veröffentlicht den Blog.

Schaut euch nun euern Blog an - was seht ihr?

Include

Ihr seht nichts :). Andere Includable außer der Haupt-Includable werden nicht automatisch angezeigt.

Um die Includable mit der id='new' in eurem Blog zu sehen, müsst ihr sie in der Haupt-Includable aufrufen. Das geht mit dem sogenannten <b:include/>-Tag.

Ein <b:include/>-Tag ist ein weiterer Layout-Seiten-Tag. Ihr leitet diesen Tag mit dem Präfix <b: ein und dann kommt der Tag-Name, nämlich include. Dazu kommt, ein <b:include/>-Tag besitzt bestimmte Attribute:

name
[erforderlich] Eine Kennung, über die ihr ein Includable Block aus dem Widget aufrufen könnt.
data
[optional] Das ist ein Datenelement, den ihr an den Includable Block weitergeleitet. Wozu ihr das braucht, werden wir uns später anschauen.
Beispiel

Rufen wir nun die Includable mit der id='new' in der Haupt-Includable auf:

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

Veröffentlicht dieses Widget und schaut euch das Ergebnis an. Es sollte nun ein neuer Text auf eurem Blog erscheinen: Ich bin neu.

Erweiterung

Formulieren wir nun unsere Basis-Widget um und zwar definieren wir zwei weitere Includable, die den Text und den Blog-Titel enthalten.

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

Wie schreibt ihr nun die <b:include/>-Tags, um die beiden Includable aufzurufen? Versucht es doch mal selber!

Die Lösung ist einfach:

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

Testet das in eurem Blog - der Text im Blog hat sich dadurch nicht verändert, nur die Art und Weise, wie ihr den Text aufruft.

Modular

Diese Schreibweise mit <b:include/>-Tags kommt euch jetzt vielleicht umständlich vor.

Wenn wir später am Blog-Widget arbeiten, werdet wir sehen, wie praktisch solche 'Blöcke' sind. Ihr könnt damit in einem Layout einfach und unkompliziert komplette Layout-Elemente austauschen.

Außerdem könnt ihr solche Blöcke mit if-when Schleifen nur unter bestimmten Bedienungen anzeigen lassen - das ist für bestimmte Layout Entwürfe sehr nützlich.

Alle Posts der Reihe

Ausblick

Im nächsten Teil werden wir ein <b:include/>-Tag mit Hilfe eines konditionalen Tags ein.- und ausblenden. Das wird der letzte Teil sein, wo wir im Sandkasten mit einem Widget spielen.

Danach gehen wir in's richtige Leben und starten mit der Arbeit an einem 'echten' Widget, nämlich dem Blog-Widget.