Marauroa Chat Tutorial/HTML5 Client: Difference between revisions
imported>Hendrik Brummermann Created page with "{{Navigation for Marauroa Top|Using}} {{Navigation for Marauroa Users}} {{Marauroa Chat Tutorial}} <div style="padding: 1em; border: 2px solid #AA0;"> HTML5 support in Marauroa ..." |
imported>Hendrik Brummermann No edit summary |
||
| Line 13: | Line 13: | ||
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. |
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=" |
<source lang="html4strict"> |
||
<!doctype html> |
<!doctype html> |
||
<html><head> |
<html><head> |
||
<title>Marautoa Chat Tutoral Client in HTML 5</title> |
<title>Marautoa Chat Tutoral Client in HTML 5</title> |
||
<style type="text/css"> |
<style type="text/css"> |
||
body {font-family: "Arial"} |
body {font-family: "Arial"} |
||
#chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll} |
#chat {border: 1px solid #000; padding:0.5em; overflow-y: scroll} |
||
#chat p {margin: 0} |
#chat p {margin: 0} |
||
p.logclient {color: #888} |
p.logclient {color: #888} |
||
p.logerror {color: #F00} |
p.logerror {color: #F00} |
||
</style> |
</style> |
||
<!-- low level communication --> |
|||
| ⚫ | |||
<script src=" |
<script src="json.js"></script> |
||
<script |
<script src="/socket.io/socket.io.js"></script> |
||
<!-- Marauroa --> |
|||
| ⚫ | |||
<script type="text/javascript" src=" |
<script type="text/javascript" src="marauroa.js"></script> |
||
<script type="text/javascript" src=" |
<script type="text/javascript" src="client-framework.js"></script> |
||
<script type="text/javascript" src=" |
<script type="text/javascript" src="message-factory.js"></script> |
||
| ⚫ | |||
<script type="text/javascript" src=" |
<script type="text/javascript" src="rpfactory.js"></script> |
||
<!-- Out code --> |
|||
| ⚫ | |||
</head> |
</head> |
||
<body> |
<body> |
||
<h1>Marautoa Chat Tutoral Client in HTML 5</h1> |
<h1>Marautoa Chat Tutoral Client in HTML 5</h1> |
||
<!-- input field for text --> |
|||
<form id="form" onsubmit="stendhal.ui.chatBar.send(); return false"> |
<form id="form" onsubmit="stendhal.ui.chatBar.send(); return false"> |
||
<input type="text" name="chatbar" id="chatbar" style="width:90%"> |
|||
<input type="text" name="chatbar" id="chatbar" style="width:90%"> |
|||
<input type="submit" value="Send"> |
|||
</form> |
</form> |
||
| ⚫ | |||
<!-- Chat history --> |
|||
| ⚫ | |||
| ⚫ | |||
</div> |
|||
| ⚫ | |||
| ⚫ | |||
</ |
</div> |
||
| ⚫ | |||
</source> |
</source> |
||
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}}