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.
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:
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.
{
categoryId:dossierId:count[:summary]}
{
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>