Marauroa Chat Tutorial/HTML5 Client: Difference between revisions

Jump to navigation Jump to search
← Older editNewer edit →
Content deleted Content added
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="html">
<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="json.js"></script>
<script src="/socket.io/socket.io.js"></script>
<script src="json.js"></script>
<script type="text/javascript" src="marauroa.js"></script>
<script src="/socket.io/socket.io.js"></script>
<!-- Marauroa -->
⚫
<script type="text/javascript" src="client-framework.js"></script>
<script type="text/javascript" src="message-factory.js"></script>
<script type="text/javascript" src="marauroa.js"></script>
<script type="text/javascript" src="perception.js"></script>
<script type="text/javascript" src="client-framework.js"></script>
<script type="text/javascript" src="rpfactory.js"></script>
<script type="text/javascript" src="message-factory.js"></script>
⚫
<script type="text/javascript" src="perception.js"></script>

<script type="text/javascript" src="chatclient.js"></script>
<script type="text/javascript" src="rpfactory.js"></script>
<!-- Out code -->
⚫
<script type="text/javascript" src="chatclient.js"></script>
</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="submit" value="Send">
<input type="text" name="chatbar" id="chatbar" style="width:90%">
<input type="submit" value="Send">
</form>
</form>
⚫
<div id="chat" style="height:200px">
<!-- Chat history -->
⚫
<noscript>JavaScript is required by the Web Client.</noscript>
⚫
<div id="chat" style="height:200px">
</div>
⚫
<noscript>JavaScript is required by the Web Client.</noscript>
⚫
</body>
</html>
</div>
⚫
</body></html>
</source>
</source>


Retrieved from "https://meet.konsthol.eu/w/index.php?title=Marauroa_Chat_Tutorial/HTML5_Client"