Interfícies gràfiques

Programació orientada a esdeveniments

La programació d'interfícies d'usuari es fa mitjançant esdeveniments. Aquesta és la seqüència:

1. L'usuari interactua amb el GUI
2. Es produeix un esdeveniment
3. En resposta, una peça de codi s'executa
4. S'actualitza l'aparença del GUI

Aquestes operacions es produeixen dins del bucle d'esdeveniments (event loop). Els esdeveniments s'afegeixen a una mena de cua, i es van satisfent o gestionant amb el codi que el programador ha decidit. Aquest bucle és un sol fil, i per tant no es poden realitzar operacions massa llargues, ja que es bloquejaria el GUI i deixaria de respondre.

El codi equivalent seria:

do {

    e = getNextEvent();

    processEvent(e);

} while (e != quit);

El flux d'un programa amb GUI no està predeterminat: depèn dels esdeveniments que es produeixin. En contrast, les aplicacions que es recolzen en algorismes esperen unes dades d'entrada en un ordre i temps predeterminat.

El patró principal que s'utilitza a les interfícies gràfiques és el de l'observador. En aquest patró intervenen una parella subjecte/observador. També es poden dir observable/observador, o origen/gestor d'esdeveniments (event source/handler). L'observador també es pot dir Listener. Bàsicament tenim un subjecte que genera esdeveniments i un o més observadors que els escolten. Això ens permet fer push dels esdeveniments, en lloc de fer polling.

JavaFX

Aquest apartat utilitzarà JavaFX per a la creació d'interfícies gràfiques. Aquesta plataforma substitueix Swing com a llibreria GUI de Java, i permet desenvolupar aplicacions d'escriptori.

A la pàgina Eclipse es pot veure la configuració necessària per treballar amb JavaFX a l'IDE Eclipse.

Tipus de nodes

Els nodes poden ser de tres tipus:

1. Arrel: el primer del graf. Pot ser del tipus 2.
2. Parent (Branch)
   • Group: és un node col.lectiu que renderitza tots els seus fills en ordre.
   • Region: base per als controls UI, com Chart, Pane i Control.
   • WebView: gestiona l'engine web.
3. Leaf: no conté nodes fill.

Els nodes (components visuals) inclouen:

• Figures geomètriques: Circle, Rectangle, Polygon, etc.
• Controls (javafx.scene.layout): Button, Checkbox, Choice Box, Text Area, etc.
• Contenidors (layout panes javafx.scene.layout): Border Pane, Grid Pane, Flow Pane, etc.
• Elements media (Audio, Video, Image)

Cada tipus de node té mètodes que permeten modificar el seu aspecte o el seu contingut, habitualment són getters i setters.

Per exemple: un Label és un node amb un text, i té dos mètodes per accedir i canviar el contingut: setText i getText.

També hi ha la possibilitat de treballar directament amb un canvas, dibuixant en ell.

És la classe Canvas. Aquí hi ha una explicació de com funciona.

Aplicació

Ara veure'm un exemple mínim d'aplicació. Tenim els següents components gràfics:

• Stage: la finestra principal
• Scene: el contenidor del graf d'elements gràfics
• Graf scene: la jerarquia d'elements gràfics, en aquest exemple: Label.

public class JavaWorldApp extends Application {  

   @Override     

   public void start(Stage primaryStage) throws Exception { 

        // creació del stage, scene i scene graph

        primaryStage.setTitle("Hello world App");

        Label label = new Label("Hello World!");

        Scene scene = new Scene(label, 400, 200);

        primaryStage.setScene(scene);

        primaryStage.show();

   }         

   public static void main(String args[]){           

      launch(args);      

   } 

} 

FXML

A l'hora de crear elements gràfics tenim dues opcions: crear-los programàticament o bé amb un arxiu de tipus XML anomenat FXML. El format FXML facilita el dibuix mitjançant eines de disseny com el Scene Builder. A més, permet associar el codi XML amb el codi Java:

• Cal definir un controlador, un objecte Java que serà el nexe de comunicació del món XML i el món Java. Aquest ha d'implementar la interfície javafx.fxml.Initializable.
• Defineix associacions entre objectes al FXML (propietat fx:id dels elements) i objectes Java del controlador.
• Defineix associacions entre accions al FXML (propietat onAction dels elements) i mètodes Java del controlador.

Per a carregar un arxiu FXML cal fer les següents operacions:

FXMLLoader loader = new FXMLLoader();   

loader.setController(controlador);

loader.setLocation(getClass().getResource("/cami/arxiu.fxml"));

Parent parent = loader.load();

Scene scene = new Scene(parent);

