And Even Simpler

With HFL, it is usually unnecessary to tag each piece of text content. It is much simpler to wrap whole blocks of text in one tag, then use parsing rules to break it into the appropriate sub-tags. This makes creating pages for blogs and documentation very easy using an ordinary text editor.

Click on the 'Show Page Source' button on the left to see the HFL source code that created this document. Compare it to how it is displayed in this page. When you wish to close the slide-out page, click on this page again. (This button will be available on all of the pages of this manual.)

Notice that the file is almost pure text, and about the only tags used were to mark code blocks and some emphasis.

To make this work, it is first necessary to define rules for how the text content will be organized. For this document, the rules were:

• Major topics will be separated by a single line with three dashes (---)
• Paragraphs within each topic will be separated by empty lines
• The first line of each topic will be the topic title, allowing special emphasis to be applied.
• The text indentation that will be displayed will track the indentation of the text in the file. When a paragraph is indented from the one above it, the resulting HTML will also indent.
• Paragraphs that begin with an asterisk '*' will be bulleted. Those that begin with a number will be numbered.

Then an HFL script is written that formalizes these rules, and it is applied to the source text file. Once set up, one can create text documents just by simple typing in an ordinary text editor in a natural way. And the HFL script will construct all of the structure and formatting to make it display properly.

The HFL instructions of this file are enclosed within the characters <\ and \> at the top of the file:

• <\
  $NAV_ACTIVE = "Introduction";
  print("LOADING FORMAT |$FMT|");
  applyFormat($FMT);
  
  // Load example code and escape it
  example1:..1 {
    include("intro3.hfl", 'raw', 1, 15);
    class="code" escapeHtml('full');
    }
  example2:..1 {
    include("$FMT", 'raw');
    class="code" escapeHtml('full');
    }
  \>
  

Those instructions load a format file given by variable $FMT that builds the main structure of the page. That format file for this version looks like this:

• <\
  var V1_hfmt = function () {
    LogN(-1, "V1.HFMT RUNNING...");
  
    ApplySimpleTags();
    ApplyHflDocTags();
  
    applyFormat(V1_hfmt.formats.topics);
  
    load(V1_hfmt.formats.base);
  
    body_content{ class="body_content"
      margin: 0px 20px; padding: 10px;
      }
  
    applyFormat(V1_hfmt.formats.doc);
  
    if (defined($__rgIndexTable)  &&  length($__rgIndexTable))
      writeIndexToFile($__rgIndexTable, "_$VER.index_entries.txt");
  
    page:all {
      CreateShowButtons();
      applyFormat(V1_hfmt.formats.page);
      }
    };
  
  V1_hfmt.formats = {
      page:    'page.simple1.hfmt',
      topics:  'topics.hfmt',
      doc:    'doc.hfmt',
      base:    'page_base_content.hfl'
      };
  
  return V1_hfmt;
  \>
  <css_link href="Styles/Base.css">
  <css_link href="Styles/Nav.css">
  <css_link href="Styles/menu1.css">
  <css_link href="Styles/Downloads.css">
  <img id="logo" src="images/HFL.logo.png">
  

Notice that the format file is a combination of HFL instructions and HTML. As is often the case, most of the HTML is simply loading CSS and javascript support files. Any HTML code in format files gets inserted into the main file. This allows formats to augment the base content before applying formatting.

The formats are loaded via the applyFormat() function calls, which control the entire construction and layout of the pages.

Each format file constructs and returns a javascript-style function object, to which it may attach various object properties, which are usually its defaults. Then applyFormat() calls the function object to perform its actions.

Note that each of the inner calls to the applyFormat() and load() functions within the format get their filenames from a property stored within the format function object itself. That allows the application to override the format's defaults if it wishes. This is how application-friendly formats are built.

Here, format 'topics.hfmt' (the value in the formats.topics field of the format object) scans the text of the source file and constructs the main body of the page, applying the rules above. Paragraphs are enclosed in <p> tags, sample code is escaped, classes and styles are applied to tags, and the base structure of the page is constructed around all of the content.

In the first example above, the include() call loads a portion of the source file (lines 1 thru 15) as raw text into the cell for tag <example1>. Then this text is escaped by a call to built-in function escapeHtml(), which allows the content to be displayed as normal text, instead of interpreted as HTML. The second include() call loads the entire contents of the format file into the cell for tag <example2>.

By specifying the format filename through variable $FMT the specific format that will generate the specific look can be defined externally, such as by the invoking batch file script.

To see this page in a different look, click on the Show Next Version button on the left.

Notice every element of the page is affected by the format. The entire look of a site can be changed by choosing a different main format file. This is not possible in template-based systems, unless they enforce very restrictive rules about how things are marked and where they are stored.