Widgettags voor lay-outs

Wanneer kun je include-elementen gebruiken

Include-elementen zijn het handigst als je een gedeelte met code op verschillende plekken opnieuw wilt gebruiken, of als je het alleen in bepaalde omstandigheden wilt opnemen.

Hiervoor schrijf je de content in een b:includable-element en gebruik je vervolgens b:include op plekken waar je de content wilt weergeven.

Indeling

 

<b:includable id='main' var='thiswidget'>
  [voeg hier de gewenste content in]
</b:includable>

 

Kenmerken

• id (vereist): een unieke ID die uit letters en cijfers bestaat. Elke widget moet één includable-element met id='main' bevatten.
• var (optioneel): een ID die uit letters en cijfers bestaat, voor referentiegegevens binnen dit gedeelte.

Als je meerdere includable-elementen met verschillende ID's maakt, worden ze niet automatisch weergegeven. Als je echter een includable-element met id='new' maakt, kun je hiernaar verwijzen in je eerste includable-element met <b:include name='new' /> en wordt deze op die manier weergegeven.

De kenmerken voor de tag b:include zijn de volgende:

• name (vereist): een ID die uit letters en cijfers bestaat. Deze moet overeenkomen met de ID van een bestaande b:includable in dezelfde widget.
• data (optioneel): een expressie of gegevens die worden overgedragen naar het gedeelte met includable-elementen. Dit wordt de waarde van het kenmerk 'var' in het includable-element.
• cond (optioneel): een expressie die ervoor zorgt dat het include-element alleen wordt uitgevoerd wanneer het resultaat waar is. Deze is dezelfde als het kenmerk cond in een b:if.

Voorbeeld

Hier volgt een voorbeeld waarin het gebruik van b:includable en b:include wordt gedemonstreerd.

Het is belangrijk om te begrijpen dat het gedeelte 'post' is opgenomen in het gedeelte 'main'. Het geeft een post door die 'p' wordt genoemd. Hiernaar wordt door het opgenomen gedeelte verwezen met de variabele 'post'. Vervolgens wordt de titel weergegeven.

