...
Grafikk-modellen til JavaFX er basert på en såkalt scene-graph, som er en trestruktur av node-objekter som beskriver hva som skal vises på skjermen. Når en endrer på trestrukturen eller egenskaper i nodene som påvirker hvordan de ser ut på skjermen, så sørger JavaFX automatisk for at de tegnes opp på nytt. Siden både rene grafiske elementer og interaktive elementer i JavaFX er noder, så står en fritt til å kombinere disse som en vil. Interaktive elementer er i grunnen ikke annet enn grafiske elementer som reagerer på og oppdateres iht. bruker-input. Ved kløktig rigging av node-strukturen og timing av endringene, så kan en få til et vell av av effekter.
Under ser du et eksempel på en tre-struktur som inneholder en sirkel, et rektangel, en tekst og et bilde (de to siste er gruppert). Akkurat hvordan det vil se ut på skjermen er avhengig av koordinatene og størrelsen til noden og grafiske effekter som fargen som brukes på streker og til å fylle figurer og strek-typen. En mulighet er vist under til høyre.
 Image Added |  Image Added |
Det finnes noen fellestrekk som gjelder for alle nodene elementene (ofte kalt noder) man bruker i JavaFX. Alle noderelementene, utenom den øverste (ofte kalt rotnoden), legges til i grafen ved å legge dem inn i children-lista til en Parent-instanselementet over. En node kan bare være ett sted i hierarkiet treet og dersom man forsøker å legge til et objekt et element som allerede er i hierarkiet til treet under en annen /ny containernode, så vil objektet fjernes fra dens forrige, før den legges til den nyeelementet flyttes, ikke kopieres.
Koordinatsystem
Alle noder har en x,y-posisjon og størrelse (desimaltall) i et koordinatsystem med økende x-verdier mot høyre på x-aksen og skjermen og økende y-verdier nedover på y-aksenskjermen. Med dette er altså (0,0) øverst til venstre. Denne x,y-posisjonen angis imidlertid ikke direkte, men er kombinasjonen av flere egenskaper:
- translateX layoutX og translateY layoutY - forskyver noden i x- og y-retningen. Det er disse som vanligvis brukes for å angi posisjonen, f.eks. den automatiske layouten som gjøres av paneler som AnchorPane.
- rotate - roterer noden et antall grader rundt et gitt referansepunkt.
- scaleX og scaleY - skalerer størrelen med en x- og y-faktor og settes med scale-metoden
- layoutX translateX og layoutY translateY - gir en ekstra forskyving i x- og y-retning og brukes gjerne i forbindelse med midlertidige justeringer, f.eks. drag'n drop. Denne kommer i tillegg til layoutX og layoutY.
Dette gir ganske stor fleksibilitet ved utforming av grafikk og effekter. F.eks. kan en lage en ruter-formet figur på flere måter, f.eks. som fire rette streker med passende koordinater, eller som et rektangel som er rotert 45 grader. Det går også an å knytte egne transformasjonsobjekter til noder, hvor disse egenskapene kombineres.
Koordinatene til en node er relativt til noden over i trestrukturen, slik at endring av posisjonen til en node automatisk påvirker nodene under. F.eks. kan en gruppere noder som utgjør en større figur i en samle-node og flytte alle på en gang ved å endre posisjonen til samle-noden.
Figurer
Det finnes en rekke mange standard-figurer som kan brukes for rent grafisk innhold. Disse er alle subklasser av Shape-klassen (javafx.scene.shape), som dermed får dermed en del felles egenskaper:
- fyll (fill) - fargen eller effekten (av typen Paint) som fyller figuren
- strek (stroke) - fargen eller effekten som brukes for å tegne (omrisset til) figuren
- strokeWidth (strek-tykkelse (strokeWidth), strokeType (plassering (strokeType), strokeDashOffset (stipling (strokeDashOffset) og hjørne/endehåndtering ( strokeLineJoin og strokeLineCap (håndtering av hjørner og ender)
Nyttige figurer er Line (strek), Rectangle (Linerektangel), rektangel Circle (Rectanglesirkel), sirkel og ellipse (Circle og Ellipse Ellipse (ellipse), Arc (buesegment (Arc), polygon Polygon (Polygonmangekant), Path (segmentert figur (Path) og Text (tekst (Text). I tillegg er det en egen klasse for bilder (ImageView som viser et Image, som ikke er en Shape). Noen av disse er vist i eksemplet under, hvor center-regionen til en BorderPane er fylt med et Pane-objekt med noen figurer i, med . Figurene har fått ulike grafiske effekteregenskaper, for å illustrere hva de gjør.
| Code Block |
|---|
| @Override
public void |
@Override
public void start(Stage stage) throws Exception |
{
BorderPane root = new {
BorderPane root = new BorderPane(); // Root of the scene |
graph
graph
// Add one Text node in each surrounding region
root.setTop(new Text("top")); |
root.setBottom(new Text("bottom")); |
root.setLeft(new Text("left")); |
root.setRight(new Text("right")); |
Pane shapesPane = new
Pane shapesPane = new Pane(); |
shapesPane.setPrefSize(300, 300); |
Line line = new
Line line = new Line(10, 10, 100, 100); // x1, y1, x2, |
y2 y2
line.getStrokeDashArray().setAll(10.0d, 10.0d); // |
dashes Rectangle rect = new dashes
Rectangle rect = new Rectangle(150, 10, 30, 40); // x, y, w, |
h h
rect.setFill(Color.BLUE); |
Ellipse ell = new
Ellipse ell = new Ellipse(40, 180, 40, 30); // cx, cy, rx, |
ry ry
ell.setStroke(Color.RED); |
ell.setFill(Color.GREEN); |
Text text = new
Text text = new Text(180, 180, "center"); |
List<String> fonts =
List<String> fonts = Font.getFamilies(); |
text.setFont(new Font(fonts.get((int) (Math.random() * fonts.size())), 32)); |
shapesPane.getChildren().addAll(line, rect, ell, text); |
root.setCenter(shapesPane); |
Scene scene = new
Scene scene = new Scene(root, 500, 500); |
stage.setTitle("BorderPaneApplication"); |
|  |
...
Til hver node kan det knyttes en id, altså et unikt navn (må sikres av utvikleren) tilsvarende id-tag'en i HTML. En nyttig funksjon er lookup(String id) som kan brukes til å finne en node med en unik id i en del av hierarkiet. Ellers kan også id'en brukes til å identifisere noder når man bruker css-stiler (mer om css lenger ned).
