Java Reference
In-Depth Information
call to
getEngine().load()
, where the
getEngine()
method returns an in-
stance of the
javafx.scene.web.WebEngine
object. So, the
WebView
object is
implicitly creating one
javafx.scene.web.WebEngine
object instance per
We-
bView
object. Shown here is the JavaFX's
WebEngine
object loading the
clock3.sv
g file:
final WebView browser = new WebView();
URL url = getClass().getResource("clock3.svg");
browser.getEngine().load(url.toExternalForm());
You are probably wondering why the JavaFX source code is so short. This is be-
cause its job is to instantiate an instance of a
javafx.scene.web.WebView
that
instantiates a
javafx.scene.web.WebEngine
class and passes an URL. After
that, the
WebEngine
object does all the work by rendering HTML5 content just like
any browser. The same code could be written as follows:
final WebView browser = new WebView();
WebEngine engine = browser.getEngine();
URL url = getClass().getResource("clock3.svg");
engine.load(url.toExternalForm());
When rendering the content, notice that the clock's arms move or animate; for ex-
ample, the second hand rotates clockwise. Before animating the clock, you have to set
the clock's initial position by calling the JavaScript
updateTime()
function via the
onload
attribute on the entire SVG document (located on the root
svg
element).
Once the clock's arms are set, you add SVG code to draw and animate by using the
line
and
animate transform
elements, respectively. Shown here is the SVG
code snippet that animates the second hand:
<g id="secondHand">
<line stroke-width="2" y1="-20" y2="70"
stroke-linecap="round" stroke="red"/>
<animateTransform attributeName="transform" type="rotate"
repeatCount="indefinite" dur="60s" by="360" />
</g>
On a final note, if you want to create a clock like the one depicted in this recipe,
