Nach einigen Tagen Zwangspause geht es jetzt endlich mit der Reihe 'Ein eigenes Template entsteht' weiter :D.
Heute beschäftigen wir uns zum letzten Mal theoretisch mit Widgets und zwar mit konditionalen Argumenten.
Grob gesagt ist ein konditionales Argument eine Wenn - Dann Bedingung: Wenn diese oder jene Bedingung erfüllt ist, wird dieses oder jenes HTML-Element angezeigt oder verborgen.
Schauen wir uns eine konditionale Bedingung im Detail an.
Basis Widget
Wie schon öfter geschrieben [und öfter(s) falsch :D] - hier ist das Basis-Layout mit dem 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'>
<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>
</b:section>
</body>
</html>
Der Einfachheit halber diskutieren wir im folgenden nur das Widget an sich:
<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>
Konditionales Argument
Schauen wir uns die Wirkungsweise eines konditionales Arguments an einem Beispiel an. Wir wollen ein HTML Element nur auf der statische Seite 'Blumenkohl' anzeigen.
Geht dazu als erstes in euer Dashboard und legt eine neue Seite an und nennt diese Seite 'Blumenkohl' (or whatever you want :)).
Syntax
Ein konditionales Argument wird als <b:if cond> Tag geschrieben. Es braucht ein öffnendes und ein schließendes Tag und existiert ausschließlich in der langen Schreibweise:
<b:if cond=''> </b:if>
Das Argument, also das 'was' die Bedingung ist, schreibt ihr innerhalb des cond=''> Teils von dem Tag. Wir haben gesagt, die Bedingung soll: 'Statische Seite Blumenkohl' sein.
Formulieren wir nun so einen Tag:
<b:if cond='data:blog.pageName == "Blumenkohl"'> </b:if>
Bauen wir das ganze in das Widget ein:
<b:widget id='Gadget1' type='Gadget' >
<b:includable id='main'>
<b:if cond='data:blog.pageName == "Blumenkohl"'>
</b:if>
</b:includable>
</b:widget>
Rufen wir nun innerhalb dieses konditionalen Arguments ein <b:include/> mit dem name=text auf. Als includable definieren wir Das ist die Seite
<b:widget id='Gadget1' type='Gadget' >
<b:includable id='main'>
<b:if cond='data:blog.pageName == "Blumenkohl"'>
<b:include name='text'/>
</b:if>
</b:includable>
<b:includable id='text'>
<span>Das ist die Seite</span>
</b:includable>
</b:widget>
Schreiben wir ein weiteres <b:include/> nämlich pagename. Die dazugehörige includable ist ein Seitenlayout-Tag <data:blog.pageName/>
<b:widget id='Gadget1' type='Gadget' >
<b:includable id='main'>
<b:if cond='data:blog.pageName == "Blumenkohl"'>
<b:include name='text'/>
<b:include name='pagename'/>
</b:if>
</b:includable>
<b:includable id='text'>
<span>Das ist die Seite</span>
</b:includable>
<b:includable id='pagename'>
<data:blog.pageName/>
</b:includable>
</b:widget>
Test
Testen wir das ganze nun - baut das Widget in euren Test-Blog ein und ruft euren Blog auf. Ihr sehr logischerweise nichts, weil das konditionale Argument nur auf der Seite 'Blumenkohl' gültig ist. Verstanden?
Ruft nun die Seite 'Blumenkohl' auf - dazu hängt ihr an eure Blog-URL diesen Attribut dran: http://EuerBlog.blogspot.de/p/blumenkohl.html.
Wenn ihr alles richtig gemacht habt, bekommt ihr nun diese Meldung: Das ist die Seite Blumenkohl. Mission accomplished!
Else
Erweitern wir unser kleines Beispiel um eine <b:else/> Anweisung, d.h. was 'ansonsten' passiert, wenn das konditionale Argument nicht zutrifft.
Wir rufen mit dieser <b:else/> Anweisung ein weitere <b:include/> auf.
<b:widget id='Gadget1' type='Gadget' >
<b:includable id='main'>
<b:if cond='data:blog.pageName == "Blumenkohl"'>
<b:include name='text'/>
<b:include name='pagename'/>
<b:else/>
<b:include name='normal'/>
</b:if>
</b:includable>
<b:includable id='text'>
<span>Das ist die Seite</span>
</b:includable>
<b:includable id='pagename'>
<data:blog.pageName/>
</b:includable>
<b:includable id='normal'>
<span>Das ist irgendeine Seite!</span>
</b:includable>
</b:widget>
Schaut euch an, was auf einer beliebigen Seite und was auf der Seite 'Blumenkohl' angezeigt wird.
Gültigkeit
Ihr merkt bestimmt schon an diesem kleinen Beispiel, wie mächtig konditionale Argumente sind. Sie lassen sich auf so viele verschiedene Arten anwenden, dass ich hier an der Stelle keinen allgemeinen Überblick gebe, das würde euch nur verwirren :D.
Wir werden uns später im Blog-Widget mit solchen Argumenten rumschlagen ... kommt alles noch früh genug!
- 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
Beenden wir heute unsere Sandkastenspiele, d.h. das rumbauen in einem Test-Gadget.
Der nächsten Post wird eine kurze Diskussion sein, warum wir überhaupt ein eigenes Blog-Widget bauen und nicht das Blog-Widget von Blogger nehmen.
Und dann fangen wir an, uns ein eigenes Widget zu braten, backen und bauen :D.
