Bridge between the Java applet and the text input controls on the web page

Question

I have been working with a Java applet which is an applet that helps to write using only a mouse. For my case, I am trying to incorporate this into my webiste project as follows:

When the user clicks on any input element (textbox/textarea) on the page, this JAVA applet loads on the webpage itself. In the screenshot of the JAVA applet seen below, the user points to an alphabet to and the corresponding text gets written in the text box of the applet.

Now what I am trying to do is to get this text from the TextBox of the applet to the input element on the webpage. I know that this needs an interaction between the Java and JavaScript, but not being a pro, I really do not have the catch. Here's the Java applet and the code I have written.

Java applet and jQuery code (298kB): http://bit.ly/jItN9m

Please could somebdoy help for extending this code. Thanks a lot!

Update

I searched somewhere and found this -> To get the text inside of Java text box, a getter method in the Applet to retrieve the text:

public class MyApplet extends JApplet {
  // ...
  public String getTextBoxText() { return myTextBox.getText(); }
}

In the JQuery code, the following lines are to be added I think:

var textBoxText = $("#applet-id")[0].getTextBoxText();
//Now do something with the text

For the code of the applet, I saw a GNOME git page here. The getText call already exists -- look at the bottom of this file: http://git.gnome.org/browse/dasher/tree/java/dasher/applet/JDasherApplet.java

I'd need to call 'getCurrentEditBoxText' but when should this method 'getCurrentEditBoxText' be called? In my case, I would probably have to do it when the user clicks in a new input control etc.

Answer 1

You can have full communication between your Applet and any javascript method on the page. Kyle has a good post demonstrating how the Javascript can call the applet and request the text value. However, I presume you want the HTML Textfield to update with each mouse click, meaning the applet needs to communicate with the page. I would modify your javascript to something like this:

var activeTextArea = null;

$('textarea, input').click(function() {
    $(this).dasher();
    activeTextArea = this;
}); 

function updateText(text) {
     // Careful: I think textarea and input have different 
     // methods for setting the value. Check the 
     // jQuery documentation
     $(activeTextArea).val(text); 
}

Assuming you have the source for the applet, you can have it communicate with the above javascript function. Add this import:

import netscape.javascript.JSObject;

And then, in whatever onClick handler you have for the mouse clicks, add:

// After the Applet Text has been updated
JSObject win = null;
try {
    win = (JSObject) JSObject.getWindow(Applet.this);
    win.call("updateText", new Object[] { textBox.getText() });
} catch (Exception ex) {
    // oops
}

That will update the text each time that chunk of code is called. If you do NOT have access to the applet source, things get trickier. You'd need to set some manner of javascript timeout that constantly reads the value from the applet, but this assumes the applet has such a method that returns the value of the textbox.

See Also: http://java.sun.com/products/plugin/1.3/docs/jsobject.html

Update Modifying the applet is your best shot since that is where any event would be triggered. For example, if you want the HTML TextField to change on every click, the click happens in the applet which would need to be modified to trigger the update, as described above. Without modifying the applet, I see two options. Option #1 uses a timer:

var timer;
var activeTextArea;

$('textarea, input').click(function() {
    $(this).dasher();
    activeTextArea = this;
    updateText();
} 

function updateText() {
    // Same warnings about textarea vs. input
    $(activeTextArea).val($('#appletId')[0].getCurrentEditBoxText());
    timer = setTimeout("updateText()", 50);
}

function stopUpdating() {
    clearTimeout(timer);
}

This is similar to the code above except clicking on a text area triggers the looping function updateText() which will set the value of the HTML text field to the value of the Applet text field every 50ms. This will potentially introduce a minor delay between click and update, but it'll be small. You can increase the timer frequency, but that will add a performance drain. I don't see where you've 'hidden' the applet, but that same function should call stopUpdating so that we are no longer trying to contact a hidden applet.

Option #2 (not coded)

I would be to try and capture the click in the Applet as it bubbles through the HTML Dom. Then, you could skip the timer and put a click() behavior on the Applet container to do the same update. I'm not sure if such events bubble, though, so not sure if this would work. Even if it did, I'm not sure how compatible it would be across browsers.

Option #3

Third option is to not update the HTML text field on every click. This would simply be a combination of Kyle's and my posts above to set the value of the text field whenever you 'finish' with the applet.

Answer 2

Here's a possible solution. To get the text inside of your Java text box, write a getter method in the Applet to retrieve the text:

public class MyApplet extends JApplet {
  // ...
  public String getTextBoxText() { return myTextBox.getText(); }
}

In your JQuery code, add the following lines:

var textBoxText = $("#applet-id")[0].getTextBoxText();
//Now do something with the text

I found most of what I posted above here. Hope this helps.

Answer 3

This page explains how to manipulate DOM from a Java applet. To find the input element, simply call the document.getElementById(id) function with id of an id attribute of the text input box.