Creating a Template for Pages using Mustache - tooltwist/documentation GitHub Wiki

A Mustache Page allows you define what will be in the generated code, other than what is defined in the Designer. In most cases it defines the

There is no specific requirement to generate JSP code, however at this stage the output will be written to a JSP file (Oct 2013).

With a regular widget, the user is often allowed to edit the CSS, Javascript and Mustache template. For pages however this is not allowed, or else every page would have it's own template, etc. To provide consistency and reduce maintenance, the same page definition should be used for many pages. To do this, all pages of the same type share a single definition, provided by a widget that is not normally shown in the Designer - a silent widget.

When the user uses the New... menu to create a new Mustache Page, the newly created conf.xml will contain the reference to the silent widget.

Steps

Step 1 - The menu widget

First we create a widget that will be shown as an option when creating new widgets. For example:

2016-08-23_15-42-45

  1. To create this menu option, select File->New... and then Mustache Widget. Enter a new name, such as myprojectPage_template.

  2. Edit conf.xml:

     <widget>
   <widgetType>template</widgetType>
   <linkedWidget>drinkcircle.pages.myprojectPage</linkedWidget>
   <label>Drink Circle Page</label>
   <description>Create a new page that uses the Mustache template language. See http://mustache.github.io for details.</description>
 </widget>

Be sure to replace myproject with your project name, or some other widget name.

Step 2 - Create an invisible widget for cloning

