Federico Ponchio

research

coding

curriculum

life

HTML templates in C++ using Javascript

There are several solutions to the problem of HTML templates in C++: solutions but i like none of them.

The main reason is that all of them define a custom set of tags (each one different than the other>) and I am quite lazy and I would rather avoid the effort of learning what basically is a new language. Another problem with this approach is that this new language is quite limited: the library has to provide you with all the functions you might need for processing your data.

Compare this with PHP or JSP where you have a full grown language to work with and you are allowed functions and arbitrary code. I would like to have something similar.

In the following you can find my solution, it is little more than a proof of concept. For the impatients, you can download the .h here.

Update: I just discovered my solution is basically what Ajax Pages and EJS do, the difference is I parse the template in C++ and process it in a Javascript engine, while they work entirely in Javascript.

In the Qt framework you have a Javascript engine (QScriptEngine), why not use it? The idea is simple: you take a template like this (jsp, or php style):

<div><?=name?></div>
<? if(birthdate) { ?>
Born on: <?=birthdate?>
<? } ?>

and turn it into something like this:

function() { 
  var str = "";
  str += "<div>"
  str += name;
  str += "</div>";
  if(birthdate) { 
    str += "Born on: ";
    str += birthdate;
  }
  return str;
}

Once we have it as a Javascript function is trivial to evauate and call using QScriptEngine.

Here is the definition of the jtemplate class that does all of this it is just a .h file and you can download it here

class JTemplate {
 public:
  JTemplate(QScriptEngine *e = NULL): engine(e) {}
  void setTemplate(QString tpl);
  bool loadFromFile(QString path);
  QString apply(QScriptValue &variables);

 protected:
  QScriptEngine *engine;
  QScriptValue code; //the function created out
  QString js;
  
  void preprocess(QString tpl);
  QString escape(QString s);
};

Usage

QScriptEngine *engine = new QScriptEngine;

JTemplate tpl(engine);
tpl.loadFromFile("mytemplate.tpl");

QScriptValue vars = engine->newObject();
vars.setProperty("name", "Mario Rossi");
vars.setProperty("birthday", "27 January 1972");

QString result = tpl.apply(vars);

In the template you can use only the variables provided through vars.

Pros:

  • php/jsp like syntax, well known and lightweight
  • powerful: all of Javascript a your disposal
  • no need to learn another language. If you code HTML, you know Javascript.
  • just add .h file to your project, no dependencies

Cons:

  • You need Qt (is it actually a cons? you should already be using it :p)
  • Since the code do not parse javascript you can't use '<?' or '?>' inside strings.

I bet there is a way (I didn't even look) to have PHP or JAVA embedded into your applications, but sinve I already use Qt I find this more convenient