5. Wiring a pattern into Firefly

Now that we've created our fantastic Salad Spinner block, it's time to wire it up into Firefly.

Updating Firefly's patterns

Using the command gulp export we package all the blocks up ready to be imported into firefly.

Grab the content of this folder, and copy it into www/Templates/lib/core/patterns.

Et voila! You're done.

Wiring the salad spinner into Firefly

As patterns are chunks of XSLT, we need to ensure we call them with the correct XML schema. Most patterns are written with existing XML in mind, however should the XML from the Firefly page not be in the format you need, you can create your own schema in the XSLT itself.

For example, lets say that we want to wire the salad spinner into classes page. Here's a dummy extract from firefly.url/classes?view=xml:

<page>
  <classes id="1">
    <results>
  	    <user name="Sally Student" id="1" image="sally.jpg" url="/students/profiles/1"/>
  	    <user name="Peter Pupil" id="2" image="peter.jpg" url="/students/profiles/2"/>
  	    <user name="Sarah Studiesalot" id="3" image="sarah.jpg" url="/students/profiles/3"/>
    </results>
  </classes>
</page>

You can see that some of the XML is common to both the classes page and the pattern. So, we'll need to shore this up with a little bit of XSLT trickery.

In the match template for the classes page, we can call the salad-spinner like this:

<!-- first, lets define a variable for the salad spinner data -->
<xsl:variable name="salad-spinner-data">
    <salad-spinner modifier="active" classes="ff_module-otherblock__item ff_mdoule-otherblock__item--is-active">
        <data attr="ff-data-attr">salad-spinner-conatiner</data>
        
        <xsl:for-each select="classes/results/user"/>
            <xsl:copy-of select="."/>
        </xsl:for-each>
        
    </salad-spinner>
</xsl:variable>

<!-- now call the block -->
<xsl:call-template name="ff_module-salad-spinner">
    <xsl:with-param name="data" select="msxsl:node-set($salad-spinner-data)"/>
</xsl:call-template> 

A couple of things to note about this code:

• In Firefly, we use the namespace msxsl:node-set(). In the pattern library, we use ext:node-set() as different XLST processors are used.
• This example is designed to show how you can utilise existing XML and new XML together.
  • It should be apparent that you can also use just the exiting XML in the with-param if the page XML matches the node-set required by the pattern.
  • It's should also be equally obvious that if you need to, you can create a completely new node-set using a variable.

Here we are now, in containers

"But wait!" I hear you cry, "What about container blocks?" Well, my friend, fear not as we're just about to have a few words on that very subject.

XLST sure is everyone's favourite markup language, but it does have a few shortcomings. One we ran into when conceiving the pattern library is the inability to call a template and pass in n other blocks we wished to render inside. It's not a problem when we know that one block uses just this one type of other block, as we can hand-code the call, but doing it dynamically? No sir!

So what does this mean for our beautiful world where there's one source of truth? Well, essentially it mean's that there's a whole lot 'o hacking going on, I.e. We have to hand code containers in Firefly.

This is no longer true, some documentation should be added here to explain how to use containers and modules together.