Versions Compared

Old Version 1

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

Saved on

compared with

New Version 2

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

Saved on

Key

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

Dette eksemplet viser hvordan man kan skriver Java-kode koblet til en FXML-fil med skjermbilde-innholdet.

I dette programmet trenger vi to filer: FXML-fila med skjerminnholdet og Java-fila med koden som er koblet til FXML-en. Jeg har tegnet bildet med Scene Builder, og justerte litt på FXML-en i editoren etterpå, for å legge til et punkt i Polygon-objektet (som først var en trekant). Bildet ser du under til venstre, og FXML-koden er til høyre. Hvis du kopierer FXML-koden inn i Eclipse og åpner Preview-panelet med Window->Show view->Other..., så vil du se det samme bildet.

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.shape.*?>

<AnchorPane prefHeight="284.7071075439453" prefWidth="246.7071083188057" xmlns:fx="http://javafx.com/fxml">
  <!-- TODO Add Nodes -->
  <children>
    <Button fx:id="trykkHerKnapp" layoutX="69.0" layoutY="4.0" mnemonicParsing="false" onAction="#handleTrykkHer" text="Trykk her!" />
    <Line endX="50.0" endY="73.0" layoutX="129.0" layoutY="60.0" startX="49.0" startY="149.0" />
    <Circle fill="WHITE" layoutX="179.0" layoutY="103.0" radius="30.0" stroke="BLACK" strokeType="INSIDE" />
    <Line endX="8.0" endY="-20.0" layoutX="169.0" layoutY="171.0" startX="-42.0" startY="-13.0" />
    <Line endX="1.0" endY="-30.0" layoutX="179.0" layoutY="181.0" startX="41.0" startY="-13.0" />
    <Line endX="1.0" endY="-30.0" layoutX="177.0" layoutY="240.0" startX="41.0" startY="-13.0" />
    <Line endX="8.0" endY="-20.0" layoutX="169.0" layoutY="230.0" startX="-34.0" startY="1.0" />
    <Ellipse fill="DODGERBLUE" layoutX="29.0" layoutY="150.0" radiusX="14.20709228515625" radiusY="80.0" stroke="BLACK" strokeType="INSIDE" />
    <Ellipse fill="RED" layoutX="29.0" layoutY="150.0" radiusX="9.20709228515625" radiusY="29.999984741210938" stroke="BLACK" strokeType="INSIDE" />
    <Polygon fx:id="kniv" fill="#dfdfdf" layoutX="101.0" layoutY="158.0" stroke="BLACK" strokeType="INSIDE">
      <points>
        <Double fx:value="-40.0" /><Double fx:value="0.0" />
        <Double fx:value="20.0" /><Double fx:value="20.0" />
        <Double fx:value="50.0" /><Double fx:value="10.0" />
        <Double fx:value="0.0" /><Double fx:value="-10.0" />
      </points>
    </Polygon>
  </children>
</AnchorPane>

Litt om FXML-en

De fleste linjene tilsvarer en liten del av bildet. F.eks. er hodet en sirkel som lages med Circle-elementet. Plasseringen styres av layoutX- og layoutY-attributtene og utseendet av attributter som stroke, strokeType og fill. Hvis du kopierer FXML-en inn i Eclipse og endrer litt på disse, så ser du fort hva slags effekt de har. Øverst/ytterst har vi en AnchorPane, som gjør det lett å plassere elementer på bestemte koordinater. Navn som Circle og Anchor er egentlig navn på Java-klasser, som er litt lenger. F.eks. heter AnchorPane egentlig javafx.scene.layout.AnchorPane og Circle heter egentlig javafx.scene.shape.Circle. For å slippe å skrive så lange navn, så bruker man <?import ...> øverst i fila.

To viktige deler av FXML-fila er fx:id-attributtet og attributter som begynner med "on", f.eks. onAction-attributtet i Button-elementet.Her en liten oppskrift på hvordan GUI-delen av programmet programmeres:

fx:id-attributt og Java-variabel

Alle delene av skjermbildet som programmet skal kunne forandre på, f.eks. gjøre synlig eller usynlig, endre teksten eller posisjonen til osv. må ha en fx:id. Denne du legge inn med Scene Builder eller FXML-editoren. I FXML-en kan f.eks. se slik utover er dette brukt til å sette navn på Polygon-objektet som tilsvarer den grå knivaktige tingen i hånda på strekmannen:

Code Block
<Text<Polygon fx:id="statusTextkniv" .../>

 I Java-koden må du lage en variabel med samme navn som denne fx:id-en, og typen til variablen må tilsvare typen element, f.eks Polygon for mangekant Text for tekst, Line for strek:

Code Block
@FXML
TextPolygon statusTextkniv;

Du kan selvfølgelig lage andre varibler variabler også, for å holde rede på alt som trengs for å få spillet til å virke.

Java-metode og onHendelse-attributt

Alt brukeren gjør og som programmet skal reagere på, må gjøres av en hendelsesmetode (samme som funksjon i Python). I FXML-en må du legge inn navnet på denne metoden i det samme elementet som skal trigge metoden og med # foran. Hvis Dette eksempel-programmet skal reagere på en knappknappen, så da må f.eks. FXML-en se slik ut (fx:id-attributtet er for at koden skal kunne endre på teksten i knappen):

Code Block
<Button fx:id="trykkHerKnapp" onAction="#handleTrykkHer" text="#herErNavnetPåMetodenTrykk her!" .../>

 I Java-koden må metoden se slik ut:

Code Block
@FXML
void herErNavnetPåMetodenhandleTrykkHer() {
	// her legges koden for det som skal skje
}

I koden i hendelsesmetodene så kan en bruke variablene for elementene som har fx:id-attributter, til å endre på skjermbildet, og dermed skape liv i skjermbildet! Hvis statusText er definert som vist over, så kan du f.eks. skrive statusText.setText("Melding fra programmet: ..."), for å gi en beskjed til brukeren.

...