Hello World

Let’s see what it takes to build the most basic of IntraWeb applications using JavaScript.

MIME Types

The very first step is that we need to add a new MIME type to the web server that will be used. The two MIME types that must be added are:

text/iwml iwml
text/acorn nut

Please refer to MIME types if you need further assistance in doing this. This step only needs performed once for each web server and not for every application.

Pick a Path

Pick a location on your web server to deploy your IntraWeb application. For this tutorial we will assume that your application will be deployed at:

http://127.0.0.1/HelloWorld

This is completely configurable within your web server and you can deploy all required IntraWeb files in a single directory. Normally the IntraWeb JavaScript files will be deployed in a shared location, but for simplicity we will deploy them with the application for now.

To do this, simply copy the IWCL library files and sub directories into your HelloWorld directory.

HTML Loader

Every IntraWeb application needs at least one HTML loader. Some have more than one HTML loader to map pages as unique URLs. For now we will use a minimal HTML loader.

In your HelloWorld directory create a file named index.html with these contents:

<!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">
  <script src="IntraWeb.js" data-Source="*"></script>
</head>
<body></body>
</html>

IWML File

IntraWeb emits HTML but its core source is not HTML. IntraWeb revolves around IWML (IntraWeb Markup Language) which is much easier to code. IntraWeb then transforms the IWML on the fly into HTML for the browser. At the same time, it fully integrates with existing HTML and JavaScript libraries and components.

IWML is an abstraction for HTML in the same manner that many desktop UI frameworks are abstractions for lower level GDI, DirectX or OpenGL calls.

IntraWeb 17 supports many advanced controls including JQueryUI, Bootstrap, ExtJS and more. But for now, we start out simple with just plain text.

In your HelloWorld directory create a file named Index.iwml with these contents:

ACORN 1.0 IWML 1.0
Page[]
  Text Hello World
]

We will continue to expand on IWML throughout this tutorial. If you want to dive deeper into it you can return later to the IWML tutorial.

IWML Indentation

IWML is a plain text format, but has one special requirement that must be taken care of. IWML parses using indentation. That is, indentation matters and is part of the parsing process. Indentation must be done using spaces, and not tabs. Indentation must always be 2 space characters.

If you do not follow the indentation rules properly, there will be IWML parsing errors. Use of indentation greatly simplifies the visual textual representation and reduces the verbosity. Some languages such as Python also use indentation as part of their syntax.

Run

To run our application we enter the URL to our application path:

http://127.0.0.1/HelloWorld/Index.html

If you followed this tutorial correctly, you should see something like this:

Congratulations! Although very simple and not very useful, you have now written your first IntraWeb application. Next we will add more controls in the next step of our tutorial, layouts.