| <!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>Template + data-model = output - 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="Template + data-model = output"> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:url" content="http://example.com/dgui_quickstart_basics.html"> |
| <link rel="canonical" href="http://example.com/dgui_quickstart_basics.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_basics.html"><span itemprop="name">Template + data-model = output</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","Template + data-model = output"];</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.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_quickstart_datamodel.html"><span>Next</span></a></div><div class="title-wrapper"> |
| <h1 class="content-header header-section1" id="dgui_quickstart_basics" itemprop="headline">Template + data-model = output</h1> |
| </div></div><p>Assume you need a HTML page in an e-shop application, similar to |
| this:</p> |
| |
| <div class="code-wrapper"><pre class="code-block code-output"><html> |
| <head> |
| <title>Welcome!</title> |
| </head> |
| <body> |
| <h1>Welcome <strong>Big Joe</strong>!</h1> |
| <p>Our latest product: |
| <a href="<strong>products/greenmouse.html</strong>"><strong>green mouse</strong></a>! |
| </body> |
| </html></pre></div><p>Let's say that the user name ("Big Joe" above) should depend on |
| who the logged in Web page visitor is, and the latest product should |
| come from a database and thus it potentially changes at any moment. In |
| this situation you can't just enter the user name nor the URL and name |
| of the latest product into the HTML, you can't use static HTML.</p><p>FreeMarker's solution for this problem is using a <strong>template</strong> instead of the static HTML. The |
| template is the same as the static HTML, except that it contains some |
| instructions to FreeMarker that makes it dynamic:</p> |
| |
| <div class="code-wrapper"><pre class="code-block code-template"><a name="example.first"></a><html> |
| <head> |
| <title>Welcome!</title> |
| </head> |
| <body> |
| <h1>Welcome <strong>${user}</strong>!</h1> |
| <p>Our latest product: |
| <a href="<strong>${latestProduct.url}</strong>"><strong>${latestProduct.name}</strong></a>! |
| </body> |
| </html></pre></div><p>The template is stored on the Web server, usually just like the |
| static HTML page would be. But whenever someone visits this page, |
| FreeMarker will step in and transform the template on-the-fly to plain |
| HTML by replacing the |
| <code class="inline-code">${<em class="code-color">...</em>}</code>-s with up-to-date |
| content (e.g., replacing <code class="inline-code">${user}</code> with Big Joe or |
| whoever the visitor is) and send the result to the visitor's Web |
| browser. So the visitor's Web browser will receive something like the |
| first example HTML (i.e., plain HTML without FreeMarker instructions), |
| and it will not perceive that FreeMarker is used on the server. The |
| template file itself (which is, again, stored on the Web server) is |
| not changed during this, so the transformation will happen again and |
| again for each visiting. This ensures that the displayed information |
| is always up-to-date.</p><p>Now, you may already noticed that the template contains no |
| instructions regarding how to find out who the current visitor is, or |
| how to query the database to find out what the latest product is. It |
| seems it just already know these values. And indeed that's the case. |
| An important idea behind FreeMarker (actually, behind Web MVC) is that |
| presentation logic and "business logic" should be separated. In the |
| template you only deal with presentation issues, that is, visual |
| design issues, formatting issues. The data that will be displayed |
| (such as the user name and so on) is prepared outside FreeMarker, |
| usually by routines written in Java language or other general purpose |
| language. So the template author doesn't have to know how these values |
| are calculated. In fact, the way these values are calculated can be |
| completely changed while the templates can remain the same, and also, |
| the look of the page can be completely changed without touching |
| anything but the template. This separation can be especially useful |
| when the template authors (designers) and the programmers are |
| different individuals.</p><p>While for FreeMarker (and for the template author) it's |
| not interesting <em>how</em> the data was calculated, |
| FreeMarker still have to know <em>what</em> the actual |
| data is. All the data that the template can use is packed into the so |
| called <strong>data-model</strong>. It's created by |
| the already mentioned routines that calculate the data. As far as the |
| template author is concerned, the data-model is a tree-like structure |
| (like folders and files on your hard disk), that in this case could be |
| visualized as:</p> |
| |
| <div class="code-wrapper"><pre class="code-block code-data-model">(root) |
| | |
| +- <strong>user</strong> = "Big Joe" |
| | |
| +- <strong>latestProduct</strong> |
| | |
| +- <strong>url</strong> = "products/greenmouse.html" |
| | |
| +- <strong>name</strong> = "green mouse"</pre></div><p>(To prevent misunderstandings: The data-model is not a text |
| file, the above is just a visualization of a data-model for you. It's |
| from Java objects, but let that be the problem of the Java |
| programmers.)</p><p>Compare this with what you seen in the template earlier: |
| <code class="inline-code">${user}</code> and |
| <code class="inline-code">${latestProduct.name}</code>. As an analogy, the data |
| model is something like the file system of computers: the root and |
| <code class="inline-code">latestProduct</code> correspond to directories (folders) |
| and the <code class="inline-code">user</code>, <code class="inline-code">url</code> and |
| <code class="inline-code">name</code> correspond to files. <code class="inline-code">url</code> |
| and <code class="inline-code">name</code> are in the |
| <code class="inline-code">latestProduct</code> directory. So |
| <code class="inline-code">latestProduct.name</code> is like saying |
| <code class="inline-code">name</code> in the <code class="inline-code">latestProduct</code> |
| directory. But as I said, it was just a simile; there are no files or |
| directories here.</p><p>To recapitulate, a template and a data-model is needed for |
| FreeMarker to generate the output (like the HTML shown first):</p><p><span class="marked-template">Template</span> + <span class="marked-data-model">data-model</span> = <span class="marked-output">output</span></p><div class="bottom-pagers-wrapper"><div class="pagers bottom"><a class="paging-arrow previous" href="dgui_quickstart.html"><span>Previous</span></a><a class="paging-arrow next" href="dgui_quickstart_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> |
