You must login or register to participate.

Description

Want to learn how to create animated content for your website?

Prerequisite: prior computer programming experience is required.  If you have never done any computer programming, you should do the Learn Java Programming learning path before attempting this learning path.

To get started, JOIN THIS GROUP.  Then click on the Activity tab. Next complete each of the Activities.  And finally compete in the Challenge Activity.

Click the Details tab for more information.  Once you are done with this learning path, take a look at: Digital Graphics Lab and Building Applications for the G1 Mobile Phone.

Learning Path and Challenge Activity Provided By

Thanks to our friends on the JavaFX team at Sun Microsystems.  Sun Microsystems is our sponsor of the "Building Flashy Websites with Java FX" learning path!

JavaFX - Syntax

JavaFX - Syntax

Description

The next several activities will take you through the features of JavaFX, where you will learn how to display graphics, build Graphical User Interfaces (GUIs), use the animation capabilities of JavaFX to create dynamic web applications.  All of these skills will be applied when you build your media player.

This activity introduces you to the syntax of the JavaFX scripting language.  Syntax is the vocabulary (the words) of the language, and the rules for putting them together.  In a spoken language, in order to be understood you need to use words from the vocabularly, and you need to follow the rules of grammer when you put together sentences, in order to be understood; if you use English vocabulary in France, or string your words together in random order, you may not get the result you desire!  The same is true when talking to a computer.  Fortunately, computer languages usually have a pretty small vocabularly, the grammar rules are simple, and you have NetBeans to help you communicate effectively (and tell you when you are doing it wrong).

In this activity, you will:

  • create a small JavaFX appliaction that displays a circle and a square on the screen

Skills you will learn include:

  • understanding JavaFX import statements, which import the classes you will use into your application code
  • learn how to declare node objects, such as Circle and Rectangle, within the content variable of a Scene

Basic Steps

First, read the Quick JavaFX GUI Overview.  This gives you a quick overview (duh!) of the graphical things you can do with JavaFX, such as shapes, colors, effects, and user interface components.  When looking at the user interface (UI) components, think a bit about the user interface controls that you would need for a media player: volume control, play/pause/stop controls, a way to select the media to be played, and how you might represent them with JavaFX UI components.  One other important concept to note is presented right at the beginning of this overview: JavaFX has two distinct profiles, the common and desktop profile.  The common profile includes all of the features that exist on ALL devices supported by JavaFX, including JavaFX-enabled mobile devices and any devices that may be supported by JavaFX in the future.  The desktop profile includes more sophisticated features that can only be implemented on more powerful desktop computers.  Because of this, JavaFX developers have to make a choice when they create applications; if you want your application to be able to run on mobile and other devices that may be somewhat limited in capability, you need to be sure to stick to the JavaFX common profile.  If you only care about running on desktop and laptop computer systems, you can use the more fully-featured desktop profile.  For our media player, we will be using the desktop profile.

Now we're going to create our second JavaFX program, and in the process, get familiar with some of the important components JavaFX syntax.

  1. Open NetBeans, and create a new project.  Under the File menu, select New Project, and go through the new project wizard, creating a JavaFX project.  Remember, if you need help, use the forum!
  2. When your have completed the wizard, you will see the project in your NetBeans Project list.  To make life easier, we will set this new project as the Main Project.  This allows you to easily build and run your project using the Build Main Project and Run Main Project controls in NetBeans.  To set your new project as the Main Project, you can look under the Run menu, there is a Set Main Project menu item; use that to select your new project as the main project.  Alternatively, you can "right-click" on your project's name, and there should be a "Set as Main Project" item in the context menu.
  3. Now go to Lesson 2: Using Declarative Syntax in the JavaFX GUI Applcation tutorial.  Go through the tasks of this lesson.  You will be introduced to the concepts of the Stage and the Scene, which are important parts of the JavaFX syntax (the vocabulary of the scripting language).  It's pretty simple: the Stage holds the Scene, and the Scene holds the Nodes.  The Nodes are the things that actually display on the screen.  You can copy the code from the lesson into your NetBeans project, build it, and run it.  One thing I want to point out, there are a couple of places in the lesson where you will see elipses (...) in the code listing.  You do NOT type the elipsis into your code!  This is just an indication that there was some code that you typed in earlier, and this new code listing will not repeat that earlier code; instead, they use elipses to show that there should be some code here, but they already showed it earlier, and don't want to clutter up the lesson by repeating it.  I think you'll understand it when you see it, but I just want to avoid that issue, I don't want you getting stuck with what might be a silly error, typing the ... into your code.
  4. Submit your project that you created to the activity.  You will submit a jar file (a java archive file) that contains your runable program.  To find the jar file, open your project in NetBeans, and note that in the project pane, there are 3 tabs: Projects, Files, Services.  Select the Files tab.  Expand your project folder by clicking on the '+' sign.  You should see a folder called 'dist'.  Expand the dist folder, you will probably see a few files and maybe some folders.  One of the filenames should end in .jar.  This is the file that you will submit.  Open the context menu on that file (on Windows, right-click on the file; on Mac, Ctrl-click on it), and select 'properties' from the menu.  One of the properties will be the full path to where the jar file lives on your system.  Use your file browser to go get the file, and submit it.

Resource Links

Recent Submissions

icon

awsome

0
August 17, 2009 by abc1467
icon

DeclaringIsEasy.jar

0
August 14, 2009 by hqx10
icon

Second JavaFX Project

0
August 6, 2009 by tokutei12
icon

Declaring

0
July 30, 2009 by darealMVP
icon

JavaFX Syntax

0
August 17, 2009 by Oracizan
icon

Syntax

0
August 11, 2009 by thechrisj
icon

JavaFX Syntax

0
August 8, 2009 by dwarrior333
icon

Declaring...

0
July 9, 2009 by shadbot
More Submissions

Activity Forum

There are currently no forum topics posted.