JavaFX

Som programmerer må man forholde seg til et fullstendig nytt API (klassene og metodene som utgjør rammeverket), men overgangen er ikke så stor fordi en godt kan bruke kjente teknikker og gradvis ta i bruk de nye mulighetene.

Basic oppbygning 

En JavaFX applikasjon er bygget opp med en stage i bunn som utgjør rammen til applikasjonen, og har typisk et navn som vises øverst applikasjonsvinduet. En stage fylles med en scene. Scenen utgjør området hvor vi framstiller knapper, figurer, tekst og andre komponenter. Dette skjer dog ikke helt vilkårlig, siden alle komponenter må legges til i en scene graph, og kalles da noder i denne grafen. Grafens struktur bestemmer hvordan nodene rendres på scenen.

Altså: Stage -> Scene -> Scene Graph

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
public class SimpleJavaFX extends Application {
	
	public static void main(String[] args) {
		launch(args);
	}
	@Override
	public void start(Stage stage) throws Exception {
		
		Group root = new Group(); // Root of the scene graph
		
		Scene scene = new Scene(root,500,500, Color.AQUA);
		
		stage.setScene(scene);
		stage.setTitle("Simple JavaFX");
		stage.show();
	}
}

Scene Graph

Det er scenegrafen som styrer selve utformingen av grensesnittet i en JaveFX-applikasjon. JavaFX Scene Graph API gjør det mye enklere å lage et GUI ved at en scenegraf på et hvilket som helst tidspunkt vet hvilke objekter som skal vises frem, hvilke områder på skjermen som må tegnes på nytt og hvordan alt skal rendres på en mest mulig effektiv måte. Ved å bruke scenegraf API'et slipper man å forholde seg til primitive tegnemetoder og kan heller la systemet ta seg av detaljer omkring rendring.

En scene graph er en trestruktur som inneholder dataelementer, og hvert element kalles en node. En node er enten en rotnode, intern-node eller løvnode, noe som vil si at alle noder i treet, for utenom rotnoden, må ha en parent (forelder). Under er et eksempel på en enkel scene graph, med elementer både som nodetype, og med faktiske klasser som kan tilsvare nodetypen.

Måten man bygger denne trestrukturen på er ved å bruke lister med children. Hver node som kan opptre som en intern node har en metode getChildren() som returnerer en liste med nærmeste etterkommere. I bildet over vil Groups children-liste inneholde ett circle-, ett rectangle- og ett region-objekt. Videre vil region-objektets liste inneholde ett text- og ett imageview-objekt.
Nye barn kan legges til på to måter:

• parent.getChildren().add(node); Legger til én node
• parent.getChildren.addAll(node1,node2,node3,....); Legger til flere noder

I pakken javafx.scene finnes det massevis av klasser, men de tre viktigste for å forstå oppbygningen til Scene Graph API er

• Node: Abstrakt baseklasse for alle noder i en scene graph.
• Parent: Abstrakt baseklasse for alle interne noder. (Arver direkte fra Node)
• Scene: Base containeren for alt innholdet i en scene graph.

Disse klassene inneholder viktig funksjonalitet som arves videre og brukes i forbindelse med tegnerekkefølge, synlighet, transformasjoner, osv.
Parent arves av diverse internnode-klasser som Control, Group, Region og WebView. Det finnes også utallige løvnode-klasser, slik som javafx.scene.shape og javafx.scene.text.

Noder

Det finnes noen fellestrekk som gjelder for alle nodene man bruker i JavaFX. Alle noder, utenom rotnoden, legges til i grafen ved å addes i listen av barn til en parent-node. En node kan bare eksistere på et sted. Dersom man forsøker å legge til et objekt som child på flere forskjellige steder i grafen, vil objektet fjernes fra dens forrige parrents liste over children, før det addes som child hos sin nye parent. Det kan heller ikke finnes sykler i grafen. 

Id
Hver node kan også gis en id. Dette er en id som ligner veldig på id-tagen i HTML, og det er opp til utvikleren å sikre at en id er unik i en scene graph. En nyttig funksjon i denne forbindelse er lookup(String id) som kan brukes til å finne en node med en unik id i en scene graph. Ellers kan også id'en brukes til å identifisere noder når man vil legge til stiler, se mer om css lenger ned. 

Koordinater
Nodene følger et tradisjonell grafisk koordinatsystem med økende verdier mot høyre på x-aksen, og økende verdier nedover på y-aksen. Med dette er altså (0,0) lokalisert øverst til venstre. Man kan også definere koordinatene med flyttall og (0.5 , 0.5) tilsvarer da sentrum av pixelet øverst til venstre.

Transformasjoner

• Translate flytter i x- og/eller y-retning ut fra nodens referansepunkt. Altså en enkel forflytning av objektet. TranslateTransition er en utvidelse av Translate og kan gjøre utføre forflytningen som en animasjon.
• Rotation roterer noden et antall grader rundt et gitt referansepunkt. RotateTransition muliggjør rotasjonene som en animasjon.
• Scale skalerer noden utfra nodens referansepunkt med en x- og y-faktor. Dersom referansepunktet er øverst til venstre i noden vil skaleringen utføres nedover og mor høyre. Klassen ScaleTransition finnes også.
• Shearing roterer en akse slik at x- og y-aksen ikke lenger er vinkelrette for den gjeldende noden

Etter man har laget en transformasjon tiltenkt en eller flere noder kan man enkelt utføre den ved å legge den til i listen(e) av transformasjoner for noden(e): node.getTransforms().add(transform);

Cascading Style Sheets (CSS)

En node har feltene id, styleClass og style. Disse brukes til å endre nodens stil med CSS. Feltene id og styleClass brukes i CSS for å avgjøre hvilke noder som skal ha de forskjellige stilene. Feltet style brukes til å legge på en CSS stil til en node direkte i koden. For en basic forståelse av dette konseptet, ta en titt på denne videoen. Oracle har også en god tutorial for å få et lite innblikk i mulighetene CSS gir oss.

Layouts

JavaFX har støtte for mange forskjellige layouts og stiler gjennom en rekke container-klasser. Disse klassene er på en måte forhåndsdefinerte "beholdere", og en analogi kan være måten et klesskap er utformet. Klærne dine kan legges i store og små hyller (gjerne flere plagg i samme hylle), eller henges opp i kleshengere. Dersom det ikke er en hylle der du vil legge fra deg genseren, nei da går det ikke å legge genseren der. 
Her utgjør klærne dine noder, mens hyllene og oppheng utgjør layout. Det kan godt tenkes at klesskapet i utgangspunktet bare er delt i to, men at det er puttet flere hyller (layouts) i den ene av disse to containerne.

....