Page History

...

Et GUI-rammeverk er en samling klasser som gjør det mulig å bygge rike, funksjonelle grafiske brukergrensenitt uten alt for mye arbeid. Brukergrensesnitt bygget med slike rammeverk har noenlunde samme struktur, og her skal vi gi en liten introduksjon med utgangspunkt i JavaFX-rammeverket. Vi har valgt JavaFX, fordi det er mer fleksibelt og moderne enn Java Swing, som det er ment å ta over etter og det ligner mer på andre "rammeverk" som HTML5 og Flash.

Merk at selv om JavaFX nå er en del av Java 7-installasjonen, så må du selv legge til en JavaFX-jar i Build Path for prosjektet ditt, for å kunne bruke JavaFX-klassene. Denne heter jfxrt.jar og finnes i jre/lib-mappen i Java-installasjonen din. Et alternativ er å installere e(fx)clipse-tillegget til Eclipse, som bidrar med en veiviser for å opprette JavaFX-prosjekter.

...

Når en bygger opp dette objekt-hierarkiet så tenker en gjerne først på den overordnede layout-strukturen, dvs. utlegget av hovedelementer og velger container-typer som gir ønskede muligheter. Merk at det er mulig å unnta en node fra den vanlige layout-logikken til en container vet at den markeres som ikke managed, ved å kalle setManaged(false).

Her er en liste av de vanligste container-typene (nærmere beskrevet i http://docs.oracle.com/javafx/2/layout/builtin_layouts.htm):

...

container.getChildren().add(node); // legger til én node
container.getChildren.addAll(node1, node2, node3,....); // legger til flere noder

Noen container-klasser har egne metoder for å legge inn noder, f.eks. har BorderPane én metode for hver av de fem regionene som den deler panelet inn i. Dette er vist i eksemplet under, som utvider MinimalApplication med en BorderPane og ett tekst-objekt for hver region.

Code Block

language	java

public class BorderPaneApplication extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        
        BorderPane root = new BorderPane(); // Root of the scene graph
        
        // Add one Text node in each region
        root.setTop(new Text("top"));
        root.setBottom(new Text("bottom"));
        root.setLeft(new Text("left"));
        root.setRight(new Text("right"));
        root.setCenter(new Text("center"));
        
        Scene scene = new Scene(root, 500, 500);
    
        stage.setScene(scene);
        stage.setTitle("BorderPaneApplication");
        stage.show();
    }
    public static void main(String[] args) {
        launch(BorderPaneApplication.class, args);
    }
}

Image Added

Merk at det er mulig å unnta en node fra den vanlige layout-logikken til en container vet at den markeres som ikke managed, ved å kalle setManaged(false).

Noder

Det finnes noen fellestrekk som gjelder for alle nodene man bruker i JavaFX. Alle noder, utenom rotnoden, legges til i grafen ved å legge dem inn i children-lista til en Parent-instans. En node kan bare være ett sted i hierarkiet og dersom man forsøker å legge til et objekt som allerede er i hierarkiet til en annen/ny container, så vil objektet fjernes fra dens forrige, før den legges til den nye.

...

Det finnes en rekke standard-figurer som kan brukes for rent grafisk innhold. Disse er alle subklasser av Shape-klassen (javafx.scene.shape), som får dermed en del felles egenskaper:

...

Nyttige figurer er strek (Line), rektangel (Rectangle), sirkel og ellipse (Circle og Ellipse), buesegment (Arc), polygon (Polygon), segmentert figur (Path) og tekst (Text). I tillegg er det en egen klasse for bilder (ImageView som viser et Image, som ikke er en Shape). Noen av disse er vist i eksemplet under, hvor center-regionen er fylt med Pane-objekt med noen figurer i.

Code Block

language	java

public class BorderPaneShapesApplication extends Application {
    
