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-
...
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.
| 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) eller "" + num | Du kaller enten String.valueOf, eller legger num til "", som konverterer num i samme slengen |
| Sjekke om en String-variabel er ingenting | 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 |
Steg 4: Innkapsling og utskilling
I det siste steget skal du innkapsle programmet du har laget så langt. Dette gjøres blant annet med en kalkulator-klasse med lese- og endringsmetoder, i tillegg til synlighetsmodifikatorer.
Kalkulator-klasse
I applikasjoner er det vanlig å dele programmet opp i model, view og controller (MVC-arkitektur). I denne oppgaven vil vi dele det opp slik:
- Model: Kalkulator-klasse som håndterer lesing og endring av tilstanden til kalkulatoren
- Controller: KalkulatorController-klasse som tar i mot inputs fra viewet og får kalkulator-objektet til å endre tilstand tilsvarende, samt gir tilstanden til kalkulator-objektet til viewet, slik at det kan vises til brukeren av programmet.
- View: kalkulatorApp.fxml som viser tilstanden til kalkulator-objektet slik vi vil, og som lar brukeren gi inputs.
Til nå har du laget view (kalkulatorApp.fxml) og controller (KalkulatorController). Modellen vil da være en egen klasse, Kalkulator, som skal ta for seg alt som har med tilstanden til selve kalkulatoren å gjøre, dette krever innkapslede metoder for lesing og endring av attributter innen kalkulator-klassen.
Du skal altså
- Flytte logikk fra KalkulatorController til en Kalkulator-klasse som endrer tilstanden til en kalkulator, som for eksempel memory-feltet og metoder som endrer tilstanden til kalkulatoren.
- Innkapsle kalkulatoren for å sørge for at den har gyldig tilstand, med både lese- og endringsmetoder, samt synlighetsmodifikatorer.
PS: Husk at hva som skrives inn i selve tekstfeltet er en grafisk del og trenger ikke være en del av kalkulatoren før en har trykket på en operator.