Building A JavaFX Application Using NetBeans IDE

Building a JavaFX Application Using NetBeans IDE - Tutorial Overview
11/26/08 12:31 PM
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/
Nov 26, 2008
JavaFX Technology
Building a JavaFX Application Using NetBeans IDE

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
This tutorial gives you a quick tour of JavaFX application development using NetBeans IDE 6.5 for JavaFX 1.0. It shows you how to use
the features included with the IDE to perform the typical phases of developing a rich internet application (RIA) using the JavaFX
technology.
In this tutorial, you create an analog clock with an animated second hand, as shown in the the following figure. You use a graphical asset,
which was developed by a graphic artist, for the clock's background. You then deploy the clock to your local web browser as an applet. As
you build the application, you are introduced to some of the features the IDE has to offer for your application development. After you have
completed this tutorial, you will know how to create, preview, run, and locally deploy JavaFX applications using the NetBeans IDE.
Completed MyClockProject built in this tutorial
MyClockProject.zip
Figure 1. Completed Clock Application
Intended Audience
This tutorial is targeted for developers who are new to developing applications using the JavaFX Script programming language and the
NetBeans IDE.
Tutorial Requirements
Prior to starting with this tutorial, ensure that you have dowloaded and installed the NetBeans IDE 6.5 for JavaFX 1.0 or that you have
updated your NetBeans IDE 6.5 installation with JavaFX 1.0 Plugin for NetBeans. If necessary, refer to the What to Download page of the
Getting Started With JavaFX Technology.
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
copyright Sun Microsystems, Inc
The Rate & Review feature is available only on the online version of this tutorial.
Page 1 of 1
Building a JavaFX Application Using NetBeans IDE - 2. Create a JavaFX Project
11/26/08 2:40 PM
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/create-project.html
Nov 26, 2008
2. Create a JavaFX Project

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
You begin by creating a project. A project in NetBeans IDE is the equivalent of your working environment for an application. When you
create a new JavaFX project, one of the default files the IDE creates is a file named Main.fx, which is set as the main class for your
application.
1. Start NetBeans IDE by using the appropriate step from the following list:
For Windows. Double-click the NetBeans 6.5 desktop icon.
For Mac OS X. Double click the executable NetBeans 6.5 icon in the /Applications/NetBeans/ directory.
2. Create a JavaFX Application project:
a. Choose File > New Project from the main menu.
b. In the New Project wizard, select the JavaFX category and the JavaFX Application project type.
c. Click Next.
d. Name the project M y C l o c k P r o j e c t
t.
e. Note the default project location. Browse and select a different location, if you like.
f. Leave all the other default settings unchanged.
g. Click Finish.
Figure 2 shows an example of what the New wizard's Name and Location page looks like with values specified.
Figure 2. New Wizard's Name and Location Page.
Page 1 of 3
11/26/08 2:40 PM
The IDE creates the project directory in the specified project folder and gives it the same name as your project.
3. Explore the Projects window.
The myclockproject package and all the files needed for the JavaFX application have been created. The files are grouped by
category, as shown in Figure 3.
Figure 3 . Main.fx File and Libraries node in Projects

Window
Because you left the Create Main Class checkbox selected in the New Project wizard, the IDE created the Main.fx main class file
for you. The file is automatically opened and displayed in the Source Editor, as shown next.
Figure 4 . Clock.fx File in the Source Editor
4. Expand the Libraries node.

In Figure 3 above, notice the node for JavaFX SDK on Java 1.6, which includes the JAR files that are required by the new JavaFX
application you just created. Everything that the application needs is already included in the project creation.
Page 2 of 3
11/26/08 2:40 PM
The version of the JavaFX SDK that is installed with the JavaFX plugins depends on your platform. On the Microsoft Windows
platform, the default is JavaFX SDK on Java 1.6. On the Apple Macintosh OS X platform, the default version is JavaFX SDK on Java
1.5. You can set the IDE to use a different installation of the JavaFX SDK of your choice for JavaFX projects you create. For more
information on how to to that, go to the IDE's main menu and choose Help > Help Contents > JavaFX Applications > JavaFX Project
Setup and Configuration > Setting the Target JavaFX SDK in a JavaFX Project.
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Tell us what you think of the content of this page.
Excellent
Good
Fair
Poor
Comments:
Your email address (no reply is possible without an address):

