Page History

...

SceneBuilder-applikasjonen lar deg redigere FXML-koden grafisk.

Området i midten viser GUI-et.

Øverst til venstre er det en palett med elementer en kan dra og slippe i GUI-området i midten.

Nederst til venstre vises den hierarkiske strukturen av paneler og elementer, her med en HBox med en Button inni.

Til høyre er det et tredelt detalj-panel. Properties-seksjonen viser generelle grafiske egenskaper og egenskaper som er mer spesifikke for det valgte elementet. Her er knappen valgt, og vi ser at knappeteksten styres av Text-egenskapen, som har verdien Count. Layout-seksjonen har med plassering av elementet å gjøre og Code-seksjonen med koblingen til GUI-logikken.

...

SceneBuilder-applikasjonen lar deg redigere grafisk.

Området i midten viser GUI-et.

...

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.

Image Added

Code Block

language	javafx

<?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>

.

Nederst til venstre vises den hierarkiske strukturen av paneler og elementer, her med en HBox med en Button inni.

Til høyre er det et tredelt detalj-panel. Properties-seksjonen viser generelle grafiske egenskaper og egenskaper som er mer spesifikke for det valgte elementet. Her er knappen valgt, og vi ser at knappeteksten styres av Text-egenskapen, som har verdien Count. Layout-seksjonen har med plassering av elementet å gjøre og Code-seksjonen med koblingen til GUI-logikken.

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.

Page tree

Versions Compared

Old Version 6

New Version 7

Key