JavaFX og det tilhørende filformatet FXML og verktøyet SceneBuilder, gjør det relativt enkelt å lage fasaden til app-er. Med Eclipse-tillegget e(fx)clipse så kan du faktisk lage fasaden uten programmering, og så trinnvis gjøre app-en funksjonell ved å koble elementene i fasaden, så som knapper og tekstfelt, til selve (koden for) app-logikken. Her viser vi hvordan dette gjøres for en enkel app basert på Counter-logikken i Tilstand og oppførsel.
Counter-klassen implementerer en enkel teller, som får fra 1 til en angitt øvre grense. Koden og en enkel forklaring er gitt under:
| Counter-klassen | Forklaring |
|---|---|
public class Counter {
int end;
int counter = 0;
Counter(int end) {
this.end = end;
}
int getCounter() {
return counter;
}
void count() {
if (counter < end) {
counter = counter + 1;
}
}
}
| Counter-klassen deklarerer felt for den øvre grensa og telleren. Den øvre grensa initialiseres av konstruktøren. Telleren kan lese (utenifra) med getCounter()-metoden. count()-metoden brukes til å telle opp ett trinn, men dette skjer bare hvis den øvre grensa ikke alllerede er nådd. Figuren under viser hva som skjer når en teller fra 0 og oppover og den øvre grensa er 3. Vi ser at det samme objektet (samme #id) endrer tilstand ved at telleren øker, inntil telleren er lik den øvre grensa. |
Tanken er nå å lage en app som lar oss opprette og initialisere, lese og endre tilstanden til et Counter-objekt. Vi skal starte med en enkel variant, som lar oss lese og endre tilstanden til et forhåndsopprettet Counter-objekt, og så utvider vi den til å støtte å lage nye Counter-objekter. GUI for de to variantene er vist under:
| Counter-GUI 1 | Counter-GUI 2 |
|---|---|
 |  |