Javascript interaction

Javascript code can interact with an applet by accessing an applet's public API, comprised of properties of public scope. Javascript gets a reference to an applet using the name attribute of the <applet> tag. The name is then used to interact with the applet's public interface.

A small set of JetChart properties were made available in GraphApplet through the implementation of public Java methods, for the only purpose of demonstrating how the Javascript/applet interaction can be achieved. Implementing a complete interface in GraphApplet, or any of the other applets, brings a drawback, in that the size of the applets would be significantly increased.

The following steps are a guide for implementing Javascript/applet interaction with any of the available applets. The applets source codes have to be modified and compiled, therefore requiring the Java Development Kit(JDK) to be installed, as well as a basic knowledge in Java programming. The applets source codes are only available to registered users.

  1. Modify the applet source code, including public methods to gain access to the public properties of JetChart. For instance, to provide access to the property that sets the chart title, do as follows:

    public void setChartTitle(String title) {
     graph.setTitle(title);
    }

    The applets source codes are GraphApplet.java, ScatterApplet.java and PieApplet.java. They can be found in the folder JetChart/source/applets after decompression of the file JetChart.zip. All of them implement a global variable titled 'graph', which represents the chart context and refers to instances of different subclasses of GenericGraph, as Graph, ScatterGraph and PieGraph.

    Changes to any of the chart properties must be followed by a request for repainting, to update the chart displayed by the applet. The chart context is a subclass of java.awt.Panel, therefore it inherits the public method repaint(), found in java.awt.Component. A call to this method repaints chart, so it is also necessary to implement a public method in GraphApplet to give access to the chart context's repaint() method, as below:

    public void repaintChart() {
     graph.repaint();
    }

  2. Assign a name to the applet using the 'name' attribute of the 'applet' tag:
    <applet code="GraphApplet.class" name="chart" width="400" height="300" codebase="classes" archive= "GraphChart.jar">

  3. Create a javascript function to be invoked when any <form> objects, as buttons, checkboxes or text fields, generates an event. These objects are used to change the properties of a chart, as the title above mentioned. Here is an example:

    <head>
     <script language="Javascript">
      function change(form)  {  
    // Takes a reference to the form being used.

       // Gets a reference to an applet named 'chart'.

       applet=document.applets["chart"];

       // At this point we can add a sequence of conditional expressions to check what form
       // object invoked this function and then invoke the appropriate applet's method to
       // execute the desired action. We have a reference to the applet, all we need to do
       // is to invoke the correct method. For instance, the content of a text field named
       // 'title' can be passed to the applet as below:

       applet.setChartTitle(form.title.value);

       // and so on. A call to repaint the applet must be placed at the end of the function:

       applet.repaintChart();

      }

     <script>
    </head>
A real example of Javascript/applet interaction can be found here.