HFL Tutorial
- The purpose of these tutorials is to help you get comfortable with the HFL language.
- The first thing to understand is that HFL is a hybrid of javascript, CSS, HTML attributes, and HTML tags.
- These tutorials do not assume that you are familiar with any of these languages, and so present the syntax and features as if this is your first exposure to them.
- However if you are familiar with these languages, you should find learning to use HFL pretty easy as it is basically a superset of all of them.
- If you have not yet installed HFL, you will need to do so before you can continue with the tutorials. For instructions on how to install, see the section on "Installing HFL" .
- These tutorials also assume that you know how to run a program from the Windows command shell (cmd.exe), and how to navigate to the folder containing your source files in order to run the compiler. If you do not know how to do this, see the section on "Compiling HFL Files" .
A 'Hello World' example
- To start we will create the classic "Hello World" example (give or take), the standard for a first step in learning a new language.
- As a first try, we will build the entire page in HFL, using the 'create' scope, which builds HTML structure for each inner scope tag and its descendents.
-
STEPS:
- Open a new file in a text editor
-
Enter the following into the file:
-
<\
create {
html {
head {
}
body { background-color:white;
"Jello Whirled!"
}
}
}
\>
-
- Save the file as 'hello.hfl'
-
In a command window, enter the following:
-
hflc hello.hfl hello.html
- This will invoke the HFL compiler and compile the file. The messages in the command line should look something like this:
-
HyperText Formatting Language Compiler 0.2.14.2 (9/4/16) WIN
Copyright (c) 2009-2016 D. L. Gipson All Rights Reserved.
Compiling "hello.hfl"
Outputting to "hello.html"
Created 9 cells
- The generated output file 'hello.html' will look like this:
-
<html>
<head></head>
<body style="background-color:white">Jello Whirled!</body>
</html>
Show the generated page
as a slide-out If you double-click on the generated file "hello.html", you should see a very plain window with the text 'Jello Whirled!' in it. -
- The HFL statements in the example above completely define a very simple HTML page. Notice that there is a one-to-one correspondence between the structure of the HFL scopes under the 'create', and the structure of the generated HTML code.
A 'Hello World' example using a format
- That first example was not very visually exciting. And so far, because the content is specified inside of HFL structure, this is no better than if the entire page were defined as normal HTML.
-
The first step is to remove the content from inside of the HFL structure. It
is necessary to tag the content, so we will enclose it in a single
<body_content> tag, like so:
-
<body_content>
Jello Whirled!
</body_content>
-
- Next, instead of hard-wiring an HTML structure, we will hand control over to a pre-defined format that will build the structure for us. For this second example, we will use format 'sample1.hfmt':
-
STEPS:
-
Start a new source file, and enter the following:
-
<\
applyFormat('sample1.hfmt');
\>
<body_content>
Jello Whirled!
</body_content>
- What this will do is apply format 'sample1.hfmt' to the current page, which is just the <body_content> tag and its contents.
-
-
Save the file as 'hello2.hfl'.
Next, we will compile file 'hello2.hfl', but we will use the batch file 'hflcomp.bat' to do it, instead of calling the compiler directly. The reason is that 'hflcomp.bat' sets up environment variables and passes parameters to the compiler that simplify the calling sequence. The command line could be entered by hand, but it would be tedious.
-
In a command window, compile the file by entering the following:
-
hflcomp hello2
Show the generated page
as a slide-out Now if you double-click on the generated file "hello2.html", you should see that the 'Jello Whirled!' is now surrounded by regions that have background colors and edges. -
-
Start a new source file, and enter the following:
Now a add little more content
- The second example is a little better, but is still very plain.
- So let's add some more content.
-
STEPS:
-
Let's add a page title above the <body_content> lines:
-
<title>Hello World3</title>
-
-
Then add a navigation bar by inserting these items above the
<body_content> lines:
-
<nav>
<item href="hello.html">Hello</item>
<item href="hello2.html">Hello2</item>
<item href="hello3.html">Hello2</item>
</nav>
-
-
Then add some bottom links by inserting these items after
<body_content> lines:
-
<bottom_links>
<item href="hello.html">Hello</item>
<item href="hello2.html">Hello2</item>
<item href="hello3.html">Hello3</item>
</bottom_links>
-
-
Save the file as "hello3.hfl". It should now look like this:
-
<\
applyFormat('sample1.hfmt');
\>
<title>Hello World3</title>
<logo>
<img class="logo" src="images/logo.png" padding:0;>
</logo>
<nav>
<item href="hello.html">Hello</item>
<item href="hello2.html">Hello2</item>
<item href="hello3.html">Hello3</item>
</nav>
<body_content>
Jello Whirled!
</body_content>
<bottom_links>
<item href="hello.html">Hello</item>
<item href="hello2.html">Hello2</item>
<item href="hello3.html">Hello3</item>
</bottom_links>
-
-
Compile file "hello3.hfl".
Show the generated page
as a slide-out Now if you double-click on the generated file "hello3.html", you should see that the generated page now has a title, a logo, a navigation bar with 3 buttons, and a footer area that contains 3 bottom links.
-
Let's add a page title above the <body_content> lines:
- Notice also that the <nav> links and the <bottom_links> links are marked as just <item>. This because their final form will be set by the format, and a generic tag like <item> allows more flexibility than would something specific like <a> or <p>.
- Incidentally, the navigation buttons and bottom links navigate to the other versions of 'hello'.