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="{%IW17.LibURL%}IntraWeb.js" data-AllowDocParams="true" data-Source="{%IW17.DataSource%}"></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.

The tags are:

  • 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.
  • IW17.LibURL – Required and should be managed by IntraWeb.
  • IW17.DataSource – Required and should be managed by IntraWeb. If not managed by IntraWeb, must point to the IntraWeb loader library.

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="{%IW17.LibURL%}IntraWeb.js" data-Source="{%IW17.DataSource%}"></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="{%IW17.LibURL%}IntraWeb.js" data-target="MyApp" data-Source="{%IW17.DataSource%}"></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