Tuesday, September 6, 2011

Applet to JavaScript Communication

The raditha.com site, to which I referred in my Javascript to Applet Communication - Example 2 entry, also includes a page on Applet to JavaScript Communication, but I could not find the required HTML/JavaScript, either on the page or in the code files included at the end of the page. This was disappointing because overall it is the best site I have found on what Mozilla calls LiveConnect.

The Java code works, and I shall cite a simplified (less graphics) version here:

import javax.swing.*;
import netscape.javascript.JSObject;
import java.awt.*;
import java.awt.event.*;

public class JSHelloWorld2 extends JApplet {
JTextArea txt = new JTextArea(100,100);
JButton btn = new JButton("Update Page");
JSObject jso;
public JSHelloWorld2() {
txt.setText("Hello World");
getContentPane().setLayout(new BorderLayout());
getContentPane().add(txt);
getContentPane().add(btn,BorderLayout.SOUTH);
btn.addActionListener(new ActionListener() {
public void actionPerformed(ActionEvent e) {
if(jso != null )
try {
jso.call("updateWebPage", new String[] {txt.getText()});
}
catch (Exception ex) {
ex.printStackTrace();
}
}
});
}
public void init()
{
jso = JSObject.getWindow(this);
}
public void setText(String s)
{
txt.setText(s);
}
}

And the HTML/JavaScript I used was:

<html>
<body>
<script type="text/javascript">
function updateApplet()
{
document.jsap.setText(document.forms[0].txt1.value);
}
function updateWebPage(myArg)
{
document.getElementById("txt1").innerHTML=myArg;
}
</script>
<form>
<table border=0 align='center' cellpadding=0 cellspacing=0 >
<tr>
<td valign='top' width=180>
<table>
<tr><td style='text-align:center; background-color:#EEEEEE'>Applet</td></tr>
<tr><td>
<applet code="JSHelloWorld2.class"
width="180" height="180" MAYSCRIPT style="border-width:0;" name="jsap" id="jsap">
</applet> </td></tr>
</table>
</td>
<td valign='top' width=180>
<table width=180>
<tr><td style='text-align:center; background-color:#EEEEEE'>JavaScript</td></tr>
<tr><td><textarea style='width:180px; height:150px' name='txt1' id='txt1'>Type and click!</textarea></td></tr>
<tr><td align='center'><input type=button value='Update applet' onClick='updateApplet()'></td></tr>
</table>
</td></tr>
</form>
</body>
</html>

The updateWebPage function is referred to in the Java code, but I had to add the function to the web page, which when it first loads comes up as shown below.

This is very similar to the page used to demonstrate Javascript to Applet Communication except that there is an extra button in the applet. Clicking the button on the page has the same effect as before. The text in the page text box is copied across to the applet. But now if you click the button on the Applet, the text from there is copied across to the box on the page (see below).

I could only get it to work once for every page load, but the fact that it works at all is a major step forward for me. I have at last succeeded in calling a JavaScript function from within an applet.

My next step is to learn how to combine JavaScript with PHP to add lines to my database. Build this into a function, and I should be able to call it from within my own applet.

1 comment:

Jens Eckervogt said...

Awesome solution! i would like to learn simple communication between Java and Javascript.

PS: I saw because it is possible for Qooxdoo + NodeJs (Socket) = server workable website + Java = Java Application or Java Applet with loading webpage.

Because i am searching for great html-based Android Application for my Galaxy Note 10.1.

Thanks for reply! Cheers from Germany ( EU )