HTML Loader

HTML Loader

When a full render of a v17 page occurs an HTML loader file is used. In a normal application, this only occurs when a v17 page is first displayed. This can happen when:

  • At application start and the start page is a v17 page.
  • A v15 page leads into a v17 page.
  • A full render is forced by the developer.

A v17 page that leads to another v17 page will not cause the HTML to be reloaded. In v17 by default, even page changes are performed as a partial update, even when a template is used.

Internal Loader

By default, IntraWeb will use an internal loader file. The internal loader file applies no styling or options and consists of the following HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <title>{%IW17.Title%}</title>
  <script src="IntraWeb.js"></script>
</head>
<body>Loading IntraWeb...</body>
</html>

Loader Locations

HTML for the loader is searched in these locations in the following order. The first match is the one that will be used.

  1. _Loader.html file in the template directory.
  2. ServerController.LoaderHTML property.
  3. Internal Loader.

Custom HTML Loader

You can specify for an external HTML file to be used instead of the internal default file. To do this, create a _Loader.html in the Templates directory or put the HTML in the ServerController.LoaderHTML property. You can clone the internal loader file above and modify as needed.

Tags

The loader HTML supports special tags in the HTML. These are specific to Delphi and are required unless you replace the tags with values matching your application. Tags are surrounded by {% and %}.

Example

<title>{%IW17.Title%}</title>

Tags

  • IW17.Title – Optional. This can be safely removed or replaced with a hardcoded value. If present IntraWeb will replace it with the AppName property from the ServerController.

IntraWeb.js

The line which loads IntraWeb.js has some special constraints that must be followed. When the loader HTML is used, it is first parsed and slightly modified to reflect the real path to load IntraWeb.js and some additional parameters. The parser which does this is not a full HTML parser and thus there are some constraints to allow the code to be simplified.

The following constraints must be followed and are case insensitive. Leading and trailing white space on the line are ignored.

  1. The line must be contained as a child of the HEAD tag.
  2. The line must start with:
    <script
  3. The line must end with:
    ></script>
  4. The line must contain:
    IntraWeb.js”
    The leading path to IntraWeb.js can be anything and facilitates easier testing of templates externally to Delphi.

Base href

To allow easier testing externally to Delphi as well as easier deployment, a base HREF tag will be added to the template to cause all relative URLs to be served from the Templates directory. This ensures that static testing as well as run time behavior remain the same. At run time, the following tag will be added:

<base href="/$17Templates/">

This is a special path in IntraWeb 17 which allows access to resources within the Templates directory.

Loading Message

A simple example of a custom loader is one that presents a custom loading message. In most cases this message will barely be seen in deployment. During debugging it is much more common to see it as during debugging libraries and other processes can take much longer. In this example we simply change the title to a fixed title and change the loading text. The loading text could be replaced with a splash screen or graphic. You can use any valid HTML.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <title>My Cool App</title>
  <script src="IntraWeb.js"></script>
</head>
<body>Loading Awesomeness...</body>
</html>

Styling

Custom Loader HTML can also be used to apply a style to your application. Since the HTML is used for any v17 new page show, all pages, even ones with templates will have the style applied.

By default IntraWeb will load pages into the body tag. This behavior can be altered by adding the Target parameter.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta http-equiv="Pragma" content="no-cache">
  <meta http-equiv="Expires" content="-1">
  <meta http-equiv="CACHE-CONTROL" content="NO-CACHE">
  <title>My Cool App</title>
  <script src="IntraWeb.js" data-target="MyApp"></script>
</head>
<body>
<img src="http://www.atozed.com/wp-content/uploads/2017/01/Atozed.gif"></img>
<h1>My Cool App with Example Styling</h1>
<p>We have no artistic skill, but this should at least show <b>how</b> its done from a technical perspective. :)</p>
<div id="MyApp">Loading...</div>
</body>
</html>

The Loading… message is not required. It can be any valid HTML, or even blank. In this example we use a DIV for the target, but the target can be any HTML element that can accept child elements. DIV and SPAN are the most common, but others may be used as well.

See Also