    @Override
    public void start(Stage stage) throws Exception {
        
        BorderPane root = new BorderPane(); // Root of the scene graph
        
        // Add one Text node in each surrounding region
        root.setTop(new Text("top"));
        root.setBottom(new Text("bottom"));
        root.setLeft(new Text("left"));
        root.setRight(new Text("right"));
        
        Pane shapesPane = new Pane();
        shapesPane.setPrefSize(300, 300);
        shapesPane.getChildren().addAll(
                new Line(10, 10, 100, 100), // x1, y1, x2, y2
                new Rectangle(150, 10, 30, 40), // x, y, w, h
                new Ellipse(40, 180, 40, 30), // cx, cy, rx, ry
                new Text(180, 180, "center") // x, y, text
        );
        root.setCenter(shapesPane);
        
        Scene scene = new Scene(root, 500, 500);
    
        stage.setScene(scene);
        stage.setTitle("BorderPaneApplication");
        stage.show();
    }
    public static void main(String[] args) {
        launch(BorderPaneShapesApplication.class, args);
    }
}

Image Added

Grafisk stil med CSS (Cascading Style Sheets)

...

De interaktive komponentene har en felles måte å rapportere hva brukeren gjør, gjennom såkalte hendelser (eng: event). Hendelsene kan fortelle om både elementære ting (såkalte leksikalske hendelser) som at muspekeren flyttes eller at en tast trykkes ned, eller mer høynivå ting (såkalte syntaktiske hendelser) som at en knapp trykkes, meny- eller liste-element velges, tekst redigeres osv. For å motta en hendelse, så må applikasjonen registrere såkalte lyttere, dvs. objekter som implementerer spesifikke lytter-grensesnitt og som får beskjed om hendelsene ved at spesifikke metoder kalles.

Lyttere kan registreres på en komponent på to måter:

generell addEventHandler-metode - denne tar inn en hendelsestype og lytter-objektet og registrerer lytteren for den angitte hendelsestypen, f.eks. addEventHandler(ActionEvent.ACTION, actionEventHandler)

spesielle setOnXXX-metoder - disse er for spesifikke hendelsestyper og tar inn en lytter og registrere den for denne hendelsestyper, f.eks. setOnAction(actionEventHandler)

I eksemplet under har vi lagt inn et tekstfelt i topp-regionen og reagerer på return ved å kopiere teksten i tekstfeltet inn i Text-objektet i midt-regionen.

Code Block

public class BorderPaneShapesTextFieldApplication extends Application {
    private Text centerText;
    private TextField textField;
    
    @Override
    public void start(Stage stage) throws Exception {
        
        BorderPane root = new BorderPane(); // Root of the scene graph
        
        textField = new TextField("center");
        textField.setOnAction(new EventHandler<ActionEvent>() {
            @Override
            public void handle(ActionEvent arg0) {
                centerText.setText(textField.getText());
            }
        });
        centerText = new Text(180, 180, textField.getText()); // x, y, text
        
        root.setTop(textField);
        root.setBottom(new Text("bottom"));
        root.setLeft(new Text("left"));
        root.setRight(new Text("right"));
        Pane shapesPane = new Pane();
        shapesPane.setPrefSize(300, 300);
        shapesPane.getChildren().addAll(
                new Line(10, 10, 100, 100), // x1, y1, x2, y2
                new Rectangle(150, 10, 30, 40), // x, y, w, h
                new Ellipse(40, 180, 40, 30), // cx, cy, rx, ry
                centerText
        );
        root.setCenter(shapesPane);
        
        Scene scene = new Scene(root, 500, 500);
    
        stage.setScene(scene);
        stage.setTitle("BorderPaneApplication");
        stage.show();
    }
    public static void main(String[] args) {
        launch(BorderPaneShapesTextFieldApplication.class, args);
    }
}

Image Added

Page tree

Versions Compared

Old Version 26

New Version 27

Key

Noder

Grafisk stil med CSS (Cascading Style Sheets)