Enkel app-programmering med JavaFX og FXML

Transkript

1 Enkel app-programmering med JavaFX og FXML JavaFX er Java sitt nye rammeverk for å lage og beskrive grafiske brukergrensesnitt (GUI). Her gir vi en kort introduksjon til å lage enkle GUI med JavaFX vha. Eclipse med e(fx)clipse-tillegget. 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 Til stand 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-obje kter. Counter-app - enkel variant Enkel app for å telle opp telleren til et Counter-objekt, som er laget på forhånd med en grense på 5. Trykk Count-knappen for å telle opp. Med JavaFX kan en velge å bruke kode for å bygge opp GUI-et eller beskrive GUI-et med FXML-filer og så lese inn og vise frem innholdet. Vi velger å bruke FXML, siden det er mye enklere. Prosessen er grovt sett delt i to: En lager en FXML-fil i Eclipse, som enten kan redigeres som tekst i Eclipse eller og åpnes i SceneBuilder for mer grafisk redigering av GUI-fasaden. En lager en Java-klasse for styring av app-en og kobler denne til FXML-koden vha. spesielle Java- og FXML-elementer. Oppretting av FXML-fil En lager en FXML-fil med Eclipse sin New FXML Document veiviser: høyreklikk på pakka (kode-mappa) hvor Counter-klassen ligger, og velg New > Other... > New FXML Document. Fyll så ut navnet, f.eks. Counter1 og velg HBox (for horisontal box) som såkalt "Root Element" (panel-type). Avslutt og du vil få opp en FXML-editor med kode for et tomt HBox-panel. For å vise frem innholdet, altså "kjøre" FXML-koden, så kan du høyre-klikke på fila og velge Run As > FXML Application (dette forutsetter et spesielt Eclipse-tillegg). Du vil da få opp et tomt vindu, siden du ikke har redigert FXML-koden og lagt inn noe synlig innhold. Veiviser for FXML-filer FXML-editor med ny FXML-fil FXML-kode for tomt HBox-panel. Den første linja er obligatoris XML-dokumenter (utelates i eksemplene under). <?import...>-elementet lar oss bruke HBox som navn på det s er Java-klassen javafx.scene.layout.hbox. <HBox...>-elementet angir at app-vinduet skal inneholdet et o typen javafx.scene.layout.hbox, som gir en horisontal layout panel-innholdet. Her er elementet imidlertid tomt, så ingenting kjøring. Merk attributtet xmlns:fx="...", som angir at elementene skal t FXML-kode, altså referanser til JavaFX-klasser. Uten dette attr det ytterste elementet vil ingenting virke.

2 Redigering av FXML-koden 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. 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. SceneBuilder-applikasjonen lar deg redigere FXML-koden grafisk. Området i midten viser GUI-et. Øverst til venstre er det en palett med elementer en kan dra og slippe i GUI-området i midten. Nederst til venstre vises den hierarkiske strukturen av paneler og elementer, her med en HBox med en Button inni. Til høyre er det et tredelt detalj-panel. Propertie s-seksjonen viser generelle grafiske egenskaper og egenskaper som er mer spesifikke for det valgte elementet. Her er knappen valgt, og vi ser at knappeteksten styres av Text-egenskapen, som har verdien Count. L ayout-seksjonen har med plassering av elementet å gjøre og Code-seksjonen med koblingen til GUI-logikken. I app-en trenger vi en tekst til venstre for knappen. Det kan en få til ved å legge til et Text-objekt slik at det havner før Butten-objektet inni HBox-objektet. Finn først frem til Text-objektet i paletten (til venstre) ved å velge Shapes-seksjonen og bla nedover. Så kan du enten dra og slippe Text-objektet til venstre for knappen i GUI-området (i midten), eller rett over Button-objektet i hierarkiet (nede til venstre). Rediger så teksten så den blir Current counter value: 0, enten ved å dobbelt-klikke på teksten i GUI-området og redigere, eller ved å redigere Text-egenskapen i Properties-seksjonen (oppe til høyre). Resultatet er vist under til venstre. Lagre, gå tilbake til Eclipse og klikk på eller i FXML-editoren for å sikre at Eclipse viser den nylig lagrede versjonen. Koden skal være omtrent som vist under til høyre.

