ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 126
Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 29
Abonament PDF

Componente vizuale Java FX

Silviu Dumitrescu
Line manager@Telenav



Diana Bălan
Map analyst@Telenav



PROGRAMARE

Tabelele reprezintă unul dintre cele mai puternice instrumente folosite în JavaFX pentru afişarea datelor, suportând următoarele acţiuni:

Mai multe clase din JavaFX SDK API sunt folosite pentru reprezentarea datelor în formă tabelară. Dintre acestea cele mai importante sunt TableView, TableColumn şi TableCell. Putem popula un tabel dintr-un model de date şi îi putem aplica apoi un cell factory.

TableView are facilităţi ce includ:

Crearea unui tabel

Minimal avem nevoie de clasele următoarele pentru a crea un tabel:

TableView este construit dintr-un număr de instanţe TableColumn. Fiecare TableColumn este responsabilă de afişarea şi de editarea conţinutului unei coloane. În plus TableColumn conţine proprietăţi pentru:

Când creăm o instanţă TableColumn, probabil cele mai importante proprietăţi de setat sunt textul (adică ce afişăm în capul de tabel al coloanei) şi cell value factory (utilizat pentru popularea celulelor individuale din coloană).

Clasa TableCell<S,T> reprezintă intersecţia unei linii cu o coloana în TableView. Conţine următoarele proprietăţi:

Pentru a identifica intersecţia, TableCell conţine o proprietate de index.

Cell<T> este utilizat pentru o celulă individuală într-un TableView. Fiecare celulă este asociată unui singur item de date, reprezentat de proprietatea item. O celulă este responsabilă de renderizarea itemului care rezidă în el, care este de obicei un text. O celulă permite customizarea printr-un cell factory.

API-ul Cell este utilizat pentru virtualizarea controalelor precum ListView, TreeView şi TableView. Un Cell este un control etichetat, folosit pentru a renderiza o unitate într-unul dintre controalele mai sus amintite. Cell este responsabil atât pentru afişare cât şi pentru editarea item-ului. Pe lângă text, Cell poate fi reprezentată de alte controale precum CheckBox, ChoiceBox sau orice Node precum HBox, GridPane sau chiar Rectangle. Deoarece ListView, TreeView, TableView precum şi alte asemenea controale pot fi folosite pentru afişarea unei cantităţi mari de date, nu este practic să creăm un Cell pentru fiecare item din control. Fiecare celulă este reutilizată, ceea ce face acest control virtualizat.

Deoarece Cell este un Controler are în spate un model. Skin-ul său este responsabil pentru definirea look and layout-ului, în timp ce Behaviour este responsabil pentru manipularea evenimentelor şi utilizarea acelor informaţii continute pentru a modifica starea. Cell este stilizat prin CSS ca orice alt control.

Pentru a specializa o celulă utilizată pentru un TableView trebuie să furnizăm o implementare a funcţiei callback cellFactory() definită pe TableView. Cell factory este apelată de platformă ori de câte ori o nouă celulă trebuie să fie creată. Implementarea unui cell factory este responsabil pentru crearea unei instante Cell și pentru configurarea necesară pentru ca Cell să reacţioneze la schimbările stării sale.

Cell factory este responsabil de virtualizarea skin-urilor de container pentru a renderiza reprezentarea predefinită a unui item Cell. Spre exemplu, într-un ListView converteşte itemii la un String si apelează Labeled.setText(String). Dacă dorim să specializăm celula utilizată în ListView, trebuie să furnizăm implementarea funcţiei callback definită pe ListView.

Cell factory este apelat de platformă ori de câte ori determină că o celula trebuie să fie creată. Spre exemplu, un ListView are 10 milioane de itemi. Crearea tuturor celor 10 milioane este foarte costisitoare. Aşadar, implementarea skin-ului ListView va crea doar atâtea celule cât să umple spaţiul vizual. Dacă se redimensionează spaţiul vizual, sistemul va determina dacă este nevoie de crearea altor celule. În acest caz va apela cellFactory() (dacă există vreuna) pentru a crea o implementare Cell. Dacă nu este furnizată niciuna implementarea predefinită este utilizată.

ObservableList este modelul de date care stă la baza lui TableView. O instanţă TableView este definită astfel:

TableView<Person> table = new TableView<>();

Am definit astfel un tabel primar. Modelul de date este creat pe baza unui ObservableList. Îl putem seta direct în TableView. Spre exemplu:

ObservableList<Person> teamMembers = getTeamMembers();

table.setItems(teamMembers);

O dată setată lista de itemi, TableView este automat updatată ori de câte ori lista teamMembers se modifică. Dacă lista de itemi este disponibilă înainte ca TableView să fie instanţiat, este posibil să o trimitem direct în constructor.

