Building a JavaFX Application Using NetBeans IDE

7/21/2019 Building a JavaFX Application Using NetBeans IDE

1/29

11/26/0g a JavaFX Application Using NetBeans IDE - Tutorial Overview

ttp://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/ Nov 26, 2008

vaFX Technology

uilding a JavaFX Application Using NetBeans IDE

Download tutorial

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9| Next

s tutorial gives you a quick tour of JavaFX application development using NetBeans IDE 6.5 for JavaFX 1.0. It shows you how to usefeatures included with the IDE to perform the typical phases of developing a rich internet application (RIA) using the JavaFX

hnology.

his tutorial, you create an analog clock with an animated second hand, as shown in the the following figure. You use a graphical asset,ch was developed by a graphic artist, for the clock's background. You then deploy the clock to your local web browser as an applet. Asbuild the application, you are introduced to some of the features the IDE has to offer for your application development. After you havepleted this tutorial, you will know how to create, preview, run, and locally deploy JavaFX applications using the NetBeans IDE.

ompleted MyClockProject built in th is tutorial

MyClockProject.zip

Figure 1. Completed Clock Application

nded Audience

s tutorial is targeted for developers who are new to developing applications using the JavaFX Script programming language and theBeans IDE.

orial Requirements

r to starting with this tutorial, ensure that you have dowloaded and installed the NetBeans IDE 6.5 for JavaFX 1.0 or that you haveated your NetBeans IDE 6.5 installation with JavaFX 1.0 Plugin for NetBeans. If necessary, refer to the What to Downloadpage of theting 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.


2/29

11/26/g a JavaFX Application Using NetBeans IDE - 2. Create a JavaFX Project

ttp://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/create-project.html Nov 26, 2008

ilding a JavaFX Application Using NetBeans IDE

Create a JavaFX Project

Download tutorial

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9| Next

begin by creating a project. A project in NetBeans IDE is the equivalent of your working environment for an application. When you

ate 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 yourication.

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.

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

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.


3/29


The IDE creates the project directory in the specified project folder and gives it the same name as your project.

Explore the Projects window.

The myclockprojectpackage and all the files needed for the JavaFX application have been created. The files are grouped bycategory, as shown in Figure 3.

Figure 3 . Main.fxFile and Libraries node in ProjectsWindow

Because you left the Create Main Class checkbox selected in the New Project wizard, the IDE created the Main.fxmain class filefor you. The file is automatically opened and displayed in the Source Editor, as shown next.

Figure 4 . Clock.fx File in the Source Editor

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.


4/29


The version of the JavaFX SDK that is installed with the JavaFX plugins depends on your platform. On the Microsoft Windowsplatform, the default is JavaFX SDK on Java 1.6. On the Apple Macintosh OS X platform, the default version is JavaFX SDK on Java1.5. You can set the IDE to use a different installation of the JavaFX SDK of your choice for JavaFX projects you create. For moreinformation on how to to that, go to the IDE's main menu and choose Help > Help Contents > JavaFX Applications > JavaFX ProjectSetup and Configuration > Setting the Target JavaFX SDK in a JavaFX Project.

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9| Next

te and Review

l us what you think of the content of this page.

Excellent Good Fair Poor

mments:

ur email address (no reply is possible without an address):n Privacy Policy

te: We are not able to respond to all submitted comments.

ubm it

copyright Sun Microsystems, Inc


5/29

11/26/g 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 Nov 26

uilding a JavaFX Appl ication Using NetBeans IDE

Modify the Default Main.fx File

Download

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

e Main.fxfile contains the Stageobject literal that will contain the clock you build in this tutorial. Modify the file so that the Sta

s the correct title, width, height, and the Scenewill contain the analog clock for the application in this tutorial.

Delete the following default import statements from the top of the Main.fx source file since we don't need the Textand Fontobject literals in this file.

importjavafx.scene.text.Text;

importjavafx.scene.text.Font;

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: [ ]

}

}

Stageis the top level container window required to display any visible JavaFX objects. The instance variables title, width

heightdefine the text that appears on the window's top border and its height and width. The scenevariable defines an insta

the Sceneobject literal, which is similar to a drawing surface for your application's graphical objects. The contentvariable is

defined to contain the array of scene graph nodes. For this tutorial, the contentvariable will contain an instantiation of the Clclass 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 themain menu by choosing Help > Javadoc References > JavaFX API.

