5202

16.4.13

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

Weiter geht's mit Widgets!

Im letzten Post haben wir ein Basis-Widget geschrieben - heute wird daraus etwas komplexeres, indem wir in das Widget weitere Includable einbauen.

Basis Widget

Zur Erinnerung - das ist das Basis-Layout mit unserem Widget vom letzten Post

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

Wir diskutieren im folgenden 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

Ein Widget muss mindestens ein Includable mit der id='main' enthalten. Für einfache Widgets wird euch das auch reichen.

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

Ein zusätzlicher Includable Block würde so ausschauen:

  <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 sie.

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 den Tag mit dem Präfix <b: ein und dann kommt der Tag-Name, nämlich include. <b:include/>-Tags besitzen darüber hinaus Attribute, nämlich:

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 müssten nun die <b:include/>-Tags formuliert sein, um die beiden Includable in der Haupt-Includablen aufzurufen? Versucht es doch mal selber!

Die Lösung ist relativ 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>

Diese Schreibweise kommt euch jetzt vielleicht umständlich vor. Wenn wir später das Blog-Widget schreiben werdet ihr sehen, wie praktisch solche 'Blöcke' sind, um die Übersicht zu bewahren.

• 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

Ausblick