Etiquetas de widgets para los diseños

Cuándo usar las inclusiones

Las inclusiones resultan muy útiles cuando tienes una sección de código que quieres reutilizar en varios lugares o incluirla únicamente en determinadas circunstancias.

Para hacerlo, escribe el contenido dentro de una etiqueta b:includable y, a continuación, usa b:include donde quieras que aparezca.

Formato

 

<b:includable id='main' var='thiswidget'>
  [inserta aquí el contenido que quieras]
</b:includable>

 

Atributos

• id (obligatorio): identificador único formado por letras y números. Cada widget debe tener un "includable" con el id='main' (principal).
• var (opcional): identificador formado por letras y números que sirve para remitir a datos incluidos en esta sección.

Si creas más "includables" con distintos ID, no se mostrarán de forma automática. Sin embargo, si creas un "includable" con id='new' (nuevo), puedes remitir a él en tu "includable" principal ("main") con <b:include name='new' /> y se mostrará de esa manera.

Estos son los atributos de la etiqueta b:include:

• name (obligatorio): identificador formado por letras y números. Tiene que coincidir con el ID de una etiqueta b:includable que esté en el mismo widget.
• data (opcional): expresión o fragmento de datos que sirve para pasar a la sección "includable" y que se convertirá en el valor del atributo "var" de dicha sección.
• cond (opcional): expresión que hace que la inclusión solo se ejecute cuando su resultado sea "true" (verdadero). Es igual que el atributo "cond" de una "b:if".

Ejemplo

Este es un ejemplo del uso de b:includable y b:include.

Lo fundamental aquí es entender cómo se incluye la sección "post" dentro de la sección "main". Pasa por una entrada ("post") a la que llama "p" y la sección incluida remite a ella como su "post" de "var" y luego muestra el título.

