Marauroa Chat Tutorial/HTML5 Client: Difference between revisions
Jump to navigation
Jump to search
Content deleted Content added
imported>Hendrik Brummermann implementing the framework |
imported>Hendrik Brummermann No edit summary |
||
| Line 41: | Line 41: | ||
<h1>Marautoa Chat Tutoral Client in HTML 5</h1> |
<h1>Marautoa Chat Tutoral Client in HTML 5</h1> |
||
<!-- input field for text --> |
<!-- input field for text --> |
||
<form id="form" onsubmit=" |
<form id="form" onsubmit="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"> |
<input type="submit" value="Send"> |
||
| Line 94: | Line 94: | ||
== Handling actions == |
== 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. |
|||
{{TODO|Complete this section}} |
|||
document.onkeydown=stendhal.ui.chatBar.keydown; |
|||
<source lang="javascript"> |
|||
<!-- |
|||
/** user interface package */ |
|||
jSayButton.addActionListener( |
|||
ui = { |
|||
new ActionListener() { |
|||
/** methods for the chat input box */ |
|||
public void actionPerformed(ActionEvent e) { |
|||
chatBar: { |
|||
String message = jInputField.getText(); |
|||
/** clear the chat window */ |
|||
clear: function() { |
|||
client.SendMessage(message); |
|||
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> |
</source> |
||
| ⚫ | |||
| ⚫ | |||
== Deployment == |
== Deployment == |
||