FreeMarker Design Guide (1)

xiaoxiao2021-03-05 22

1, get started

(1) Template Data Model = Output

l FreeMarker is based on designers and programmers are the concepts of different individuals with different professional skills.

l They are division of labor: designers focus - create HTML files, pictures, other visualizations of the web page; programmers create the system, generate the data to display by the design page

l The problem that is often encountered is: Information displayed in the web page (or other type of document) is invalid when the design page is based on dynamic data.

l Here, you can add some specific instructions in HTML (or other you want to output), and FreeMarker will replace these code with the appropriate data when the output page gives the end user.

l The following is an example:

Welcome! </ Title> </ hEAD> <body> <h1> Welcome $ {user}! </ h1> Our Latest Product: <a href=" # llestproduct.ur }"> $ {limitedproduct.name} </a>! </ body> </ html> l This example is a specific code surrounded by a simple HTML. These specific code is a directive for FreeMarker, and a file containing the freemarker is called a template (Template) l As for User, LatestProduct.URL and LatestProduct.name from Data Model (Data Model) l The data model is created by programmer, providing changes to the template, which comes from the database, file, and even directly generates in the program. l Template designer doesn't care about data from there, I only know that the use of data models has been used. l The following is a possible data model: (root) | - user = "big joe" | - LatestProduct | - URL = "Products / Greenmouse.html" | - Name = "Green Mouse" l The data model is similar to the computer's file system. l When FreeMarker combines the above data model into the template, the following output is created: <html> <HEAD> <title> Welcome! </ Title> </ hEAD> <body> <H1> Welcome Big Joe! </ h1> Our Latest Product: <a href="products/greenmouse.html"> Green Mouse </a>! </ body> </ html> (2) Data model l The typical data model is a tree structure, which can be arbitrarily complex and deep, as described below: (root) | - Animals | | | | - MOUSE | | | | | | | - SIZE = "small" | | | | | | | - Price = 50 | | | | - ELEPHANT | | | | | | | - SIZE = "Large" | | | | | | | - Price = 5000 | | | | - Python | | | | - SIZE = "Medium" | | | | - price = 4999 | - Test = "IT IS A TEST" | - WhatNOT | - Because = "don't know" l Similar to the variable of the directory is called HASHES, including the only query name that saves subordinate variables l Similar to file variables are called Scalars, save single values l Scalars has two types: strings (enclosed with quotation marks, can be single or double quotes) and numbers (do not use quotes to enclose the numbers, this will be handled as a string) l Starting from root from root, all parts are separated from root, such as Animals.Mouse.price. l The other variable is SEQUENCES, and HASHES, but does not use the variable name, and the digital index is used, as described below: (root) | - Animals | | | | - (1st) | | | | | | | - Name = "mouse" | | | | | | | - SIZE = "small" | | | | | | | - Price = 50 | | | | - (2nd) | | | | | | | - Name = "ELEPHANT" | | | | | | | - SIZE = "Large" | | | | | | | - Price = 5000 | | | | - (3RD) | | | | - Name = "python" | | | | - SIZE = "Medium" | | | | - price = 4999 | - WhatNOT | - fruits | - (1st) = "Orange" | - (2nd) = "banana" l This use index for SCALARS, such as Animals [0] .name (3) Template L can include the following three specific portions in the FreeMarker template: Ø {...}: It is called Interpolations, freeMarker is replaced with actual values when output Ø FTL tag (FreeMarker Template Language Tag): Similar to the HTML tag, in order to distinguish between the HTML mark, use # start (starting with @, in the following description) Ø Note: Between <# - and -> (not <! - and ->) l The following is some examples of use instructions: Ø IF instruction <#if animals.python.price <animals.ephant.price> Pythons Are Cheace Than Elephants Today. <#else> Pythons Are Not Check Than Elephants Today. </ # if> Ø LIST instruction we have eachse animals: <table border = 1> <TR> <TH> Name <TH> Price <#List Animals As Being> <TR> <TD> $ {being.name} <td> $ {being.price} euros </ # list> </ table> The output is: we have eachse animals: <table border = 1> <TR> <TH> Name <TH> Price <TR> <TD> Mouse <TD> 50 EUROS <TR> <TD> Elephant <TD> 5000 EUROS <TR> <TD> Python <TD> 4999 EUROS </ table> Ø Include Directive <html> <HEAD> <title> test page </ title> </ hEAD> <body> <H1> Test Page </ h1> Blah Blah ... <#include "/copyright_footer.html"> </ body> </ html> Ø Use instructions together we have eachse animals: <table border = 1> <TR> <TH> Name <TH> Price <#List Animals As Being> <tr> <TD> <#if being.size = "large"> </ # if> $ {being.name} <#if being.size = "large"> </ # if> <TD> $ {being.price} euros </ # list> </ table> [ Click here to favor this article] Posted on November 02, 2004 1:23 AM HREF = "http://blog.9cbs.net/chenyun2000/services/pingback.aspx" Rel = "pingback" /> A 罡 published 2004-11-02 10:06 AM I am studying FreeMarker, I use it in my project, but the output of the Chinese information has become ??? this character, how to solve the Chinese problem? Flylyke Published 2004-11-03 11:52 PM FreeMarker's support for Chinese is very good. Variables can be used in Chinese. I may have a relationship with your spring. Flyyue Published 2004-11-30 11:21 am Use taglibs in the template of FreeMarker, always erroneous COULD NOT LOAD TAGLIB INFORMATION Underlying Cause: com.caucho.xml.xmlparseException: http://java.sun.com/dtd/web-app_2_3.dtd:1: Expected '<' At end of file I don't know how to solve it. Hotmail: flyyue@hotmail.com Riosober published 2004-12-16 11:01 am Well, Chinese problem, just add an encodingservletfilter, add the function of the Response object to set the character set: Response.setCharacterencoding ("GBK"); Categories: <code> Public class encodingservletfilter imports filter { Private logger logger = logger.getlogger (getclass ()); / ** * * Covering method: EncodingServletfilter.destroy * * * Function Description: Implementation. . . * * * @see javax.servlet.filter # destroy () * / Public void destroy () { Logger.info ("Release EncodingFilter complete!"); } / ** * * Covering method: EncodingServletFilter.dofilter * * * Function Description: Implementation. . . * * * @see javax.servlet.filter # DOFILTER (javax.servlet.servletRequest, * javax.servlet.ServletResponse, javax.servlet.filterchain * / Public void Dofilter (servletRequest arg0, servletresponse arg1, filterchain arg2) throws oews oException, servletexception { HTTPSERVLETREQUEST REQST = (httpservletRequest) arg0; Arg1.setcharacterenceRencoding ("GBK"); Arg0.SetChacTerencoding ("GBK"); Arg1.setContentType ("text / html; charset = GBK"); arg1.getwriter (). Write ("<! " Reqst.getRequesturi () "Start ->"); Try { Arg2.dofilter (arg0, arg1); } catch (exception e) { Logger.Error (Reqst.getRequesturi () "error:" E.getMessage ()); } Arg1.Getwriter (). Write ("<! - End ->"); } } / ** * * Coverage method: EncodingServletFilter.init * * * Function Description: Implementation. . . * * * @see javax.servlet.filter # init (javax.servlet.filterConfig) * / Public void init (filterconfig arg0) throws servletexception { Logger.info ("Load EncodingFilter!"); } } </ code></div><div class="text-center mt-3 text-grey"> 转载请注明原文地址:https://www.9cbs.com/read-38907.html</div><div class="plugin d-flex justify-content-center mt-3"></div><hr><div class="row"><div class="col-lg-12 text-muted mt-2"><h2 class="h6 mb-0 small"><a class="text-secondary" href="tag-2.html">9cbs</a></h2></div></div></div></div><div class="card card-postlist border-white shadow"><div class="card-body"><div class="card-title"><div class="d-flex justify-content-between"><div>New Post(0) </div><div></div></div></div><ul class="postlist list-unstyled"> </ul></div></div><div class="d-none threadlist"><input type="checkbox" name="modtid" value="38907" checked /></div></div></div></div></div><footer class="text-muted small bg-dark py-4 mt-3" id="footer"><div class="container"><div class="row"><div class="col">CopyRight © 2020 All Rights Reserved </div><div class="col text-right">Processed: 0.048, SQL: 9</div></div></div></footer><script src="./lang/en-us/lang.js?2.2.0"></script><script src="view/js/jquery.min.js?2.2.0"></script><script src="view/js/popper.min.js?2.2.0"></script><script src="view/js/bootstrap.min.js?2.2.0"></script><script src="view/js/xiuno.js?2.2.0"></script><script src="view/js/bootstrap-plugin.js?2.2.0"></script><script src="view/js/async.min.js?2.2.0"></script><script src="view/js/form.js?2.2.0"></script><script> var debug = DEBUG = 0; var url_rewrite_on = 1; var url_path = './'; var forumarr = {"1":"Tech"}; var fid = 1; var uid = 0; var gid = 0; xn.options.water_image_url = 'view/img/water-small.png'; </script><script src="view/js/wellcms.js?2.2.0"></script><a class="scroll-to-top rounded" href="javascript:void(0);"></a><a class="scroll-to-bottom rounded" href="javascript:void(0);" style="display: inline;"></a></body></html><script> var forum_url = 'list-1.html'; var safe_token = 'vqdkZcb0L2sbzjGHJX4Fm35H62dvpynJkEMlX_2FS9mgY1smzHq4NiC24xakoDfoz_2BJlo6cwBl3M_2B7LP18'; var body = $('body'); body.on('submit', '#form', function() { var jthis = $(this); var jsubmit = jthis.find('#submit'); jthis.reset(); jsubmit.button('loading'); var postdata = jthis.serializeObject(); $.xpost(jthis.attr('action'), postdata, function(code, message) { if(code == 0) { location.reload(); } else { $.alert(message); jsubmit.button('reset'); } }); return false; }); function resize_image() { var jmessagelist = $('div.message'); var first_width = jmessagelist.width(); jmessagelist.each(function() { var jdiv = $(this); var maxwidth = jdiv.attr('isfirst') ? first_width : jdiv.width(); var jmessage_width = Math.min(jdiv.width(), maxwidth); jdiv.find('img, embed, iframe, video').each(function() { var jimg = $(this); var img_width = this.org_width; var img_height = this.org_height; if(!img_width) { var img_width = jimg.attr('width'); var img_height = jimg.attr('height'); this.org_width = img_width; this.org_height = img_height; } if(img_width > jmessage_width) { if(this.tagName == 'IMG') { jimg.width(jmessage_width); jimg.css('height', 'auto'); jimg.css('cursor', 'pointer'); jimg.on('click', function() { }); } else { jimg.width(jmessage_width); var height = (img_height / img_width) * jimg.width(); jimg.height(height); } } }); }); } function resize_table() { $('div.message').each(function() { var jdiv = $(this); jdiv.find('table').addClass('table').wrap('<div class="table-responsive"></div>'); }); } $(function() { resize_image(); resize_table(); $(window).on('resize', resize_image); }); var jmessage = $('#message'); jmessage.on('focus', function() {if(jmessage.t) { clearTimeout(jmessage.t); jmessage.t = null; } jmessage.css('height', '6rem'); }); jmessage.on('blur', function() {jmessage.t = setTimeout(function() { jmessage.css('height', '2.5rem');}, 1000); }); $('#nav li[data-active="fid-1"]').addClass('active'); </script>