<<

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 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 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 © , Inc

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

Building a JavaFX Application Using NetBeans IDE 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.

. Click Next.

d. Name the project MyClockProject.

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 Building a JavaFX Application Using NetBeans IDE - 2. Create a JavaFX Project 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 Building a JavaFX Application Using NetBeans IDE - 2. Create a JavaFX Project 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 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 »

copyright © Sun Microsystems, Inc

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

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/modify-mainfx.html Nov 26, 2008

Building a JavaFX Application Using NetBeans IDE 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 Tell us what you think of the content of this page.

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

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 »

copyright © Sun Microsystems, Inc

Page 2 of 2 Building a JavaFX Application Using NetBeans IDE - 4. Define the Custom Node Clock Class 11/26/08 2:46 PM

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/create-clock-class.html Nov 26, 2008

Building a JavaFX Application Using NetBeans IDE 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 ClockClock.

b. Leave all the other default settings unchanged, as shown next, and click Finish.

Page 1 of 3 Building a JavaFX Application Using NetBeans IDE - 4. Define the Custom Node Clock Class 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 Building a JavaFX Application Using NetBeans IDE - 4. Define the Custom Node Clock Class 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 ClockClock 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.

4. 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 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 »

copyright © Sun Microsystems, Inc

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

Building a JavaFX Application Using NetBeans IDE 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 create()create(): Node { return Group { content: [ Group { content: [

Page 1 of 4 Building a JavaFX Application Using NetBeans IDE - 5. Define the Clock's Face 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 Building a JavaFX Application Using NetBeans IDE - 5. Define the Clock's Face 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 feature in the 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

5. 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 Tell us what you think of the content of this page. Excellent Good Fair Poor Comments:

Page 3 of 4 Building a JavaFX Application Using NetBeans IDE - 5. Define the Clock's Face 11/26/08 2:46 PM

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 »

copyright © Sun Microsystems, Inc

Page 4 of 4 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 11/26/08 2:47 PM

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/add-clock-hands.html Nov 26, 2008

Building a JavaFX Application Using NetBeans IDE 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.BLUEBLUE }, //Circle // code for the clock's first center circle Circle { radius: 5 fill: Color.DARKRED }, //Circle //code for the smaller center circle Circle { radius: 3 fill: Color.RED }, //Circle //code for the seconds hand Line { // add the seconds hand transforms code here endY: -radius - 3 strokeWidth: 2 stroke: Color.RED

}, //Line //code for the hour hand Path { //add the hour hand transforms code here fill: Color.BLACK elements: [ MoveTo {x: 4, y: 4}, ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1}, LineTo{ x: radius - 15 y: 0}, ] //elements }, // Path // code for the minutes hand Path { //add the minutes hand transforms code here

Page 1 of 6 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 11/26/08 2:47 PM

fill: Color.BLACK elements: [ MoveTo {x: 4, y: 4}, ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1}, LineTo{ x: radius y: 0}, ] // 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 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 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 javafx.scene.shape.ArcTo; import javafx.scene.shape.Line; import javafx.scene.shape.LineTo; import javafx.scene.shape.MoveTo; import javafx.scene.shape.Path;

Page 3 of 6 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 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, 12]) 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..12]) if (i mod 3 != 0 ) then Circle { 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 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 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 Building a JavaFX Application Using NetBeans IDE - 6. Add the Clock's Hands and Numbers 11/26/08 2:47 PM

Figure 14. Complete Code for Clock's Hour Symbols

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 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 »

copyright © Sun Microsystems, Inc

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

Building a JavaFX Application Using NetBeans IDE 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 /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 Building a JavaFX Application Using NetBeans IDE - 7. Add a Graphic Background 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 Building a JavaFX Application Using NetBeans IDE - 7. Add a Graphic Background 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" } },

7. 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 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 »

copyright © Sun Microsystems, Inc

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

Building a JavaFX Application Using NetBeans IDE 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 Building a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation 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:Number; public var minutes:Number;

public var seconds:Number;

public function nextTick () { var now = new Date(); seconds = now.getSeconds(); minutes = now.getMinutes(); hours = now.getHours(); }

public override function create(): Node {

6. Add the following init() code.

Page 2 of 5 Building a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation 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 Building a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation 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 Building a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation 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 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 »

copyright © Sun Microsystems, Inc

Page 5 of 5 Building a JavaFX Application Using NetBeans IDE - 9. Run the Clock Application as an Applet 11/26/08 2:49 PM

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/run-as-applet.html Nov 26, 2008

Building a JavaFX Application Using NetBeans IDE 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 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 »

copyright © Sun Microsystems, Inc

Page 2 of 2