Save your work thus far by pressing Ctrl+S anywhere in the source editor.

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

ate and Review

ll us what you think of the content of this page.


6/29

11/26/g a JavaFX Application Using NetBeans IDE - 3. Modify the Default Main.fx File


omments:

our email address (no reply is possible without an address):n Privacy Policy

ote: We are not able to respond to all submitted comments.

ubmit

copyright Sun Microsyst


7/29

11/26/g 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 Nov 26,


Define the Custom Node Clock Class

Download

Previous 1| 2| 3| 4 | 5| 6| 7| 8| 9|

his section, you add a new Clock.fx class file, which will contain the JavaFX Script code to create an analog clock. You use th

ette window to use one of the code snippets to help you start building the clock.

In the Projects window, right click the Source Packages > myclockproject node and select New > Empty JavaFX File, as shown

Figure 5. Create a New Empty JavaFX File

Create the new Class.fxfile 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.


8/29


Figure 6. Naming the New Empty JavaFX File

The new Clock.fxfile is added to MyClockProject source tree in the Projects window and the file is opened in the sourceditor under a new Clock.fxtab.

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 fordeveloping a JavaFX application. When you drag and drop the code snippets, the necessary import statements are also added source file. The code snippets also include default values, all of which you can modify immediately after dropping the code into source file.

a. In the Clock.fxfile in the source editor, delete the line that says //place your code hereand replace it with theCustomNode code snippet.

b. In the Palette window, drag the CustomNode code snippet from the Applications category and drop it in the source editor, ashown next.


9/29


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 namhighlighted by default so that you replace it with your class name.

c. Replace MyCustomNode with Clockas the name of the class, make the class public, and modify the create()functi

that the class is now defined as shown next. Notice that a new Groupobject literal has been added. You may copy the follines of code and use it to replace what is currently in the file.

public class ClockClock extendsCustomNode {

public override functioncreate() : Node {

return Group {

content: [

Group {

content: [

]

}

]

};

}}

A Groupobject literal contains a sequence of graphical objects. There are two Group object literals declared above. The sGroup will contain the sequence of objects that make up the clock's face. The first Group declared will contain the graphic athat 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|

ate and Review



omments:



ubmit



10/29

11/26/g a JavaFX Application Using NetBeans IDE - 5. Define the Clock's Face

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/define-clock-face.html Nov 26,


Define the Clock's Face

Download

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

w build the Clock's face by creating a circle using the code snippet from the Palette.

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 contentobject, ashown 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 functioncreate()create(): Node {

returnGroup {

content: [

Group {

content: [


11/29


Circle {

centerX: 100,

centerY: 100

radius: 40

fill: Color.BLACK

}

]

}

]

};

}

Using the code completion feature, modify the Circle's properties.

a. Delete the centerXand centerYproperties, 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 strokefrom the pop-up menu and press Enter.

The strokeproperty replaces the fillproperty.

e. Similarly, replace the circle's color by placing the cursor between the code Color.and the word BLACK, and press Ctrl+S

f. Select BLUEfrom the pop-up menu.

The word BLUEreplaces the word BLACK. The second contentcode block now appears as the following:

content: [

Circle {

radius: 40

stroke: Color.BLUE


12/29


}

]

Define the public variables for the circle's properties by placing your cursor on the line above thepublic function creat

Copy and paste the following lines of code in the editor.

public varradius: Number = 77;

public varcenterX: Number = 144;public varcenterY: Number = 144;

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 fig

Figure 10 . Syntax Highlighting Feature


Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

ate and Review



omments:


13/29




ubmit



14/29

11/26/g 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 Nov 2


Add the Clock's Hands and Numbers

Download

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

w add the numbers and hands for the clock.

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 handsyou 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 cradius has been modified. The radius variable was set to be the distance between the circle's center and the clock number

now the clock face's radius should be made slightly greater.

