Marauroa Chat Tutorial/HTML5 Client: Difference between revisions

From Arianne
Jump to navigation Jump to search
← Older editNewer edit →
Content deleted Content added
imported>Hendrik Brummermann
layout
imported>Hendrik Brummermann
implementing the framework
Line 37: Line 37:
<script type="text/javascript" src="chatclient.js"></script>
<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 -->
<!-- input field for text -->
Line 53: Line 53:




== Our Chat client ==
== 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 ==


{{TODO|Complete this section}}
{{TODO|Complete this section}}
== Handling perceptions ==


{{TODO|Complete this section}}
<!--
The design of our Client class allows us to easily use it in something more complex then Test class above. Here is the example of a simple Swing application that uses Client as a communication tool
<source lang="java">
import javax.swing.*;
import java.awt.event.*;
import java.io.IOException;
import java.net.URL;
import java.util.*;
import java.awt.*;


document.onkeydown=stendhal.ui.chatBar.keydown;
public class View extends JFrame implements ActionListener {
private javax.swing.JButton jSayButton;
private javax.swing.JButton jConnectButton;
private javax.swing.JScrollPane jScrollPane1;
private javax.swing.JTextArea jChatArea;
private javax.swing.JTextField jInputField;
private javax.swing.Timer timer;


<!--
private Client client = null;

public View() {
initComponents();
jSayButton.addActionListener(
jSayButton.addActionListener(
new ActionListener() {
new ActionListener() {
Line 87: Line 110:
}
}
});
});
jConnectButton.addActionListener(
new ActionListener() {
public void actionPerformed(ActionEvent e) {
try {
client = Client.get();
client.connect("127.0.0.1", 5555);
client.login("test1", "test1");
client.chooseCharacter("test1");
jSayButton.setEnabled(true);
jInputField.setEnabled(true);
} catch (Exception exception) {
JOptionPane.showMessageDialog(
View.this, "Error", exception.toString(), JOptionPane.WARNING_MESSAGE);
client = null;
}
}
});
timer = new javax.swing.Timer(300, this);
timer.setInitialDelay(500);
timer.start();
setVisible(true);
}

public void actionPerformed(ActionEvent e) {
if (client != null) {
client.loop(0);
String s = client.popQuote();
while (s != null) {
jChatArea.append(s + "\n");
s = client.popQuote();
}
}
}
private void initComponents() {
jScrollPane1 = new javax.swing.JScrollPane();
jChatArea = new javax.swing.JTextArea();
jSayButton = new javax.swing.JButton();
jConnectButton = new javax.swing.JButton();
jInputField = new javax.swing.JTextField();

setDefaultCloseOperation(javax.swing.WindowConstants.EXIT_ON_CLOSE);
setTitle("Chat 0.5");
setName("main");
jChatArea.setColumns(20);
jChatArea.setEditable(false);
jChatArea.setRows(5);
jScrollPane1.setViewportView(jChatArea);

jSayButton.setText("Say");
jSayButton.setEnabled(false);

jConnectButton.setText("Connect");

jInputField.setEnabled(false);

javax.swing.GroupLayout layout = new javax.swing.GroupLayout(getContentPane());
getContentPane().setLayout(layout);
layout.setHorizontalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
.addContainerGap()
.addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.TRAILING)
.addComponent(jScrollPane1, javax.swing.GroupLayout.Alignment.LEADING, javax.swing.GroupLayout.DEFAULT_SIZE, 394, Short.MAX_VALUE)
.addGroup(layout.createSequentialGroup()
.addComponent(jInputField, javax.swing.GroupLayout.PREFERRED_SIZE, 236, javax.swing.GroupLayout.PREFERRED_SIZE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addComponent(jSayButton, javax.swing.GroupLayout.DEFAULT_SIZE, 73, Short.MAX_VALUE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addComponent(jConnectButton)))
.addContainerGap())
);
layout.setVerticalGroup(
layout.createParallelGroup(javax.swing.GroupLayout.Alignment.LEADING)
.addGroup(javax.swing.GroupLayout.Alignment.TRAILING, layout.createSequentialGroup()
.addContainerGap()
.addComponent(jScrollPane1, javax.swing.GroupLayout.DEFAULT_SIZE, 249, Short.MAX_VALUE)
.addPreferredGap(javax.swing.LayoutStyle.ComponentPlacement.RELATED)
.addGroup(layout.createParallelGroup(javax.swing.GroupLayout.Alignment.BASELINE)
.addComponent(jConnectButton)
.addComponent(jSayButton)
.addComponent(jInputField, javax.swing.GroupLayout.PREFERRED_SIZE, javax.swing.GroupLayout.DEFAULT_SIZE, javax.swing.GroupLayout.PREFERRED_SIZE))
.addContainerGap())
);
pack();
}
}
</source>

To create the layout of the elements NetBeans was used, but we concentrate just on the source code here.

The client establishes a connection to a hard-coded location upon Connect button is pressed. There is no "Create new account" functionality, so account should be created beforehand.

We use timer to regularly check for the new messages in the Client queue. If there are some - they are put to the large text box. Sending the new message also relies on the Client facilities.

The only thing left for the Swing client now is a main method. Here is the source code
<source lang="java">
final class Chat {
private Chat() {}


public static void main( String[] args ) {
new View();
}
}
}
</source>
</source>


== Deployment ==
== Deployment ==
You still use the same command for compilation
<pre>
javac -cp marauroa.jar;log4j.jar;. *.java
</pre>


{{TODO|Explain the short cut version of deploying the webclient. At the moment there is only the documentation for the [[How to setup an experimental Stendhal HTML5 Environment?|Experimental HTML 5 Stendhal client]].}}
Make sure that source files with code for Swing client are in the same directory with jars mentioned and Client.java file. You can run the client with the following command
<pre>
java -cp marauroa.jar;log4j.jar;. Chat
</pre>


-->


== Next Steps ==
== Next Steps ==

Revision as of 21:45, 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>


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

TODO: Complete this section

Handling perceptions

TODO: Complete this section

document.onkeydown=stendhal.ui.chatBar.keydown;


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