Reference://ample/tutorials/helloworld.xml

Hello, World!

Creating applications with Ample SDK is as simple as doing so with plain HTML, JavaScript and the DOM.

Overview

Hello World!
Comments

Hello World!

The following sample application will display a "Hello, World!" message in bold on the screen.
Once the text is clicked there will be an alert popup shown notifying you of the event.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
        <head>
                <title>Hello, World!</title>
                <!-- (A) Ample SDK runtime and UI language -->
                <script type="text/javascript" src="ample/runtime.js"></script>
                <script type="text/javascript" src="ample/languages/xhtml/xhtml.js"></script>
                <!-- (1) Styling -->
                <style type="text/ample+css">
                        @namespace "http://www.w3.org/1999/xhtml";
                        b {
                                color: red;
                        }
                </style>
                <!-- (2) Logic -->
                <script type="text/javascript">
                        function alertHelloWorld(oEvent) {
                                alert('Element "' + oEvent.target.tagName + '" was clicked');
                        }
                </script>
        </head>
        <body>
                <!-- (3) Layout -->
                <script type="application/ample+xml">
                        <b onclick="alertHelloWorld(event)">Hello, World!</b>
                </script>
        </body>
</html>

Comments

The 4 important areas of this sample document include:

(A) Ample SDK Runtime and relevant UI Languages
(1) Application Style, stylesheet, defined in CSS
(2) Application Logic, code, written in JavaScript
(3) Application Layout, User Interface, defined in XML

All three Application resource types can also be placed in an external document instead of inline, and be referenced with a URL: Logic can be included with the <script type="text/javascript" src="" /> tag, Style with the <link type="text/ample+css" rel="stylesheet" href="" /> tag, and Layout with the <script type="application/ample+xml" src="" /> tag.