Het include-element wordt alleen uitgevoerd als de index kleiner is dan 10, dus in dit voorbeeld worden maximaal 10 posts weergegeven (de index begint bij 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>

 

Voorbeelden

• Met <data:title/> wordt de titel van een widget weergegeven

• Met <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> worden kenmerken van een fotocomponent weergegeven. Een foto kan onder andere de componenten 'url', 'height' en 'width' bevatten. Met de notatie '.' wordt aangegeven dat de URL van deze foto moet worden gebruikt in plaats van de URL van iets anders.

Meer voorbeelden bekijken

Bekijk onze volledige lijst met ondersteunde gegevenstags voor lay-outs.

 

Het gebruik van b:loop

Met de tag b:loop kun je een gedeelte van de inhoud meerdere keren herhalen. Dit wordt meestal gebruikt om elke post in een lijst met posts (of elke reactie, elk label, enzovoort) op een bepaalde pagina weer te geven.

Indeling

De algemene indeling voor het gebruik van lussen ziet er als volgt uit:

 

<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>

 

In plaats van 'identifier' (i) kun je elke gewenste naam opgeven; deze wordt gebruikt als vervanging van elk nieuw item in de lijst telkens wanneer de lus wordt doorlopen. De gegevensset die je voor de waarden opgeeft, kan alle gegevens bevatten die in het artikel over gegevenstags worden beschreven, in de vorm van een lijst met items.

In de widget 'blogposts' is posts bijvoorbeeld een lijst. Code zoals hieronder wordt in elke post herhaald, waarbij de titel voor elke post wordt weergegeven met header-tags eromheen.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

Je kunt zien dat 'i' de waarde aanneemt van elke post in de reeks, zodat je de titel van elke post kunt ophalen.

Nummerbereik

Met de tag 'loop' kun je herhaling aanbrengen binnen een inclusief nummerbereik, zoals '1 tot en met 3', '-3 tot en met -9', waarbij de waarde van de variabele de nummerwaarde aanneemt. In het volgende voorbeeld wordt een ongeordende lijst van 1, 2 en 3 gemaakt.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Index-kenmerk

Loop-tags bevatten ook een optioneel index-kenmerk dat de index vanaf nul van de huidige herhaling in de lus oplevert.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>

 

Met dit voorbeeld wordt een ongeordende lijst gemaakt van:

• Index: 0, nummer: 9
• Index: 1, nummer: 8
• Index: 2, nummer: 7

Het gebruik van if, elseif of else

Je kunt de tags b:if, b:elseif en b:else gebruiken om bepaalde inhoud in specifieke gevallen weer te geven, en andere inhoud in andere gevallen. Het kan bijvoorbeeld zo zijn dat je bepaalde tekst alleen op de startpagina wilt weergeven, maar andere tekst wanneer afzonderlijke posts worden weergegeven.

Indeling

 

<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>

 

De tags b:elseif en b:else-tags zijn optioneel. Zonder deze tags is het resultaat hetzij de inhoud die in het b:if-gedeelte wordt vermeld, hetzij niets. Het afsluitende </b:if> is echter in alle gevallen vereist.

Bij 'condition' kun je alles opgeven dat als waar of onwaar wordt beoordeeld. Sommige gegevenstags zijn al waar/onwaar-waarden van zichzelf, zoals allowComments in een post. Als je andere gegevens gebruikt, kun je ze vergelijken met specifieke waarden om waar of onwaar als resultaat te krijgen. Hier zijn enkele voorbeelden:

• <b:if cond='data:post.showBacklinks'>
  Waar als de huidige post is ingesteld om backlinks weer te geven.
• <b:if cond='data:blog.pageType == "item"'>
  Waar als de huidige post een itempagina (postpagina) is.
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Waar als de huidige post een itempagina (postpagina) is en de huidige post is ingesteld om backlinks weer te geven.
• <b:if cond='data:display name != "Fred"'>
  Waar als dit niet de weergavenaam van Fred is.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Waar als Fred de weergavenaam is of als de huidige pagina een statische pagina is (geen postpagina).
• <b:if cond='data:post.numComments > 1'>
  Waar als de huidige post meer dan één reactie bevat.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OF <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Waar als de huidige pagina een specifieke post of een pagina is.

Wanneer een switch gebruiken

Je kunt de tag b:switch gebruiken op dezelfde manier als een tag b:if die meerdere tags b:elseif bevat. Het voordeel van een switchvertakking is dat je de naam van de variabele niet hoeft te herhalen. Je kunt deze makkelijk lezen om te bekijken wat elke instantie definieert en wat de standaardinstantie is.

Indeling

<b:switch var='[Gegevensexpressie]'>
<b:case value="[Waarde 1]" />
 [Output als evaluatie van var gelijk is aan Waarde 1]
<b:case value="[Waarde 2]" />
 [Output als evaluatie van var gelijk is aan Waarde 2]
[… andere waarden]
<b:default />
 [Output als evaluatie van var niet gelijk is aan een vermelde b:case]
</b:switch>

Voorbeeld

Dit voorbeeld geeft weer hoe je een andere kop kunt weergeven, afhankelijk van welk type pagina wordt weergegeven.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Pagina</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blogposts</h2>
</b:switch>

Het gebruik van expressies

Je kunt het kenmerk expr gebruiken om kenmerkwaarden in te stellen op basis van waarden in het gegevenswoordenboek. 

Voorbeelden

• <a expr:href='data:blog.homepageUrl'>Home</a>
  Een link naar de startpagina met de startpagina-URL van de blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
  Een link met de URL naar de RSS-feed van de blogpost. Met de operator '+' worden de twee tekenreeksen samengevoegd.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
  Een link met de klasse 'comment' als reacties zijn toegestaan en 'no-comment' wanneer dit niet het geval is. De ternaire operator (?:) neemt de gegeven Booleaanse waarde en kiest de eerste waarde (na het ?) als de Booleaanse waarde waar is, of de tweede waarde (na de :) als de Booleaanse waarde onwaar is.

Wanneer geëvalueerde expressie gebruiken

Je kunt de tag b:eval gebruiken om een complexere expressie te evalueren dan een standaard gegevenstag.

Indeling

<b:eval expr='[Expressie]' />

Voorbeelden

• Minimale hoogte: <b:eval expr="data:newWidth * data:height / data:width" /> px;
  Levert als output een berekende relatieve hoogte op basis van een nieuwe breedtewaarde.
• <b:eval expr="data:post.labels[0].url" />
  Levert als output de URL van het eerste postlabel.
• <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
  Levert als output 'Comment' wanneer reacties zijn toegestaan en 'Comments Disabled' wanneer deze niet zijn toegestaan. Houd er rekening mee dat deze expressie de ternaire operator gebruikt.

Wanneer een variabele alias gebruiken

Je kunt de tag b:with gebruiken om tijdelijk de waarde van een berekende expressie op te slaan en ingewikkelde inline expressies te vermijden.

Indeling

<b:with var='myComputedValue' value='[Gegevensexpressie]' />

Voorbeelden

Voor een complex stijlkenmerk op basis van gegevensvariabelen kun je dit vóór de rest van de HTML-output berekenen, zodat de geneste HTML makkelijker te lezen is.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Mijn kop</h1>
   </div>
 </div>
</b:with>

Houd er rekening mee dat de variabele alleen bestaat voor de onderliggende knooppunten van de tag b:with.

In deze widget zie je voorbeelden van het gebruik van de tags b:widget, b:includable (en b:include), b:if (en b:else), en b:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>