Class #1: The Frame
Figure 2. The application background.
Before anything can be displayed, you will need a frame, like a Swing Frame. JavaFX offers complete support for Swing components and is much more easy to use in comparison with Java Swing. It's easy to set the frame attributes: dimensions, location, title, and visibility. It's also simple to specify the window content by using a simple Canvas (a Swing component from JavaFX) and an intuitive content attribute. Between brackets and separated by comma, you can specify all the graphical components that you want displayed on the Canvas. Because you want to have a scrollable frame, everything is inserted into a ScrollPane. Listing 1 shows the main class of the application, named mariahcarey.fx.
Class #2: The Background Animation
Now it's time to develop the first graphical component of the application. To do so, you need to know that a defined graphical component is a JavaFX class, which extends the CompositeNode class and implements the composeNode() operation. Here's a common example of writing graphical components:
class your_class extends CompositeNode {
//declaring attributes and operations
}
//initialize attributes
//definig operations
function your_class.composeNode() =
Group {
…
Note: The Group class is used to unify more graphical components so they can act as one. When applying an effect to a Group, the graphical components of the Group are viewed as an entity. There are also Groups that function as containers that have their own coordinate systems and are not visible.
If you look carefully at first page of Mariah Carey site, you will notice that the big picture of her (from the center) is replaced from time to time with other pictures, creating a nice effect on a static background. With JavaFX capabilities (and the right pictures), it's very easy to simulate that animation. A combination of three elements provides such great animations:
- The
opacity Attribute: This attribute takes a value between 0.0 (minimum opacity) and 1.0 (maximum opacity) and it represents the opacity degree of a graphical component. You can create a disappear/appear effect by covering the [0.0, 1.0] interval with the intermediate values and a time delay.
- The
dur(ation) Operator: This is a cool operator you can use to asynchronously apply an array to a time interval. The time is specified in milliseconds. There are four types of interpolations over the interval:
-
linear
- easein
- easeout
- easeboth
- The
bind Operator: This operator obtains an automatic update of the object that contains the attribute evaluated by bind. This update will take place every time the value of the attribute is changed by bind. This creates a lazy, incremental feel. Of course, the bind can also be used with constant values, but in that case, it has no effect.
Combining the power of these three elements leads to amazing animations and effects. Because you will use this for developing an images animation, you have to know how to load an image in JavaFX. The ImageView class accomplishes this in the same scripting manner. For example, to load the background image for the sample application, you would code something like this:
ImageView {
transform: []
image: Image
{ url: "{__DOCBASE__}//images//background.bmp" }
}
Note: The __DOCBASE__ is used to get the current directory.
In this case, the animation takes place at every mouse click. The mouse click event is represented by the onMouseClicked operation. JavaFX supports seven kinds of events:
-
onMouseClicked;
- onMouseMoved;
- onMousePressed;
- onMouseExited;
- onMouseEntered;
- onMouseReleased;
- onMouseDragged;
Here's an example of the onMouseClicked event:
onMouseClicked: operation(e:CanvasMouseEvent) {
…
}
Now that you've got all the theoretical information, all you need is to put it together to create the first graphical component of this application. This class is named Bk_end.fx (shown in Listing 2).
New on the Java Boutique:
New Review:
Time Management Made Easy with the Quartz Enterprise Job Scheduler
Why not just use the Java timer API? This open source scheduling
API boasts simplicity, ease-of-integration, a well-rounded feature
set, and it's free!
New Applet:
Reverse Complement
Reverse Complement is a simple applet that converts DNA or RNA
sequences into three useful formats.
Elsewhere on internet.com:
WebDeveloper Java
Lots of Java information on webdeveloper.com
WDVL Java
Thorough Java resource at the Web Developer's Virtual Library.
ScriptSearch Java
Hundreds of free Java code files to download.
jGuru: Your View of the Java Universe
Customizable portal with online training, FAQs, regular news updates, and tutorials.
|
