Creating Dynamic Pages With Scriptlets and Expressions

VoodooPad 5 has some new abilities for dynamically changing or adding to pages when exporting a document as HTML, PDF, or ePub. Scriptlets are small snippets of code written in JavaScript that run when you export your document. If you are familiar with PHP or Java Server Pages, then you'll be right at home.

Scriptlets

A scriptlet is a bit of JavaScript code between <% %> tags. Scriptlets may contain multiple lines, and must conform to JavaScript syntax. Here is a simple scriptlet that prints out the current year:

<%
    var year = new Date().getFullYear();
    writer.write("The current year is: " + year);
%>

In this example you declare a new variable named "year", and assign it the value of the current year. Observe that there is an object called "writer". Writer represents the output of your page, and when you pass it a string it will add the text to your page. In addition to the write() method, there is also writeln() which appends the text with a newline on the end, and writePageWithKey(), which will then append the contents of the page name given.

You can also perform loops in a scriptlet:

<%
    var i = 1;
    while (i <= 5) {
        writer.writeln("This is line #" + i + "&lt;/br&gt;");
        i++;
    }
%>

Which will produce the output:

This is line #1 This is line #2 This is line #3 This is line #4 This is line #5

Expressions

The <%= %> tag is called an Expression. An expression contains a single JavaScript expression which is evaluated and then inserted as a string into the page. You can think of it as a single line of code, but without a semicolon at the end.

Here are a some examples of expressions you can use in your page:

The current page is:

<%= page.displayName() %>

The name of this document is:

<%= document.lastComponentOfFileName() %>

5 + 6 is:

<%= 5 + 6 %>

You can also mix scriptlets and expressions together:

<%
    var i = 1;
    while (i < 5) {
%>
This is line # <%= i %>
<%
        i++;
    }
%>

Comments

You can write a comment in a page like so:

<%-- This text right here? It won't be included with the export! --%>

You can use this to write yourself notes in a VoodooPad document, and they will be removed when exporting.

Escaped HTML Tags

If you want to write straight HTML in your page, you can do so with the escape tags: <%' '%> tags. For example, if you wanted to make a HTML link to plausible.coop:

<%'<a href="http://plausible.coop">plausible.coop</a>'%>

Common Code

If you have common methods you would like to use in your scriptlets, you can put them all in a page named VPJSPrefixScript. This is a special page that will be run before scriptlets are run.

Context Type and Destination

You can also determine if code in your scriptlet should be run based on if it's going to a PDF file, HTML export, or even ePub. The writer object has two methods that will be useful for you: writer.destination() and writer.contextType(). Both methods return a string and have the following behaviors:

• PDF Export: destination and contextType return "pdf".
• Web Export: destination returns "web" and contextType returns "html"
• ePub Export: destination returns "epub" and contextType returns "html"

If you have a bit of code that you only want run when exporting for the web, you would do this:

if (writer.destination() == "web") {
    // Fancy code or text here
}

But if you wanted it to be executed for both web export and ePub, but not PDF, you would do this:

if (writer.contextType() == "html") {
    // Fancy code or text here
}

The Writer Class

The examples above have been using a javascript object called "writer". This is an object provided by VoodooPad for assisting in the scripts. Its public methods are as follows:

writer.write(string);

This the write() method takes a single string, and will output it to whatever context is currently available (PDF, HTML, ePub).

writer.writeln(string);

This the writeln() method is similar to the write method, with the exception that it will append a newline to the output.

writer.writePageWithKey(pageName);

This the writePageWithKey() method will take the contents of the page name given, and print the contents of it to the current context.

writer.startNewPage();

This the startNewPage() method will add a page break to a PDF context. For other contexts it will do nothing.

writer.destination();

This the destination() method lets you know where the current context is outputing to. "epub" is returned if the output is to an ePub, "web" for HTML export, and "pdf" for output to PDF files.

writer.contextType();

This the contextType() method will return "html" for both export to web and ePub export, and "pdf" for output to PDF files.