3 <?xml version="1.0" encoding="utf-8"?> <?import java.lang.*?> <?import javafx.scene.control.*? <?import javafx.scene.layout.*?> <?import javafx.scene.text.*?> <?import javafx.scene.layout.hbo <?import javafx.scene.control.button?> <HBox xmlns:fx=" xmlns=" <Text stroketype="outside" strokewidth="0.0" text="current counter value: 0" /> <Button text="count" /> App-logikk Så langt har vi et GUI uten oppførsel, for hvis du kjører og trykker på knappen så skjer det ingenting. Det vi mangler er app-logikken som styrer koblingen mellom den indre tilstanden til applikasjonen og GUI-fasaden. I vårt tilfelle utgjøres den indre tilstanden av Counter-objektet, mens GUI-fasaden består av Text- og Button-obje ktene, eller generelt av hierarkiet av JavaFX-objekter. Koblingslogikken må sikre at Text-objektet viser counter- verdien til Counter-objektet og at trykking på Count-knappen trigger count-metoden. Koblingen er altså toveis: (deler av) den indre tilstanden vises i GUI-et og GUI-et styrer (deler av) den indre tilstanden. App-logikken ligger i en egen klasse, som gjerne kalles en kontroller-klasse, og når appen kjøres vil det finnes ett objekt av denne klassen, som er koblet sammen med de Text- og Button-objektene i GUI-et og Count-objektet. Sammenkoblingen av alle disse objektene krever spesiell kode i både FXML-koden og i kontroller-klassen. Under til venstre ser du den relevante FXML- og kontroller-koden, med en forklaring på sammenhengene til høyre. FXML- og Java-kode <?import javafx.scene.layout.hbox?> <?import javafx.scene.control.button?> <?import javafx.scene.text.text?> <HBox xmlns:fx=" fx:controller="counter.countercontroller"> <Text fx:id="counteroutput" text="current counter value: 0"/> <Button text="count" onaction="#handlecountaction"/> Forklaring FXML-koden inneholder et fx:controller-attrib navnet til kontroller-klassen. Når FXML-koden så vil det automatisk lages et objekt av denne kontroller-klassen er counter.countercontrol objekt av denne klassen styre appen. CounterController-objektet gis sjansen til å ut at en metode med signaturen void initialize() gentlig javafx.fxml.fxml) automatisk kalles ( h Annotasjonen står foran metoden og en impor å bruke det fulle navnet. Her opprettes det et C øvre grense for telleren, og en får koblingen so