Sun Privacy Policy
Note: We are not able to respond to all submitted comments.
Submit
Page 3 of 3
Building a JavaFX Application Using NetBeans IDE - 3. Modify the Default Main.fx File
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/modify-mainfx.html
11/26/08 2:45 PM
Nov 26, 2008
3. Modify the Default Main.fx File

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
The Main.fx file contains the Stage object literal that will contain the clock you build in this tutorial. Modify the file so that the Stage
has the correct title, width, height, and the Scene will contain the analog clock for the application in this tutorial.
1. Delete the following default import statements from the top of the Main.fx source file since we don't need the Text and Font
object literals in this file.
import javafx.scene.text.Text;
import javafx.scene.text.Font;
2. Copy the following lines of code and paste them in the editor, replacing the default Stage object defined with the file creation.
Stage {
title: "JavaFX Clock Application"
width: 295
height: 325
onClose: function () {
java.lang.System.exit( 0 );
}
visible: true
scene: Scene {
content: [ ]
}
}
Stage is the top level container window required to display any visible JavaFX objects. The instance variables title, width, and
height define the text that appears on the window's top border and its height and width. The scene variable defines an instance of
the Scene object literal, which is similar to a drawing surface for your application's graphical objects. The content variable is
defined to contain the array of scene graph nodes. For this tutorial, the content variable will contain an instantiation of the Clock
class file that you will create next.
For more information about the different object literals used, refer to the JavaFX API document, which can be accessed from the IDE
main menu by choosing Help > Javadoc References > JavaFX API.
3. Save your work thus far by pressing Ctrl+S anywhere in the source editor.
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Page 1 of 2
Building a JavaFX Application Using NetBeans IDE - 3. Modify the Default Main.fx File
Excellent
Good
Fair
11/26/08 2:45 PM
Poor
Comments:

Sun Privacy Policy
Submit
Page 2 of 2
Building a JavaFX Application Using NetBeans IDE - 4. Define the Custom Node Clock Class
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/create-clock-class.html
11/26/08 2:46 PM
Nov 26, 2008
4. Define the Custom Node Clock Class

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
In this section, you add a new Clock.fx class file, which will contain the JavaFX Script code to create an analog clock. You use the
Palette window to use one of the code snippets to help you start building the clock.
1. In the Projects window, right click the Source Packages > myclockproject node and select New > Empty JavaFX File, as shown next.
Figure 5. Create a New Empty JavaFX File
2. Create the new Class.fx file that will contain the code for building the clock.
a. In the New Empty JavaFX File wizard, name the file C l o c k
k.
b. Leave all the other default settings unchanged, as shown next, and click Finish.
Page 1 of 3
11/26/08 2:46 PM
Figure 6. Naming the New Empty JavaFX File
The new Clock.fx file is added to MyClockProject source tree in the Projects window and the file is opened in the source
editor under a new Clock.fx tab.
3. Extend the CustomNode class to start building the clock.
You begin by working with the Palette on the right side. The palette provides commonly used code templates or snippets for
developing a JavaFX application. When you drag and drop the code snippets, the necessary import statements are also added to the
source file. The code snippets also include default values, all of which you can modify immediately after dropping the code into the
source file.
a. In the Clock.fx file in the source editor, delete the line that says //place your code here and replace it with the
CustomNode code snippet.
b. In the Palette window, drag the CustomNode code snippet from the Applications category and drop it in the source editor, as
shown next.
Page 2 of 3
11/26/08 2:46 PM
Figure 7 . Drag Custom Node Code Snippet to the Source Editor.
Notice that the import statements necessary for the CustomNode code snippet were added. The MyCustomNode class name is
highlighted by default so that you replace it with your class name.
c. Replace MyCustomNode with Clock as the name of the class, make the class public, and modify the create() function so
that the class is now defined as shown next. Notice that a new Group object literal has been added. You may copy the following
lines of code and use it to replace what is currently in the file.
public class C l o c k extends CustomNode {

public override function create() : Node {
return Group {
content: [
Group {
content: [
]
}
]
};
}
}
A Group object literal contains a sequence of graphical objects. There are two Group object literals declared above. The second
Group will contain the sequence of objects that make up the clock's face. The first Group declared will contain the graphic asset
that is used for the clock's background and also the contents of the second Group object.
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:

