Jump into JavaFX, Part 4: The advanced APIs

Explore the JavaFX media, GUI construction, and effects APIs

By Jeff Friesen, JavaWorld.com, 04/07/09

Jeff Friesen continues his comprehensive introduction to the JavaFX APIs, based on JavaFX Preview SDK, with a look at how JavaFX handles media, GUI construction, and effects. You'll also try your hand at building a stock-ticker application, which you'll then deploy as an applet to the Google Chrome browser. Level: Intermediate

In the previous article in this series I introduced you to the basic JavaFX APIs: javafx.lang, javafx.util, and javafx.animation. I also discussed nodes, shapes, and images. In this article I'll build on that discussion by introducing the JavaFX APIs for handling media, constructing GUIs (via Swing components, groups, layout managers, and custom nodes), and creating sophisticated graphic effects. I'll conclude with a hands-on exercise in creating a stock ticker application and deploying it (via the Java Deployment Toolkit) as an applet to the Google Chrome browser.

Note that the discussion in this article is based on the JavaFX APIs in the JavaFX Preview SDK, which will differ somewhat from the APIs in JavaFX SDK 1.x. What you learn here will serve as background for my first look at JavaFX SDK 1.0 in the final two articles of this series.

Media

Rich internet applications need to support video and audio content, a fact that Sun is addressing via its Java Media Components (JMC) project. For starters, JMC consists of a media player API, which allows you to play video and audio in a variety of formats. Eventually, JMC will also offer APIs for capturing video and audio, and for providing other capabilities.

JavaFX exposes the media player API to scripts via the javafx.scene.media package's five classes:

• Media represents a media resource, and contains information regarding the media's source URI, resolution width and height, and more.
• MediaError describes the various errors that can occur while trying to play a media resource.
• MediaPlayer provides the means for playing and pausing media, responding to various media events, and more.
• MediaTimer specifies a time and an action to be performed when the playing media reaches this time.
• MediaView is a Node subclass that provides a transformable (depending on media support for transformations) view of playing media.

A simple player begins with a Media object whose source attribute is initialized to a target URI. This object is assigned to a MediaPlayer object's media attribute, and the MediaPlayer object is assigned to a MediaView object's mediaPlayer attribute. These relationships are illustrated in Listing 1's BasicPlayer.fx source code.

Listing 1. BasicPlayer.fx

/*
 * BasicPlayer.fx
 *
 */

package apidemo5;

/**
 * @author Jeff Friesen
 */

import java.lang.System;

import javafx.application.Frame;
import javafx.application.Stage;

import javafx.input.MouseEvent;

import javafx.scene.media.Media;
import javafx.scene.media.MediaPlayer;
import javafx.scene.media.MediaView;

import javafx.scene.paint.Color;

Frame
{
    title: "BasicPlayer"

    width: 400
    height: 300

    var mediaURI = "https://swinghelper.dev.java.net/bin/blog/sam/jfx/movie.avi";

    var skip = false; // skip extra onMouseClicked() invocation when true

    var mediaPlayerRef: MediaPlayer on replace
    {
        if (mediaPlayerRef != null)
            mediaPlayerRef.paused = true // the initial paused value is false
    }

    var stageRef: Stage
    stage: stageRef = Stage
    {
        fill: Color.BLACK

        var mediaViewRef: MediaView
        content: mediaViewRef = MediaView
        {
            mediaPlayer: mediaPlayerRef = MediaPlayer
            {
                media: Media
                {
                    source: mediaURI
                }
            }

            onMouseClicked: function (me: MouseEvent): Void
            {
                if (skip)
                {
                    skip = false;
                    return
                }

                skip = true;

                if (mediaPlayerRef.paused)
                    mediaPlayerRef.play ()
                else
                    mediaPlayerRef.pause ()
            }

            translateX: bind (stageRef.width-mediaViewRef.getWidth ())/2
            translateY: bind (stageRef.height-mediaViewRef.getHeight ())/2
        }
    }

    closeAction: function ()
    {
        mediaPlayerRef.pause ();
        System.exit (0)
    }

    visible: true
}

Listing 1 initializes a mediaURI variable to the URI of a short space shuttle movie -- this variable is subsequently assigned to a Media object's source attribute. This listing also introduces a skip variable to overcome a problem with mouse event-handling functions attached to a MediaView component -- each function is invoked twice for each mouse event.