GRAFICA ED EVENTI SWING, AWT e JavaFX

Transcript

1 GRAFICA ED EVENTI SWING, AWT e JavaFX

2 argomenti JavaFX: architettura e gerarchia Componenti principali: Stage, Scene, contenuti Gestione degli eventi

3 Java Package Grafici I package grafici che comprende tutt ora il JDK sono a grandi linee i seguenti: Package java.awt (Abstract Window Toolkit): il primo package grafico (Java 1.0) indipendente dalla piattaforma... o quasi! Package javax.swing: il secondo package grafico (Java 2; versione preliminare da Java 1.2) scritto esso stesso in Java, realmente indipendente dalla piattaforma Package javafx: L ultimo package grafico (Java 7) Scritto interamente in Java, alcune applicazioni swing possono girare sotto JavaFX Scendiamo più in dettaglio nel package JavaFX.

4 Java Package: JavaFX Il Package di Swing è potente, flessibile e IMMENSO. Il numero dei package disponibili è alto, molti programmi usano un piccolo subset di package disponibili. Programmazione event-driven : non più algoritmi stile input/elaborazione/output ma reazione agli eventi che l utente, in modo interattivo, genera sui componenti grafici

5 JavaFX: COMPONENTI PRINCIPALI La main class in una applicazione JavaFX eredita dalla classe javafx.application.application. Il metodo start() è il punto d ingresso delle applicazione JavaFX. In JavaFX, le applicazioni definiscono un container per l intefaccia utente mediane l uso di un stage e una scene. JavaFX Stage è il contenitore principale JavaFX Scene è quello che mostra il contenuto dell interfaccia In JavaFX, il contenuto della scena è rappresentato come una gerarchia di nodi.