content: [content: [

Circle {Circle {

radius: radius + 10radius: radius + 10

stroke: Color. stroke: Color.BLUE BLUE

}, //Circle }, //Circle

// code for the clock's first center circle // code for the clock's first center circle

Circle {Circle {

radius: 5 radius: 5

fill: Color. fill: Color.DARKRED


//code for the smaller center circle //code for the smaller center circle Circle { Circle {

radius: 3 radius: 3

fill: Color. fill: Color.RED


//code for the seconds hand //code for the seconds hand

Line { Line {

// add the seconds hand transforms code here // add the seconds hand transforms code here

endY: - endY: -radius- 3- 3

strokeWidth: 2 strokeWidth: 2

stroke: Color. stroke: Color.RED

}, //Line }, //Line

//code for the hour hand //code for the hour hand

Path { Path {

//add the hour hand transforms code here //add the hour hand transforms code here

fill: Color. fill: Color.BLACK

elements: [ elements: [

MoveTo {x: 4, y: 4}, MoveTo {x: 4, y: 4},

ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1}, ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},

LineTo{ x:LineTo{ x: radius- 15 y: 0},- 15 y: 0},

] //elements ] //elements

}, // Path }, // Path

// code for the minutes hand // code for the minutes hand

Path { Path {

//add the minutes hand transforms code here //add the minutes hand transforms code here


15/29


fill: Color. fill: Color.BLACK

elements: [ elements: [

MoveTo {x: 4, y: 4}, MoveTo {x: 4, y: 4},

ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1}, ArcTo {x: 4 y: -4 radiusX: 1 radiusY: 1},

LineTo{ x:LineTo{ x: radius y: 0},y: 0},

] // elements ] // elements

} } // Path

] //content

b. In the source editor, select the contentcode block as shown next and replace it with the lines of code you just copied inprevious 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

shows the red symbols on the left and right margins to indicate that errors were identified. The wavy red lines underline thewhere the errors are detected. In this case, the errors are due to the missing import statements needed for the lines of code

just pasted.


16/29


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

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 tomake 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;


17/29


Add the lines of code to define the numbers on the face of the clock.

a. Copy the followingfor statements in bold and paste them between the code block for the first circle you created in this tutand 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 transformsvariable defines the sequence o

javafx.scene.transform.Transform objects to be applied to the Textobject. The Translate class translate

object coordinates by the values of the specified factors. The xand ycoordinates of the Textclass define the left bottom

of the text. So the clock numbers are centered using the Translateclass.

The Rotateclass 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(i in[3, 6, 9, 12])[3, 6, 9, 12])

Text {Text {

transforms: Translate { x : -5, y : 5 }transforms: Translate { x : -5, y : 5 }font: Font {size: 16 } font: Font {size: 16 }

x:x: radius* (( i + 0 )* (( i + 0 ) mod2 * ( 2 - i / 3))2 * ( 2 - i / 3))

y:y: radius* (( i + 1 )* (( i + 1 ) mod2 * ( 3 - i / 3))2 * ( 3 - i / 3))

content: "{i}"content: "{i}"

}, //Text }, //Text

//code to display a black circle for the rest of the hours on the clock

for(i(i in[1..12])[1..12])

if(i(i mod3 != 0 )3 != 0 ) thenCircle {Circle {

transforms: Rotate { angle: 30 * i }transforms: Rotate { angle: 30 * i }

centerX: radius centerX: radius

radius: 3radius: 3

fill: Color.BLACK fill: Color.BLACK } //for } //for

else[ ],[ ],

// code for the clock's first center circleCircle {

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 nec

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

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;


18/29


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 Grou

content:code blocks, as shown in the following. This code draws the numbers and hands in the correct location within clock's boundary.

public override function create(): Node {

return Group { content: [

Group {

transforms: Translate {transforms: Translate {

x:x: centerX,,

y: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 pasted.

The block of code that builds the clock's hour numbers should now look like the following:


19/29


Figure 14. Complete Code for Clock's Hour Symbols


Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

ate and Review



omments:



ubmit



20/29

11/26/g a JavaFX Application Using NetBeans IDE - 7. Add a Graphic Background

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/add-graphic.html Nov 26


Add a Graphic Background

Download

Previous 1| 2| 3| 4| 5| 6| 7 | 8| 9|

e IDE provides you the ability to include graphic files to help enhance the look of your application. Add a background image that wigned by a graphic designer for this tutorial.

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 . find out the path to your project's folder, right-click the MyClockProject node in the Projects window and select Properties. Theproperties 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.

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 ne

Circle {radius: radius+ 10stroke: Color.BLUE

},

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 mspace to work on other sections of the source file. When you click the + icon next to a folded code block, the code block expandFolded code is denoted by an ellipsis box. Hold the cursor over the ellipsis box and the IDE displays the collapsed code block.


21/29


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.

Remember to add the comma after the last curly brace. The Image code snippet should now look like the following.

Figure 16. Add Background Image

Figure 17. Image Code Snippet Added


22/29


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 ImageViewcode block should now look like the followin

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|

ate and Review



omments:



ubmit



23/29

11/26/g a JavaFX Application Using NetBeans IDE - 8. Use the Preview Feature and Add Animation

http://java.sun.com/javafx/1/tutorials/build-javafx-nb-app/use-preview.html Nov 2


Use the Preview Feature and Add Animation

Download

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

e Preview feature included with the JavaFX plugin enables you to view your application without having to compile and run it first.anges you make to the source file are immediately reflected in the preview window.

Click the Main.fxtab in the editor pane and modify the scene 's contentvariable to display the Clockclass that you creathe previous section.

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.fxfile's contents should now look like the following.

Figure 18. Add a Call to the Clock Class in the Main.fx file

While on the Main.fxtab, 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 foimage. If necessary, resize the preview pane to view the whole clock.


24/29


Figure 19. Preview Feature Enabled

Now click the Clock.fxtab and add the following import statements at the top of the source file where all the import statemen

located.

importjava.util.Date;

importjava.lang.Math;

Copy the following lines of code in bold. They define the attributes for the hours, minutes, seconds, and the nextTick()func

Paste the lines directly below the line that defines thecenterYattributes and above the line for the public function

create()code block.

public var centerY: Number = 144;

public varhours:Number;:Number;

public varminutes:Number;:Number;

public varseconds:Number;:Number;

public functionnextTick () {nextTick () {

varnow =now = newDate();Date();

seconds= now.getSeconds();= now.getSeconds();

minutes= now.getMinutes();= now.getMinutes();

hours= now.getHours();= now.getHours();

}}

public override function create(): Node {

Add the following init()code.


25/29


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

timelineis defined.

The initcode 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 o

more key frames, represented by javafx.animation.KeyFrame objects. For more information about animation, seeCreating Animated Objects, a lesson in Building GUI Applications With JavaFX."


26/29


d. A dd the actioncode snippet by dragging the Animation > Action code snippet from the Palette and dropping it after the li

where canSkipvariable 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 thisKeyFrame.

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 initcode block should now look like the following:

Figure 22. Completed initCode Block

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 herewith the following:

transforms: Rotate { angle: bind se conds * 6 }transforms: Rotate { angle: bind sec onds * 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 (h ours + minutes / 60) * 30 - 90 }transforms: Rotate { angle: bind (ho urs + minutes / 60) * 30 - 90 }

//for the minutes hand


27/29


transforms: Rotate { angle: bind mi nutes * 6 - 90 }transforms: Rotate { angle: bind min utes * 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 pas

f. Save your work by pressing Ctrl+S anywhere in the source editor.

Click on the Main.fxtab.

If you have the Preview feature still enabled and no errors are encountered, the preview pane was updated to reflect the clock w

animated seconds hand soon after you finished adding the code in the previous step. The change that you make in your sourceimmediately reflected in the preview pane, eliminating the need for you to compile the file first. If any compilation errors occur, thpreview pane displays information about the error encountered to assist you during your application development.

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9|

ate and Review



omments:



ubmit



28/29

11/26/g a JavaFX Application Using NetBeans IDE - 9. Run the Clock Application as an Applet

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

ilding a JavaFX Application Using NetBeans IDE

Run the Clock Application as an Applet

Download tutorial

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9| Next

his section, you run the completed clock application using the IDE. You then create the applet file to locally deploy the application.

Close the Design Preview window.

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 separatewindow displays the animated clock, as shown in the following:

Figure 23. Snapshot of the Running Clock

Application

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 IDEappears and the applet is launched, as shown next.


29/29

11/26/g a JavaFX Application Using NetBeans IDE - 9. Run the Clock Application as an Applet

Figure 24. Clock Applet Running in Web Browser

mmary

his tutorial, you created a simple JavaFX application and explored some of the features offered in the NetBeans 6.5 IDE to support theaFX Script programming language. The IDE with JavaFX support provides you the means to develop your rich internet applicationsg the JavaFX Script programming language.

erences

JavaFX Technology - Reference

Previous 1| 2| 3| 4| 5| 6| 7| 8| 9| Next

te and Review

l us what you think of the content of this page.


mments:

ur email address (no reply is possible without an address):n Privacy Policy

te: We are not able to respond to all submitted comments.

ubm it

Building a JavaFX Application Using NetBeans IDE

Documents

Transcript of Building a JavaFX Application Using NetBeans IDE