DZone, Inc.
|
www.dzone.com
By Stephen Chin
ABOUT JAVAFX
JavaFX www.dzone.com Get More Refcardz! Visit refcardz.com
#56
Getting Started with JavaFX
JavaFX is an exciting new platform for building Rich Internet
Applications with graphics, animation, and media. It is built
on Java technology, so it is interoperable with existing Java
libraries, and is designed to be portable across different
embedded devices including mobile phones and set-top
boxes. This Refcard will help you get started programming with
JavaFX Script and also serve as a convenient reference once
you have mastered the language.
To get started, you will have to download the latest JavaFX
SDK from the JavaFX website here: http://javafx.com/
The instructions in the following tutorial assume that you are
using an IDE, such as NetBeans. However, it is possible to do
everything from the command line as well.
CONTENTS INCLUDE:
n
About JavaFX
n
JFXPoetry, a simple example
n
JavaFX Reference
n
Hot Tips and more...
JFXPOETRY, A SIMPLE EXAMPLE
To illustrate how easy it is to build an application that melds
graphics, text, animation, and media, we will start with a simple
tutorial. The goal will be to write an application that:
• Loads and displays an image from the internet
• Displays and animates a verse of poetry
• Declaratively mixes in graphic effects
• Plays media asynchronously
For the JFXPoetry theme, we will use “Pippa’s Song,” a well-
known excerpt from Robert Browning’s Pippa Passes.
Loading an Image on the Stage
Stage and Scene are the building blocks of almost every
JavaFX program. A Stage can either be represented as a
Frame for desktop applications, a rectangle for applets, or the
entire screen for mobile devices. The visual content of a Stage
is called a Scene, which contains a sequence of content Nodes
that will be displayed in stacked order. The following program
creates a basic Stage and Scene which is used to display an
image:
var scene:Scene;
Stage {
title: “Pippa’s Song by Robert Browning”
scene: scene = Scene {
content: [
ImageView {
image: bind Image {
height: scene.height
preserveRatio: true
url: “http://farm1.static.ickr.com/39/
121693644_75491b23b0.jpg”
}
}
]
}
}
Notice that that JavaFX syntax makes it simple to express
nested UI structures. The curly braces “{}” are used for object
instantiation, and allow inline initialization of variables where
the value follows the colon “:”. This is used to instantiate an
ImageView with an Image inside that loads its content from the
given URL. To ensure the image resizes with the window, we
set preserveRatio to true and bind the Image. Binding is a very
powerful facility in JavaFX that makes it easy to update values
without heavyweight event handlers. Compiling and running
this application will display a picture of a misty morning in
Burns Lake, BC, Canada taken by Duane Conlon as shown in
Figure 1.
1 2
Figure 1: A JavaFX Stage containing an image loaded from the network
n
Authoritative content
n
Designed for developers
n
Written by top experts
n
Latest tools & technologies
n
Hot tips & examples
n
Bonus content online
n
New issue every 1-2 weeks
Subscribe Now for FREE!
Refcardz.com
Get More Refcardz
(
They’re free!
)
Displaying Text With Effects
Displaying text in JavaFX is as simple as instantiating a Text
Node and setting the content to a String. There are many
variables available on Text, but for this example we will set the
font, fill color, and also add a Drop Shadow effect to make the
text stand out on the background.
1
Creative Commons Attribution 2.0 License: http://creativecommons.org/licenses/by/2.0/
2
Duane Conlon’s Photostream: http://www.flickr.com/photos/duaneconlon/
评论0