4 import javafx.fxml.fxml; public class CounterController { Counter counter; Text counteroutput; void initialize() { counter = new Counter(5); void handlecountaction() { counter.count(); counteroutput.settext("current counter value: " + counter.getcounter()); CounterController-objektet skal bl.a tet som viser counter-verdien. For å CounterController-objektet ha en re t, altså et felt av typen Text (egentlig t), slik at en får koblingene vist under

5 Selve koblingen opprettes automatisk kjøring av FXML-en vha. to elemente Java: counteroutput-feltet i Cou Text som type og annotert FXML: fx:id-attributtet på Text-el FXML-koden, med navnet på felte Merk at navnet på feltet kan være hva stemmer med fx:id-attributtet og felt- noe ikke stemmer, så vil det bli marke FXML-koden av editoren. Det siste som trengs er kode som håndterer C mellom knappen og koden. Dette håndteres m Java: handlecountaction-metoden anno FXML: onaction-attributtet med #handle handlecountaction-metoden sørger for å øke nt(), og oppdatere teksten som vises av Text-o t.settext(...). Som over så spiller ikke navnet ( bare det stemmer med verdien til attributtet som onaction er attributtet som brukes av knappen trykkes, og hver type interak sine on-attributter for de ulike typene støtter. Hvis kontroller-objektet skal re type input, så brukes tilsvarende on-a De spesielle attributtene som trengs i FXML-koden, altså fx:controller, fx:id og on..., kan legges inn i FXML-editoren i Eclipse eller i tilsvarende tekstfelt i SceneBuilder. fx:controller legges inn Controller-seksjonen nederst til venstre, mens fx:id og on...-attributtene legges inn i Code-seksjonen ned til høyre. Counter-app - komplett variant En mer komplett app for å lage nye Counter-objekter og telle dem opp. I starten har en ikke noe Counter-objekt. En ny lages ved å fylle inn den øvre grensa i tekstfeltet og trykke New Counter -knappen. Tilstanden til dette Counter-objektet vises på linja under og en kan telle opp telleren ved å trykke Count-knapp en. Som over så starter vi med å redigere FXML-koden, slik at vi får en linje med et tekstfelt, av typen TextField, og en knapp til. For å få ønsket layout, med to rader, så må vi i tillegg ha en HBox rundt tekstfeltet og knappen, og en VBox (vertical box) utenpå den eksisterende HBox-en og den nye. Under til venstre vises ønsket struktur, og til høyre en kort forklaring på hvordan få det til.

6 En kan pakke (eng: wrap) et VBox-panel rundt eksisterende elementer ved å velge disse, høyreklikke og velge Wrap In > VBox. Et nytt HBox-panel legges inn ved å velge Container-seksj onen i paletten og dra og slippe et HBox-objekt inn VBox-o bjektet, men over det eksisterende HBox-panelet. Markøren gir tilbakemelding om hvor objektet havner når du slipper, men det er lett å bomme. Da må en i så fall dra og slippe objektet innen hierarkiet til det havner på rett plass. TextField- og Button-objektene finner du begge i Controls- seksjonen, som generelt har interaktive elementer. (Text-objektet var i Shapes-seksjonen, siden det er passiv grafikk.) I panelet til venstre er forøvrig visning av fx:id slått på, ved å velge Hierarchy displays > fx:id i nedtrekksmenyen markert med tannhjul. Vi ser det allerede er lagt inn en fx:id for tekstfeltet med navn endinput, som betyr at vi må ha et tilsvarende felt i CounterController-klassen. Dette trengs fordi vi må kunne lese teksten ut av feltet fra CounterContr oller-objektet, når vi skal lage et nytt Counter-objekt med en spesifikk øvre grense. Under er FXML- og Java-koden for den utvidete varianten vist, med forklaring til høyre. FXML- og Java-kode <VBox xmlns=" xmlns:fx=" fx:controller="counter.countercontroller"> <HBox> <TextField fx:id="endinput" /> <Button mnemonicparsing="false" onaction="#handlenewcounteraction" text="new Counter" /> <HBox> <Text fx:id="counteroutput" stroketype="outside" strokewidth="0.0" text="current counter value: 0" /> <Button onaction="#handlecountaction" text="count" /> </VBox> Forklaring FXML-koden har blitt litt større, dels fordi vi har utvidet hierarkiet med et nivå til og lagt til ekstra elementer, og dels fordi SceneBuilder har lagt til ekstra -elementer og noen attributter. -elementene er egentlig implisitt inni panel-elementer og dermed overflødige her, men det er greit å la dem stå. Det viktigste er at det nye TextField-element et har et fx:id-attributt og det nye Button-ele mentet et onaction-attributt. Java-koden har tilsvarende et nytt felt av typen TextField med navn tilsvarende fx:id- attrbibuttet og og en metode med navn tilsvarende onaction-attributtet. Og begge har med -annotasjonen, som angir at de brukes av JavaFX og FXML-mekanismen. Java-koden har forøvrig fått følgende endringer: initialize-metoden lager ikke lenger et Counter-objekt, som dermed starter som null, og setter i stedet counterout put -teksten til "No counter". Vi har en hjelpemetode for å oppdatere counteroutput-teksten med teller-verdien. Dette er praktisk fordi vi må oppdatere to steder, når vi i handle NewCounterAction lager et nytt Count er-objekt og når vi i handlecountactio n teller opp. handlenewcounteraction-metoden henter ut teksten fra endinput-tekstfeltet og konverterer til en int vha. Integer.va lueof-metoden, og lager et nytt Counte r-objekt. Det nye Counter-objektet erstatter det gamle (uavhengig av om det er telt opp til grensen eller ikke).

7 public class CounterController { Counter counter = null; TextField endinput; Label counteroutput; void initialize() { counteroutput.settext("no counter"); void updatecounteroutput() { counteroutput.settext("current counter value: " + counter.getcounter()); void handlenewcounteraction() { int end = Integer.valueOf(endInput.getText()); counter = new Counter(end); updatecounteroutput(); void handlecountaction() { counter.count(); updatecounteroutput(); Når du kjører FXML-koden, så kan du forresten legge merke til to feil/mangler: Det sjekkes ikke om den øvre grensa i tekstfeltet faktisk er et gyldig tall. Hvis en f.eks. skriver fem i stedet for 5 og trykker på New Counter-knappen så skjer det tilsynelatende ingenting. Det er fordi konverteringskoden i Integer.valueOf-metodederfor ikke legges inn noe nytt Counter-objekt. Det hadde vært bedre om en hele tiden sjekket om teksten var gyldig og evt. kræsjer og det markerte det med farge. New Counter-knappen kunne dessuten blir deaktivert, hvis teksten var ugyldig. En kan trykke på Count-knappen selv om det ikke er laget noe Counter-objekt ennå. counter.count() -kallet vil kræsje fordi counter-feltet er null. Også her vil det være bedre om knappen var deaktivert, inntil 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 fx:id og et felt, og bruk Button sin setdisabled-metode.