Tutorial - Hello World Program

Welcome to the world of Candle

I'm glad you've discovered Candle and decided to start learning it. I can ensure you that there'll be many exciting things to be discovered along the way.

Just a quick introduction on Candle. It stands for Common ApplicatioN Development LanguagE. It is an interpreted, cross-platform, open-source scripting language. It cleanly unifies core features in XSLT, XQuery, RELAX NG, XHTML, SVG and many other XML related technologies. It's strength is at processing hierarchical data, such as HTML, XML, JSON document. It can be used to develop both desktop and Internet applications.

So without further due, let's jump start on our first hello-world program.

First Hello-world Program

Below is the simplest hello-world program in Candle:
<?csp1.0?>
function main() {
  "Hello world from Candle!"
}
Try it yourself »
The first line "<?csp1.0?>" is the opening signature of Candle script. "csp" stands for Candle Script. "1.0" is the current version of Candle script.

The body of the program is just a simple main function with only one static text node in it. There are 4 types of routine in Candle, and what you've just seen in this hello-world program is a statement function. The other 3 types of routines are: expression function, template and method. You'll get to know the differences between these 4 types of routines along the way. The primary role of statement function is to construct markup nodes.

Unlike HTML or XML, text node in Candle has to be quoted with double-quote character explicitly.

You can click on the "Try it yourself" link above to see the result of this program. The result, as you expected, will just be a simple text string of "Hello world from Candle!".

Something More Interesting

So as you've seen, a hello-world program in Candle is really simple. Now let's do something more interesting.

You can add more HTML markup to the script, to make the output looks more fancy. You'll of course still has to follow Candle's markup syntax.
<?csp1.0?>
function main() {
  <div style="font-family:'Comic Sans MS'; font-weight:bold;
    color:blue; text-shadow:1px 2px 5px silver;">

    <font size="+2"> "Hello world from Candle!" </font>
  </div>
}
Try it yourself »

Something More Dynamic

So now you've seen how easy it is to add markup to the output. But is has been all static.

Let's see how we can generate more dynamic output:
<?csp1.0?>
function main() {
  <div style="font-family:'Comic Sans MS'; font-weight:bold;
    color:blue; text-shadow:1px 2px 5px silver;">
    <font size={now()?millisecond mod 9 + 1}>
      "Hello world from Candle at " { now() }
    </font>
  </div>
}
Try it yourself »
In the example, you can see that we firstly added a new font element with dynamic size attribute. The millisecond field of the current time is used as a pseudo-random number (which is not a very good one; it is used just to keep our example simple). In Candle, we use curly bracket {} to surround dynamic attribute value. If you run the above script in the on-line editor, you'll notice the the font size of the text changing, every time you click on the execute button.

Some dynamic text is added by using { now() }. The curly bracket {} at statement-level in Candle is similar to the value-of element in XSLT and enclosed expression in XQuery. It evaluates the expression in the bracket and output the result as a string.

Comment in Candle Script

Finally, before we delve into something more complicated in the following tutorials, its good to know the syntax for comment in Candle script. There are two kinds of comment syntax in Candle:
They are in analogy with //line comment and /*block comment*/ in C/C++, Java.
<?csp1.0?>
function main() {
  !! this is comment that extends to the end of the line
  <div style="font-family:'Comic Sans MS'; font-weight:bold;
    color:blue; text-shadow:1px 2px 5px silver;">
    <font size={now()?millisecond mod 9 + 1}>
      !* this is a block of comment
      it does not affect the output of this script
      *!
      "Hello world from Candle at " { now() }
    </font>
  </div>
}
Try it yourself »
That's pretty much for our first tutorial.