Versions Compared

Old Version 13

changes.mady.by.user Unknown User (hal)

Saved on

compared with

New Version 14

changes.mady.by.user Unknown User (hal)

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

I KalkulatorController.java:

Code Block
languagejava
public class KalkulatorController {
 
	... annen kode ...
 
	@FXML
	void handleDigitButton(ActionEvent event) {
		// denne setningen skriver ut hvilken knapp som kalte metoden
		System.out.println(event.getSource());
		... her er kode for tall-knappene ...
	}
}

@FXML brukes for å gi FXML-en lov til å kalle metoden, mens void betyr at metoden ikke skal returnere noen verdi.

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.

I KalkulatorApp.fxml

Code Block
languagejavafx
<?xml version="1.0" encoding="UTF-8"?>

<AnchorPane ...	fx:controller="kalkulator.KalkulatorController">
      	<children>
		<Button text="1" onAction="#handleDigitButton" ... />
      		<Button text="2" onAction="#handleDigitButton" ... />
 
	... de andre knappene kommer her ...
 	</children>
</AnchorPane>

Både 1- og 2-knappen har onAction="#handleDigitButton", så for begge disse vil handleDigitButton blir kalt når de trykkes på.

...

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. 

I KalkulatorController.java:

Code Block
languagejava
public class KalkulatorController {
 
	... annen kode ...
 
	@FXML
	TextField valueText; // denne vil bli satt til å peke på tekstfeltet med fx:id="valueText"
	@FXML
	void handleDigitButton(ActionEvent event) {
		Button button = (Button) event.getSource();
		valueText.setText(button.getText());
	}
}

@FXML brukes her for å gi FXML-en lov til å sette variabelen. Typen TextField stemmer med FXML-elementet og navnet "valueText" stemmer med fx:id-verdien.

Koden i handleDigitButton er endret, slik at den først henter ut knappen med event.getSource()og så setter teksten til tekstfeltet til knappens tekst med valueText.setText(button.getText()).

I KalkulatorApp.fxml

Code Block
languagejavafx
<?xml version="1.0" encoding="UTF-8"?>

<AnchorPane ...	fx:controller="kalkulator.KalkulatorController">
	<children>
		<TextField fx:id="valueText" ... />
 
		<Button text="1" onAction="#handleDigitButton" ... />
		<Button text="2" onAction="#handleDigitButton" ... />
 
	... de andre knappene kommer her ...
	</children>
</AnchorPane>

Tekstfeltet har fått en fx:id som stemmer med variabel-navnet. Også typen TextField stemmer med FXML-koden for tekstfeltet.


Prøv å gjøre endringene vist over, kjør koden og se om teksten tekstfeltet endres når du trykker på tall-knappene. handleDigitButton-metoden.

Hva har du lært?

  • å koble FXML-koden til Java-koden med fx:id- og onAction-attributter

...