Step 5 - DOM Events

The DOM dispatches events, including mouse events such as mouseover and mouseout, as well as events such as submit. To listen for these events, you can register a org.w3c.dom.events.EventListener. This section shows how to do this to provide tooltip functionality in HTML pages.

Listening for DOM Events

The following code listens for the mouseover and mouseout events to determine what happens when the user holds the mouse pointer over a DOM node and then moves the pointer away from the node. A Tooltip listener is created, which is also a java.awt.Window. The window pops up when the mouse is over the node, displaying, for example, the URL of the link, and disappears when the mouse moves away from the node.

class Tooltip extends Window implements EventListener {

    private BrowserFrame browserFrame;

    private Label tooltipLabel;
 
    Tooltip(BrowserFrame browserFrame) {

        super(browserFrame);
 
        this.browserFrame = browserFrame;
 
        setBackground(new Color(255, 255, 225));

        enableEvents(0);
 
        tooltipLabel = new Label();

        tooltipLabel.setFont(new Font("SansSerif", Font.PLAIN, 12));

        add(tooltipLabel);

    }
 
    public void handleEvent(org.w3c.dom.events.Event event) {

        MouseEvent mouseEvent = (MouseEvent)event;

        String eventType = mouseEvent.getType();
 
        if (eventType.equals("mouseover")) {

            Node currentNode = (Node)event.getTarget();

            String location;
 
            while (currentNode != null) {

                if (currentNode instanceof DAnchorElement) {

                    location = ((DAnchorElement)currentNode).getHref();
 
                    if ((location != null) && (location.length() != 0)) {

                        tooltipLabel.setText(location);
 
                        browserFrame.getStormBase().runOnEventThreadLater(

                            new Shower(

                                location, mouseEvent.getScreenX(),

                                mouseEvent.getScreenY()),

                            500);

                    }

                }
 
                currentNode = currentNode.getParentNode();

            }

        } else if (eventType.equals("mouseout")) {

            setVisible(false);

        }

    }
 
    private class Shower implements Runnable {

        private int screenX, screenY;

        private String location;
 
        Shower(String location, int screenX, int screenY) {

            this.location = location;

            this.screenX = screenX;

            this.screenY = screenY;

        }
 
        public void run() {

            tooltipLabel.setText(location);

            tooltipLabel.invalidate();

            invalidate();

            pack();

            setLocation(screenX + 5, screenY + 5);

            setVisible(true);

        }

    }

}

You must also add the following import statements:

import org.w3c.dom.Node;

import org.w3c.dom.events.EventListener;

import org.w3c.dom.events.MouseEvent;

The following is also required within the BrowserFrame:

StormBase getStormBase() {

    return stormBase;

}

The new class accomplishes the following:

Implements the org.w3c.dom.events.EventListener interface, allowing the class to listen for events.
Contains a java.awt.Label to display the tooltip.
Calls the runOnEventThreadLater( ) method of StormBase to show the label with a half second delay.
Finds the DOM node under the mouse cursor. If a location is found, an instance of Shower is created to show the tip from the application event thread with a half second delay.

To explain the threading logic in detail is beyond the scope of this tutorial. However, it is important to be able to listen for DOM events.

Other Necessary Modifications

The BrowserFrame will have its own Tooltip instance. Here is a part of the new class:

private TextField locationTextField;

private Tooltip tooltip;
 
BrowserFrame(StormBase stormBase, Viewport viewport) {

    this.stormBase = stormBase;

    viewportId = viewport.getId();

    tooltip = new Tooltip(this);

    contentPanel = new Panel();

You need to register the tooltip to listen for events. This is done with the HTML 4 pilot when the pilot has been fully loaded by StormBase. To know when this has happened, you can listen for the pilotLoading,end event in the propertyChange( ) method:

else if ((propertyName.equals(PropertyConstants.TITLE)) &&

    (viewport.getId().equals(viewportId))) {



    setTitle(" " + newValue);

} else if ((propertyName.equals(PropertyConstants.PILOT_LOADING)) &&

    (newValue.equals(PropertyConstants.END))) {



    if (viewport.getPilot() instanceof ThePilot) {

        ThePilot pilot = (ThePilot)viewport.getPilot();

        pilot.addPersistentDOMEventListener("mouseover", tooltip, true);

        pilot.addPersistentDOMEventListener("mouseout", tooltip, true);

    }

}

The true argument specifies that you will capture the event.