Page History

...

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-appen

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.

...

FXML-filer kan redigeres som tekst i Eclipse. Prøv f.eks. å erstatte <!-- ... --> med <Button text="Count"/> (du trenger også et import-element for javafx.scene.control.Button). Ved kjøring vil du da få opp et vindu med en Count-knapp i (inni et HBox-panel). Hvis en redigerer FXML som tekst på denne måten, kan det være nyttig å åpne JavaFX Preview-panelet med Window > Show View > Other... > JavaFX Preview. Dette panelet viser hele tiden hva innholdet i den aktive FXML-editoren betyr, altså slik det vil se ut hvis FXML-koden kjøres. Figuren under viser koden for HBox-panelet med en Count-knapp i og JavaFX Preview-panel. NB: JavaFX Preview-panelet fungerer ikke i 2019-utgaven av faget og Eclipse

For en så liten app er det greit å redigere FXML-koden som tekst, men generelt er det greiere å bruke applikasjonen SceneBuilder. Høyreklikk på fila (installer først ved å følge lenka og instruksjonene) og velg Open with SceneBuilder, og du vil kunne redigere FXML-koden grafisk. SceneBuilder bruker FXML som lagringsformat, men lar deg redigere innholdet vha. direkte manipulasjon, tekstfelt, menyer og dialoger.

...

Når du kjører FXML-koden, så kan du forresten legge merke til to bruksproblemerfeil/mangler:

• Det sjekkes ikke om den øvre grensa i tekstfeltet faktisk er et gyldig tall. Hvis en f.eks. skriver skriver fem i  i stedet for for 5 og  og trykker på på New Counter-knappen så skjer det tilsynelatende ingenting. Det er fordi konverteringskoden i i Integer.valueOf-metoden kræsjer og det derfor ikke legges inn noe nytt nytt Counter-objekt. Det hadde vært bedre om en hele tiden sjekket om teksten var gyldig og evt. markerte det med farge. New Counter-knappen kunne dessuten blir deaktivert, hvis teksten var ugyldig.

• En kan trykke på på Count-knappen selv om det ikke er laget noe noe Counter-objekt ennå. counter.count()-kallet vil kræsje fordi counter-feltet er er null. Også her vil det være bedre om knappen var deaktivert, inntil et et Counter-objekt faktisk var laget.

Prøv gjerne å fikse disse problemene, men merk at løsningen på det første problemet er mer komplisert enn en skulle tro. Det andre problemer er enklere å løse... hint: gjør det mulig å nå knappen vha. et et fx:id og  og et felt, og bruk bruk Button sin  sin setDisabled-metode.