IWML – IntraWeb Markup Language

On the IntraWeb 17 roadmap we recently introduced “Page 17”. We are now changing the naming to IWML (IntraWeb Markup Language) pages. IWML is still evolving and has already changed several times since our initial roadmap posting.

IntraWeb currently sends HTML, CSS, and JavaScript to the browser. IWML pages however function differently and treat HTML, CSS and JavaScript in a fashion similar to how Delphi relates to assembly language. It is still there and accessible, but most users never need to use assembly language.

For IWML pages, IWML is sent to the browser instead and IntraWeb JavaScript (written in TypeScript) libraries. The HTML, CSS and JavaScript which is specific to the page is then generated completely in the browser itself. This approach greatly simplifies control development and expands what we can do with IntraWeb. In some ways, one might think of IWML as a new DFM for IntraWeb.

IWML uses JSON for simplicity and interoperability, but in the future may support other formats as well.

Sample IWML based on current code

{
  "Title": "IntraWeb 17 Test",
  "Root":
  {
    "Stack":
    {
      "Orientation": "Vertical",
      "Width": "10",
      "ControlDefaults": {
        "HAlign": "Center"
      }, 
      "Controls":
      [
        {
          "Label":
          {
            "HAlign": "Right",
            "Width": "7",
            "Text": "Hello"
          }
        },
        {
          "Edit":
          {
            "Text": "World"
          }
        },
        {
          "Label":
          {
            "Text": "Left Label",
            "HAlign": "Left"
          }
        },
        {
          "Label":
          {
            "Text": "Center Label",
            "HAlign": "Center"
          }
        },
        {
          "Label":
          {
            "Text": "Right Label",
            "HAlign": "Right"
          }
        },
        {
          "Label":
          {
            "Name": "LabelCenterTop",
            "Text": "Label Top",
            "Height": "3",
            "VAlign": "Top"
          }
        },
        {
          "Label":
          {
            "Name": "LabelCenterMiddle",
            "Text": "Label Middle",
            "Height": "3",
            "VAlign": "Middle"
          }
        },
        {
          "Label":
          {
            "Name": "LabelCenterBottom",
            "Text": "Label Bottom",
            "Height": "3",
            "VAlign": "Bottom"
          }
        }
      ]
    }
  }
}

In the browser this is displayed as shown here:

Currently the controls and layouts that are available are limited as we are still building the framework. The layout in the above example is a vertical stack, but others are in development including Grid, Canvas (like IntraWeb forms are currently, i.e. absolute layout), and many more.

All existing IntraWeb controls will have counterparts and many new controls will be added. The framework has an open API and will be documented to allow third party and user components to be developed. Layouts are also open and pluggable.

The usage of IWML also opens up other avenues to develop using other languages besides Delphi, however Delphi will remain our flagship language.