Templates and friends Course "Software Language Engineering" University of Koblenz-Landau Department of Computer Science Ralf Lämmel Software Languages Team © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 1 What’s a template? © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 2 “Hello World” with StringTemplate in Java String template with one parameter import org.stringtemplate.v4.*; ... ST hello = new ST("Hello, <name>"); hello.add("name", "World"); System.out.println(hello.render()); [http://www.antlr.org/wiki/display/ST4/Introduction, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 3 “Hello World” with StringTemplate in C# using Antlr4.StringTemplate; Template hello = new Template("Hello, <name>"); hello.Add("name", "World"); Console.Out.WriteLine(hello.Render()); [http://www.antlr.org/wiki/display/ST4/Introduction, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 4 “Hello World” with StringTemplate in Python import stringtemplate4 hello = stringtemplate4.ST("Hello, <name>") hello["name"] = "World" print str(hello.render()) [http://www.antlr.org/wiki/display/ST4/Introduction, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 5 Quick summary Exercised concepts A template is a declarative, Literal text parametrized, and executable Place holder for text description of a text generator. Other concepts Conditionals, loops over template “context” Expression holes for computing output ... Find a proper definition that fits into the context of this lecture. © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 6 Motivation: templates in web development © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 7 Web programming with PHP <htmlhtml> <headhead> <titletitle>HelloWorld WebApp</title/title> </head/head> <bodybody> <?php?php echoecho ''<pp>HelloHello World!World!</p/p>';'; ??> </body/body> </html> HTML with embedded PHP Resulting HTML executed on the web server rendered in the web browser © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 8 Web programming with Rails © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 9 Web programming with Rails <div class="headline"><h2>101companies Ruby on Rails Web App</h2></div> <div class="content"> <p id="notice"><%= notice %></p> <div class="attr"> <p> <b>Name:</b> <%= @company.name %> </p> </div> <div class="attr"> <p> <b>Departments:</b> </p> <% @company.departments.each do |department| %> "" <p> " <%= link_to department.name, department_path(department) %> "" </p> <% end %> </div> <%= link_to 'Edit', edit_company_path(@company) %> | <%= link_to 'Back', companies_path %> </div> [https://github.com/101companies/101repo/blob/master/contributions/rubyonrails/companies/app/views/companies/show.html.erb] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 10 Web programming with Struts/JSP ... <table id="box-table-a" summary="Employee Pay Sheet" border="1px" width="45%"> <thead> <tr> <th scope="col">Name</th> <th scope="col">Total Salary</th> Use of code delimiters <th scope="col">Cut salaries</th> <th scope="col">Show details</th> (not shown here) and tag </tr> </thead> <tbody> libraries (see prefix s). <s:iterator value="company.depts"> " <tr> " <td><s:property value="name"/></td> " <td><s:property value="total"/></td> ""<td><s:url id="cutURL" action="company.cutSalariesOfDepartment"> "" <s:param name="dptId" value="%{id}"/> <s:param name="cmpId" value="company.id"/> " </s:url> " <s:a href="%{cutURL}">Cut</s:a> </td> ... https://github.com/101companies/101repo/blob/master/contributions/strutsAnnotation/src/main/webapp/WEB-INF/content/company-detail.jsp © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 11 “Model to Text” with JET <%@ jet package="generator.website" class="Simple2HTML" imports ="java.util.Iterator org.eclipse.emf.common.util.EList datamodel.website.*;" %> <% Webpage website = (Webpage) argument; %> <html> <head> <title> <%=website.getTitle()%> </title> <meta name="description" content="<%=website.getDescription()%>"> <meta name="keywords" content="<%=website.getKeywords()%>"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> </head> <body> Similar to JSP. Works on top of EMF. <h1> List of Articles Names</h1> <%EList<Article> list = website.getArticles(); for (Iterator<Article> iterator = list.iterator(); iterator.hasNext();) { Article article = iterator.next();%> <b><%=article.getName()%></b> <br> Generative (MDE) approach such that <%}%> </body> a designated class is generated from </html> the template. http://www.vogella.com/articles/EclipseJET/article.html © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 12 “Model to Text” with JET import generator.website.Simple2HTML; Import generated class. import java.io.BufferedWriter; import java.io.FileWriter; import java.io.IOException; import java.util.Iterator; import datamodel.website.MyWeb; import datamodel.website.Webpage; Import EMF-based model classes. public class SimpleWebTest { private static String TARGETDIR = "./output/"; public static void main(String[] args) { EMFModelLoad loader = new EMFModelLoad(); MyWeb myWeb = loader.load(); createPages(myWeb); } private static void createPages(MyWeb myWeb) { ... } http://www.vogella.com/articles/EclipseJET/article.html © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 13 “Model to Text” with JET ... private static void createPages(MyWeb myWeb) { Simple2HTML htmlpage = new Simple2HTML(); FileWriter output; BufferedWriter writer; for (Iterator<Webpage> iterator = myWeb.getPages().iterator(); iterator .hasNext();) { Webpage page = iterator.next(); System.out.println("Creating " + page.getName()); try { output = new FileWriter(TARGETDIR + page.getName() + ".html"); writer = new BufferedWriter(output); writer.write(htmlpage.generate(page)); writer.close(); } catch (IOException e) { e.printStackTrace(); Actual template processing. } } } } http://www.vogella.com/articles/EclipseJET/article.html © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 14 Basic concepts © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 15 Template processor @ Wikipedia A template processor (also known as a template engine, template parser or template language) is software or a software component that is designed to combine one or more templates with a data model to produce one or more result documents. [http://en.wikipedia.org/wiki/Template_processor, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 16 Template engine @ Wikipedia A (web) template engine is software that is designed to process web templates and content information to produce output web documents. It runs in the context of a template system. [http://en.wikipedia.org/wiki/Template_engine_(web), 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 17 Actual template engines @ Wikipedia • Genshi • Mako (template A (templating engine) • Apache Velocity language) • Microsoft • ASP.NET H ASP.NET Razor • Thymeleaf • TinyButStrong C • Haml view engine • Toupl • CakePHP • Handlebars • Mustache (template system) (template system) • Twig (template • CCAPS engine) J N • CheetahTemplate V • CodeCharge • JavaServer • Nevow • Text Template Studio Pages O Transformation • CTPP • Jinja (template • Open Power Toolkit D engine) Template • VlibTemplate • JSP Weaver P • Dylan Server W Pages K • PHPRunner • Web template E • Kid (templating S system language) • ERuby • Smarty • WebMacro F L T • FreeMarker • Lithium (PHP • Template Attribute G framework) Language M • Template Toolkit [http://en.wikipedia.org/wiki/Category:Template_engines, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 18 Template system @ Wikipedia A web template system is composed of: • A template engine: the primary processing element of the system; • Content resource: any of various kinds of input data streams, such as from a relational database, XMLfiles, LDAP directory, and other kinds of local or networked data; • Template resource: web templates specified according to a template language; [http://en.wikipedia.org/wiki/Web_template_system, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 19 Template @ Wikipedia Wikipedia does not define a general concept of template. It does define the notion of a web template: “A web template is a tool used to separate content from presentation in web design, and for mass-production of web documents. It is a basic component of a web template system.Web templates can be used to set up any type of website. In its simplest sense, a web template operates similarly to a form letter for use in setting up a website.” [http://en.wikipedia.org/wiki/Web_template, 10 December 2012] © 2012 Ralf Lämmel, Software Language Engineering http://softlang.wikidot.com/course:sle 20 Template and friends Macros Compile-time meta-programming Run-time meta-programming Staged computation Multi-stage programming ©