Draw a shape with a different color (JavaFX)

MORE JAVAFX PROFESSOR SYLVIA YEUNG

MENUS AND MENU BARS

• how to create menus and menu bars, add menu items, group the menus into categories, create submenus, and set context

menus.

You can use the following classes of the JavaFX API to build menus in your JavaFX application.

• MenuBar

• MenuItem

• Menu

• CheckMenuItem

• RadioMenuItem

• CustomMenuItem

• SeparatorMenuItem

• ContextMenu

MENUBAR, MENU AND MENUITEM • The JavaFX MenuBar provides JavaFX applications with a visual drop down menu

similar to that most desktop applications have at the top of their application window.

• The JavaFX MenuBar is represented by the class javafx.scene.control.MenuBar .

Once the MenuBarinstance is created, you can add Menu instances to it (javafx.scene.control.Menu) .

Once you have created a Menuinstance you must add one or more MenuItem instances to it.

Menu item separators are represented by the SeparatorMenuItem class

CHECK MENU ITEMS VS. RADIO MENU ITEMS A small check mark is displayed next to the check menu item as long as it remains selected.

The check menu item is represented by the CheckMenuItem (javafx.scene.control.CheckMenuItem) class.

Radio menu items are menu items of which only one of a set of menu items can be selected - just like standard JavaFX radio

buttons.

The radio menu item is represented by the RadioMenuItem.

The RadioMenuItem instance must be added to a ToggleGroup to make them mutually exclusive.

MENUITEM EVENTS

GRADIENT COLOR

JavaFX provides two types of gradients: a radial (RadialGradient) and a linear (LinearGradient) gradient.

To create a gradient color in JavaFX we need to set five properties. •Set the starting point to begin the first stop color.

•Set the end point as the end stop color.

•Set the proportional property to specify whether to use standard screen coordinates or unit square coordinates.

•Set the cycle method to with three enums: NO_CYCLE, REFLECT, or REPEAT.

•Set an array of Stop colors.

Gradient paint can interpolate between two or more colors, which gives depth to the shape.

JAVAFX COLORPICKER

The JavaFX ColorPicker control enables the user to choose a color in a popup dialog.

The chosen color can later be read from the ColorPicker by your JavaFX application.

The JavaFX ColorPicker control is represented by the class javafx.scene.control.ColorPicker.

JAVAFX DATEPICKER

• import javafx.scene.control.DatePicker;

CANVAS

The GraphicsContext class provides two types of methods to draw the basic shapes. The method fillXxx() draws a shape Xxx and fills it with the current fill paint. The method strokeXxx() draws a shape Xxx with the current stroke.

The JavaFX Canvas API provides a custom texture that you can write to. It is defined by classes Canvas and GraphicsContext in the javafx.scene.canvas package.

Using this API involves creating a Canvas object, obtaining its GraphicsContext,

and invoking drawing operations to render your custom shapes on screen. Because the Canvas is a Node subclass, it can be used in the JavaFX scene graph.

The various rendering methods on the GraphicsContext

LINEAT GRADIENT VS. RADIAL GRADIENT USING GRAPHICSCONTEXT

COMMON PROPERTIES AND METHODS FOR NODES

 STYLE: SET A JAVAFX CSS STYLE

 ROTATE: ROTATE A NODE

12

The Node class defines many properties and methods that are common to all nodes.

JavaFX style properties are similar to cascading style sheets (CSS) used to

specify the styles for HTML elements in a Web page. Therefore, the style

properties in JavaFX are called JavaFX CSS.

In JavaFX, a style property is defined with a prefix –fx–. Each node has its own

style properties.

The syntax for setting a style is

styleName:value. Multiple style properties

for a node can be set together separated

by semicolon (;).

COMPONENT STYLE PROPERTY

You can set CSS styles for a specific component by setting the CSS properties directly on the component.

This is done by setting a String containing the CSS properties in the component's style property.

The rules for a style definition assign values to properties associated with the class. Rule property names correspond to the names of the properties for a class. The convention for property names with multiple words is to separate the words with a hyphen (-). Property names for styles in JavaFX style sheets are preceded by -fx-.

Property names and values are separated by a colon (:). Rules are terminated with a semicolon (;). Examples of rules: -fx-background-color: #333333; -fx-text-fill: white; -fx-alignment: CENTER;

CREATE THE CSS FILE

• Right-click the folder under the Source Packages directory and choose New, then Other.

• In the New File dialog box, choose Other, then Cascading Style Sheet, and click Next.

• In the .java file, initialize the style sheets variable of the Scene class to point to the Cascading