Ten en cuenta que la inclusión solo se ejecuta cuando el índice es inferior a 10, de modo que en este ejemplo solo se procesarían 10 entradas (el índice empieza por 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>

 

Ejemplos

• <data:title/> mostraría el título de un widget.

• <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> mostraría atributos de un componente de una foto. Una foto puede tener diversos componentes: url, height (altura), width (anchura), etc. Con la notación "." indicamos que queremos la URL de esa foto, no la de otro elemento.

Ver más ejemplos

Puedes ver una lista de todas las etiquetas de datos de diseños compatibles.

 

Cuándo usar b:loop

La etiqueta b:loop te permite repetir varias veces una sección de contenidos. Suele utilizarse para mostrar todas las entradas de la lista de una página determinada, o todos los comentarios, etiquetas, etc.

Formato

El formato general de los bucles es el siguiente:

 

<b:loop var='identifier' values='set-of-data'>
  [aquí va el contenido que se repite]
</b:loop>

 

La parte del identificador o 'identifier' (i) puede ser el nombre que tú quieras, y sirve para los elementos nuevos de la lista cada vez que pasan por el bucle. El conjunto de datos que especifiques para los valores puede ser cualquier fragmento de datos que en el artículo sobre etiquetas de datos se describa como una lista de elementos.

Por ejemplo: en el widget de entradas del blog, posts (entradas) es una lista. En cada entrada se repetirá un código como el siguiente para mostrar su título, y a ambos lados del título habrá etiquetas de cabecera.

 

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

 

Fíjate en que la "i" adopta el valor de cada entrada cuando le corresponde, para que puedas ver el título de cada una.

Intervalo numérico

Una etiqueta de bucle te permite crear repeticiones en un intervalo de números inclusivo como "1 to 3" (del 1 al 3) o "-3 to -9" (del -3 al -9), donde la variable se sustituye por el número. Con el siguiente código se crearía una lista desordenada de 1, 2 y 3.

 

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

 

Atributo de índice

Opcionalmente, las etiquetas de bucle también admiten un atributo de índice ("index"), que da el índice basado en cero de la repetición actual del bucle.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Índice: <data:index />, Número: <data:number /></li>
  </b:loop>
</ul>

 

Con este ejemplo se crearía una lista desordenada de:

• Índice: 0, Número: 9
• Índice: 1, Número: 8
• Índice: 2, Número: 7

Cuando usar "if", "elseif" o "else"

Con las etiquetas b:if, b:elseif y b:else puedes mostrar un contenido en ciertos casos y otro contenido en otros casos. Por ejemplo: imagínate que solo quieres mostrar al lector cierto texto en la página principal y otro texto en las entradas individuales.

Formato

 

<b:if cond='condition'>
  [contenido que se muestra si se cumple la condición]
<b:elseif cond='another condition'/>
  [contenido que se muestra si no se ha cumplido ninguna condición "if" ni "elseif" anterior y se cumple esta condición "elseif"]
<b:else/>
  [contenido que se muestra si no se cumple ninguna condición "if" ni "elseif"]
</b:if>

 

Las etiquetas b:elseif y b:else son optativas. Sin ellas, el resultado será o el contenido mostrado en la sección "b:if" o nada. No obstante, en cualquiera de los dos casos hay que incluir la etiqueta de cierre </b:if>.

Como "condition" (condición) puedes poner cualquier cosa que se pueda cumplir ("true" o verdadera) o no cumplir ("false" o falsa). Hay algunas etiquetas de datos que ya implican un valor verdadero/falso por sí solas; por ejemplo: allowComments (permitir comentarios) sobre una entrada. Con otros fragmentos de datos, puedes compararlos con valores específicos para obtener un resultado verdadero o falso. Ejemplos:

• <b:if cond='data:post.showBacklinks'>
  Verdadera si la entrada actual está configurada para mostrar ("show") backlinks.
• <b:if cond='data:blog.pageType == "item"'>
  Verdadera si la página actual es una página de entrada, también llamada página de elemento ("item").
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Verdadera si la página actual es una página de entrada y la entrada actual está configurada para mostrar backlinks.
• <b:if cond='data:displayname != "Fred"'>
  Verdadera si ese no es el nombre mostrado ("displayname") de Fred.
• <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
  Verdadera si Fred es el nombre mostrado o si la página actual es una página estática ("static"), no una página de entrada.
• <b:if cond='data:post.numComments > 1'>
  Verdadera si la entrada actual tiene más de un comentario.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Verdadera si la página actual es una entrada específica o una página.

Cuándo utilizar un conmutador

La etiqueta b:switch es similar a una etiqueta b:if con varias etiquetas b:elseif. La ventaja de una rama "switch" es que no tienes que repetir el nombre de la variable. Queda muy claro qué define cada caso y cuál es el caso predeterminado ("default").

Formato

<b:switch var='[Expresión de datos]'>
<b:case value="[Valor 1]" />
 [Lo que se muestra si la evaluación de la variable es igual al valor 1]
<b:case value="[Valor 2]" />
 [Lo que se muestra si la evaluación de la variable es igual al valor 2]
[… otros valores]
<b:default />
 [Lo que se muestra si la evaluación de la variable no es igual a ninguna otra etiquetada "b:case"]
</b:switch>

Ejemplo

En este ejemplo se indica cómo mostrar distintas cabeceras para cada tipo de página.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Página</h1>
<b:case value="item" />
  <h1>Entrada</h1>
<b:default />
  <h2>Entradas del blog</h2>
</b:switch>

Cuándo usar las expresiones

Con el atributo "expr" puedes configurar valores de atributos basados en los valores del diccionario de datos. 

Ejemplos

• <a expr:href='data:blog.homepageUrl'>Página principal</a>
  Enlace con la URL de la página principal del blog.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS de entradas</a>
  Enlace con la URL del feed RSS de entradas del blog. El operador "+" une las dos cadenas.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comentario</a>
  Cuando están permitidos los comentarios, es un enlace con la clase "comment"; si no lo están, con "no-comment". El operador ternario (?:) adopta el valor booleano dado y coge el primer valor (después del signo "?") si el booleano es verdadero ("true"). Si el booleano es falso ("false"), coge el segundo valor (después del signo ":").

Cuándo usar una expresión evaluada

Con la etiqueta b:eval puedes evaluar una expresión más complicada que una simple etiqueta de datos.

Formato

<b:eval expr='[Expresión]' />

Ejemplos

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  La entrada mostrada tiene una altura ("height") relativa, calculada a partir de un valor nuevo de anchura ("width").
• <b:eval expr="data:post.labels[0].url" />
  Muestra la URL de la primera etiqueta de la entrada.
• <b:eval expr='data:post.allowComments ? "Comentario" : "Comentarios inhabilitados" />
  Si están permitidos los comentarios, muestra "Comentario". Si no lo están, muestra "Comentarios inhabilitados". En esta expresión se utiliza el operador ternario.

Cuándo usar un alias de variable

Con la etiqueta b:with almacenas temporalmente el valor de una expresión computada; así no tienes que insertar expresiones complicadas.

Formato

<b:with var='myComputedValue' value='[Expresión de datos]' />

Ejemplos

Si vas a usar un atributo de estilo complicado y basado en variables de datos, puedes computarlo antes que el resto del código HTML para que el código HTML anidado resulte más fácil de leer.

<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>Mi cabecera</h1>
   </div>
 </div>
</b:with>

Nota: La variable solo existirá para los nodos secundarios de la etiqueta b:with.

En este widget, se muestran ejemplos de uso de las etiquetas b:widget, b:includable (y b:include), b:if (y b:else) y b:loop.

 

<b:widget id='PageList1' locked='false' title='Páginas' 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>