Tutorial: 1 - Hello World

Hello WAT


To create our very first Hyper Text Markup Language (HTML) document, we will start off by simply printing "Hello WAT" to the screen.

To declare an HTML document, just create a 'hellowat.html' file and wrap it in the html tags like below. The result of this screen will output "Hello Wat" to the browser. The body tags declare where the scope of the content will go, html also includes "head" and "script" tags that you can find in the next example. For more information on HTML, please click here

<html>
    <body>
        <p>Hello Wat</p>
    </body>
</html>

Simple HTML with JavaScript


This next example incorporates some simple JavaScript with our html. We will add a button using the "button" tag that will trigger a function when it is clicked using an "onclick" event.

As all HTML goes into the "body" tags, all scripts go into a "script" tag. JavaScript consists of variables and functions and you can read more about it over here.

<pre class="prettyprint"><code><html>
    <body>
        <p id="dateString" >Click the push button</p>
        <button type="text" onclick="displayDate()">Display Date</button>
    </body>
    <script type="text/javascript">
    //this is a script comment
    /* This is a script comment block
     * For multiple lines
    */

    function displayDate(){
        //we want to replace "Click the push button" with the date
        //to do this we first need to "select" the element
        //we can easily reference it using javascript by its ID
        document.getElementById("dateString").innerHTML = Date();
    }
    </script>
</html>

HTML with JavaScript


The next example demonstrates a very simple HTML page that uses an 'alert' with JavaScript to modify the HTML content. This example can be run on a WAT device, but it does not reference any WAT-specific features, so it can also be run in any browser.

Everything in this example is standard HTML/JavaScript, so if anything needs more explanation (for example, document.getElementById), try searching for it on the Internet.

<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <!-- This is a HTML comment tag -->
    <!-- The head is where we do our style includes and decelerations -->
    <title>Arcx - Getting Started Example</title>
</head>

<body class="body">
<h1>Getting Started Example</h1>
<!-- We can also trigger javascript from links rather than just buttons -->
<a href="javascript:alert('Hello World!');">Say hello</a>
<br><br>
<a href="javascript:replaceText('myDiv','Greetings to you!');">Say greetings</a>
<div id="myDiv"> </div>

<br><br><br><br>
<a href="javascript:refresh();">Refresh Page</a>
</body>
<script type="text/javascript">
    // finds element by id and replaces contents with text
    function replaceText(id,text)
    {
        document.getElementById(id).innerHTML = text;
    }

    // implements page reload
    function refresh()
    {
        window.location.reload(true);
    }
</script>
</html>

To try this example:

  1. Create a new file called helloWorld2.html and copy the contents above into it.
  2. You can test the functionality before trying it on the device if you like by simply opening it in your browser.
    • Clicking "Say hello" should generate a popup window containing the text "Hello World".
    • Clicking "Say greetings" should generate the text "Greetings to you!" below the link.
    • Clicking "Refresh Page" should simply reload the webpage.
  3. Now that you have seen the webpage, let's try it on the device. Firstly, we will need to have a webserver installed in order to provide the webpage to the WAT device over the network. Microsoft IIS or the open source Apache are both good webservers.
  4. Once the webserver is installed, we need to place our html file in the DocumentRoot directory. For IIS, this is typically C:\inetpub\wwwroot\ For Apache, this is typically C:\Program Files\Apache Group\Apache2\htdocs or /usr/local/apache2/htdocs on a linux os.
  5. Now that the webserver is installed, you should be able to serve files over the network via http protocol. Open browser and go to: http://localhost/index.html
    • You should have the same functionality here as you did in step 2.
  6. Now we can verify this functionality on the WAT device. You will first need to know the IP Address of your computer. In the WAT devices configuration window, set Initial URL to: http://your_ip_address/helloWorld2.html for example: http://192.168.2.15/helloWorld2.html.

File Structure


As the code starts to grow, it becomes disorganized and hard to keep track off. It is important to keep HTML, JS and CSS all in their own files.

As a template, we provide a file directory structure in which you can easily separate your logic from your HTML. It also allows you to easily add in new libraries and design quick web applications.

--css
--images ## source for image files
--js 
    --wat_js ## wat autocomplete library
    --libs ## external JS libraries
--partials ## partial HTML pages to be loaded in the index
index.html ## main index file

This directory structure allows us to easily keep track of various files. All examples will be displayed in 1 file for simplicity reasons. WAT seed projects can be downloaded @ the ARCX developer site. For more tutorials check out 2 - Getting Started.