Versions Compared

Old Version 7

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

Saved on

compared with

New Version 8

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

Saved on

Key

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

...

Veiviser for FXML-dokumenterFXML-editor med nytt FXML-dokument

FXML-kode for tomt HBox-panel. Den første linja er obligatorisk for XML-dokumenter.

<?import ...>-elementet lar oss bruke HBox som navn på det som egentlig er Java-klassen javafx.scene.layout.HBox.

<HBox ...>-elementet angir at app-vinduet skal inneholdet et objekt av typen javafx.scene.layout.HBox, som gir en horisontal layout på panel-innholdet. Her er elementet imidlertid tomt, så ingenting vises ved kjøring.

Merk attributtet xmlns:fx="...", som angir at elementene skal tolkes som FXML-kode, altså referanser til JavaFX-klasser. Uten dette attributtet på det ytterste elementet vil ingenting virke.

Redigering av FXML-koden

FXML-filer kan redigeres som tekst i Eclipse. Prøv f.eks. å erstatte <!-- ... --> med <Button text="Count"/> (du trenger også et import-element for javafx.scene.control.Button). Ved kjøring vil du da få opp et vindu med en Count-knapp i (inni et HBox-panel). Hvis en redigerer FXML som tekst på denne måten, kan det være nyttig å åpne JavaFX Preview-panelet med Window > Show View > Other... > JavaFX Preview. Dette panelet viser hele tiden frem hva innholdet i den aktive FXML-editoren betyr, altså slik det vil se ut hvis FXML-koden kjøres. Under vises koden for HBox-panelet med en Count-knapp i og JavaFX Preview-panel.

...

I den enkle varianten app-en så trenger vi en tekst til venstre for knappen. Det kan en få til ved å legge til et Text-objekt slik at det havner før Butten-objektet inni HBox-objektet. Finn først frem til Text-objektet i paletten ved å velge Shapes-seksjonen og bla nedover. Så kan du enten dra og slippe Text-objektet til venstre for knappen i GUI-området i midten, eller rett over Button-objektet i hierarkiet nede til venstre. Rediger så teksten så den blir Current counter value: 0, enten ved å dobbelt-klikke på teksten i GUI-området og redigere, eller ved å redigere Text-egenskapen i Properties-seksjonen oppe til høyre. Resultatet er vist under til venstre. Lagre, gå tilbake til Eclipse og klikk på eller i FXML-editoren for å sikre at Eclipse viser den nylig lagrede versjonen. Koden skal være omtrent som vist under til høyre.

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

<?import java.lang.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.text.*?>
<?import javafx.scene.layout.HBox?>
<?import javafx.scene.control.Button?>

<HBox xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
   <children>
      <Text strokeType="OUTSIDE" strokeWidth="0.0" text="Current counter value: 0" />
   	  <Button text="Count" />
   </children>
</HBox>

 

 


 Så langt har vi et GUI uten oppførsel, for hvis du kjører og trykker på knappen så skjer det ingenting. 

 

 

En mer komplett app for å lage nye Counter-objekter og telle.

I starten har en ikke noe Counter-objekt. En ny lages ved å fylle inn den øvre grensa i tekstfeltet og trykke New Counter-knappen. Tilstanden til dette Counter-objektet vises på linja under og en kan telle opp telleren ved å trykke Count-knappen.