Ceea ce mai trebuie să facem este să împărțim datele conţinute în model în una sau mai multe instanţe TableColumn. Pentru a crea un TableView cu două coloane, ce afişează firstName şi lastName vom folosi codul:

 public class DataTable extends Application {

    TableView<Person> table = new TableView<>();

    BorderPane root = new BorderPane();

    VBox mainBox = new VBox(); // Container for content

    final ObservableList<Person> teamMembers = FXCollections

            ._observableArrayList_(new Person("Ion", "Tech"), new Person("Petre","Petrescu"), new Person("Doru", "Dorescu"), new Person(

                    "Vasile", "Vasilescu"));

    @Override

    public void init() {

        Label centerLbl = new Label("Persons");

        centerLbl.setStyle("-fx-font-size:16pt; -fx-font-weight:bold;");

        table.setItems(teamMembers);

        TableColumn<Person, String> firstNameCol = new TableColumn<Person, String>("First Name");

        firstNameCol    .setCellValueFactory(new PropertyValueFactory<Person, String>("firstName"));

        TableColumn<Person, String> lastNameCol = new TableColumn<Person, String>("Last Name");

        lastNameCol.setCellValueFactory(new PropertyValueFactory<Person, String>("lastName"));

        table.getColumns().setAll(firstNameCol, lastNameCol);

        mainBox.getChildren().add(centerLbl);

        mainBox.getChildren().add(table);

    }

    @Override

    public void start(Stage primaryStage) {

        primaryStage.setTitle("Data Table");

        root.setCenter(mainBox);

        primaryStage.setScene(new Scene(root, 400, 300));

        primaryStage.show();

    }

    public static void main(String[] args) {

        _launch_(args);

    }

}

Prin aceasta am definit complet proprietăţile minime cerute pentru a crea o instanţă TableView. Nici o altă proprietate a clasei Person nu va fi afişată pentru că nu avem definite alte TableColumn.

Implementarea unui cell factory este responsabilă nu doar pentru crearea instanţei Cell, dar şi pentru configurarea acelei celule. În exemplul următor am creat o clasă Callback ce are ca atribute instanţe ale claselor TextAlignment şi Format cu parametrii:

public class FormattedTableCellFactory<S, T> implements

        Callback<TableColumn<S, T>, TableCell<S, T>> {

    private TextAlignment alignment;

    private Format format;

    public TextAlignment getAlignment() {

        return alignment;

    }

    public void setAlignment(TextAlignment alignment) {

        this.alignment = alignment;

    }

    public Format getFormat() {

        return format;

    }

    public void setFormat(Format format) {

        this.format = format;

    }

    @Override

    public TableCell<S, T> call(TableColumn<S, T> p) {

        TableCell<S, T> cell = new TableCell() {

            @Override

            public void updateItem(Object item, boolean empty) {

                if (item == getItem())

                    return;

                super.updateItem(item, empty);

                if (item == null) {

                    super.setText(null);

                    super.setGraphic(null);

                } else if (format != null) {

                    super.setText(format.format(item));

                } else if (item instanceof Node) {

                    super.setText(null);

                    super.setGraphic((Node) item);

                } else {

                    super.setText(item.toString());

                    super.setGraphic(null);

                }

            }

        };

        cell.setTextAlignment(alignment);

        switch (alignment) {

        case _CENTER_:

            cell.setAlignment(Pos._CENTER_);

            break;

        case _RIGHT_:

            cell.setAlignment(Pos._CENTER_RIGHT_);

            break;

        default:

            cell.setAlignment(Pos._CENTER_LEFT_);

            break;

        }

        return cell;

    }

}

Respectiv:

FormattedTableCellFactory<Person, String> xx = new FormattedTableCellFactory<>();

xx.setAlignment(TextAlignment._CENTER_);

firstNameCol.setCellFactory(xx);

Beneficiile utilizării CSS-urilor pentru a seta stilul unui tabel constau în eficienţa de timp şi eficienţa de memorie, usurinţa utilizării şi construirii bibliotecilor pentru celule, usurinţa customizării formatării de afişare.

Utilizăm CSS-ul pentru a seta culorile celulei:

.table-cell { -fx-padding: 3 3 3 3; 
-fx-background-color: white; 

}
.table-cell:selected { -fx-background-color: blue; 

} 

Pentru ca table-cell:selected să funcționeze trebuie să setam cellSelectionEnabled la true.

Multe implementări de celulă extind IndexedCell în loc de Cell. Aceasta permite adăugarea altor două pseudoclase: odd și even. Cu acestea putem obține colorarea alternantă a liniilor prin intermediul unui CSS de forma:

.table-row-cell:odd{

    -fx-background-color:lightblue;

}

Vă mulţumim pentru lectură şi aşteptăm cu plăcere, ca întotdeauna, discuţiile cu toţi cei interesaţi.

VIDEO: NUMĂRULUI 126

Sponsori

  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • Connatix
  • BoatyardX
  • AboutYou
  • Telenav
  • .msg systems
  • Colors in projects