Exadel JavaFX Studio Guide

This section will tell how to create a simple JavaFX with JavaFX plugin. Following the steps of this section you will be able to create a JavaFX application that runs as a standalone application and prints "Hello World!"

Once the plug-in is installed, you can create a JavaFX project.

Figure 5.1. New JavaFX Project

Alternatively, if you have the JavaFX perspective activated, you can just click File > New and select JavaFX Project.

Figure 5.2. New Project with JavaFX Perspective Activated

The New JavaFX project wizard will guide you through the steps required to create a new project.

Figure 5.3. New JavaFX project

Then you need to configure your JavaFX Runtime Configuration.

Figure 5.4. New JavaFX project: adding JavaFX SDK

If JavaFX SDK is already configured you will see that the Use default JavaFX runtime (currently ' current SDK version ' ) option is selected. If you wish to use other SDK version you can point to it by selecting Alternative and clicking the Configure button.

You also need to specify the type of application you are about to create in the Profile section.

The Working sets option group lets you show only resources, children of resources, and parents of resources contained in the working set. The problems view, tasks view and bookmarks view can all be filtered based on a working set. When using the search facility, you can also use working sets to restrict the set of elements that are searched.

Figure 5.5. New JavaFX project

When you are done with this dialog proceed to the next one by clicking the Next button.

Figure 5.6. New JavaFX project

The Project layout option group enables you to configure where your source and class file are to be located. By default they are located in the src and bin folder respectively. You can alter the layout configuration by clicking on Configure default.. .

Figure 5.7. New JavaFX project: Java settings

Now you see in your Project Explorer the project you've just created.

Figure 5.8. Demo project in the Project Explorer

Now you need to add a JavaFX script to your project.

Notice, that you don't need to add the "fx" extension, as it's added automatically.

Figure 5.9. New JavaFX project: adding a script

The dialog gives you an option to generate a simple JavaFX Stage, you can specify the title, width and height variables of the Stage with the corresponding fields.

Figure 5.10. New JavaFX project: generating a script

When the Finish button is pressed you will see the script file in the Package Explorer and the script itself in the editor.

Figure 5.11. New JavaFX project

You can now run the "Hello World" JavaFX application. What you need to do now is to configure your Run Configuration

Figure 5.12. New JavaFX project: launching the project

You will see the "Hello World!" message on your screen.

Figure 5.13. First JavaFX Appication

In the previous section of the guide you have learned how to create a simple JavaFX project following wizard's steps. If you are familiar with JavaFX technology it will be sufficient to start developing your application. However, if you are new to JavaFX you can take a look at JavaFX example projects.

To explore a JavaFX example you should do the following:

You can now have a look a the source code of the example application and run it. For more details on running a JavaFX application from Exadel JavaFX Studio please read the Launching JavaFX Project chapter of the guide.

Now we will make something more complex - a puzzle game.

...

package com.exadel;

import javafx.ext.swing.SwingButton;

import javafx.scene.Scene;

import javafx.scene.text.Font;

import javafx.stage.Stage;

def cellSize:Number = 40;

def puz = PuzzleGrid { boxDim:3 }; 

def gridFont = Font 

{ name: "Arial Bold" 

size: 20 

}; 

Stage

{ title: "Game"

visible: true

scene: Scene

{ content: for(idx in [0..<puz.gridSize])

{ var x:Integer = (idx mod puz.gridDim); 

var y:Integer = (idx / puz.gridDim);

SwingButton 

{ translateX: x * cellSize; 

translateY: y * cellSize; 

width: cellSize; 

height: cellSize; 



text: bind if(puz.grid[idx]>=1) 

"{puz.grid[idx]}" else " " 

font: gridFont 

action: function():Void 

{ var v = puz.grid[idx]; 

v = (v+1) mod (puz.gridDim+1); 

puz.grid[idx] = v; 

} 

} 

}

width: puz.gridDim * cellSize

height: puz.gridDim * cellSize

}

}

...

Figure 5.16. JavaFX project: adding a class

Call the file PuzzleGrid

You see now the PuzzleGrid.fx file in the Package Explorer.

...

package com.exadel;



public class PuzzleGrid {

public-init var boxDim:Integer = 3;

public-read def gridDim:Integer = bind boxDim*boxDim;

public-read def gridSize:Integer = bind gridDim*gridDim;

package var grid:Integer[] =

for(a in [0..<gridSize]) { 0 }

};



...

If you run the first project on the chapter you need to reconfigure your Run Configuration to set up everything for this new project, if not you need to do that from the scratch.

You should see a standalone Java application launch.

Figure 5.17. JavaFX project: Puzzle application

If you select the Desktop profile your application can be run as:

Figure 6.4. Standalone Application

Figure 6.5. Applet

Exadel JavaFX Studio provides a context dependent code assist/completion.

This feature is available for both script

Figure 7.1. Code Assist for Script

and class files.

Figure 7.2. Code Assist/Completion for Class

Code assist is available for these elements:

Alongside with code assist Exadel JavaFX Studio displays JavaFX help comments for or classes, method and attributes. The comments are shown next to the code assist box and in a box with yellow background.

Figure 7.3. JavaFX Help Comments

JavaFX editor supports syntax highlighting that improves the readability of your code.

Figure 7.4. Syntax Highlighting

In order to identify where the block of code embraced with parentheses or curly braces starts or ends you need to place the cursor on the brace/parenthesis and you will see where the starting/ending brace/parenthesis is.

Figure 7.5. Highlighting code blocks

The editor also supports OpenOn feature that help you navigate you throughout the project: this feature turns the objects into hyper-links when you hold CTRL and hover a object. Your mouse pointer will become a hand ( ), then you can click the link to open the file where the object is stored.

Figure 7.6. JavaFX editor: OpenOn feature

In order to have line numbers displayed on the left side of the JavaFX editor you need to right-click on left-hand border of the editor and check the Show Line Numbers option.

Figure 7.7. Line Numbering in Editor

The Editor prevents you from making compiler error by highlighting them. The Editor verifies that you have equal number of opening and closing braces, that you typed correctly the name of the variable you had declared previously, missing semicolons and unresolved identifiers etc.

Figure 7.8. Compiler Error Highlighting

Code Style preference page allows to configure style rules like indentation and whitespace.

Figure 9.2. JavaFX Preferences: Code Style

You can also adjust the whitespace options.

On the Installed JavaFX Runtimes preferences page you can set the path to the JavaFX Runtime you intend to use in you application. You can have multiple runtimes set up.

On this page you can perform the following operations:

The Script Editor enables you to adjust auto closing of such syntax elements as curly and square brackets, parentheses and quotes.

Another feature that Exadle JavaFX plugin provides is to color and highlight the syntax to make code readability better.

To adjust the code coloring setting you should open the Syntax Coloring page.

Figure 9.3. JavaFX Preferences: Syntax Coloring