Frink Server Pages

Documentation * What's New * FAQ * Download * Frink Applet * Web Interface * Sample Programs * Frink on Android * Donate

What are Frink Server Pages?

Frink Server Pages allows you to embed snippets of Frink code into an HTML document to give your web applications all the power of Frink. The server processes the Frink code quickly and delivers interactive applications with very little coding. It's similar to other server-side technologies as Active Server Pages, Java Server Pages, Cold Fusion, or PHP. But, being Frink, it's even more fun, and you can often write your program even more concisely and powerfully.

Sample Applications

The following are simple applications to test Frink functionality, and to show you what FSP code looks like. The Frink code in each example is highlighted by a Frink Server Page. In most examples, the majority of the file is just HTML.

Hello World plus more. [View source]
Model Solar System calculator. [View source]
Mandelbrot Set Generator. [View source]
An FSP-based Frink interface. [View source]
Name frequency calculation. [View source]
Historical currency conversions. [View source]
Unicode character test. [View source]
Unicode torture test (Warning: VERY large and slow!) [View source]
Chinese number drill [View source]
Chinese number worksheet generator [View source]
Frink equation solver [View source]
Equation grapher [View source]
Sun Locator [View source]
Moon Locator [View source]
Random Name Generator [View source]
Geocaching/Navigation Tools [View source]
numberCheckerboard (renders graphics!) [View source]
FSP Syntax Highlighter [View source]

What does it take to run Frink Server Pages?

Frink Server Pages are based on the Java Servlet API. If you have a web server that can run Java Servlets, you can run Frink Server Pages. Just install the frink.war file into your web server. (See your server's documentation for required steps.)

In the .war file's web.xml file, there's a fsp-root initialization parameter indicating where Frink Server Pages should be loaded from. You'll probably need to modify this.

What does FSP code look like?

Embedded into your HTML, you add simple tags that surround Frink code. These tags are interpreted and removed by the server before the HTML is sent to the client. The client only sees normal HTML.

The print[] and println[] commands, when used in an FSP page, print to the web server's output stream. Tags are processed from top to bottom.

Code Tags

The tags <% %> surround an arbitrary block of Frink code. The following prints the numbers from 1 to 10 in the client's browser:

<%
 for [a] 1 to 10
    println["Line $a<BR>"]
%>

Evaluate-and-Print tags

As a shortcut, the tags <%= %> (note that equals sign) evaluate an expression and print its value into the server's output at that point.

Alan was born <%= now[] - #1969-08-19 04:54 PM Mountain# -> "days" %> ago.

Inline Variable Interpolation

In your HTML, you can precede a variable name with a dollar sign ($) and it will be replaced with its value. For example, if the variable name contains "Kotter", the following will display the name right in the HTML document. This saves a couple of keystrokes, and possibly improves speed and readability.

<P>Welcome back, $name!</P>

If you need to indicate where the variable name ends, or if your variable name contains Unicode escapes like \u210f for the the micro prefix µ, you must enclose the whole variable name in curly braces, like ${name} .

Since a variable name must begin with a letter, it's fine to put a quantity like $2.00 into the string, and no substitution will be attempted, and there will be no runtime performance penalty. To put a literal dollar sign into the string immediately preceding an alphabetic character, use two dollar signs:

In Frink Server Page:
"I want my $$USD 2.00. Plus tip."
Produces output:
I want my $USD 2.00. Plus tip.

For best performance, don't use double dollar signs like this unless they directly precede a letter character.

Receiving Input

For now, input from web forms is placed into a variable with the same name as the form field. If the variable has a single value, the variable will contain a single string. If the variable has multiple values, the variable will contain an array of strings.

Unicode

To support internationalization and flexibility, Frink uses Unicode throughout.

Frink Server Pages are sent out with default charset=UTF-8 encoding. This should allow display of all Unicode characters without any work on your part if your browser and font support it.

As anywhere in Frink, you may use Unicode escapes like \u210f anywhere in the HTML page or in Frink variable names and identifiers, or in quoted strings.

Directives

You may need to set some directives to control the output of the page. Directives should be at the beginning of the document and are enclosed in <%@ %> brackets and consist of name="value" pairs. The current parameters are:

contentType The MIME type of the output, e.g. "text/html" (the default) or "text/plain".
Do not include the charset= attribute here; specify that with pageEncoding.
pageEncoding The output encoding that will be used when creating the output stream. This can be any character set encoding that your version of Java supports, e.g. "UTF-8" (the default) or "ISO-8859-1"
persistentIf set to "true" (quotes are required,) variables will persist across invocations of the page for the session.

A page that supports wireless Palm VII devices must begin with the following:

<%@ contentType="text/html" pageEncoding="ISO-8859-1" %>

Rendering Graphics

Frink Server Pages can render graphics that will be sent to the browser on demand. These graphics are rendered in memory, without the need for saving temporary image files on your web server (which fill up drives, and need to get cleaned up, and may never be requested, etc.)

There are only a few simple things to remember when rendering graphics:

  1. In the directives block at the beginning of your page, set the contentType to the MIME type of the image you're going to send, for example contentType="image/png".
  2. In the directives block, also set pageEncoding="raw" to send out bytes without modification. This is also necessary for rendering to SVG or HTML5, which will actually be sent out with a UTF-8 encoding! Your directives block may look like:

    <%@ contentType="image/png" pageEncoding="raw" %>

  3. Draw your graphics as usual to a graphics object. See the Graphics section of the documentation for details on how to draw graphics.
  4. Render your graphics using the method graphics.writeFormat["-", format, width, height]. For example:

    g.writeFormat["-", "png", 1000, 600]

    Make sure that the format you're rendering to matches the contentType declaration sent out earlier! The "-" renders its output directly to the data stream going to the browser, instead of to an image file.

  5. Don't perform any other output, or it will corrupt your binary image data! That is, make sure all of your code is in a <%   %> block!

The following complete FSP page demonstrates rendering a black circle. Perhaps you can come up with something more clever.

<%@ contentType="image/png" pageEncoding="raw" %>
<%
  g = new graphics
  g.fillEllipseCenter[0,0,1,1]
  g.writeFormat["-", "png", 600, 600]
%>

The numberCheckerboard.fsp sample program demonstrates drawing a random checkerboard. See its output.


Comments/questions to Alan Eliasen