Sun Privacy Policy
Submit
Page 3 of 3
Building a JavaFX Application Using NetBeans IDE - 5. Define the Clock's Face
11/26/08 2:46 PM
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/define-clock-face.html
Nov 26, 2008
5. Define the Clock's Face

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Now build the Clock's face by creating a circle using the code snippet from the Palette.
1. Create the circle first by using the Palette.
This circle is used temporarily to help center the numbers that you add to the face of the clock later in the tutorial.
a. Expand the Basic Shapes node in the Palette window.
b. Select and drag the Circle code snippet to the editor. Drop it on the line between the brackets [ ] for the content object, as
shown next.
Figure 8 . Insert Circle Code Snippet From the Palette Window
After dropping the code snippet, the function create() should now look like the following:
public override function c r e a t e ( )): Node {

return Group {
content: [
Group {
content: [
Page 1 of 4
11/26/08 2:46 PM
Circle {
centerX: 100,
centerY: 100
radius: 40
fill: Color. BLACK
}
]
}
]
};
}
2. Using the code completion feature, modify the Circle's properties.

a. Delete the centerX and centerY properties, as they are not needed for the circle's purpose.
b. Place your cursor to the left of the word fill: and press Ctrl+Space.
The list of available properties for a circle is displayed.
c. Type "st" to narrow the list down to the selections starting with "st".
Figure 9. Select Stroke Property From Code Completion List
d. Select stroke from the pop-up menu and press Enter.

The stroke property replaces the fill property.
e. Similarly, replace the circle's color by placing the cursor between the code Color. and the word BLACK, and press Ctrl+Space.
f. Select BLUE from the pop-up menu.
The word BLUE replaces the word BLACK. The second content code block now appears as the following:
content: [
Circle {
radius: 40
stroke: Color. BLUE
Page 2 of 4
11/26/08 2:46 PM
}
]
3. Define the public variables for the circle's properties by placing your cursor on the line above the public function create().
Copy and paste the following lines of code in the editor.
public var radius: Number = 77;

public var centerX : Number = 144;
public var centerY : Number = 144;
4. Notice the syntax highlighting feature in the source code editor.

The JavaFX Script language keywords and variables that are used are highlighted in distinct colors, as shown in the following figure.
Figure 10 . Syntax Highlighting Feature
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:
Page 3 of 4
11/26/08 2:46 PM

Sun Privacy Policy
Submit
Page 4 of 4
Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/add-clock-hands.html
11/26/08 2:47 PM
Nov 26, 2008
6. Add the Clock's Hands and Numbers

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Now add the numbers and hands for the clock.

