Med JavaFX er det lett å lage enkel 2D-grafikk, og med FXML så blir det enda enklere!
Figurer i FXML
Med FXML er det nokså enkelt å lage større figurer, som en sammensetning av enkle figur-elementer som sirkler, rektangler og streker. En enkel strekmann kan se ut som følger med FXML:
<Group layoutY="50"> <Circle layoutX="100" layoutY="20" radius="20" stroke="black" fill="white"/> <Circle layoutX="112" layoutY="20" radius="2" stroke="black" fill="blue"/> <Line layoutX="120" layoutY="20" startX="0" startY="-4" endX="3" endY="0" stroke="black"/> <Line layoutX="120" layoutY="20" startX="3" startY="0" endX="0" endY="1" stroke="black"/> <Line layoutX="100" layoutY="40" endX="0" endY="30" stroke="black"/> <Group layoutX="100" layoutY="50" visible="true"> <Line layoutY="0" endX="-10" endY="10" stroke="black"/> <Line layoutY="0" endX= "10" endY="10" stroke="black"/> <Line layoutY="20" endX="-10" endY="15" stroke="black"/> <Line layoutY="20" endX= "10" endY="15" stroke="black"/> </Group> </Group> | FXML-koden til venstre gir strekmannen over. |
Ved å se på figur-typen og koordinatene skal det være nokså lett å se hvilke kode-linjer som tilsvarer hodet, øyet, nesa, kropp, armer og bein.
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).