6 JavaFX: esempio1 import javafx.application.application; import javafx.event.actionevent; import javafx.event.eventhandler; import javafx.scene.scene; import javafx.scene.control.button; import javafx.scene.layout.stackpane; import javafx.stage.stage; public class EmptyWindow extends Application { public static void main(string[] args) { public void start(stage primarystage) { primarystage.settitle("hello World!"); StackPane root = new StackPane(); primarystage.setscene(new Scene(root, 300, 250)); primarystage.show();

7 Il risultato dell esecuzione: JavaFX: esempio1

8 JavaFX: esempio2 Nell esempio precedente abbiamo creato una finestra completamente vuota Vediamo un esempio di come si possono inserire componenti nella nostra applicazione.

9 JavaFX: esempio2 public class HelloWorld extends Application public void start(stage primarystage) { Button btn = new Button(); btn.settext("say 'Hello World'"); btn.setonaction(new EventHandler<ActionEvent>() public void handle(actionevent event) { System.out.println("Hello World!"); ); StackPane root = new StackPane(); root.getchildren().add(btn); Scene scene = new Scene(root, 300, 250); primarystage.settitle("hello World!"); primarystage.setscene(scene); primarystage.show(); public static void main(string[] args) { launch(args);

10 JavaFX: Layout Nell esempio precedente usiamo uno StackPane. Il problema è che questo layout posiziona tutto in centro e quindi non è il migliore da usare.

11 JavaFX: disegnare forme generiche Prima di tutto bisogna settare come radice un oggetto di tipo Group Va in seguito creato un Canvas, una tela, dove verranno disegnate le figure Group root = new Group(); Canvas canvas = new Canvas(300, 250); Dall oggetto Canvas si recupera il graphic context dove fisicamente si disegnerà GraphicsContext gc = canvas.getgraphicscontext2d(); Si disegnano le figure e infine si aggiunge il canvas al nodo radice.

12 JavaFX: soluzione public void start(stage primarystage) { // settaggio finestra primarystage.settitle("finestra con forme"); // creazione root e canvas Group root = new Group(); Canvas canvas = new Canvas(300, 250); // Recupero GraphicsContext GraphicsContext gc = canvas.getgraphicscontext2d(); // disegno le forme drawshapes(gc); // aggiungo il canvas a root root.getchildren().add(canvas); primarystage.setscene(new Scene(root)); primarystage.show();

13 JavaFX: soluzione private void drawshapes(graphicscontext gc) { gc.setfill(color.green); gc.setstroke(color.blue); gc.setlinewidth(5); gc.strokeline(40, 10, 10, 40); gc.filloval(10, 60, 30, 30); gc.strokeoval(60, 60, 30, 30); gc.fillroundrect(110, 60, 30, 30, 10, 10); gc.strokeroundrect(160, 60, 30, 30, 10, 10); gc.fillarc(10, 110, 30, 30, 45, 240, ArcType.OPEN); gc.fillarc(60, 110, 30, 30, 45, 240, ArcType.CHORD);...

14 JavaFX: soluzione... gc.fillarc(110, 110, 30, 30, 45, 240, ArcType.ROUND); gc.strokearc(10, 160, 30, 30, 45, 240, ArcType.OPEN); gc.strokearc(60, 160, 30, 30, 45, 240, ArcType.CHORD); gc.strokearc(110, 160, 30, 30, 45, 240, ArcType.ROUND); gc.fillpolygon(new double[]{10, 40, 10, 40, new double[]{210, 210, 240, 240, 4); gc.strokepolygon(new double[]{60, 90, 60, 90, new double[]{210, 210, 240, 240, 4); gc.strokepolyline(new double[]{110, 140, 110, 140, new double[]{210, 210, 240, 240, 4); NOTA: fill identifica figure piene, stroke il bordo

15 JavaFX: disegnare forme generiche Il risultato dell esecuzione è il seguente:

16 JavaFX: Eventi Finora si sono utilizzate alcune delle funzionalità di JavaFX, ma l interazione con l utente non è stata presa in considerazione. Ogni applicazione deve poter interagire con l utente, e per fare questo deve essere reattiva su alcuni componenti, che quindi devono essere in grado di determinare il proprio stato e lanciare opportuni segnali quando questo viene modificato dall utente. Ogni componente grafico, quando si opera su di esso, genera un evento che descrive cosa è accaduto. Tipicamente, ogni componente può generare molti tipi diversi di eventi, in relazione a ciò che sta accadendo: un bottone può generare l evento azione che significa che è stato premuto; una casella di opzione può generare l evento modificato per indicare che la casella è stata selezionata / deselezionata.

17 JavaFX: Eventi Un modo semplice per definire un metodo per gestire eventi differenti è quello di definire una classe che implementa l interfaccia EventHandler. La classe creata dovrà implementare il metodo handle(event e) preposto alla gestione dell evento stesso. In questo metodo verrà inserita la logica che gestirà l evento scatenato.

18 JavaFX: Eventi - un esempio Per provare a gestire qualche evento, proviamo a scrivere un programma che implementi una semplice calcolatrice. Architettura: un pannello con un campo di testo e sei pulsanti un unico EventHandler per tutti i pulsanti (è il vero calcolatore) Gestione degli eventi: Ogni volta che si preme un pulsante: si recupera il nome del pulsante si legge il valore nel campo di testo si svolge l'operazione precedente

19 JavaFX: Eventi esempio architettura Per semplicità nella gestione degli definiamo i bottoni e il campo di testo come attributi della classe. La classe che implementerà EventHandler sarà interna alla classe principale del nostro programma. Infine, nel metodo start() cominciamo a creare i bottoni e il campo di testo public class MyCalculator extends Application { TextField txt; Button btnadd, btnsub, btndiv, btnmul, btnclear, public void start(stage primarystage) { txt = new TextField(); btnadd = new Button("+"); btnsub = new Button("-"); btnmul = new Button("x"); btndiv = new Button("/"); btneq = new Button("="); btnclear = new Button("Clear");

20 JavaFX: Eventi esempio architettura Il posizionamento degli elementi verrà effettuato usando un GridPane. Settiamone le caratteristiche e aggiungiamo i componenti. GridPane root = new GridPane(); root.setalignment(pos.center); // gap fra i componenti di ogni riga/colonna root.sethgap(10); root.setvgap(10); root.add(txt, 0, 0, 4, 1); root.add(btnadd, 0, 1); root.add(btnsub, 1, 1); root.add(btnmul, 2, 1); root.add(btndiv, 3, 1); // definisco che il bottone srà contenuto in più colonne (4) root.add(btneq, 0, 2, 4, 1); root.add(btnclear, 0, 3, 4, 1);

21 JavaFX: Eventi esempio architettura Collego il gestore degli eventi ai bottoni e setto i parametri della finestra. MyEventHandler eh = new MyEventHandler(0); btnadd.setonaction(eh); btnsub.setonaction(eh); btnmul.setonaction(eh); btndiv.setonaction(eh); btneq.setonaction(eh); btnclear.setonaction(eh); Scene scene = new Scene(root, 340, 160); primarystage.settitle("mini Calcolatrice"); primarystage.setscene(scene); primarystage.show(); // definisco il main public static void main(string[] args) { launch(args);

22 JavaFX: Eventi esempio architettura Infine definisco la classe gestore degli eventi class MyEventHandler implements EventHandler { private double result; private String precop; // costruttore public MyEventHandler(double result) { this.result = result; precop = "nop";

23 JavaFX: Eventi esempio public void handle(event e) { double num; String operazione; num = Double.parseDouble(txt.getText()); if (e.getsource() == btnclear) { txt.settext(""); txt.requestfocus(); result = 0; precop = "nop"; else {...

24 JavaFX: Eventi esempio architettura if (e.getsource() == btnadd) { operazione = "+"; else if (e.getsource() == btnsub) { operazione = "-"; else if (e.getsource() == btnmul) { operazione = "*"; else if (e.getsource() == btndiv) { operazione = "/"; else { operazione = "nop";

25 JavaFX : Eventi esempio architettura if (precop.equals("+")) { result += num; else if (precop.equals("-")) { result -= num; else if (precop.equals("*")) { result *= num; else if (precop.equals("/")) { result /= num; else if (precop.equals("nop")) { result = num; txt.settext("" + result); precop = operazione; txt.requestfocus();

26 JavaFX : Eventi - risultato Il risultato dovrebbe essere il seguente: Abbiamo utilizzato un unico gestore di evento per prelevare e gestire tutti gli eventi dei pulsanti che abbiamo creato. Ci sono pattern di programmazione migliori di questo.