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 22:02, 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="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>
Implementing the client Framework
As the first step, we want to connect to the server using the marauroa.clientFramework. Note that we use "null" for host and post which means that we connect to the same server from which the client has been downloaded from. Connecting to the server may take a second or two, therefore we give some feedback to the user.
<source lang="javascript"> function startClient() { ui.chatLog.addLine("client", "Client loaded. Connecting..."); var body = document.getElementById("body") body.style.cursor = "wait"; marauroa.clientFramework.connect(null, null); } </source>
Now as we are able to connect to the server, we want to receive and handle events. In the Java word, we implemented a subclass of ClientFramework. In JavaScript, however, we can just redefine the methods, we are interested in: <source lang="javascript">
/** display a message to the chat window on disconnect. */ marauroa.clientFramework.onDisconnect = function(reason, error){ ui.chatLog.addLine("error", "Disconnected: " + error); }
/** on failed login, open a message box and disable the user interface */ marauroa.clientFramework.onLoginFailed = function(reason, text) { alert("Login failed. Please check your password and try again."); marauroa.clientFramework.close(); document.getElementById("chatbar").disabled = true; document.getElementById("chat").style.backgroundColor = "#AAA"; }
/** Automatically pick the first character associated with this account and enable the chat controls */
marauroa.clientFramework.onAvailableCharacterDetails = function(characters) { marauroa.clientFramework.chooseCharacter(marauroa.util.first(characters).a.name);
var body = document.getElementById("body") body.style.cursor = "auto"; ui.chatLog.addLine("client", "Ready..."); } </source>
Handling actions
So far, our client is able to connect to a Marauroa based server and display some basic feedback. There is an input field for chat message. Now we want to send those message to the server.
In order to keep our code well structures, we create an object called "ui" and a subobject called "chatbar". For Java developers: While Java is a class based programming languages, JavaScript is prototype based.
<source lang="javascript">
/** user interface package */
ui = {
/** methods for the chat input box */
chatBar: {
/** clear the chat window */
clear: function() { document.getElementById('chatbar').value = ; },
/** send a message to the server */
send: function() { var val = document.getElementById('chatbar').value;
// create an RPAction object of type "chat" with the message. var action = { "type": "chat", "text": val; };
// send the message to the server and clear the input field marauroa.clientFramework.sendAction(action); this.clear(); } } } </source>
Handling perceptions
TODO: Complete this section
Deployment
TODO: Explain the short cut version of deploying the webclient. At the moment there is only the documentation for the Experimental HTML 5 Stendhal client.
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}}