Style Sheet by including the line of code shown in bold below so that it appears as shown

JAVAFX COLLECTIONS

• Define javafx.collections package

• Interfaces

• Classes

ObservableList and FXCollections vs. ObservableMap and FXCollections

JAVAFX EFFECTS

• JavaFX effects are graphical effects you can apply to controls in a JavaFX application to make the

application GUI look more interesting.

• The effect property of the Node class is used to specify the effect.

• In JavaFX, you can set various effects to a node such as bloom, blur and glow. Each of these

effects are represented by a class and all these classes are available in a package

named javafx.scene.effect.

• JavaFX comes with the following effects built-in:

APPLYING EFFECTS TO A NODE • You can apply an effect to a node using the setEffect() method. To this method, you need to pass

the object of the effect.

• To apply an effect to a node, you need to −

For example − To apply the glow effect, you need to instantiate the Glow class

level − This property is of the type double; it represents intensity of the glow. The range of the level value

is 0.0 to 1.0.

The drop shadow effect is provided by the JavaFX

class javafx.scene.effect.DropShadow.

Drop Shadow

Reflection

The JavaFX reflection effect adds a mirror-like reflection to a JavaFX Node.

The reflection effect is provided by the class javafx.scene.effect.Reflection .

The Reflection class takes the following parameters that affect resulting reflection:

•topOffset

•topOpacity

•bottomOpacity

•fraction

GAUSSIAN BLUR

The JavaFX Gaussian blur effect is provided by the class javafx.scene.effect.GaussianBlur .

The GaussianBlur class takes a single parameter called radiuswhich decides how "wide" the blur effect is.

The wider the radius, the more the Gaussian blur effect will blur the target node.

2

3

ANIMATION

JAVAFX PROVIDES THE ANIMATION CLASS WITH THE

CORE FUNCTIONALITY FOR ALL ANIMATIONS.

2

4

PATHTRANSITION

ANIMATION AND PATHTRANSITION

PathTransition’s Setter methods for properties:

Animation’s methods:

setCycleCount(), setAutoReverse() and play(), pause()

27

FADETRANSITION

The FadeTransition class animates the change of the

opacity in a node over a given time.

ANIMATION AND FADETRANSITION

FadeTransition’s setter methods for its properties:

setFromValue(), and setToValue()

29

TIMELINE

PathTransition and FadeTransition define specialized

animations.

The Timeline class can be used to program any animation

using one or more KeyFrames.

Each KeyFrame is executed sequentially at a specified

time interval.

Timeline inherits from Animation.

ANIMATION AND TIMELINE

Each KeyFrame is executed sequentially at a specified time

interval. (i.e., 0.5 seconds)

JAVAFX MEDIA

• JavaFX supports playing audio and video through the JavaFX Media API.

• HTTP live streaming of static media files and live feeds are also supported.

• A number of media formats are supported, including AAC, AIFF, WAV, and MP3.

• FLV containing VP6 video and MP3 audio and MPEG-4 multimedia container with H.264/AVC

video formats are also supported.

• The support for a specific media format is platform dependent.

• Some media playback features and formats do not require any addition installations; some

require third-party software to be installed.

MEDIA

YOU CAN USE THE MEDIA CLASS TO OBTAIN THE SOURCE OF THE MEDIA, THE MEDIAPLAYER

CLASS TO PLAY AND CONTROL THE MEDIA, AND THE MEDIAVIEW CLASS TO DISPLAY THE VIDEO.

32

MEDIAPLAYER

THE MEDIAPLAYER CLASS PLAYES AND CONTROLS THE MEDIA WITH PROPERTIES SUCH AS

AUTOPLAY, CURRENTCOUNT, CYCLECOUNT, MUTE, VOLUME, AND TOTALDURATION.

33

MEDIAVIEW

THE MEDIAVIEW CLASS IS A SUBCLASS OF NODE THAT PROVIDES A VIEW OF

THE MEDIA BEING PLAYED BY A MEDIAPLAYER. THE MEDIAVIEW CLASS

PROVIDES THE PROPERTIES FOR VIEWING THE MEDIA.

34

EXAMPLE: USING MEDIA

THIS EXAMPLE DISPLAYS A

VIDEO IN A VIEW. YOU CAN

USE THE PLAY/PAUSE BUTTON

TO PLAY OR PAUSE THE VIDEO

AND USE THE REWIND BUTTON

TO RESTART THE VIDEO, AND

USE THE SLIDER TO CONTROL

THE VOLUME OF THE AUDIO.

35

EXAMPLE: