Introduksjon
| Excerpt |
|---|
I denne oppgaven skal du lære hvordan du kan koble FXML-kode opp mot Java-kode og gjøre applikasjoner interaktive! Målet med denne oppgaven er å lage en enkel kalkulator-applikasjon. |
Steg 1: Opprette app-pakke, app-klasse, FXML-fil og controller-klasse
Filene i denne øvingen skal ligge i ovinger/src/encapsulation. Lag først en ny klasse med navnet KalkulatorApp. Åpne KalkulatorApp-klassen og rediger slik at du får følgende kode:
...
Det vesentlig her er fx:controller="encapsulation.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
Neste skrittet er å sammenkoble FXML-fila og Controller-klassen.
...
I begge tilfeller må en legge til kode i både Kalkulator.fxml og KalkulatorController, men på ulike måter.
Fra FXML til Controller
For at knappene i FXML-en skal kunne si ifra må det legges til en aksjon på noe som skal skje. Det gjøres ved å redigere FXML-knappene med å legge til
...
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 onAction="#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 KalkulatorApp.fxml-fila og få satt disse automagisk når FXML-fila lastes inn. Trikset er igjen å legge inn kode både i KalkulatorController og KalkulatorApp.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.
...
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.
...
| 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. | 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 valueText | null | 46.0 | null | "46.0" |
Nyttige kodesnutter
For å gjøre det litt lettere så viser vi her noen kode-snutter for småproblemer du sikkert vil støte på underveis.
...