JavaFX GUI Learning: Task Learning

Learning from practice!

---

This article is the note of my learning of JavaFX under the offical javaFX website tutorial:
http://www.javafx.com/docs/tutorials/mediabrowser/index.jsp

Task 1: Loading and Displaying an Image

Graph Programming Model :

• Stage is the top level container for JavaFX program.
  
• Scene is 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.

By the tutorials of SUN, it supply a architecture of this program:

In our program, main.fx is the main class file and the first class to be built, we build a stage and add a scene into it.

You can download the netbeans project file to have a detail looking of this project

http://www.javafx.com/docs/tutorials/mediabrowser/dist/module01-task01_nb.zip

The code of offical demo of task 1 is a little confusing to beginner, So I have change some code and comment so that it is easy for my self to understand, if you need, you can download it from http://ulysess.ys168.com/

After the task 1, we have a simply program that can scale-up a image by user's click.

Task 2 :will create a image wall.

So it is a good habbit to define a action by code like this:

package var fullView : function(metaData : MetaData, placeholder: Image) : Void;

object does not need to know how to do fullView, it let other object which will arrange its to do it.

Task 3: Adding a Expansion effect

Expansion effect will scale up you thumbnail 25% bigger while find your cursor is above it

In order to implementation that, we should make the program know how to center the thumbnail after scaled, and handing the expansion such that it does not make the wall resize.

We just need change thumbnail.fx class, put image into a boundingRect and use imageView to painting the thumbnail, and finally some mouse event, that is what we need.

Offical project can be download in http://www.javafx.com/docs/tutorials/mediabrowser/dist/module01-task03_nb.zip

---

Task 4:Building a Animation Effect

A program provide scale the image must have the basic function of zoom in and zoom out. We need timeline, key frame and interpolators to implement that functions.

• Timeline is an object that contains a list of key frames, together with a function to control the animation, which might be to start it, stop it, and repeat it.


• KeyFrame describes a set of end states of various properties (values) of objects at a certain time instant relative to the start of the animation, together with interpolation specifications to calculate the in-between values relative to the previous frame.
  
• KeyValue class defines a target, which is a reference to an object to animate, a value for the object to take on at the KeyFrame time, and an Interpolator.
  
• The type of interpolation is defined with a KeyValue so that different interpolation types can be used for each KeyValue in a KeyFrame and at different KeyFrame times. Custom interpolators can be written, but the following simple interpolators are provided for animating numeric values:

Interpolator.LINEAR - (The default) uses simple linear interpolation.

Interpolator.EASEOUT - Start changing the value slowly after the KeyFrame.

Interpolator.EASIN - Slow the rate of change as the KeyFrame is reached.

Interpolator.EASEBOTH - Smooth the rate of change through the KeyFrame.

A shorthand syntax is provided for defining simple KeyFrames.
at ( &;lttime&;gt ) {
&;lttarget&;gt =&;gt &;ltvalue&;gt tween &;ltinterpolator&;gt;
}

Well, does it looks a little familar? Yes, if you have a basic knowledge about FLASH, It just about the same concept. After you know the knowledge It's a easy task to do this.

Let us look at the architecture:

There are two new operator in the code, the => operator provides a literal constructor for a list of key values. The tween operator is a literal constructor for an interpolated value.

One thing should note in this section is that the interpolator can't be used at will other than it can result your animation play in unwanted way!

Task 5: Scroll Controller Feature

We have lots of photos and obviously it can not displayed in one screen, so we need scroll contorller to navigate to others thumbnails.

In this task we need a new class ScrollControl and add two function in wall.fx