FX

Launch JavaFX Media Browser Application Download NetBeans Project

Introduction

In this task, you create a simple JavaFX application capable of browsing a media resource such as an image. The media browser application loads an image. On a mouse-click event, it displays the image at a larger scale, which is bound to the size of ImageView. On window resizing, the image is displayed in the center of Scene. You use the JavaFX keyword bind to update the height and width of the image automatically according to the change in the size of Scene.

You learn how to use the scene graph programming model (Figure 1) including Stage, Scene, CustomNode, Group, and Node.

• Stage - the top level container for the JavaFX application.
  
  
• Scene - a drawing surface for graphical content and a container that holds the scene graph nodes. It can be added to Stage, and JavaFX renders everything on a scene.
  
  
• CustomNode - is a subclass of javafx.scene.Node and created by overriding the create function. It can have one child node.
  
  
• Group - is a sequence of child nodes.
  
  
• Node - is an element in a scene graph, and javafx.scene.Node is an abstract class. The following visual objects are examples of javafx.scene.Node implementation: javafx.scene.image.ImageView, javafx.scene.media.Mediaview, javafx.ext.swing.*, javafx.scene.shape.*, and javafx.scene.text.Text. These are leaf nodes, which cannot have a child element.
  
  

Figure 1

This task also illustrates how the scene graph model is used to organize the Media Browser application into multiple JavaFX script files based on their functional groupings, which makes the application scalable.

Running the Project

The main scene of the application displays a thumbnail of an image. The thumbnail is centered on the scene. When you click the thumbnail, the larger scale image is displayed. Run the project to see how it works:

1. Download the Module 1 Task 1 NetBeans project and open it in the NetBeans IDE.
   
   
2. Run the project.
   
   
3. Click the thumbnail. The image is scaled up, and its image file name is displayed.
   
   
4. Click the image again, and it returns back to a thumbnail size.
   
   
5. Resize the window to see if the image is centered.

Exploring the Project

In the NetBeans IDE, expand module01-task01 > Source Packages > mediabrowser to see the source files that are included in Task 1.The application is built in four JavaFX class files.

The source files, as shown in Figure 2 include:

• Main.fx — Main program and the focal point of the application. It contains the stage, scene, and image classes. The image and its URL are included in the stage sequence. The image, named Thumbnail, is scaled by constraining the x,y coordinates of the image relative to the scene size.
  
  
• Constants.fx — Container for fixed values that are used in the application. The values include the thumbnail image height and width, the application stage height and width, the stage background color, and a placeholder image that is visible until an actual image is loaded.
  
  
• Thumbnail.fx — CustomNode that encapsulates the scaled-down image. Its function is to scale the image to fit the thumbnail dimensions and to handle a mouse click to show the scaledup image.
  
  
• Photo.fx — CustomNode that encapsulates the scaled-up image of the thumbnail. It includes the code for the bounding box that frames the selected image and the text that displays the image name.
  
  

Figure 2

Viewing the Application Development Progression

Each class file in the NetBeans project is annotated with the developers' comments. The following examples illustrate the Task 1 development progressions.

Main.fx is the main class file in Media Browser application and the first class to be built. The stage is created, and the scene is added to the stage. The value of size and background color of the stage are determined in Constants.fx, as shown in Figure 3.

Figure 3

Thumbnail.fx is a CustomNode that controls the position, scale, and behavior of the image. The CustomNode's create() method is called when the node is created. In order to provide your own node creation behavior, you have to override the create() function. Without the override keyword, the JavaFX Script compiler will issue an error when you create a function whose name and signature matches that of a function in a superclass.

In this CustomNode, Thumbnail, you create an ImageView that contains the thumbnail image, and then a function is added to handle the mouse-clicked event. The thumbnail's onMouseClicked function inserts the full size photo into the scene. Rather than just scaling up the thumbnail to a larger size, you are inserting another object into the scene graph with its own mouse handler. The mouse handler causes the scaled up image to return to the thumbnail view, as shown in the code sample:

override function create() : Node {
        ImageView {
            fitHeight: Constants.THUMB_HEIGHT
            fitWidth : Constants.THUMB_WIDTH

            x: bind xOrigin
            y: bind yOrigin
            image: image
            onMouseClicked: function(evt : MouseEvent) : Void {
                fullView(url, image);
            }
        }
   }
}

Note that Constants.fx is referenced in fitHeight and fitWidth attributes because it contains the thumbnail size values. Figure 4 shows the thumbnail.

Figure 4

Photo.fx is a CustomNode. Its original function was to control the scaled-up version of the image. It was then expanded by adding the bounding box Rectangle with color and opacity attributes, and the image file name in Text. As an enhancement, it controls the function of the placeholder image. The image loads in the background, and the placeholder image is used until the full image is loaded. Figure 5 shows how Photo.fx uses the scene graph model.

Figure 5

Try It

Replacing the URL

You can replace the image URL with a link to your favorite image.

1. Open Main.fx and scroll to the scene class.

   scene : Scene {
        fill: Constants.stage_background_color;
        content: [
             Thumbnail {
                xOrigin: bind (stage.scene.width - Constants.THUMB_WIDTH)/2
                yOrigin: bind (stage.scene.height - Constants.THUMB_HEIGHT)/2
                url: "{Constants.CODEBASE}images/image_01.jpg"
                fullView: showPhoto
          }
        ]
    }
 }

2. Replace the current URL with your own. If you use a local image file, make sure to use the path file:///<path>.
   
   
3. Run the project. Your image is now the thumbnail image on the stage. Click the image to enlarge it. You see that the name of your image is shown.

If your image is not sized in a 4:3 aspect ratio, the thumbnail image appears skewed. This is because the thumbnail sizes are fixed in the Constants.fx class. This is addressed in Module 1 Task 3.

The xOrigin, yOrigin coordinates control where the thumbnail is placed in the scene. The values are calculated in Main.fx (because Main.fx controls what happens in the scene) so that the thumbnail is centered. Xorigin, yOrigin are bound to the size of scene and thumbnail. The proportional scaling is controlled by fitHeight, fitWidth, and preserveRatio, which are all variables of ImageView in Photo.fx.

Changing the Stage Size

You can modify the size of the stage by changing the values in Constants.fx:

1. Open Constants.fx.
   
   
2. Change the stage height to 300 and the width 500, as shown here:

package def stage_height = 300;
package def stage_width = 500;

3. Run the project.
   
   The thumbnail image is the same size as the thumbnail in the original stage size. This is because the thumbnail sizes are set in Constants.fx as THUMB_WIDTH = 100 and THUMB_HEIGHT = 75.
   
   
4. Click the thumbnail to expand the image. You see that your image is scaled proportionately to the stage size, because the width and height of the image are bound to the width and height of the stage in Main.fx.
   
   
5. Change the stage height and width back to their original values (height 500, width 900).

Modifying Main.fx and Photo.fx

In Main.fx, comment out the setting of x and y in thumbnail. In Photo.fx, modify the text to to be displayed at the top of the image. Run the project and observe the changes.

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.