Accessing Java Objects from JavaScript

You can access Java objects from JavaScript in a Web page using the LiveConnect API for JavaScript.

Fully qualify any references to classes, and add packages to any references that are not in java.lang, sun.awt, and so on.

The following code fragments outline one approach to doing this. The example code is available in ICEbrowserExamples/src/liveconnect. For more information, see LiveConnect Examples.

Create a "bridge" between your Java code and the JavaScript. The following class accomplishes this:

package liveconnect;
 
import ice.storm.StormBase;

import ice.storm.Viewport;
 
/**

* This class is an example of one way to use the LiveConnect ability

* of Rhino with ICEbrowser to effectively communicate with the classes

* and methods of your application.

*

* In this example, we create a Singleton class that acts as a bridge

* to our application.  Through the bridge we can access various features

* of our application and provide a, hopefully, simple interface for

* JavaScript.  This is only one way to tackle this problem.  It is

* possible to access parts the application directly provided they are

* public.

*

* For more information, you can go to the Rhino site and read the

* scripting Java section:

* http://www.mozilla.org/rhino/scriptjava.html

*/
 
public class JavaScriptToJavaBridge {



    private static JavaScriptToJavaBridge bridge;

    private static StormBase base = BridgeBrowser.stormBase;



    public synchronized static JavaScriptToJavaBridge getInstance() {

        if ( bridge == null ) {

            bridge = new JavaScriptToJavaBridge();

        }

        return bridge;

    }
 
    private JavaScriptToJavaBridge() {

    }
 
    public void goTo( String url ){

        base.renderContent( url , null, 

            "com.icesoft.example.BridgeBrowser" );

    }
 
    public void debug( String message ){

        System.out.println( message );

    }
 
    public String getToolkitName(){

        String toolkitName = base.getComponentToolkitName();

        return toolkitName;

    }
 
    public Viewport getViewport(){

        return base.getActiveViewport();

    }

}

Create the JavaScript to use the bridge:

...JavaScript in an HTML page...
 
//You can assign variable to Java objects and classes.

bridge = Packages.liveconnect.JavaScriptToJavaBridge.getInstance();
 
//You can call Java methods directly.  It's best to

//fully qualify everything.

function debug( message ){

    java.lang.System.out.println( message );

}
 
function testConsole(){

    debug( "Testing System.out.println from JavaScript" );

}
 
//The call could be encapsulated in your own Java class instead

//of directly from JavaScript.

function debugWithBridge(){

    bridge.debug( "Testing System.out.println with bridge" );

}
 
function goToGoogle(){

    debug( "Calling goToGoogle" );

    bridge.goTo( "http://www.google.ca" );

}
 
function getToolkit(){

    debug( "Calling getToolkit" );

    toolkit = bridge.getToolkitName();

    debug( "Toolkit is: " + toolkit );

    document.liveconnectexamples.toolkitName.value = toolkit;

}
 
function getActiveViewportID(){

    debug( "Calling getViewport" );

    viewport = bridge.getViewport();

    viewportID = viewport.getId();

    debug( "Viewport id is: " + viewportID );

    document.liveconnectexamples.viewportID.value = viewportID;

}

Use the JavaScript functions to interact directly with Java methods and classes, as in the following examples:

... HTML code...
 
<form name=liveconnectexamples>
 
<table border=1 cellpadding=0 width="100%" style='width:100.0%;

 mso-cellspacing: 1.5pt;mso-padding-alt:1.5pt 1.5pt 1.5pt 1.5pt'>

 <tr>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <p class=MsoNormal>Print out a message to the Java console calling

  System.out.println directly from JavaScript.<o:p></o:p></p>

  </td>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <input name=direct type=button id=direct 

    value="System.out.println direct" onclick="testConsole()">

  <p class=MsoNormal>

   <![if !supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></p>

  </td>

 </tr>

 <tr>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <p class=MsoNormal>Using a bridge class, we can indirectly call

  System.out.println with the same result.<o:p></o:p></p>

  </td>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <input name=bridge type=button id=bridge 

     value="System.out.println via bridge"

  onclick="debugWithBridge()">

  </button>

  <p class=MsoNormal>

   <![if !supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></p>

  </td>

 </tr>

 <tr>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <p class=MsoNormal>Using the bridge class again, 

   we can use the StormBase and

   render new content by passing it a URL to Google. <o:p></o:p></p>

  </td>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <input name=goToGoogle type=button id=goToGoogle value="Go to Google"

   onclick="goToGoogle()">

  <p class=MsoNormal>

   <![if !supportEmptyParas]>&nbsp;<![endif]><o:p></o:p></p>

  </td>

 </tr>

 <tr>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <p class=MsoNormal>You can retrieve information and 

   display it.<o:p></o:p></p>

  </td>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <input name=getToolkit type=button id=getToolkit 

   value="Get Toolkit Name" onclick="getToolkit()">

  <p class=MsoNormal><INPUT TYPE="text" NAME="toolkitName"></p>

  </input></td>

 </tr>

 <tr>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <p class=MsoNormal>You can retrieve objects and use 
them.<o:p></o:p></p>

  </td>

  <td valign=top style='padding:1.5pt 1.5pt 1.5pt 1.5pt'>

  <input name=getActiveViewportID type=button id=getActiveViewportID

  value="Get Active Viewport ID" onclick="getActiveViewportID()">

  <p class=MsoNormal><INPUT TYPE="text" NAME="viewportID"></button></p>

  </input></td>

 </tr>

</table>
 
</form>
 
... more HTML code...