Marauroa Chat Tutorial/HTML5 Client

Marauroa Tutorial

HTML5 support in Marauroa is in development. We are looking for feedback to stabilize the API and improve the documentation on it.

The HTML 5 client works in a modern browser without requiring any plugins or other software to be installed locally. It is therefore not written in Java but JavaScript. While JavaScript has a similar name, it has some basic concepts that are very different from Java.

HTML Code

We start our HTML 5 client by creating a HTML page consisting of an output area for the chat log and a small input field to enter text. We use CSS rules to make the page look nicely. We are using a development version of Marauroa, which consists of several JS files. The final version will consists of one file to reduce startup time.

<!doctype html>
<html><head>
    <title>Marautoa Chat Tutoral Client in HTML 5</title>
    <style type="text/css">
        body {font-family: "Arial"}
        #chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll}
        #chat p {margin: 0}
        p.logclient {color: #888}
        p.logerror {color: #F00}
    </style>

    <!-- low level communication -->
    <script src="json.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    <!-- Marauroa -->
    <script type="text/javascript" src="marauroa.js"></script>
    <script type="text/javascript" src="client-framework.js"></script>
    <script type="text/javascript" src="message-factory.js"></script>
    <script type="text/javascript" src="perception.js"></script>
    <script type="text/javascript" src="rpfactory.js"></script>
    <!-- Out code -->
    <script type="text/javascript" src="chatclient.js"></script>
</head>
<body>

    <h1>Marautoa Chat Tutoral Client in HTML 5</h1>
    <!-- input field for text -->
    <form id="form" onsubmit="stendhal.ui.chatBar.send(); return false">
        <input type="text" name="chatbar" id="chatbar" style="width:90%">
        <input type="submit" value="Send">
    </form>
    <!-- Chat history -->
    <div id="chat" style="height:200px">
        <noscript>JavaScript is required by the Web Client.</noscript>
    </div>
</body></html>

TODO: Complete this section

Next Steps

Congratulations, you completed this tutorial. The final sections will list some ideas for further steps to improve. {{#breadcrumbs: Marauroa | Using | Tutorial | Swing Client}}