| <!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 - Apache 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="Apache FreeMarker Manual"> |
| <meta property="og:title" content="Template + data-model = output"> |
| <meta property="og:locale" content="en_US"> |
| <meta property="og:url" content="https://freemarker.apache.org/docs/dgui_quickstart_basics.html"> |
| <link rel="canonical" href="https://freemarker.apache.org/docs/dgui_quickstart_basics.html"> |
| <link rel="icon" href="favicon.png" type="image/png"> |
| <link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Roboto:500,700,400,300|Droid+Sans+Mono"> |
| <link rel="stylesheet" type="text/css" href="docgen-resources/docgen.min.css?1707770044859"> |
| <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cookie-bar/cookiebar-latest.min.js"></script> |
| </head> |
| <body itemscope itemtype="https://schema.org/Code"> |
| <meta itemprop="url" content="https://freemarker.apache.org/docs/"> |
| <meta itemprop="name" content="Apache FreeMarker Manual"> |
| |
| <!--[if lte IE 9]> |
| <div class="oldBrowserWarning" style="display: block"> |
| Unsupported web browser - Use a modern browser to view this website! |
| </div> |
| <![endif]--> <div class="oldBrowserWarning"> |
| Unsupported web browser - Use a modern browser to view this website! |
| </div> |
| <div class="header-top-bg"><div class="site-width header-top"><div id="hamburger-menu" role="button"></div> <div class="logo"> |
| <a href="https://freemarker.apache.org" role="banner"><img itemprop="image" src="logo.png" alt="FreeMarker"></a> </div> |
| <ul class="tabs"><li><a href="https://freemarker.apache.org/">Home</a></li><li class="current"><a href="index.html">Manual</a></li><li><a class="external" href="api/index.html">Java API</a></li></ul><ul class="secondary-tabs"><li><a class="tab icon-heart" href="https://freemarker.apache.org/contribute.html" title="Contribute"><span>Contribute</span></a></li><li><a class="tab icon-bug" href="https://issues.apache.org/jira/projects/FREEMARKER" title="Report a Bug"><span>Report a Bug</span></a></li><li><a class="tab icon-download" href="https://freemarker.apache.org/freemarkerdownload.html" title="Download"><span>Download</span></a></li></ul></div></div><div class="header-bottom-bg"><div class="site-width search-row"><a href="index.html" class="navigation-header">Manual</a><div class="navigation-header"></div><form method="get" class="search-form" action="search-results.html"><fieldset><legend class="sr-only">Search form</legend><label for="search-field" class="sr-only">Search query</label><input id="search-field" name="q" type="search" class="search-input" placeholder="Search" spellcheck="false" autocorrect="off" autocomplete="off"><button type="submit" class="search-btn"><span class="sr-only">Search</span></button></fieldset></form></div><div class="site-width breadcrumb-row"> <div class="breadcrumbs"> |
| <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">Apache 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> |
| <div class="bookmarks" title="Bookmarks"><span class="sr-only">Bookmarks:</span><ul><li><a href="alphaidx.html">Alpha. index</a></li><li><a href="gloss.html">Glossary</a></li><li><a href="dgui_template_exp.html#exp_cheatsheet">Expressions</a></li><li><a href="ref_builtins_alphaidx.html">?builtins</a></li><li><a href="ref_directive_alphaidx.html">#directives</a></li><li><a href="ref_specvar.html">.spec_vars</a></li><li><a href="app_faq.html">FAQ</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 = ["Apache FreeMarker Manual","Template Author\'s Guide","Getting Started","Template + data-model = output"];</script> |
| <script src="toc.js?1707770044859"></script> |
| <script src="docgen-resources/main.min.js?1707770044859"></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>Let's assume that you need a HTML page on a website, similar to |
| this:</p> |
| |
| <div class="code-block role-output"> |
| <div class="code-block-label">Output</div><pre class="code-block-body"><html> |
| <head> |
| <title>Welcome!</title> |
| </head> |
| <body> |
| <h1>Welcome <strong>John Doe</strong>!</h1> |
| <p>Our latest product: |
| <a href="<strong>products/greenmouse.html</strong>"><strong>green mouse</strong></a>! |
| </body> |
| </html></pre> </div> |
| <p>But the user's name ("John Doe" above) depends on who the |
| logged-in user is, and the latest product information should come from |
| a database. Because this data changes, you cannot use static HTML. |
| Instead, you can use a <strong>template</strong> of |
| the desired output. The template is the same as the static HTML would |
| be, except that it contains some instructions to FreeMarker that makes |
| it dynamic:</p> |
| |
| <div class="code-block role-template"> |
| <div class="code-block-label">Template</div><pre class="code-block-body"><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, 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. (Of course, the |
| template file stored on the Web server is not changed by this; the |
| substitutions only appear in the Web server's response.)</p><p>Note that the template doesn't contain the programming logic to |
| find out who the current visitor is, or to query the database to get |
| the latest product. The data to be displayed is prepared outside |
| FreeMarker, usually by parts written in some "real" |
| programming language like Java. The template author needn't know how |
| these values were calculated. In fact, the way these values are |
| calculated can be completely changed while the templates can remain |
| exactly the same, and also, the look of the page can be completely |
| changed without touching anything but the template. This separation of |
| presentation logic and business logic can be especially useful when |
| the template authors (designers) and the programmers are different |
| individuals, but also helps managing application complexity if they |
| are the same person. Keeping templates focused on presentation issues |
| (visual design, layout and formatting) is a key for using template |
| engines like FreeMarker efficiently.</p><p>The totality of data that was prepared for the template |
| is called the <strong>data-model</strong>. As far as |
| the template author is concerned, the data-model is a tree-like |
| structure (like folders and files on your hard disk), which, in this |
| case, could be visualized as:</p> |
| |
| <div class="code-block role-data-model"> |
| <div class="code-block-label">Data Model</div><pre class="code-block-body">(root) |
| | |
| +- <strong>user</strong> = "Big Joe" |
| | |
| +- <strong>latestProduct</strong> |
| | |
| +- <strong>url</strong> = "products/greenmouse.html" |
| | |
| +- <strong>name</strong> = "green mouse"</pre> </div> |
| <div class="callout note"> |
| <strong class="callout-label">Note:</strong> |
| |
| <p>The above is just a visualization; the data-model is not in a |
| textual format, it's from Java objects. For the Java programmers, |
| the root is perhaps a Java object with <code class="inline-code">getUser()</code> |
| and <code class="inline-code">getLatestProduct()</code> methods, or maybe a Java |
| <code class="inline-code">Map</code> with <code class="inline-code">"user"</code> and |
| <code class="inline-code">"latestProducts"</code> keys. Similarly, |
| <code class="inline-code">latestProduct</code> is perhaps a Java Object with |
| <code class="inline-code">getUrl()</code> and <code class="inline-code">getName()</code> |
| methods.</p> |
| </div> |
| <p>Earlier, you have picked values from this data-model, with the |
| <code class="inline-code">user</code> and <code class="inline-code">latestProduct.name</code> |
| expressions. If we go on with the analogy that the data model is like |
| a file system, then "(root)" and |
| <code class="inline-code">latestProduct</code> correspond to directories (folders), |
| and <code class="inline-code">user</code>, <code class="inline-code">url</code> and |
| <code class="inline-code">name</code> are files in those directories.</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 class="column"><h3 class="column-header">Overview</h3><ul><li><a href="https://freemarker.apache.org/">What is FreeMarker?</a></li><li><a href="https://freemarker.apache.org/freemarkerdownload.html">Download</a></li><li><a href="app_versions.html">Version history</a></li><li><a href="app_faq.html">FAQ</a></li><li><a itemprop="license" href="app_license.html">License</a></li><li><a href="https://privacy.apache.org/policies/privacy-policy-public.html">Privacy policy</a></li></ul></div><div class="column"><h3 class="column-header">Often used / Reference</h3><ul><li><a href="https://try.freemarker.apache.org/">Try template online</a></li><li><a href="dgui_template_exp.html#exp_cheatsheet">Expressions cheatsheet</a></li><li><a href="ref_directive_alphaidx.html">#directives</a></li><li><a href="ref_builtins_alphaidx.html">?built_ins</a></li><li><a href="ref_specvar.html">.special_vars</a></li><li><a href="api/freemarker/core/Configurable.html#setSetting-java.lang.String-java.lang.String-">Configuration settings</a></li></ul></div><div class="column"><h3 class="column-header">Community</h3><ul><li><a href="https://github.com/apache/freemarker">Github project page</a></li><li><a href="https://issues.apache.org/jira/projects/FREEMARKER">Report a bug</a></li><li><a href="https://freemarker.apache.org/report-security-vulnerabilities.html">Report security vulnerability</a></li><li><a href="https://stackoverflow.com/questions/ask?tags=freemarker">Get help on StackOverflow</a></li><li><a href="https://twitter.com/freemarker">Announcements on Twitter</a></li><li><a href="https://freemarker.apache.org/mailing-lists.html">Discuss on mailing lists</a></li></ul></div></div><div class="col-right"><ul class="social-icons"><li><a class="github" href="https://github.com/apache/freemarker">Github</a></li><li><a class="twitter" href="https://twitter.com/freemarker">Twitter</a></li><li><a class="stack-overflow" href="https://stackoverflow.com/questions/ask?tags=freemarker">Stack Overflow</a></li></ul><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="2024-02-12T20:34:04Z" title="Monday, February 12, 2024 at 8:34:04 PM Greenwich Mean Time">2024-02-12 20:34:04 GMT</time>, for Freemarker 2.3.32 </p> |
| <p class="copyright"> |
| © <span itemprop="copyrightYear">1999</span>–2024 |
| <a itemtype="http://schema.org/Organization" itemprop="copyrightHolder" href="https://apache.org/">The Apache Software Foundation</a>. Apache FreeMarker, FreeMarker, Apache Incubator, Apache, the Apache FreeMarker logo are trademarks of The Apache Software Foundation. All other marks mentioned may be trademarks or registered trademarks of their respective owners. </p> |
| </div></div></div></body> |
| </html> |
