FX

Media players have become an integral part of mobile applications. This article discusses how to create a media player with a minimal set of UI controls and deploy it on the mobile emulator.

Though you can use the whole spectrum of JavaFX functionality, some limits are imposed on developing mobile applications. Visual effects that are part of the javafx.scene.effects package and Swing UI controls from the javafx.ext.swing package are not supported in the mobile profile of API. The solution is to pre-render visual effects and controls as bitmaps in Adobe Photoshop.

Alternatively, you can use the JavaFX Media Component, a prefabricated media player introduced in applications at javafx.com/samples. The JavaFX Media Component is implemented in the form of a media panel with the following UI controls: the play and pause button, the progress bar, the status of elapsed and remaining time, and the close button.

Figure 1: Media Player Run on the Mobile Emulator

Although the JavaFX Media Component is not included in the SDK, it is very useful for a quick and effective media deployment. All you need is to create an instance of the MediaComponent class and integrate it into your application. Perform the following steps to run the media player application on the mobile emulator.

1. Add an import statement to include the JavaFX Media Component.

import com.sun.fxmediacomponent.MediaComponent;

2. Set the size of the media player.

// Choose sizes to match the emulator in landscape mode.
def screenWidth = 320;
def screenHeight = 240;

3. Create an instance of the MediaComponent class. Then specify the size of the media view panel and the media file to play.

var mediaComponent: MediaComponent = MediaComponent {
    mediaViewWidth: screenWidth
    mediaViewHeight: screenHeight
    mediaSourceURL: "http://sun.edgeboss.net/download/sun/09q2/09b01828/09b01828_11.mov"
};

4. Add the mediaComponent variable to the scene's content.

Stage {
    scene: Scene {
        content: mediaComponent
    }
}

5. Compile and run the application in the NetBeans IDE by using the Mobile Emulator Execution model. Use the Orientation 90° menu item to rotate the emulator. Press the Download NetBeans Project button to find the complete code of the application.

In order to play the media content used in this application, ensure that the required codecs are installed in your system.

We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.