Here we create a page widget that will be invisible (silent), but will be cloned to form new pages.

  1. Select File->New... and then Mustache Widget. Enter a new name, such as myprojectPage.

  2. Edit conf.xml to match the following:

     <widget>
 <!--
   <widgetType>silent</widgetType>
 -->
   <widgetClass>tooltwist.wbd.MustachePageWidget</widgetClass>
   <editableSnippet>
     <name>template.mustache</name>
   </editableSnippet>
   <editableSnippet>
     <name>input.json</name>
   </editableSnippet>
   <editableSnippet>
     <name>cssHeader.css</name>
   </editableSnippet>
   <editableSnippet>
     <name>jsHeader.js</name>
   </editableSnippet>
   <editableSnippet>
     <name>conf.xml</name>
   </editableSnippet>
 </widget>

  3. Create template.mustache

     [[^PAGE:DESIGNER_MODE]]<!DOCTYPE html>
 <%@page contentType="text/html; charset=UTF-8"%>
 <%@page errorPage="../tooltwist/basic/error.jsp"%>
 <%@page import="java.text.DateFormat"%>
 <%@page import="tooltwist.misc.DateUtils"%>
 <%@page import="tooltwist.misc.JspHelper"%>
 <%@page import="tooltwist.ecommerce.RoutingUIM"%>

 <%@page import="java.io.FileReader"%>
 <%@page import="java.util.HashMap"%>
 <%@page import="java.util.Iterator"%>
 <%@page import="java.util.Properties"%>

 <%@page import="com.dinaa.data.XData"%>
 <%@page import="com.dinaa.ui.UimData"%>
 <%@page import="com.dinaa.xpc.XpcSecurity"%>

 <%@page import="tooltwist.ecommerce.RoutingUIM"%>
 <%@page import="tooltwist.wbd.SnippetParam"%>
 <%@page import="tooltwist.wbd.WbdException"%>
 <%@page import="tooltwist.wbd.WbdRadioTextProperty"%>
 <%@page import="tooltwist.wbd.WbdRenderHelper"%>
 <%@page import="tooltwist.wbd.WbdSizeInfo"%>
 <%@page import="tooltwist.wbd.WbdStringProperty"%>
 <%@page import="tooltwist.wbd.WbdSession"%>
 <%@page import="tooltwist.wbd.WbdProductionHelper"%>
 <%@page import="tooltwist.wbd.WbdCache"%>
 [[PAGE:importCode]] 
 <%
   String jspName = "drinkcircle-page";
   JspHelper jh = JspHelper.getJspHelper(pageContext, jspName);
 [[&PAGE:preFetchCode]]
 %>
 <html>
   <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>[[PAGE:pageTitle]]</title>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta name="description" content="[[PAGE:descriptionMetatag]]">
     <meta name="keywords" content="[[PAGE:keywordMetatag]]">
     <meta name="generator" content="ToolTwist"/>

     <link rel="icon" type="image/x-icon" href="//dbgw6333l9sbi.cloudfront.net/curia-studylane/curia.studylane.images.favicon.ico">
 [[#PAGE:canonicalUrl]]  
     <link rel="canonical" href="\[\[PAGE:canonicalUrl]]">  
 [[/PAGE:canonicalUrl]]  
     <!-- Bootstrap -->
     <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
     <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-T8Gy5hrqNKT+hzMclPo118YTQO6cYprQmhrYwIiQ/3axmI1hQomh7Ud2hPOy8SP1" crossorigin="anonymous">

 [[#NOTYET]]
     <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
     <!--[if lt IE 9]>
       <script src="../../assets/js/html5shiv.js"></script>
       <script src="../../assets/js/respond.min.js"></script>
     <![endif]-->
 [[/NOTYET]]

 [[&PAGE:headerCode]]
   </head>
   <body>
 [[&PAGE:topCode]]
 [[/PAGE:DESIGNER_MODE]]


 [[#DESIGNER_MODE]]
 <div class="ttDesigner-region-label">before page</div>
 [[/DESIGNER_MODE]]
 [[&CHILD-FLOW-before-page]]


 [[#DESIGNER_MODE]]
 <div class="ttDesigner-region-label">body</div>
 [[/DESIGNER_MODE]]
 [[&CHILD-FLOW-body]]


 [[#DESIGNER_MODE]]
 <div class="ttDesigner-region-label">after-page</div>
 [[/DESIGNER_MODE]]
 [[&CHILD-FLOW-after-page]]



 [[^PAGE:DESIGNER_MODE]]
     <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
     <script   src="https://code.jquery.com/jquery-3.1.0.min.js"   integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s="   crossorigin="anonymous"></script>
     <!-- Include all compiled plugins (below), or include individual files as needed -->
     <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
   </body>
 [[&PAGE:bottomCode]]
 </html>
 [[/PAGE:DESIGNER_MODE]]

  4. Create the thumbnail in the widget directory.

For example, as .../.tooltwist/webdesign-projects/drinkcircle-webdesign/widgets/drinkcircle_pages/responsivePage_template/.scratch_philipcallender/THUMBNAIL.png. If you don't have an image already, you can base it off this one:

thumbnail

Step 3 - Kill, then restart the server

There was been a bug in old versions of the Designer that prevented Misc->Reload Cache from working properly.

The workaround is to kill the Tomcat server and restart it from scratch. If you are using the CLI command (``tooltwist designer) to run the Designer, press control-C` to kill the server, then run the command again. If you are running the Designer from inside Eclipse, kill the server from the debug view, then restart it.

Step 4 - Finishing Up

Try creating new widgets from the File->New... menu using your new page option.

Once you are sure it is running correctly, edit conf.xml for your _template widget and remove the comment from around <widgetType>silent</widgetType>. Save the file, kill the server. Next time you go into the Designer, your option to create a new page widget will be visible in File->New..., but the template will not be visible under the list of navpoints.

Page Template Variables

There are a few important parts to the page's template/mustache:

  1. In Designer mode, the page must not include any Javascript or CSS that will corrupt the Designer. The DESIGNER_MODE variable can be used to determine the mode, as shown below.

  2. Code produced by any "Code Inserters" can be accessed via:

     PAGE:importCode  
 PAGE:preFetchCode  
 PAGE:headerCode  
 PAGE:topCode  
 PAGE:bottomCode

  3. Details of the navpoint and page are provide by:

     PAGE:navpointId  
 PAGE:pageWidget  
 PAGE:pageTitle  
 PAGE:descriptionMetatag  
 PAGE:keywordMetatag  
 PAGE:canonicalUrl

  4. Drop area on the page can be added using the following code:

     [[#DESIGNER_MODE]]
 <div class="ttDesigner-region-label">before page</div>
 [[/DESIGNER_MODE]]
 [[&CHILD-FLOW-before-page]]

These get displayed with a bright magenta title bar, followed by an area where other widgets can be dropped.

2016-08-23_15-58-10

Add a custom footer
⚠️ **GitHub.com Fallback** ⚠️