Kalkulator-leksjonen (nesten ferdig) Introduksjon I denne leksjonen vil du lære hvordan du kan koble FXML-koden til Java-koden og gjøre app-en levende (interaktiv)! Steg 1: Opprette app-pakke, app-klasse, FXML-fil og controller-klasse. Lag først en ny app-pakke og app-klasse som forklart i Hello world-leksjonen. Bruk kalkulator som navn på pakken og KalkulatorApp som navn på app-klassen. Åpne KalkulatorApp-klassen og rediger slik at du får følgende kode: package kalkulator; import java.io.ioexception; import javafx.application.application; import javafx.fxml.fxmlloader; import javafx.scene.scene; import javafx.scene.layout.pane; import javafx.stage.stage; public class KalkulatorApp extends Application { public void start(stage primarystage) throws IOException { FXMLLoader fxmlloader = new FXMLLoader(KalkulatorApp.class.getResource("KalkulatorApp.fxml")); Pane root = fxmlloader.load(); primarystage.setscene(new Scene(root)); primarystage.show(); public static void main(string[] args) { launch(kalkulatorapp.class, args); Dette er nesten akkurat samme kode som i FxmlLogoApp fra FXML-logo-leksjonen, vi har bare byttet ut FxmlL ogoapp med KalkulatorApp på fire steder: etter public class, KalkulatorApp.class og KalkulatorApp.fxml i start-metoden og KalkulatorApp.class i main-metoden). Når du senere skal lage app-klasser, så kan du gjøre det samme: Ta denne koden og putt inn navnet på den nye klassen på de riktige stedene. Lag en ny FXML-fil ved navn KalkulatorApp.fxml som forklart i FXML-logo-leksjonen. Rediger KalkulatorApp.fxml-fila med FXML-editoren og/eller SceneBuilder, slik at du får en kalkulator med knapper (type Button) for hvert tall 0-9, desimalpunktum, de fire regneartene +, -, *, / og likhetstegn =. Over disse har du et tekstfelt (TextField). Det kan se ut omtrent som vist til høyre.
Hvis du kjører KalkulatorApp med Run As > Java Application, så vil du få opp et vindu som ser ut som en kalkulator, men som ikke gjør noe. Dvs. du kan trykke på knappene og skrive i tekstfeltet, men app-en reagerer jo ikke som en vanlig kalkulator. Vi ønsker f.eks. at hvis du trykker på knappene 1, 2, +, 3, 4, = så skal resultatet 46.0 vises i tekstfeltet. For å få det til må vi lage en egen KalkulatorController-klasse, som skal ha kode for å reagere på knappetrykkene, gjøre utregningene og hele tiden oppdatere tekstfeltet, som en ekte kalkulator ville gjort. Lag KalkulatorController-klassen ved å høyreklikke på kalkulator-pakken og velge New > Class og fylle inn KalkulatorController som navn. Det neste trinnet er å fortelle JavaFX at denne klassen skal være controller -klassen til app-en. Dette gjøres ved å legge inn fx:controller="k alkulator.kalkulatorcontroller" i FXML-koden for kalkulator-panelet, altså KalkulatorApp.fxml. Hvis du f.eks. bruker en AnchorPane som panel så vil koden se omtrent slik ut: <?xml version="1.0" encoding="utf-8"?> <?import javafx.scene.text.*?>... flere <?import...?> her... <?import javafx.scene.control.textfield?> <AnchorPane prefheight="126.0" prefwidth="222.0" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="kalkulator.kalkulatorcontroller">... alle knappene kommer her... </AnchorPane> Det vesentlig her er fx:controller="kalkulator.kalkulatorcontroller", som forteller at KalkulatorController er klassen som skal reagere på og styre knappene og tekstfeltet i KalkulatorApp.fxml. Steg 2: Koble FXML-fil og Controller sammen Hvis du har lagt inn fx:controller="kalkulator.kalkulatorcontroller" i KalkulatorApp.fxml, så vil det automagisk bli laget en KalkulatorCo ntroller når FXML-en lastes inn (av FXMLLoader-en i KalkulatorApp sin start-metode). Det som da gjenstår er å koble KalkulatorControll er-en til knappene og tekstfeltet, og tenke ut hva som er riktig kalkulatoren-logikk. Kalkulator-logikken er ikke så enkel som en kan tro, så vi tar sammenkoblingen først. Sammenkobling går to veier: 1. 2. Fra FXML til Controller : knappene i KalkulatorApp.fxml sier fra til KalkulatorController når de trykkes på. Fra Controller til FXML: KalkulatorController oppdaterer tekstfeltet i KalkulatorApp.fxml når tilstanden in ni kalkulatoren endres, f.eks. når den beregner en ny verdi som skal vises frem. I begge tilfeller må en legge til kode i både Kalkulator.fxml og KalkulatorController, men på ulike måter. Fra FXML til Controller Alle elementene i FXML-fila kan si fra om hva brukeren gjør med dem. Knapper kan f.eks. si fra når de trykkes på, og tekstfelt kan si fra når teksten inn endres. Dette kalles hendelser (eng: events) og det vi må gjøre er å legge inn koder i FXML-fila som angir hvilken metode i Controller-en som skal kalles for hver type hendelse på de ulike elementene. Hendelsen "knappetrykk" kalles action, og derfor legger en inn onaction="#handlebutton" i FXML-koden for en knapp for å kalle handlebutton-metoden når akkurat den knappen trykkes. Hvis forskjellige knapper skal ha omtrent samme logikk, så kan en bruke samme metode. F.eks. så skal kalkulatoren gjøre omtrent det samme for alle tall-knappene, så derfor kan en legge onaction="#handledigitbutton" på alle disse. En må selvsagt huske på å lage handledigitbutt on-metoden også. Her er eksempelkode for tall-knappene:
I KalkulatorController.java: I KalkulatorApp.fxml public class KalkulatorController {... annen kode... void handledigitbutton(actionevent event) { // denne setningen skriver ut hvilken knapp som kalte metoden System.out.println(event.getSource());... her er kode for tall-knappene... <?xml version="1.0" encod <AnchorPane... fx:controller="kalkulator <children> <Button text="1" onacti... /> <Button text="2" onacti... />... de andre knappene ko </children> </AnchorPane> brukes for å gi FXML-en lov til å kalle metoden, mens void betyr at metoden ikke skal returnere noen verdi. Både 1- og 2-knappen har onaction="#handled dledigitbutton blir kalt når de trykkes på event-parameteret (av typen ActionEvent) inneholder informasjon om hendelsen. F.eks. kan en hente ut hvilken knapp som ble trykket med event.getsource(). Her skriver vi ut denne verdien, for å sjekke at det virker som det skal. Hvis det ikke er viktig å vite hvilken knapp som ble trykket (f.eks. hvis den bare kalles av én knapp), så trenger du ikke ha med event-parameteret i metoden. Hvis du senere ønsker å håndtere andre typer hendelser, f.eks. museklikk, så må du bruke en annen argument-type enn ActionEve nt. For museklikk (og andre muse-hendelser) må du f.eks. bruke MouseEvent. Prøv å gjøre endringene vist over, kjør koden og se om du får skrevet ut hvilken knapp som trykkes. Husk at det bare er knappene som har o naction="# handledigitbutton" som vil kalle handledigitbutton-metoden. Fra Controller til FXML For at KalkulatorController-koden skal ha en synlig effekt, så må den kunne endre på elementene som vises i app-vinduet. F.eks. så ønsker jo vi å endre på teksten som vises i tekstfeltet. For å få det til, så må en ha én eller flere variabler som peker på elementer i Kalkulat orapp.fxml-fila og få satt disse automagisk når FXML-fila lastes inn. Trikset er igjen å legge inn kode både i KalkulatorController og Kalkul atorapp.fxml. I dette tilfellet deklarerer man en variabel i KalkulatorController og legger in et fx:id-attributt i KalkulatorApp.fxml. Typen og navn til variabelen må stemme med typen FXML-element og fx:id-en.
I KalkulatorController.java: I KalkulatorApp.fxml public class KalkulatorController {... annen kode... TextField valuetextfield; // denne vil bli satt til å peke på tekstfeltet med fx:id="valuetextfield" void handledigitbutton(actionevent event) { Button button = (Button) event.getsource(); valuetextfield.settext(button.gettext()); brukes her for å gi FXML-en lov til å sette variabelen. Typen TextField stemmer med FXML-elementet og navnet "valuetextfield" stemmer med fx:id-verdien. <?xml version="1.0" en <AnchorPane... fx:controller="kalkula <children> <TextField fx:id="va <Button text="1" ona... /> <Button text="2" ona... />... de andre knappene </children> </AnchorPane> Tekstfeltet har fått en fx:id som stemmer med FXML-koden for tekstfeltet. Koden i handledigitbutton er endret, slik at den først henter ut knappen med event.getsou rce() og så setter teksten til tekstfeltet til knappens tekst med t(button.gettext()). valuetextfield.settex Prøv å gjøre endringene vist over, kjør koden og se om teksten i tekstfeltet endres når du trykker på tall-knappene. Steg 3: Kalkulator-logikk Så langt har vi fokusert på å få teknikken for å koble FXML-fil og Controller-klasse sammen til å virke. Nå kan vi begynne å se på kalkulator-logikken. Det vanskeligste er i grunnen å finne ut hvilke variabler som trengs for å holde rede på kalkulator-tilstanden, og så endre variablene på riktig måte når knappene trykkes på. Det kan også være vanskelig å organisere koden så det ikke bare blir rot når en legger til logikk. Vi skal starte med logikken for å bygge opp et tall ved å legge nye sifre til bakerst, altså det som gjør at en får 2469 hvis en trykker knappene 2, 4, 6 og 9 i rekkefølge. Den mest direkte måten å gjøre det på er å endre teksten i tekstfeltet ved å kalle valuetextfield.settext(value TextField.getText() + button.gettext()) i handledigitbutton-metoden. En henter altså ut teksten slik den er i tekstfeltet, legger teksten på knappen bak denne og putter resultatet tilbake. Koden er vist under til venstre. Vi skal imidlertid gjøre det litt mer indirekte, fordi det i lengden gjør koden ryddigere. Trikset er å ha en egen variabel ( valuetext) for tallet som bygges opp, og ha to metoder, én for å legge til nye tall ( appenddigit) og én for å oppdatere teksten i tekstfeltet ( updatevaluetextfield). Koden er vist under til høyre.
Direkte variant, som endrer teksten i tekstfeltet direkte. public class KalkulatorController {... annen kode... TextField valuetextfield; void handledigitbutton(actionevent event) { Button button = (Button) event.getsource(); String currenttext = valuetextfield.gettext(); String newtext = currenttext + button.gettext(); valuetextfield.settext(newtext); public class KalkulatorControll String valuetext = ""; void appenddigit(string digit) valuetext = valuetext + digit TextField valuetextfield; void updatevaluetextfield() { valuetextfield.settext(valuet void handledigitbutton(actione event) { Button button = (Button) event.getsource(); appenddigit(button.gettext()) updatevaluetextfield(); Vi ser at det er litt mer kode, men i praksis skjer det samme: Teksten i valuetextfield blir lengre og lengre. Fordelen med den høyre varianten er at vi deler koden opp i mer håndterlige deler (metoder) med logiske navn. Etterhvert som vi legger til mer logikk, så utvider vi kanskje med flere variabler og metoder og/eller vi utvider metodene vi allerede har laget. Et viktig prinsipp å skille mellom metoder som endrer på variabler og metoder som oppdaterer det som vises i app-vinduet. Siden vi bare har ett tekstfelt, så trenger vi faktisk bare én metode for å oppdatere app-vinduet, nemlig updatevaluetextfield. For å få oversikt over all logikken som trengs, så er det lurt å prøve å tenke på hva som skal skje for ulike rekkefølger av tastetrykk. Vi har allerede sett hva som skjer hvis en trykker på tall-knappene: valuetext blir lengre og lengre. Men hva skal skje når du så trykker på + -knappen? Det er klart at KalkulatorController-en på en eller annen måte må huske det, så den vet at den må utføre + -operasjonen når en senere trykker på = -knapp en. Hvis en tenker på mange nok ulike tilfeller, så vil en til slutt ha oversikt over alt kalkulatoren må kunne huske, dvs. lagre i variabler og hvordan disse endre for hvert tilfelle. Det kan være greit å sette opp hvert tilfelle i en tabell, som en så bruker som en slags oppskrift når en begynner på koden. I tabellen under så har vi laget fem kolonner. Den første, Tastetrykk, viser hva som er tastet så langt. Den andre, Logikk, forklarer med tekst hva som gjøres. De tre neste er variablene som trengs: valuetext er tallet en er i ferd med å legge inn, memory er tallet en allerede har skrevet inn eller regnet ut, og operator er den siste operasjonen en trykket på. Verdien i hver variabel-kolonne er resultatet av å utføre det som er beskrevet i Logik k-kolonnen. Den siste er teksten som vises i tekstfeltet, som om updatevaluetextfield() kalles automatisk etter at Logikk-en er utført. Merk at en for String-variabler skiller mellom null, som du kan tenke på som ingenting og "", som er en tom tekst. Tastetrykk Logikk String valuetext double memory String operator valuetextfield.text (før noen knapper er trykket) memory vises i tekstfeltet null 0.0 null "0.0" 1 Bygger opp ny valuetext, som vises i tekstfeltet "1" 0.0 null "1" 1, 2 Legger nytt siffer bakerst i valuetext "12" 0.0 null "12"
1, 2, + Gjør om valuetext til et tall og legger det i memory. Blanker valuetext og lagrer +-operasjonen i operator. null 12.0 "+" "12.0" 1, 2, +, 3 Bygger opp ny valuetext "3" 12.0 "+" "3" 1, 2, +, 3, 4 Legger nytt siffer bakerst i valuetext "34" 12.0 "+" "34" 1, 2, +, 3, 4, = Gjør om valuetext til et tall og utfører operator-operasjonen på memory og det nye tallet. Resultatet legges i memory, og så blankes operator og value Text null 46.0 null "46.0" Tilfellet over var et nokså vanlig og enkelt tilfelle. La oss prøve et litt mer komplisert et. Vi hopper over første rad, siden den er som over. I tillegg så bytter vi ut Logikk-teksten med noe som ligner på metode-kall. Det vil hjelpe oss når vi siden skal skrive koden for Logikk-en. Tastetrykk Logikk String valuetext double memory String operator valuetextfield.text 1 append2valuetext("1") "1" 0.0 null "1" 1,. append2valuetext(".") "1." 0.0 null "1." 1,., + convertandstorevaluetext(), clearvaluetext(), storeoperator("+") null 1.0 "+" "1.0" 1,., +, 3 append2valuetext("3") "3" 1.0 "+" "3" 1,., +, 3, - convertvaluetextcomputeandstorevalue(), clearvaluetext(), st oreoperator("-") null 4.0 "-" "4.0" 1,., +, 3, -, 2 append2valuetext("4") "2" 4.0 "-" "2" 1,., +, 3, -, 2, = convertvaluetextcomputeandstorevalue(), clearvaluetext(), storeoperator(null) null 2.0 null "2.0" Nå kan du prøve å lage din egen tabell med tilfellet hvor Tastetrykk er sekvensen 1, +, 2, =, +, 3, =. Steg 4: Skriv koden! Det er din oppgave! For å gjøre det litt lettere så viser vi her noen kode-snutter for småproblemer du sikkert vil støte på underveis. Problem Kode Forklaring Gjøre om fra tekst ( String) to (desimal)tall ( double) Double.valueOf(text) Du kaller Double-klassen sin valueof-metode, for å konvertere en tekst til en double. Gjøre om fra (desimal)tall til tekst String.valueOf(num) elle r "" + num Du kaller enten String.valueOf, eller legger num til "", som konverterer num i samme slengen Sjekke om en String-variabel er inge nting if (text!= null) {... En bruker!= null for å sjekke om er variabel er ingenting Sjekke om en String-variabel er tom if (text.length() == 0) {... text.length() gir deg antall bokstaver i en String, så her sjekker vi om antall bokstaver er 0 Hva har du lært? P.S. å koble FXML-koden til Java-koden med fx:id- og onaction-attributter å organisere koden i flere mindre metoder å skille mellom metoder som endrer interne variabler og de som oppdaterer app-vinduet Her er én av manger løsninger som virker omtrent som foreslått over: package kalkulator; import javafx.beans.property.stringproperty;
import javafx.event.actionevent; import javafx.fxml.fxml; import javafx.scene.control.button; import javafx.scene.control.textfield; public class KalkulatorController { private double memory = 0.0; private String valuetext = null; private String operator = null; TextField valuetextfield; void initialize() { private void updatevaluefield() { if (valuetext!= null) { valuetextfield.settext(valuetext); validatevaluetextfield(); else { valuetextfield.settext(string.valueof(memory)); private void validatevaluetextfield() { try { // prøv å konvertere teksten i tekstfeltet Double.valueOf(valueTextField.getText()); valuetextfield.setstyle(null); catch (Exception e) { valuetextfield.setstyle("-fx-border-color: red;"); private void append2valuetext(string s) { if (valuetext == null) { valuetext = ""; valuetext = valuetext + s; private void clearvaluetext() { valuetext = null; private void convertandstorevaluetext() { memory = Double.valueOf(valueText); private void convertvaluetextcomputeandstorevalue() { double value = Double.valueOf(valueText); switch (operator) { case "/": memory = memory / value; break; case "*": memory = memory * value; break;
case "+": memory = memory + value; break; case "-": memory = memory - value; break; private void storeoperator(string op) { operator = op; void handledigitbutton(actionevent event) { Button button = (Button) event.getsource(); append2valuetext(button.gettext()); void handleoperatorbutton(actionevent event) { if (valuetext!= null) { if (operator!= null) { convertvaluetextcomputeandstorevalue(); else { convertandstorevaluetext(); clearvaluetext(); Button button = (Button) event.getsource(); storeoperator(button.gettext()); void handledesimalpoint() { append2valuetext("."); void handlecomputebutton() { if (valuetext!= null && operator!= null) { convertvaluetextcomputeandstorevalue(); clearvaluetext(); storeoperator(null); // manuell redigering av valuetextfield void handlevaluetextfieldchange(stringproperty prop, String oldvalue, String newvalue) { if (valuetext!= null && (! newvalue.equals(valuetext))) { valuetext = newvalue; validatevaluetextfield();