1. Add the source code for the clock's center and hands by copying and pasting the lines of code provided in the following steps.
Alternatively, you can use the Palette to use the code templates for circles and lines to draw the clock's center circle and hands. After
you drop the appropriate code snippets, you need to modify each shape's properties to match the lines of code in step 1a.
a. Copy the following lines of code.
The lines of code define the center circles and the clock's three hands for the seconds, minutes, and hour. Notice that the circle's
radius has been modified. The radius variable was set to be the distance between the circle's center and the clock numbers. So,
now the clock face's radius should be made slightly greater.
content: [
Circle {
radius: radius + 10
stroke: Color.BLUE
}, //Circle
// code for the clock's first center circle
Circle {
radius: 5
f i l l : C o l o r . DARKRED
}, //Circle
//code for the smaller center circle
Circle {
radius: 3
f i l l : C o l o r . RED
}, //Circle
//code for the seconds hand
Line {
// add the seconds hand transforms code here
e n d Y : - radius - 3
strokeWidth: 2
s t r o k e : C o l o r . RED
},
//Line
//code for the hour hand
Path {
//add the hour hand transforms code here
f i l l : C o l o r . BLACK
elements: [
MoveTo {x: 4, y: 4},
ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
y: 0},
L i n e T o { x : radius - 1 5
] //elements
},
// Path
// code for the minutes hand
Path {
//add the minutes hand transforms code here
Page 1 of 6
11/26/08 2:47 PM
f i l l : C o l o r . BLACK
elements: [
MoveTo {x: 4, y: 4},
ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},
y: 0},
L i n e T o { x : radius
] // elements
} // Path
] //content
b. In the source editor, select the content code block as shown next and replace it with the lines of code you just copied in the
previous step.
Figure 11.Content Code Block Highlighted
c. Notice that the error detection feature displayed all the errors after you added the block of code in the previous step. Figure 12
shows the red symbols on the left and right margins to indicate that errors were identified. The wavy red lines underline the area
where the errors are detected. In this case, the errors are due to the missing import statements needed for the lines of code you
just pasted.
Page 2 of 6
11/26/08 2:47 PM
Figure 12. Error Detection Feature
d. Right-click anywhere in the editor area and select Fix Imports(Ctrl-Shift-I) from the menu.
e. Select the javafx.scene.shape.Line in the first pop-up dialog, as shown in the next figure, and press Enter. In the next
pop-up dialog, select javafx.scene.shape.Path and press Enter.
Figure 13. Fix Imports Feature
Notice that the following import statements were added and all the errors have been eliminated. You were only prompted to
make a selection when there is more than one API available.
import
import
import
import
import
javafx.scene.shape.ArcTo;
javafx.scene.shape.Line;
javafx.scene.shape.LineTo;
javafx.scene.shape.MoveTo;
javafx.scene.shape.Path;
Page 3 of 6
11/26/08 2:47 PM
2. Add the lines of code to define the numbers on the face of the clock.
a. Copy the following for statements in bold and paste them between the code block for the first circle you created in this tutorial
and the comment line for the clock's first center circle, as shown next.
These lines of code draw the number for every third hour on the clock. The transforms variable defines the sequence of
javafx.scene.transform.Transform objects to be applied to the Text object. The Translate class translates
object coordinates by the values of the specified factors. The x and y coordinates of the Text class define the left bottom point
of the text. So the clock numbers are centered using the Translate class.
The Rotate class rotates object coordinates around an anchor point.
Circle {
radius: radius + 10
stroke: Color.BLUE
}, // Circle
// code to display the numbers for every third hour
for ( i in [ 3 , 6 , 9 , 1 2 ] )
Text {
transforms: Translate { x : -5, y : 5 }
font: Font {size: 16 }
x : radius * ( ( i + 0 ) mod 2 * ( 2 - i / 3 ) )
y : radius * ( ( i + 1 ) mod 2 * ( 3 - i / 3 ) )
content: "{i}"
},
//Text
//code to display a black circle for the rest of the hours on the clock
for ( i in [ 1 . . 1 2 ] )
if ( i mod 3 ! = 0 ) then C i r c l e {
transforms: Rotate { angle: 30 * i }
centerX: radius
radius: 3
fill: Color.BLACK
} //for
else [ ] ,
// code for the clock's first center circle
Circle {
radius: 5
fill: Color.DARKRED
}, // Circle
b. Right-click anywhere in the editor area and select Fix Imports(Ctrl-Shift-I) from the menu to add the import statements necessary
for the code you have just pasted.
c. Select the javafx.scene.text.Font in the first pop-up dialog, press Enter. In the next pop-up dialog, select
javafx.scene.transform.Rotate and press Enter. In the next pop-up dialog, select javafx.scene.text.Text
and press Enter. In the last pop-up dialog, select javafx.scene.transform.Translate and press Enter.
Notice that the following import statements were added and all the errors were eliminated.
import javafx.scene.text.Font;
import javafx.scene.text.Text;
import javafx.scene.transform.Rotate;
Page 4 of 6
11/26/08 2:47 PM
import javafx.scene.transform.Translate;
d. Copy and paste the lines of code for transforms, as shown in bold below. Paste them between the lines with the Group and
content: code blocks, as shown in the following. This code draws the numbers and hands in the correct location within the
clock's boundary.
public override function create(): Node {

return Group {
content: [
Group {
transforms: Translate {
x : centerX ,
y : centerY
}
content: [
e. Right-click anywhere in the editor area and select Format (Alt-Shift-F) from the pop-up menu to format the code you have just
pasted.
The block of code that builds the clock's hour numbers should now look like the following:
Page 5 of 6
11/26/08 2:47 PM
Figure 14. Complete Code for Clock's Hour Symbols
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:

Sun Privacy Policy
Submit
Page 6 of 6
Building a JavaFX Application Using NetBeans IDE - 7. Add a Graphic Background
11/26/08 2:48 PM
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/add-graphic.html
Nov 26, 2008
7. Add a Graphic Background

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
The IDE provides you the ability to include graphic files to help enhance the look of your application. Add a background image that was
designed by a graphic designer for this tutorial.
1. Right-click this link to the clock_background.png image file and save it into your project's source folder.
By default this project folder is at <user-home-dir>/NetBeansProjects/MyClockProject/src/myclockproject. To
find out the path to your project's folder, right-click the MyClockProject node in the Projects window and select Properties. The
properties window displays the project folder location.
After successfully adding the image file, the file appears in the Projects window under the MyClockProject > Source Packages >
myclockproject folder.
2. In the source editor, delete the lines that define the circle with the stroke of blue, as shown next.
This circle was used to help show the clock's face, but now that a graphic background is being added, this circle is no longer needed.
Circle {
radius: radius + 10
stroke: Color.BLUE
},
3. Click the - icon on the left margin of content: to hide that block of code, as shown in the next.
The JavaFX editor's code-folding feature enables you to collapse the display of certain code blocks and comments, giving you more
space to work on other sections of the source file. When you click the + icon next to a folded code block, the code block expands.
Folded code is denoted by an ellipsis box. Hold the cursor over the ellipsis box and the IDE displays the collapsed code block.
Page 1 of 3
11/26/08 2:48 PM
Figure 15. Code Folding Feature
4. Create a new line between content: [ and the second Group { , as shown where the blue bar is in the above image.
5. Expand the Basic Shapes in the Palette window and drag the Image code snippet right into the empty line you just created.
Figure 16. Add Background Image
Remember to add the comma after the last curly brace. The Image code snippet should now look like the following.
Figure 17. Image Code Snippet Added
Page 2 of 3
11/26/08 2:48 PM
6. Replace /myPicture.png (see the code in Figure 17) with clock_background.png.

Note that the leading slash (/) is removed in the replacement. The ImageView code block should now look like the following:
ImageView {
image: Image {
url: "{__DIR__}clock_background.png"
}
},
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:

Sun Privacy Policy
Submit
Page 3 of 3
Building a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation
11/26/08 2:48 PM
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/use-preview.html
Nov 26, 2008
8. Use the Preview Feature and Add Animation

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
The Preview feature included with the JavaFX plugin enables you to view your application without having to compile and run it first.
Changes you make to the source file are immediately reflected in the preview window.
1. Click the Main.fx tab in the editor pane and modify the scene's content variable to display the Clock class that you created in
the previous section.
2. Right-click anywhere in the editor area and select Fix Imports(Ctrl-Shift-I) from the menu.
Select myclockproject.Clock from the pop-up window. The Main.fx file's contents should now look like the following.
Figure 18. Add a Call to the Clock Class in the Main.fx file
3. While on the Main.fx tab, click the Preview button
to enable the preview feature.
When the Preview feature is enabled, a new Design Preview window appears and displays the analog clock, as shown in the following
image. If necessary, resize the preview pane to view the whole clock.
Page 1 of 5
11/26/08 2:48 PM
Figure 19. Preview Feature Enabled
4. Now click the Clock.fx tab and add the following import statements at the top of the source file where all the import statements are
located.
import java.util.Date;
import java.lang.Math;
5. Copy the following lines of code in bold. They define the attributes for the hours, minutes, seconds, and the nextTick() function.
Paste the lines directly below the line that defines the centerY attributes and above the line for the public function
create() code block.
public var centerY: Number = 144;

public var hours : N u m b e r ;
public var minutes : N u m b e r ;
public var seconds: N u m b e r ;
public function
var n o w
seconds
minutes
hours =
nextTick () {
= new D a t e ( ) ;
= now.getSeconds();
= now.getMinutes();
now.getHours();
public override function create(): Node {
6. Add the following init() code.

Page 2 of 5
11/26/08 2:48 PM
a. Click the - icon to the left margin of the functions nextTick() and create() to fold those blocks of code.
b. A dd the init { } code block and define the variable timeline, as shown next.
Figure 20 . init Code Block for Animation
c. In the Palette window, expand the Animation node and drag the Timeline code snippet. Drop it at the end of the line where
timeline is defined.
The init code block should now look like the following:
Figure 21. Animation Code Snippet Added
Animation occurs along a timeline, represented by a javafx.animation.Timeline object. Each timeline contains one or
more key frames, represented by javafx.animation.KeyFrame objects. For more information about animation, see
Creating Animated Objects, a lesson in Building GUI Applications With JavaFX."
Page 3 of 5
11/26/08 2:48 PM
d. A dd the action code snippet by dragging the Animation > Action code snippet from the Palette and dropping it after the line
where canSkip variable is defined.
e. Add the call to the nextTick() function into the action: function () code block.
The nextTick() function is called when the elapsed time on a cycle passes the specified time of one second for this
KeyFrame.
f. Right-click anywhere in the editor area and select Format (Alt-Shift-F) from the pop-up menu.
g. A dd the timeline.play(); call after the Timeline's code block.
The init code block should now look like the following:
Figure 22. Completed init Code Block
7. Now add the transform code to ensure that each of the clock's hands moves appropriately.
a. Expand the blocks of code that you folded earlier by clicking the code-folding box on the left margin again.
b. Press Ctl+F anywhere in the source file and search for 'add the seconds hand'.
c. Replace the line that says add the seconds hand transform code here with the following:
transforms: Rotate { angle: bind seconds * 6 }
d. Similarly for the hour and the minutes hands, define the transform properties by using the following lines of code in bold :
//for the hour hands

transforms: Rotate { angle: bind (hours + minutes / 60) * 30 - 90 }
//for the minutes hand

Page 4 of 5
11/26/08 2:48 PM
transforms: Rotate { angle: bind minutes * 6 - 90 }
e. Right-click anywhere in the editor area and select Format (Alt-Shift-F) from the menu to format the code you have just pasted.
f. Save your work by pressing Ctrl+S anywhere in the source editor.
8. Click on the Main.fx tab.
If you have the Preview feature still enabled and no errors are encountered, the preview pane was updated to reflect the clock with
animated seconds hand soon after you finished adding the code in the previous step. The change that you make in your source file is
immediately reflected in the preview pane, eliminating the need for you to compile the file first. If any compilation errors occur, the
preview pane displays information about the error encountered to assist you during your application development.
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:

Sun Privacy Policy
Submit
Page 5 of 5
Building a JavaFX Application Using NetBeans IDE - 9. Run the Clock Application as an Applet
http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/run-as-applet.html
11/26/08 2:49 PM
Nov 26, 2008
9. Run the Clock Application as an Applet

Download tutorial
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
In this section, you run the completed clock application using the IDE. You then create the applet file to locally deploy the application.
1. Close the Design Preview window.
2. In the Projects window, right-click the MyClockProject and choose Properties.
The IDE builds the project. The Output window shows the progress of the compilation and launch of a separate process. A separate
window displays the animated clock, as shown in the following:
Figure 23. Snapshot of the Running Clock

Application
3. Run the project locally as an applet in a web browser.

a. First, close the window with the running clock application.
b. Right-click the MyClockProject and choose Properties.
c. In the Project Properties dialog box, select the Run category.
d. Select Run in Browser as the Application Execution Model to use.
e. In the Categories pane, select the Application category.
f. Set the applet's width to 295, the height to 325, and click OK.
g. In the Projects window, right-click the root node and select Run Project.
The IDE creates the necessary files to run your application in a browser. A window for the default web browser for the IDE
appears and the applet is launched, as shown next.
Page 1 of 2
Building a JavaFX Application Using NetBeans IDE - 9. Run the Clock Application as an Applet
11/26/08 2:49 PM
Figure 24. Clock Applet Running in Web Browser
Summary
In this tutorial, you created a simple JavaFX application and explored some of the features offered in the NetBeans 6.5 IDE to support the
JavaFX Script programming language. The IDE with JavaFX support provides you the means to develop your rich internet applications
using the JavaFX Script programming language.
References
JavaFX Technology - Reference
Previous 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Next
Rate and Review

Excellent
Good
Fair
Poor
Comments:

Sun Privacy Policy
Submit
Page 2 of 2

Building A JavaFX Application Using NetBeans IDE

Caricato da

Informazioni sul documento

Titolo originale

Copyright

Formati disponibili

Condividi questo documento

Condividi o incorpora il documento

Opzioni di condivisione

Hai trovato utile questo documento?

Questo contenuto è inappropriato?

Copyright:

Formati disponibili

Building A JavaFX Application Using NetBeans IDE

Caricato da

Copyright:

Formati disponibili

Building a JavaFX Application Using NetBeans IDE - Tutorial Overview

Nov 26, 2008