Team Developer Geogebra Demo (Using Java Applet)

Team Developer Geogebra demo (using java applet)

This article describes how to use Java applets which are part of a webpage from Team Developer applications.

From Wikipedia:

“Applets are used to provide interactive features to web applications that cannot be provided by HTML alone. They can capture mouse input and also have controls like buttons or check boxes.

In response to the user action an applet can change the provided graphic content. This makes applets well suitable for demonstration, visualization and teaching. There are online applet collections for studying various subjects, from physics to heart physiology. Applets are also used to create online game collections that allow players to compete against live opponents in real-time”

Some time ago I needed to replace a 3rd party component which offers emulation of mainframe 3270 sessions and emulator screens for AS400 applications.

The new component was webbased using Java applets. These applets offer an interface or API which can be called from within a webpage (Javascript) to control different parts of the functionality.

So, to replace the old component, Team Developer should be able to call the public methods of the applet which resides on a webpage which was installed on the intranet.

An applet within a HTML document is initialised when the document is loaded in a Webbrowser. It is downloaded to the local system and runs inside the browser.

But how to access such an applet from outside the Webbrowser control from Team Developer?

Looking at how we can access ActiveX/COM. Using the ActiveX Explorer, a component can be selected by browsing to the dll/ocx or by selecting it from the list of installed components on the system. Team Developer then analyses the component’s API and creates an library (apl) which contains a set of classes.

These classes contain the exposed methods of the selected component and can be used to access the functionality.

This process is straightforward and offers a standard way of using ActiveX/COM in TD applications.

Fortunately, an applet in Internet Explorer is exposed to the outside as a COM object.

The main difference is that the applet is not installed on the system, but only downloaded when a webpage needs it.

So it is not possible to use ActiveX Explorer to browse the applet and let TD generate a library which contains the exposed functionality.

The applet is dynamically mapped to a COM object at runtime and this applet only runs inside the Webbrowser.

But what the ActiveX Explorer can do we can do ourselves, manually. The only thing we need to know is:

• A full description of the applet API. So what are the method names, what are their input parameters and receive parameters
• How to translate this info into the implementation in TD using COM interfacing.

When we create the applet API manually, we have one or more functional classes which contain a set of functions which we can call at runtime. The same as we do with native ActiveX/COM.

Geogebra applet

To demonstrate how to integrate an applet into TD applications I had to choose one which offers functionality which can actually be usable in specific situations.

Geogebra is free and multi-platform dynamic mathematics software for all levels of education that joins geometry, algebra, tables, graphing, statistics and calculus in one easy-to-use package. It has received several educational software awards in Europe and the USA.

Quick Facts

• Graphics, algebra and tables are connected and fully dynamic
• Easy-to-use interface, yet many powerful features
• Authoring tool to create interactive learning materials as web pages
• Available in many languages for our millions of users around the world
• Free and open source software

In short, the software offers the visualisation of mathematics and physics mostly for educational purposes.

It has a huge userbase and many examples can be freely downloaded.

But for this article, it has also an applet API, which means it runs completely in a Webbrowser and exposes functionality for developers.

To see this software in action you can start Geogebra using this weblink:

It shows a canvas where the supplied mathematics are visualised.

Besides the user interface it exposes most of the functionality in its API.

Many examples of worksheets can be found here which runs within your browser:

The next part of this article will explain how to integrate Geogebra into a TD application and call some of the public functions.

Geogebra TD integration

These are the global steps to take for integration:

• Generate using ActiveX Explorer the needed ActiveX/COM libraries to use the Internet Explorer browser which will be placed on a TD form window
• Generate using ActiveX Explorer the needed COM libraries to access the HTML document which is loaded in the browser
• Manually create the functional class which acts as the COM interface to the Geogebra applet
• Place a browser control on the form window and navigate to a URL which has the Geogebra applet installed
• When the WebPage is loaded, locate the needed applet in the document structure of the HTML page and let it expose as COM
• Call the exposed methods of the applet and integrate the needed functionality in the TD application

The first two steps are straightforward. With the ActiveX Explorer locate and generate these libraries:

• Microsoft Internet Controls

• Microsoft HTML Object Library

The first contains the ActiveX control AX_SHDocVw_WebBrowser.

This is placed as object on a form window and will display the HTML page.

The second library contains MSHTML_IHTMLDocument2.

This is used to access and manipulate the HTML contents of the loaded page.

How to generate the librariesis explained in the TD documentation and will not be further explained here.

The sample provided in this article already contains these libraries so you can use them.

It is not needed to regenerate them.

Manually create Applet API

