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