El camí pot ser absolut (utilitzant la jerarquia de paquets) o bé relatiu al paquet actual, sense utilitzar camí.

Les associacions al FXML es poden fer així:

<Label fx:id="inputLabel" ... </Label>

...

<Button ... onAction="#onButtonClick" ... />

Aquest codi es correspondrà amb el següent al controlador:

@FXML

private Label inputLabel;

...

@FXML

private void onButtonClick(ActionEvent event) {

  ...

}

Amb aquest codi podem accedir a l'etiqueta definida al XML mitjançant l'objecte inputLabel, i cada cop que es cliqui al botó es cridarà al mètode onButtonClick.

Múltiples finestres

Una stage equival a una finestra.

Podem canviar el contingut d'una finestra modificant el graf de scenes. Això es pot fer amb el mètode:

• scene.setRoot(Parent node)

Podem crear finestres modals de tres tipus:

• Alert
• TextInputDialog
• ChoiceDialog

El mètode start(Stage primaryStage) d'una aplicació permet establir la finestra principal, però es podrien crear noves, modals o no. Per fer-ho, crear una stage, i utilitzar els mètodes:

• stage.initOwner(Window w)
• stage.initModality(Modality m)

Modality pot tenir tres valors:

• Modality.NONE: un stage que no bloqueja cap altra finestra.
• Modality.WINDOW_MODAL: un stage que impedeix que els esdeveniments d’entrada es lliurin a totes les finestres des del seu pare fins a l’arrel. La seva arrel és la finestra més avantpassada sense owner.
• Modality.APPLICATION_MODAL: un stage que impedeix que els esdeveniments d'entrada es lliurin a totes les finestres des de la mateixa aplicació, excepte els de la seva jerarquia de fills.

Encapsulació al patró MVP

En aquest esquema, és important encapsular correctament. Si es fa bé, tant la vista com el model serien substituïbles. Això només es pot aconseguir si les tres parts es relacionen mitjançant abstraccions d'un contracte, les quals poden ser implementades mitjançant una interfície Java.

Així es defineixen i relacionen les parts:

• La vista té una instància del presentador. Li serveix per poder enviar-li esdeveniments. Només la vista hauria de contenir classes de la llibreria visual (JavaFX).
• El presentador té una instància de la vista (per enviar-li actualitzacions de la part visual) i una instància del model (per fer consultes i actualitzacions).
• El model té una instància del presentador. Li serveix per enviar canvis d'estat al presentador. Per implementar aquesta relació s'utilitza el patró de l'observador. D'aquesta forma, el model és agnòstic respecte de com l'utilitzen, i no coneix cap aspecte visual.

Binding de propietats

Una propietat és un atribut accesible públicament i que afecta el seu estat i/o comportament. Les propietats són observables: poden notificar a observadors de canvis. Poden ser només lectura, només escriptura o lectura i escriptura.

El binding de les dades, en aquest context, es refereix a la relació entre variables d'un programa per tal de mantenir-se sincronitzades. A les GUI ens permet mantenir sincronitzats elements de la capa de model amb els elements GUI corresponents. Això s'aconsegueix gràcies a la implementació del patró observador.

Tipus de binding:

• Eager (ansiós) o lazy (mandrós): si el valor de variable es recalcula immediatament quan ho fa la dependència, o només quan es llegeix. Les propietats de JavaFX utilitzen avaluació mandrosa.
• Unidireccional o bidireccional: si només es fa en una direcció la sincronització, o en les dues.

Exemple de binding unidireccional:

IntegerProperty p1 = new SimpleIntegerProperty(1);

IntegerProperty p2 = new SimpleIntegerProperty(2);

p1.bind(p2); // p1 pren el valor de p2

p2.set(3);

int valor1 = p1.get(); // retorna 3

Exemple de binding bidireccional:

IntegerProperty p1 = new SimpleIntegerProperty(1);

IntegerProperty p2 = new SimpleIntegerProperty(2);

p1.bindBidirectional(p2);

p2.set(3);

int valor1 = p1.get(); // retorna 3

p1.set(4);

int valor2 = p2.get(); // retorna 4

Els binding es poden fer a JavaFX utilitzant les propietats associades als elements gràfics. Per exemple:

TextField tf1 = new TextField();

TextField tf2 = new TextField();

tf1.textProperty().bind(tf2.textProperty());

Per associar una etiqueta a una propietat del model de diferents tipus podem utilitzar el mètode asString():

Label l = new Label();

IntegerProperty p = new SimpleIntegerProperty(3);

l.textProperty().bind(p.asString());

Referències

• GUI Architectures (Martin Fowler)
• MVC Patterns