Publications

Tutorials

Slots & Plugs

This FigDice mechanism is useful when you can factor out a common shape for your all your pages, with various sections whose contents you want to delegate to the actual view your controller is requested for.

Suppose that all your pages contain an HTML header with title, and a menu, and a footer.
All these components are almost the same everywhere, with possibly some slight differences from page to page: for example, the tag would reflect the actual current page's topic. </p> <p style="padding-left: 2em; border-left: solid 1px silver;"> <code style="font-size: 12px;"> <html><br /> <span style="margin-left: 1em;" /><head><br /> <span style="margin-left: 1em;" /><span style="margin-left: 1em;" /><title> <i>[I want my article's title here]</i> </head><br /> <span style="margin-left: 1em;" /></head><br /> <br /> <span style="margin-left: 1em;" /><body><br /> <span style="margin-left: 1em;" /><span style="margin-left: 1em;" /><div class="Menu"> <i>[I want my menu here]</i> </div><br /> <br /> <span style="margin-left: 1em;" /><span style="margin-left: 1em;" /><div class="PageContent"> <i>[I want my article here]</i> </div><br /> <br /> <span style="margin-left: 1em;" /><span style="margin-left: 1em;" /><div class="Footer"> <i>[I want my footer here]</i> </div><br /> <span style="margin-left: 1em;" /></body><br /> </html> </code> </p> <p> Your controller is requested to pull a particular article page, and you want to focus on the contents of this page. You do not want all your pages to reimplement the same structure above. </p> <p> Yet, each article will provide its particular title. </p> <p> You can do this with Slots and Plugs. Your procedure becomes: <ul> <li>one generic page layout HTML file,</li> <li>one specific FigDice template per article,</li> <li>your controller loads <b>solely the article-specific template</b>,</li> <li>which includes the generic layout,</li> <li>and supplies specific contents to the identified placeholders.</li> </ul> </p> <p> Although the identically-repeated parts (here: menu and footer) can be achieved with plain <a href="manual.html#figinclude" class="FigTag">include</a>s, the Slots and Plugs are a special feature for contextual content blocks. </p> <p> file: <span style="background-color: yellow; color: navy;"> page-layout.html </span><br /> <div style="padding-left: 2em; border-left: solid 1px silver;"> <code style="font-size: 12px;"> <html><br /> <div style="margin-left: 1em;"> <head><br /> <div style="margin-left: 1em;"> <title <a href="manual.html#figslot" class="FigAttr">fig:slot</a>="<span class="CodeStatic">docTitle</span>" /> </div> </head> <br /> <body><br /> <div style="margin-left: 1em;"> <div class="Menu"> <<a href="manual.html#figinclude" class="FigTag">fig:include</a> file="<span class="CodeStatic">menu.html</span>" /> </div><br /> <br /> <div class="PageContent"><br /> <div style="margin-left: 1em;"> <div <a href="manual.html#figslot" class="FigAttr">fig:slot</a>="<span class="CodeStatic">pageContent</span>" /> </div> </div><br /> <br /> <div class="Footer"> <<a href="manual.html#figinclude" class="FigTag">fig:include</a> file="<span class="CodeStatic">footer.html</span>" /> </div><br /> </div> </body> </div> </html> </code> </div> </p> <p> file: <span style="background-color: yellow; color: navy;"> myarticle.html </span><br /> <div style="padding-left: 2em; border-left: solid 1px silver;"> <code style="font-size: 12px;"> <xml <a href="manual.html#figmute" class="FigAttr">fig:mute</a>="<span class="CodeEval">true</span>"> <span class="xmlComment"><!-- Mute because this tag <br /> <span style="margin-left: 10em;"></span>should not end up in the HTML document.<br /> <span style="margin-left: 10em;"></span>But the FigDice template must have an XML root node. --></span><br /> <br /> <div style="margin-left: 1em;"> <span class="xmlComment"><!-- Load the generic Page Layout... <br /> This is the only thing you have to repeat in every article file! --></span><br /> <<a href="manual#figinclude" class="FigTag">fig:include</a> file="<span class="CodeStatic">page-layout.html</span>" /><br /> <br /> <span class="xmlComment"><!-- My Article initialization... --></span><br /> <<a href="manual#figfeed" class="FigTag">fig:feed</a> ... /><br /> <br /> <span class="xmlComment"><!-- Supply the <title> tag now!... --></span><br /> <title <a href="manual.html#figplug" class="FigAttr">fig:plug</a>="<span class="CodeStatic">docTitle</span>"> Actual Title Here


fig:plug="pageContent"> Lorem ipsum...

controller:

$view = new \figdice\View();
...
$view->loadFile( 'myarticle.html' );

echo( $view->render() );


With this mechanism, for example, you can also provide meta keywords specific to each page, without the need to duplicate the HTML skeleton in every single page.

In fact, you simply invert the natural inclusion principle: instead of pulling common areas, you push contextual content into externally defined placeholders.

Internationalization

Your application contains multiple views (high-level views rendering complete HTML DOM ; and partial views which you load dynamically with Ajax into your pages). Now you need to translate the views into various natural languages.

You create Dictionaries which provide translations against keys, and you use the keys in your views instead of direct human text.

file: contact.xtml (French Dictionary)


<fig:dictionary xmlns:fig="http://www.figdice.org/" language="fr">


Title">Titre
Lastname">Nom
Firstname">Prénom
DateOfBirth">Date de naissance


NumberOfFriends">Nombre
d'amis



ContactHasNFriends">Ce contact a {numberOfFriends} amis.

fig:dictionary>

You are advised to partition your dictionaries according to consistent feature groups.
That is: put your keys regarding Contact-related screens in a contact.xml dictionary, and your keys regarding Product-related screens (within the same app) in a product.xml dictionary.
This enables you to:

  • potentially reuse your dictionaries across applications,
  • reduce the length of your keys, whose names are locally scoped to a given dictionary,
  • maintain smaller dictionaries, easier to handle,
  • load specialized dictionaries in different views, so as to avoid loading your entire translation book in small views where it is not needed.

You will organize your dictionary files in the following tree:

myproject/lang
  + fr
    - contact.html
    - product.html
  + de
    - contact.html
    - product.html
  + es
    - contact.html
    - product.html

In your Template file, you load and use the dictionaries as follows:
file: view-contact.xml



<fig:dictionary file="product.xml" name="Product" />
<fig:dictionary file="contact.xml" name="Contact" />









<fig:trans dict="Contact" key="Title" /> fig:text="/customer/title" />
<fig:trans dict="Contact" key="Lastname" /> fig:text="/customer/lastname" />

<fig:trans dict="Contact" key="ContactHasNFriends" numberOfFriends="count(/customer/friends)" />

Now, before you render the \figdice\View template, you must tell it what is the target language to display:

file: controller.php

$figView = new \figdice\View();
//Tell the View where to find the Dictionary tree:
$figView->setTranslationPath( 'myproject/lang' );
...
$figView->setLanguage( 'fr' );
//The target language will be most probably defined in your session data
...
$html = $figView->render();