As the ActiveX Explorer can not be used to generate the API, we need to create it manually. The applet will be mapped to a COM object at runtime which exposes the applet public methods.

It sounds harder than it actually is.

There are numerous sample methods to look at to see how a method is implemented in TD.

Just generate some ActiveX libraries to get examples and inspect what TD actually generates.

Let’s look at an example what the ActiveX Explorer generates:

Just have a look at the function open.

The structure of such functions is always the same. What differs is the number of parameters passed to the function and parameters which receive values back.

Values passed to the function are first pushed on the stack.

The sequence of pushing is the sequence of the parameters expected in the COM object method.

So here, the first 4 lines call __ObjectPush functions. Every datatype has its own push function. One for string, one for Boolean etc etc.

Then when all input parameters are pushed on the stack the actual method of the COM object is called:

__ObjectInvoke( “open”, INVOKE_FUNCTION )

This line will call the COM object and will use the pushed values as input parameters.

When the COM method gives back values as receive parameters, they must be popped from the stack. Here also the sequence is the sequence of the defined parameters of the COM method.

In this example only one output parameter is defined in the COM object, an object.

Now, just look at more generated functions and inspect the implementation. The structure is always the same.

Ok. Now this is what we need to code manually.

Getting the applet method descriptions

The function we need to create should resemble exactly what the applet exposes. So the details of the applet API must be know to us.

Having a description, we can create the COM method in the same structure we have seen on all the other COM examples.

Fortunately, the complete Geogebra Applet API can be found on the Web.

Just have a look here:

In the section “Available methods” we see a list of exposed methods and their descriptions.

Lets look at one:

void setGridVisible(boolean flag)

Shows or hides the coordinate grid in the graphics window.

Now we translate this description into a TD COM function with the needed structure.

The method setGridVisible has only one input parameter, a Boolean.

The method returns nothing (void).

This is the TD COM function we can create out of this description:

The parameter flag ( a boolean) is first pushed on the stack.

Then the actual method is called. See that the method name exactly matches the name of the method in the Geogebra API description.

There are no receive parameters, so no popping from stack is needed here.

Depending on the method of the applet, the correct COM TD method must be implemented. When certain parameter types are not clear how to implement them in TD, just browse through some TD generated libraries to find examples.

Create all needed applet methods like described and put them in a functional class.

This class must be derived from class Object:

The functional class seen above is the applet implementation in TD and is the interface to the applet.

Now continue with the implementation…

Navigate to Geogebra WebPage (URL)

The browser control should load the Geogebra applet from a WebPage where it is installed.

I have placed Geogebra 4 on my personal web account to be sure this sample will keep working.

By navigating to the URL, after the page is completely loaded, the Geogebra software is ready to use and shows its canvas:

axExplorer.Navigate( " uVar, uVar, uVar, uVar )

It may take some time for the applet to load, so be patient.

A splash screen should appear and a throbber animation.

When the canvas (with the X and Y axis) is shown, the applet has been loaded and initialised.

Beware that you must have internet access from your PC and that the browser may run Java applets.

Locate the applet in the document and expose as COM

When the page is loaded the applet is running in the document.

Using the HTML document interface you can access the HTML contents currently displayed in the browser.

A document can contain 0..n applets and you will have to fetch the needed one from this list of applets.

This is the implementation to get the document, get the list of applets and from that list get the needed applet:

First, get the document from the explorer component (PropGetDocument).

Having the document, get the applets (PropGetapplets).

There are two ways to get a specific applet from the applet list using the method uApplets.item:

-Using an index (zero based)

-Using the name of the applet (as defined in the webpage)

In the Geogebra sample, the appletname is known as ggbApplet.

So, to get the applet use the name to fetch it from the list.

Mind the last parameter which is passed to the uApplet.item function: wuGeogebraAPI !

This is an instance of the manually created functional class earlier explained.

(see local variables in the function above).

When the applet is fetched, the object wuGeogebraAPI is the interface to the applet.

And now you can call the created functions from this API:

Call wuGeogebraAPI.setGridVisible( TRUE )

When all is ok, the graphics window of the applet on the webpage will now show a grid.

TD GeogebraApplet sample

A partial implementation of the Geogebra API is shown in the sample provided with this article.

As the sample is to show how to use applets from TD, it does not implement all possible Geogebra features. If you need them, just add them yourself the same way as described here.

The sample is saved in TD2.1 text format and is working in all TD versions, up to TD6.1

A demo video of the application can be downloaded, follow this link:

Hopefully this article will help in integrating other applets in TD.

Dave Rabelink

RablinQ ICT