| <!doctype html> |
| <!-- Generated by FreeMarker/Docgen from DocBook --> |
| <html lang="en" class="page-type-section"> |
| <head prefix="og: http://ogp.me/ns#"> |
| <meta charset="utf-8"> |
| <title>The template at a glance - FreeMarker Manual</title> |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> |
| <meta name="viewport" content="width=device-width,initial-scale=1"> |
| <meta name="format-detection" content="telephone=no"> |
| <meta property="og:site_name" content="FreeMarker Manual"> |
| <meta property="og:title" content="The template at a glance"> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:url" content="http://example.com/dgui_quickstart_template.html"> |
| <link rel="canonical" href="http://example.com/dgui_quickstart_template.html"> |
| <link rel="icon" href="favicon.png" type="image/png"> |
| <link rel="stylesheet" type="text/css" href="docgen-resources/docgen.min.css?1594338519184"> |
| </head> |
| <body itemscope itemtype="https://schema.org/Code"> |
| <meta itemprop="url" content="http://example.com/"> |
| <meta itemprop="name" content="FreeMarker Manual"> |
| |
| <!--[if lte IE 9]> |
| <div style="background-color: #C00; color: #fff; padding: 12px 24px;">Please use a modern browser to view this website.</div> |
| <![endif]--><div class="header-top-bg"><div class="site-width header-top"><a class="logo" href="http://example.com" role="banner"> <img itemprop="image" src="logo.png" alt="My Logo"> |
| </a></div></div><div class="header-bottom-bg"><div class="site-width search-row"><a href="index.html" class="navigation-header">FreeMarker Manual</a><div class="navigation-header"></div></div><div class="site-width breadcrumb-row"><ul class="breadcrumb" itemscope itemtype="http://schema.org/BreadcrumbList"><li class="step-0" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="index.html"><span itemprop="name">FreeMarker Manual</span></a></li><li class="step-1" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui.html"><span itemprop="name">Template Author's Guide</span></a></li><li class="step-2" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui_quickstart.html"><span itemprop="name">Getting Started</span></a></li><li class="step-3" itemprop="itemListElement" itemscope itemtype="http://schema.org/ListItem"><a class="label" itemprop="item" href="dgui_quickstart_template.html"><span itemprop="name">The template at a glance</span></a></li></ul><div class="bookmarks" title="Bookmarks"><span class="sr-only">Bookmarks:</span><ul class="bookmark-list"><li><a href="alphaidx.html">Index</a></li><li><a href="gloss.html">Glossary</a></li><li><a href="ref.html">Reference</a></li><li><a href="app_faq.html">FAQ</a></li><li><a href="preface.html#test_target">Bőregér</a></li><li><a href="api/index.html">API</a></li><li><a href="../index.html">Home</a></li></ul></div></div></div> <div class="main-content site-width"> |
| <div class="content-wrapper"> |
| <div id="table-of-contents-wrapper" class="col-left"> |
| <script>var breadcrumb = ["FreeMarker Manual","Template Author\'s Guide","Getting Started","The template at a glance"];</script> |
| <script src="toc.js?1594338519184"></script> |
| <script src="docgen-resources/main.min.js?1594338519184"></script> |
| </div> |
| <div class="col-right"><div class="page-content"><div class="page-title"><div class="pagers top"><a class="paging-arrow previous" href="dgui_quickstart_datamodel.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_datamodel.html"><span>Next</span></a></div><div class="title-wrapper"> |
| <h1 class="content-header header-section1" id="dgui_quickstart_template" itemprop="headline">The template at a glance</h1> |
| </div></div><div class="page-menu"> |
| <div class="page-menu-title">Page Contents</div> |
| <ul><li><a class="page-menu-link" href="#autoid_7" data-menu-target="autoid_7">Examples of directives</a><ul><li><a class="page-menu-link" href="#autoid_8" data-menu-target="autoid_8">The if directive</a></li><li><a class="page-menu-link" href="#autoid_9" data-menu-target="autoid_9">The list directive</a></li><li><a class="page-menu-link" href="#autoid_10" data-menu-target="autoid_10">The include directive</a></li></ul></li><li><a class="page-menu-link" href="#autoid_11" data-menu-target="autoid_11">Using directives together</a></li><li><a class="page-menu-link" href="#autoid_12" data-menu-target="autoid_12">Dealing with missing variables</a></li></ul> </div><p>The simplest template is a plain HTML file (or whatever text |
| file -- FreeMarker is not confined to HTML). When the client visits |
| that page, FreeMarker will send that HTML to the client as is. However |
| if you want that page to be more dynamic then you begin to put special |
| parts into the HTML which will be understood by FreeMarker:</p><ul> |
| <li> |
| <p><code class="inline-code">${<em class="code-color">...</em>}</code>: |
| FreeMarker will replace it in the output with the actual value of |
| the thing inside the curly brackets. They are called <strong>interpolation</strong>s. As an example see <a href="dgui_quickstart_basics.html#example.first">the very first example</a>.</p> |
| </li> |
| |
| <li> |
| <p><strong>FTL tags</strong> (for FreeMarker |
| Template Language tags): FTL tags are a bit similar to HTML tags, |
| but they are instructions to FreeMarker and will not be printed to |
| the output. The name of these tags start with |
| <code class="inline-code">#</code>. (User-defined FTL tags use |
| <code class="inline-code">@</code> instead of <code class="inline-code">#</code>, but they are |
| an advanced topic.)</p> |
| </li> |
| |
| <li> |
| <p><strong>Comments:</strong> Comments are |
| similar to HTML comments, but they are delimited by |
| <code class="inline-code"><#--</code> and <code class="inline-code">--></code>. Anything |
| between these delimiters and the delimiter itself will be ignored |
| by FreeMarker, and will not be written to the output.</p> |
| </li> |
| </ul><p>Anything not an FTL tag or an interpolation or comment is |
| considered as static text, and will not be interpreted by FreeMarker; |
| it is just printed to the output as is.</p><p>With FTL tags you refer to so-called <strong>directives</strong>. This is the same kind of |
| relationship as between HTML tags (e.g.: |
| <code class="inline-code"><table></code> and |
| <code class="inline-code"></table></code>) and HTML elements (e.g., the |
| <code class="inline-code">table</code> element) to which you refer to with the HTML |
| tags. (If you don't feel this difference then just take "FTL tag" and |
| "directive" as synonyms.)</p> |
| |
| |
| |
| |
| <h2 class="content-header header-section2" id="autoid_7">Examples of directives</h2> |
| |
| |
| <p>Though FreeMarker has far more directives, in this quick |
| overview we will only look at three of the most commonly used |
| ones.</p> |
| |
| |
| |
| |
| |
| |
| <h3 class="content-header header-section3" id="autoid_8">The if directive</h3> |
| |
| |
| <p>With the <code class="inline-code">if</code> directive you can |
| conditionally skip a section of the template. For example, assume |
| that in the <a href="dgui_quickstart_basics.html#example.first">very first |
| example</a> you want to greet your boss, Big Joe, differently |
| from other users:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><html> |
| <head> |
| <title>Welcome!</title> |
| </head> |
| <body> |
| <h1> |
| Welcome ${user}<strong><#if user == "Big Joe"></strong>, our beloved leader<strong></#if></strong>! |
| </h1> |
| <p>Our latest product: |
| <a href="${latestProduct.url}">${latestProduct.name}</a>! |
| </body> |
| </html></pre></div> |
| |
| <p>Here you have told FreeMarker that the '', our beloved |
| leader'' should be there only if the value of the variable |
| <code class="inline-code">user</code> is equal to the string <code class="inline-code">"Big |
| Joe"</code>. In general, things between <code class="inline-code"><#if |
| <em class="code-color">condition</em>></code> and |
| <code class="inline-code"></#if></code> tags are skipped if |
| <code class="inline-code"><em class="code-color">condition</em></code> is false |
| (the boolean value).</p> |
| |
| <p>Let's detail the |
| <code class="inline-code"><em class="code-color">condition</em></code> used here: |
| The <code class="inline-code">==</code> is an operator that tests if the values |
| at its left and right side are equivalent, and the results is a |
| boolean value, true or false accordingly. On the left side of |
| <code class="inline-code">==</code> I have <a href="dgui_quickstart_datamodel.html#topic.qStart.accessVariables">referenced a |
| variable</a> with the syntax that should be already familiar; |
| this will be replaced with the value of the variable. In general, |
| unquoted words inside directives or interpolations are treated as |
| references to variables. On the right side I have specified a |
| literal string. Literal strings in templates must |
| <em>always</em> be put inside quotation marks.</p> |
| |
| <p>This will print "Pythons are free today!" if their price is |
| 0:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if animals.python.price == <strong>0</strong>> |
| Pythons are free today! |
| </#if></pre></div> |
| |
| <p>Similarly as earlier when a string was specified directly, |
| here a number is specified directly (<code class="inline-code">0</code>). Note |
| that the number is <em>not</em> quoted. If you quoted |
| it (<code class="inline-code">"0"</code>), FreeMarker were misinterpret it as a |
| string literal.</p> |
| |
| <p>This will print "Pythons are not free today!" if their price |
| is not 0:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if animals.python.price <strong>!=</strong> 0> |
| Pythons are not free today! |
| </#if></pre></div> |
| |
| <p>As you may have guessed, <code class="inline-code">!=</code> means not |
| equivalent.</p> |
| |
| <p>You can write things like this too (using <a href="dgui_quickstart_datamodel.html#example.qStart.dataModelWithHashes">the data-model used |
| to demonstrate hashes</a>):</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if <strong>animals.python.price < animals.elephant.price</strong>> |
| Pythons are cheaper than elephants today. |
| </#if></pre></div> |
| |
| <p>With the <code class="inline-code"><#else></code> tag you can |
| specify what to do if the condition is false. For example:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if animals.python.price < animals.elephant.price> |
| Pythons are cheaper than elephants today. |
| <strong><#else></strong> |
| Pythons are not cheaper than elephants today. |
| </#if></pre></div> |
| |
| <p>This prints ''Pythons are cheaper than elephants today.'' if |
| the price of python is less than the price of elephant, or else it |
| prints ''Pythons are not cheaper than elephants today.''</p> |
| |
| <p>If you have a variable with boolean value (a true/false |
| thing) then you can use it directly as the |
| <code class="inline-code"><em class="code-color">condition</em></code> of |
| <code class="inline-code">if</code>:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if animals.python.protected> |
| Warning! Pythons are protected animals! |
| </#if></pre></div> |
| |
| |
| |
| |
| |
| |
| |
| <h3 class="content-header header-section3" id="autoid_9">The list directive</h3> |
| |
| |
| <p>This is useful when you want to list something. For example |
| if you merge this template with the <a href="dgui_quickstart_datamodel.html#example.qStart.dataModelWithSequences">data-model I used |
| earlier to demonstrate sequences</a>:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><p>We have these animals: |
| <table border=1> |
| <tr><th>Name<th>Price |
| <strong><#list animals as being></strong> |
| <tr><td>${<strong>being</strong>.name}<td>${<strong>being</strong>.price} Euros |
| <strong></#list></strong> |
| </table></pre></div> |
| |
| <p>then the output will be:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-output"><p>We have these animals: |
| <table border=1> |
| <tr><th>Name<th>Price |
| <strong><tr><td>mouse<td>50 Euros |
| <tr><td>elephant<td>5000 Euros |
| <tr><td>python<td>4999 Euros</strong> |
| </table></pre></div> |
| |
| <p>The generic format of the <code class="inline-code">list</code> directive |
| is:</p> |
| |
| <p><code class="inline-code"><#list <em class="code-color">sequence</em> as |
| <em class="code-color">loopVariable</em>><em class="code-color">repeatThis</em></#list></code></p> |
| |
| <p>The <code class="inline-code"><em class="code-color">repeatThis</em></code> |
| part will be repeated for each item in the sequence that you have |
| given with <code class="inline-code"><em class="code-color">sequence</em></code>, |
| one after the other, starting from the first item. In all |
| repetitions |
| <code class="inline-code"><em class="code-color">loopVariable</em></code> will |
| hold the value of the current item. This variable exists only |
| between the <code class="inline-code"><#list ...></code> and |
| <code class="inline-code"></#list></code> tags.</p> |
| |
| <p>As another example, we list the fruits of that example data |
| model:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><p>And BTW we have these fruits: |
| <ul> |
| <strong><#list whatnot.fruits as fruit></strong> |
| <li>${fruit} |
| <strong></#list></strong> |
| <ul></pre></div> |
| |
| <p>The <code class="inline-code">whatnot.fruits</code> expression should be |
| familiar to you; it <a href="dgui_quickstart_datamodel.html#topic.qStart.accessVariables">references a variable in |
| the data-model</a>.</p> |
| |
| |
| |
| |
| |
| |
| |
| <h3 class="content-header header-section3" id="autoid_10">The include directive</h3> |
| |
| |
| <p>With the <code class="inline-code">include</code> directive you can insert |
| the content of another file into the template.</p> |
| |
| <p>Suppose you have to show the same copyright notice on |
| several pages. You can create a file that contains the copyright |
| notice only, and insert that file everywhere where you need that |
| copyright notice. Say, you store this copyright notice in |
| <code class="inline-code">copyright_footer.html</code>:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><hr> |
| <i> |
| Copyright (c) 2000 <a href="http://www.acmee.com">Acmee Inc</a>, |
| <br> |
| All Rights Reserved. |
| </i></pre></div> |
| |
| <p>Whenever you need that file you simply insert it with the |
| <code class="inline-code">include</code> directive:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><html> |
| <head> |
| <title>Test page</title> |
| </head> |
| <body> |
| <h1>Test page</h1> |
| <p>Blah blah... |
| <strong><#include "/copyright_footer.html"></strong> |
| </body> |
| </html></pre></div> |
| |
| <p>and the output will be:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-output"><html> |
| <head> |
| <title>Test page</title> |
| </head> |
| <body> |
| <h1>Test page</h1> |
| <p>Blah blah... |
| <strong><hr> |
| <i> |
| Copyright (c) 2000 <a href="http://www.acmee.com">Acmee Inc</a>, |
| <br> |
| All Rights Reserved. |
| </i></strong> |
| </body> |
| </html></pre></div> |
| |
| <p>If you change the <code class="inline-code">copyright_footer.html</code>, |
| then the visitor will see the new copyright notice on all |
| pages.</p> |
| |
| |
| |
| |
| |
| |
| <h2 class="content-header header-section2" id="autoid_11">Using directives together</h2> |
| |
| |
| <p>You can use directives as many times on a page as you want, |
| and you can nest directives into each other similarly as you can |
| nest HTML elements into each other. For example this will list the |
| animals and print the name of large animals with bigger font:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><p>We have these animals: |
| <table border=1> |
| <tr><th>Name<th>Price |
| <strong><#list animals as being></strong> |
| <tr> |
| <td> |
| <strong><#if being.size == "large"></strong><font size="+1"><strong></#if></strong> |
| ${being.name} |
| <strong><#if being.size == "large"></strong></font><strong></#if></strong> |
| <td>${being.price} Euros |
| <strong></#list></strong> |
| </table></pre></div> |
| |
| <p>Note that since FreeMarker does not interpret text outside FTL |
| tags, interpolations and comments, it doesn't see the above |
| <code class="inline-code">font</code> tags as badly nested ones.</p> |
| |
| |
| |
| |
| |
| <h2 class="content-header header-section2" id="autoid_12">Dealing with missing variables</h2> |
| |
| |
| <p>In practice the data-model often has variables that are |
| optional (i.e., sometimes missing). To spot some typical human |
| mistakes, FreeMarker doesn't tolerate the referring to missing |
| variables unless you tell them explicitly what to do if the variable |
| is missing. Here we will show the two most typical ways of doing |
| that.</p> |
| |
| <p><span class="marked-for-programmers">Note for programmers: A |
| non-existent variable and a variable with <code class="inline-code">null</code> |
| value is the same for FreeMarker, so the "missing" term used here |
| covers both cases.</span></p> |
| |
| <p>Wherever you refer to a variable, you can specify a default |
| value for the case the variable is missing, by followin the variable |
| name with a <code class="inline-code">!</code> and the default value. Like in the |
| following example, when <code class="inline-code">user</code> is missing from data |
| model, the template will behave like if <code class="inline-code">user</code>'s |
| value were the string <code class="inline-code">"Anonymous"</code>. (When |
| <code class="inline-code">user</code> isn't missing, this template behaves exactly |
| like if <code class="inline-code">!"Anonymous"</code> were not there):</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><h1>Welcome ${user<strong>!"Anonymous"</strong>}!</h1></pre></div> |
| |
| <p>You can ask whether a variable isn't missing by putting |
| <code class="inline-code">??</code> after its name. Combining this with the |
| already introduced <code class="inline-code">if</code> directive you can skip the |
| whole greeting if the <code class="inline-code">user</code> variable is |
| missing:</p> |
| |
| |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><#if <strong>user??</strong>><h1>Welcome ${user}!</h1></#if></pre></div> |
| |
| <p>Regarding variable accessing with multiple steps, like |
| <code class="inline-code">animals.python.price</code>, writing |
| <code class="inline-code">animals.python.price!0</code> is correct only if |
| <code class="inline-code">animals.python</code> is never missing and only the last |
| subvariable, <code class="inline-code">price</code>, is possibly missing (in which |
| case here we assume it's <code class="inline-code">0</code>). If |
| <code class="inline-code">animals</code> or <code class="inline-code">python</code> is missing, |
| the template processing will stop with an "undefined variable" |
| error. To prevent that, you have to write |
| <code class="inline-code">(animals.python.price)!0</code>. In that case the |
| expression will be <code class="inline-code">0</code> even if |
| <code class="inline-code">animals</code> or <code class="inline-code">python</code> is missing. |
| Same logic goes for <code class="inline-code">??</code>; |
| <code class="inline-code">animals.python.price??</code> versus |
| <code class="inline-code">(animals.python.price)??</code>.</p> |
| <div class="bottom-pagers-wrapper"><div class="pagers bottom"><a class="paging-arrow previous" href="dgui_quickstart_datamodel.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_datamodel.html"><span>Next</span></a></div></div></div></div> </div> |
| </div> |
| <div class="site-footer"><div class="site-width"><div class="footer-top"><div class="col-left sitemap"></div><div class="col-right"><a class="xxe" href="http://www.xmlmind.com/xmleditor/" rel="nofollow" title="Edited with XMLMind XML Editor"><span>Edited with XMLMind XML Editor</span></a></div></div><div class="footer-bottom"> <p class="last-generated"> |
| Last generated: |
| <time itemprop="dateModified" datetime="2020-07-09T23:48:39Z" title="Thursday, July 9, 2020 11:48:39 PM GMT">2020-07-09 23:48:39 GMT</time> </p> |
| <p class="copyright"> |
| © <span itemprop="copyrightYear">1999</span>–2020 |
| <a itemtype="http://schema.org/Organization" itemprop="copyrightHolder" href="https://apache.org/">The Apache Software Foundation</a> </p> |
| </div></div></div></body> |
| </html> |
