Marauroa Chat Tutorial/HTML5 Client: Difference between revisions
imported>Hendrik Brummermann No edit summary |
imported>Hendrik Brummermann No edit summary |
(No difference)
| |
Revision as of 21:30, 15 December 2011
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.
<source lang="html4strict"> <!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>
<script src="json.js"></script> <script src="/socket.io/socket.io.js"></script> <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> <script type="text/javascript" src="chatclient.js"></script>
</head> <body>
Marautoa Chat Tutoral Client in HTML 5
<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>
<noscript>JavaScript is required by the Web Client.</noscript>
</body></html> </source>
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}}