Elephant macros reach a new milestone: rich media content from BrightSide modules

It has been a while since Elephant macros got their way into wiki syntax. Instead of Elephant methods, that compile into active pages inclusions, Elephant macros are interpreted in real-time and can include content from multiple sources. The Elephant annotation for macro parsers is @ExternalParser.

Adding templates to a macro parser

With the addition of templates based on Freemarker, macros can generate content based on real data. But, how this happen? Which elements we need to deal with?

To fully understand what is in this soup, let's see the ingredients one by one:

• Data. Data iterators, given some parameters, return a list of raw data objects.
• Formatting. For each object in the list a template is called. A list prone to be rendered as a tree will be called once.
• Your imagination. Templates can generate any kind of content, not only HTML+CSS+JavaScript. With this in mind, adding scripts, rich media and mobile capabilities is up to you.

Learn by example

In this example we will call a BrightSide Dossiers macro. The retrieved data will be passed to a Freemarker template using bxSlider based on jQuery.

The syntax

{@issues-summary:onwork|closed|all:context:
categoryId:dossierId:count[:summary]}

The call

{@issue-summary:all::0:1:10:slideProposals}

The template

This template include some directives related to the start and the end of data. These directives will be used to include JavaScript files and scripting. As for the rest, some heavy formatting was removed for simplicity:

<#if header>
<script src="${rootWebPath}/_internal/js/bxslider/jquery.bxslider.min.js"></script>
<div class="slider" style="display:none">
< /#if>
<div class="slide dossierWeb boxRound boxRaised boxLinearLight">
    <table>
      <tr style="vertical-align:top;">
	<td>
	  <#if vic??>
	    ${vic.renderVotes(true)}
	  < /#if>
	</td>
	<td>
	  <a href="${path}">
	    ${name}
	  </a>
	</td>
	<td>
	  <table cellpadding="0" cellspacing="0">
	    <tr>
	      <td rowspan="3">
		<#if issue.resolution.solved>
		  <img src="${rootWebPath}/_zul/images/64/ok.png" style="vertical-align: middle"/> 
		<#elseif issue.resolution.rejected>
		  <img src="${rootWebPath}/_zul/images/64/cancel.png" style="vertical-align: middle"/> 
		<#elseif issue.status == "STATUS_REUNION">
		  <img src="${rootWebPath}/_zul/images/64/contacts.png" style="vertical-align: middle"/> 
		< /#if>
	      </td>
	      <td>${labels['lCreation']}</td>
	      <td>${labels['lActivity']}</td>
	    </tr>
	    <tr>
	      <td class="start">
		<div class="calendar">
		  <div class="day">${issue.issueDate?date?string("dd")}</div>
		  <div class="month">${issue.issueDate?date?string("MMM")}</div>
		  <div class="year">${issue.issueDate?date?string("yyyy")}</div>
		</div>
	      </td>
	      <td class="event">
		<#if issue.modification??>
		  <div class="calendar">
		    <div class="day">${issue.modification?date?string("dd")}</div>
		    <div class="month">${issue.modification?date?string("MMM")}</div>
		    <div class="year">${issue.modification?date?string("yyyy")}</div>
		  </div>
		< /#if>
	      </td>
	    </tr>
	    <tr>
	      <td></td>
	      <td></td>
	      <td></td>
	    </tr>
	  </table>
	</td>
      </tr>
    </table>
  <div>
    ${issue.dossier.fullDescription}
    <span>${issue.dossier.labeledPublishableDescription}</span>
  </div>        
</div>
<#if footer>
</div>
<script>
  $(document).ready(function(){
    $('.slider').show();
    $('.slider').bxSlider({
      mode: 'horizontal',
      auto: true,
      slideWidth: 550,
      minSlides: 2,
      maxSlides: 2,
      moveSlides: 1,
      slideMargin: 10,
      useCSS: false,
      easing: 'easeOutBounce',
      speed: 900,
      pager: false,
      controls:false
    });
  });
</script>
< /#if>