Java Reference
In-Depth Information
Figure 17-7
.
Analog clock
How It Works
In this recipe, you'll create an analog clock application that will take existing HTML5
content to be rendered onto the JavaFX Scene graph. HTML5 allows SVG content to
be displayed in browsers. SVG is similar to JavaFX's
Scene
graph, in which nodes
can be scaled to different sizes while preserving details. To manipulate SVG or any
HTML5 elements, this example uses the JavaScript language. Depicted in
Figure 17-7
is a JavaFX application displaying an animated analog clock. To learn more about
this example, make sure the
clock3.svg
file is located in the build path. In
NetBeans you may need to perform a clean and build before running the application
that will copy the resource (
clock3.svg
) to the build path. You may also want to
manually copy the
clock3.svg
file to reside in the build path where the
Dis-
playHtml5Content.class
file is located if you are running application on the
command line.
You will undoubtedly work with a designer who has used popular tools to generate
web content that's wired to an application's functions. To create an analog clock, Carl
Dea enlisted his daughter, who is quite proficient with the Open Source tool Inkscape.
Although Inkscape was used to generate the content for this recipe, I will not go into
details regarding the tool because it is beyond the scope of this topic. To learn more
model the designer and developer workflow, she created a cool looking clock and I ad-
ded JavaScript/SVG code to move the clock's hour, minute, and second hands. Inks-
cape allows you to create shapes, text, and effects to generate amazing illustrations. Be-
cause SVG files are considered HTML5 content, you can display SVG drawings inside
of an HTML5-capable browser. In this scenario, the example displays the analog clock
in JavaFX's
WebView
node. You can think of a
WebView
node as a mini-browser
capable of loading and displaying URLs. When it's loading an URL you will notice the
