aipi2014-lab03-slides -...
TRANSCRIPT
10/31/2014
1
Laboratorul 03Dezvoltarea interfețelor grafice cu utilizatorul
folosind tehnologia JavaFX
Aplicaţii Integrate pentru Întreprinderi (AIPI)Semestrul de Toamnă 2014
Departamentul de Calculatoare
Conținut JavaFX – aspecte generale
Arhitectura JavaFX
Structura Generală a unei aplicații JavaFX
Componente ale Interfeței cu Utilizatorul
o Controale Grafice
o Gestiunea Meniurilor
o Diagrame
o Elemente de tip Text
o Controale pentru Pagini Internet
o Mecanisme de Dispunere a Conținutului
o Foi de Stil
o Gestiunea Evenimentelor
o Conținut Multimedia
Dezvoltarea unei Interfețe Grafice în Mod Vizual
o FXML
o Scene Builder 2.0
Modele de Date asociate Controalelor JavaFX
Gestiunea Concurenței in JavaFX
Recomandări cu privire la Implementarea Aplicațiilor JavaFX
JavaFX – aspecte generale interfață de programare a sistemelor informatice ce presupun interacțiunea cu utilizatorul◦ aplicații multimedia avansate
◦ destinate organizațiilor bazate pe date
◦ comportament consistent pe mai multe platforme de dezvoltare (Windows / Linux / Mac OS X / ARM)
integrare cu limbajul de programare Java, optimizând◦ inclus în JRE / JDK, începând cu versiunea 8
◦ costurile legate de investiții
◦ complexitatea sistemelor dezvoltate
10/31/2014
2
Caracteristicile JavaFX 8 integrare Java – alternative JRuby / Scala;
limbajul declarativ de adnotare FXML si utilitarul SceneBuilder 2o FXML – dezvoltarea interfeței grafice separând complet nivelul de prezentare de nivelul de logică a aplicației;
o SceneBuilder 2.0 – instrument de dezvoltare vizuală a interfețelor grafice, generând automat documentul FXML;
componente WebView – integrarea paginilor Internet în cadrulinterfețelor grafice folosind WebKitHTML
interoperabilitate cu tehnologia Swing – clasa SwingNode
biblioteci de controale ce pot fi particularizate prin foi de stil
tema Modena
grafică 3D: Shape3D, SubScene, Material, PickResult, LightBase, SceneAntiAliasing, Camera
Caracteristicile JavaFX 8(cont’d) desenarea pe o suprafață dintr‐o scenă JavaFX folosind API‐ul Canvas;
API pentru tipărire – javafx.print;
suport pentru text stilizat;
suport pentru operatii multi‐touch;
suport pentru dispozitive de afișare HiDPI;
Prism – motor grafic accelerat la nivel hardware pentru anumite componente recomandate;
GStreamer – motor multimedia performant;
model de dezvoltare a aplicațiilor autonome
Arhitectura JavaFX
Sursa: Understanding the JavaFX Architecture,http://docs.oracle.com/javase/8/javafx/get‐started‐tutorial/jfx‐architecture.htm
bazată pe o stivă de componente transparentă pentru utilizator Quantum Toolkit = motorul ce rulează codul sursă propriu‐zis
o Prism – motor grafic performanto Glass – sistem eficient de ferestreo motor pentru redarea conținutului multimediao motor pentru redarea paginilor Internet
10/31/2014
3
setul de API‐uri Java pentru funcționalități JavaFXo clase generice, adnotări, lucrul cu mai multe fire de execuție,
expresii Lambdao acces la JavaFX din alte limbaje de programare (JavaScript, Groovy)o acces la alte limbaje de programare bazate pe JVM pentru dezvoltarea de
aplicații JavaFXo biblioteci de asocierio biblioteci de colecții (list / map) ce conectează modelul de date cu elementele
din interfața grafică
graful de scene – structură ierarhică de noduri, fiecare nod fiind identificat în mod unic, având o clasă de stil și un volum delimitator
o noduri – forme 2D/3D, imagini, conținut multimedia / Internet, text, controale pentru interacțiunea cu utilizatorul, grafice, containere
o stări ‐ transformări (poziționări / orientări), efecte vizualeo efecte – obiecte care specifică aspectul nodurilor (umbre, mecanisme de
estompare, reglarea culorilor)
Arhitectura JavaFX (cont’d)
Arhitectura JavaFX (cont’d) controale ◦ definite in pachetul javafx.scene.control
◦ pot fi grupate in containere / panouri◦ BorderPane
◦ HBox / VBox
◦ StackPane
◦ GridPane
◦ FlowPane
◦ TilePane
◦ AnchorPane
stilizarea continutului folosind foi de stil◦ versiunea 2.1 a W3C CSS + elemente din versiunea 3
◦ pot fi aplicate oricarui obiect de tip Node
◦ proprietățile JavaFX prefixate de –fx–
Arhitectura JavaFX (cont’d) transformări – definite în javafx.scene.transform, affine() = mapare între sisteme de coordonate menținând paralelismul / ortogonalitatea
◦ translate()
◦ scale()
◦ shear()
◦ rotate()
efecte vizuale – definite în javafx.scene.effect◦ operează la nivel de pixel al imaginii
◦ Bloom, Blur (BoxBlur, MotionBlur, GaussianBlur), DropShadow / InnerShadow, Reflection, Lightning, Perspective
10/31/2014
4
Arhitectura JavaFX (cont’d) sistemul grafic – obiecte 2D/3D randate software dacă hardware‐ul nu are capabilitățile necesareo Prism – operații de redare / rasterizare a conținutului folosind Windows XP/Vista: DirectX 9
Windows 7: DirectX 11
Mac, Linux, dispozitive mobile: OpenGL
daca nu există accelerare grafică: Java 2D
o Quantum Toolkit – element de interfață între Prism si sistemul de ferestre Glass
Glass – gestiunea ferestrelor, suprafețe, mecanisme de cronometrare, evenimente intrare/ieșireo coada de evenimente a sistemului de operare gazdă
Arhitectura JavaFX (cont’d)
firele de execuție – minim 2◦ al aplicației JavaFX: gestiunea scenelor afișate curent, pregătirea scenelor în fundal
◦ Prism: folosit pentru redare◦ evenimentele de intrare/ieșire tratate separat
◦ se pot asocia fire de execuție separate pentru rasterizare
◦ pentru continut multimedia
sincronizarea – mecanismul Pulse◦ indică faptul că elementele din graful de scene trebuie sincronizate
◦ se declanșează la maxim 60fps sau oricând sunt modificări în graful de scene
◦ elementele de dispunere a conținutului / legate de stil sunt parcurse doar o singură dată → performanța!!!
Arhitectura JavaFX (cont’d) suport multimedia: javafx.scene.media◦ continut audio‐vizual (.mp3, .aiff, .wav, .flv)
◦ componente: Media, MediaPlayer, MediaView
navigator încorporat◦ bazat pe WebKit
◦ suportă HTML5, CSS, JavaScript, DOM și SVG
◦ functionalități◦ redare / editare conținut HTML
◦ istoric navigare
◦ execuție comenzi JavaScript din JavaFX și acces la obiecte JavaFX din JavaScript
◦ componente: WebEngine, WebView
10/31/2014
5
Structura unei aplicații JavaFX
extinde javafx.application.Application
metoda start(Stage) este apelată în momentul execuției aplicației JavaFX
o aplicație JavaFX se exprimă în termeni de obiecteo javafx.stage.Stage
o javafx.scene.Scene
Structura unei aplicații JavaFX(cont’d)
fiecare element din cadrul unei scene este un nod dintr‐un arbore în care rădăcina este container‐ulo Scene – nod rădăcină
o Parent – noduri de tip ramură
o Node – noduri frunză (javafx.scene.shape / javafx.scene.text)
Structura unei aplicații JavaFX(cont’d)
Bookstore.java
public class BookStore extends Application {
@Override
public void start(Stage mainStage) throws Exception {
new Authentication().start();
}
public static void main(String[] args) {
launch(args);
}
}
10/31/2014
6
Structura unei aplicații JavaFX(cont’d)
Authentication.java
public class Authentication {
private Stage applicationStage;
private Scene applicationScene;
public void start() {
try {
applicationScene =
new Scene((Parent)FXMLLoader.load(getClass().getResource(Constants.AUTHENTICATION_FXML)));
} catch (Exception exception) {
System.out.println ("An exception has occured: "+exception.getMessage());
if (Constants.DEBUG)
exception.printStackTrace();
}
applicationStage = new Stage();
applicationStage.setTitle(Constants.APPLICATION_NAME);
applicationStage.getIcons().add(
new Image(getClass().getResource(Constants.ICON_FILE_NAME).toExternalForm()));
applicationStage.setScene(applicationScene);
applicationStage.show();
}
}
Construirea de interfețe grafice cu ajutorul controalelor JavaFX definite în pachetul javafx.scene.control
majoritatea tipurilor de controale întâlnite în interfețele cu utilizatorul◦ Accordion◦ ColorPicker◦ Chart◦ DatePicker◦ Pagination◦ TitledPane◦ TreeTableView
sunt noduri în graful de scene – pot fi integrate în animații, efecte, transformări, tranziții
pot particularizate – fiind derivate din clasa Node◦ CSS (foi de stil)◦ folosind clasa Skin
Construirea de interfete grafice cu ajutorul controalelor JavaFX(cont’d)
10/31/2014
7
Clasa Label etichetă non‐editabilă
poate conține◦ un text
◦ o imagine
metode◦ setText(String text)
◦ setGraphic(Node graphic)
◦ alinieri setTextAlignment()
setContentDisplay() ‐ (ContentDisplay: LEFT, RIGHT, CENTER, TOP, BOTTOM)
setWrapText(), setTextOverrun()
setFont() – set de caractere, setTextFill() – culoare
setGraphicTextGap() – distanța dintre imagine și etichetă
Clasa Button produce o acțiune în momentul în care este apăsat, care trebuie tratată printr‐o metodă asociată evenimentului, atașată obiectului addEventHandler()
o frecvent, ActionEvent (apăsarea butonului)o alte tipuri de evenimente: MouseEvent.MOUSE_ENTERED, MouseEvent.MOUSE_EXITED
button.setOnAction((ActionEvent event) ‐> {
// ...}
);
derivat din clasa Labeled, conține text / imagine
operații: rotire, translatare, scalare, tăiere
efecte – setEffect(), pachetul javafx.scene.effect
stilizare: setSyleClass(), setStyle()
ClaseleRadioButton / ToggleButton RadioButton – există o singură selecție, ToggleButton – poate exista nici un buton selectat
două stări: selectat, deselectat – starea obținută prin isSelected()o setSelected()
o requestFocus()
grupate intr‐un obiect de tip ToggleGroup, care asigură excluderea mutuală între controalele conținute – setToggleGroup()
modificarea selecției poate fi monitorizată printr‐un obiect ascultător ChangeListener
final ToggleGroup toggleGroup = new ToggleGroup();
toggleGroup.selectedToggleProperty().addListener(
(ObservableValue<? extends Toggle> observableValue, Toggle oldToggle, Toggle newToggle) ‐> {
if (toggleGroup.getSelectedToggle() != null) {
Toggle selectedToggle = toggleGroup.getSelectedToggle();
// ...
}
}
);
10/31/2014
8
Clasa CheckBox stare◦ definit – poate fi selectat/deselectat
◦ nedefinit – trebuie precizată proprietatea allowIndeterminate
nu pot fi grupate în obiecte de tip ToggleGroup
metode◦ setSelected()
◦ setIndeterminate() – ciclare intre trei valori
Clasa ChoiceBox selecția dintre un număr relativ mic de opțiuni
elementele componente◦ create prin metoda FXCollections.observableArrayList()
◦ specificate◦ în constructor
◦ ca parametru al metodei setItems()
◦ separarea se poate face prin obiecte Separator
explicații suplimentare: Tooltip / setTooltip()
monitorizarea modificării selecției – ChangeListener<Number> / changed()
choiceBox.getSelectionModel().selectedIndexProperty().addListener(
(ObservableValue observableValue, Number oldValue, Number newValue) ‐> {
int selectedIndex = newValue.intValue();
// ...
}
);
ClaseleTextField / PasswordField derivate din clasa TextInput
controale prin care se preia un text de la utilizator
TextField – textul este vizibil în clar, PasswordField – caracterele sunt înlocuite prin ●
vizualizare◦ setPrefColumnCount() – dimensiunea◦ setPromptText() – text descriptiv (semnificația continutului)
metode◦ copy()◦ cut()◦ selectAll()◦ paste()◦ clear()
monitorizarea modificării conținutului se face printr‐un obiect EventHandler<ActionEvent>
10/31/2014
9
Clasa ScrollBar panouri / zone de vizualizare care pot fi derulate
elemente componente◦ cursor
◦ bara culisantă
◦ butoane stâng/drept
metode◦ setMin() / setMax() – limitele între care se mișcă cursorul
◦ setValue() – valoarea curentă (implicit, (min + max) / 2)
◦ setOrientation() – orientare pe orizontală / verticală
◦ deplasarea la apăsarea pe butoanele laterale: UNIT_INCREMENT
◦ deplasarea la apăsarea pe bara culisantă: BLOCK_INCREMENT
Clasa ScrollPane vizualizări ale controalelor a căror dimensiune depășește suprafața de afișare, acestea putând fi derulate folosind elemente culisante (ScrollBar)
conține un singur element (pentru mai multe elemente, se folosește Group)
setPannable() – previzualizarea conținutului simultan cu mișcarea mouse‐ului
proprietăți – HVALUE, VVALUE: poziția pe care o are cursorul pe orizontală / verticală
metode◦ setContent()◦ setHbarPolicy() / setVbarPolicy()
◦ ScrollBarPolicy: ALWAYS, NEVER, AS_NEEDED
◦ setFitToWidth() / setFitToHeight() – redimensionare pentru încadrarea în spațiul existent (implicit, FIT_TO_WIDTH, FIT_TO_HEIGHT au valoarea false)
◦ dimensiunile minimă, maximă, curentă ale obiectului conținut
Clasa ListView vizualizarea unei liste care conține mai multe obiecte, astfel încât pentru inspectarea sa este necesară existența unei bare derulante
definire◦ în constructor
◦ setItems() – FXCollections.observableArrayList()
◦ setCellFactory()
metodeo setPrefWidth() / setPrefHeight()
o setOrientation() –Orientation.HORIZONTAL, Orientation.VERTICAL
10/31/2014
10
Clasa ListView (cont’d) clasa SelectionModel – determină selecția din cadrul listei
◦ getSelectionModel().getSelectedIndex()
◦ getSelectionModel().getSelectedItem()
clasa FocusModel – determină focusul din cadrul listei◦ getFocusModel().getFocusedIndex()
◦ getFocusModel().getFocusedItem()
implicit, modelul de selecție este MultipleSelectionModel, cu proprietatea selectionMode = SelectionMode.SINGLE
pentru obținerea valorilor din selecții multiple sunt folosite metodele selectedItems() / selectedIndices()
o setSelectionMode(SelectionMode.MULTIPLE)
extensii ale clasei ListCell: “fabrici” de celule – se permite ca utilizatorul să modifice conținutulo CheckBoxListCell, ChoiceBoxListCell, ComboBoxListCell, TextFieldListCell
Clasele TableView,TableColumn și TableCell construirea◦ definirea unui model pentru tabel
◦ asocierea unei fabrici de celule pentru fiecare coloană în parte – metoda setCellValueFactory() – PropertyValueFactory utilizând denumirile coloanelor ca referințe către metodele clasei model
TableColumn – coloane ale tabeluluio vizibilitatea unei coloane poate fi specificată (setVisible())
o se pot defini coloane imbricate
TableColumn parent = new TableColumn("Parent");
TableColumn child1 = new TableColumn("Child1");
TableColumn child2 = new TableColumn("Child2");
parent.getColumns().addAll(child1, child2);
Clasele TableView,TableColumn și TableCell(cont’d)
operațiio sortarea datelor setSortable()
metoda setSortType (TableColumn.SortType: ASCENDING, DESCENDING), TableView.sortOrder()
numărul de click‐uri ale mouse‐ului (1 – crescător, 2 – descrescător, 3 – deloc), Shift + Click stabilește ordinea
o redimensionarea coloanelor
o editarea conținutului ‐ setEditable()
o setPlaceHolder() – mesajul afișat în cazul în care tabelul nu conține date (implicit No content in table)
10/31/2014
11
Clasele TableView,TableColumn și TableCell(cont’d)
Clasa TreeView vizualizarea de conținuturi ce respectă o structură ierarhică
obiecte de tip TreeItem între care se stabilesc relații de tip părinte‐fiu◦ rădăcina specificată prin metoda setRoot() sau în constructorul obiectului TreeView
◦ relațiile dintre noduri – metoda add() / addAll() adăugată pe lista observabilă a componentelor (obținută cu getChildren())
◦ verificarea relațiilor: getParent() / isLeaf()
◦ expandarea conținutului – setExpanded(), implicit nu este vizibil
◦ poate contine orice tip de date / controaleTreeItem<T> (T value)
◦ setGraphic() – asocierea unui element grafic
Clasa TreeView(cont’d) TreeItem – nu este derivate din clasa Node
o nu se pot aplica efecte vizuale
o mecanism de tip “fabrică” pentru generarea de obiecte TreeCell CheckBoxTreeCell, ChoiceBoxTreeCell, ComboBoxTreeCell, TextFieldTreeCell
util când
• obiectul conține o cantitate mare de informații modificată dinamic
• se dorește redefinirea tipului de control cu specificarea comportamentului la interacțiunea cu utilizatorul
10/31/2014
12
Clasa TreeTableView TreeTableView = TableView + TreeView
construirea
o 1) definirea nodurilor (TreeItem) din cadrul arborelui
final TreeItem<String> childNode1 = new TreeItem<>(new Person("FirstName1, LastName1"));
final TreeItem<String> childNode2 = new TreeItem<>(new Person("FirstName2, LastName2"));
o 2) specificarea nodului rădăcină
final TreeItem<String> rootNode = new TreeItem<>("Persons");
rootNode.setExpanded(true);
o 3) stabilirea relațiilor de tip părinte‐copil între nodurile din cadrul arborelui
rootNode.getChildren().setAll(childNode1, childNode2);
o 4) definirea coloanelor (TreeTableColumn)
TreeTableColumn<Person, String> firstNameColumn = new TreeTableColumn<>("First Name");
TreeTableColumn<Person, String> lastNameColumn = new TreeTableColumn<>("Last Name");
o 5) specificarea conținutului coloanelor, prin fabrici de celule – furnizează obiecte TreeItem
firstNameColumn.setCellValueFactory((CellDataFeatures<Person, String> parameter) ‐>
new ReadOnlyStringWrapper(parameter.getValue().getValue().getFirstName()));
lastNameColumn.setCellValueFactory((CellDataFeatures<Person, String> parameter) ‐>
new ReadOnlyStringWrapper(parameter.getValue().getValue().getLastName()));
o 6) construirea unui obiect TreeTableView
final TreeTableView<String> treeTableView = new TreeTableView<>(rootNode);
treeTableView.setShowRoot(true);
o 7) asocierea coloanelor la obiectul TreeTableView
treeTableView.getColumns().addAll(firstNameColumn, lastNameColumn);
setShowRoot() – vizibilitatea nodului rădăcină
setTableMenuButtonVisible() – accesul utilizatorilor la vizibilitatea coloanelor (butonul +)
Clasa TreeTableView(cont’d)
Clasa TreeTableView(cont’d)
ordonarea conținutuluio pentru fiecare coloană în parte setSortType() – TreeTableColumn.SortType
(ASCENDING, DESCENDING)
o pentru întregul tabel – setSortMode() TreeSortMode.ALL_DESCENDANTS
TreeSortMode.ONLY_FIRST_LEVEL
10/31/2014
13
Clasa TreeTableView(cont’d) selecția conținutului
o implicit, MultipleSelectionModel – SelectionMode.SINGLE
o selecții multiple – setSelectionMode() + setCellSelectionEnabled()
Clasa ComboBox folosită pentru selectarea unei opțiuni dintr‐o listă ce depășește o anumită limită (folosește elemente derulante)
conținut – listă observabilă◦ constructor◦ setItems(…)
◦ getItems().addAll(…)
!!! A nu se popula cu controale din clasa Node, ci se utilizează “fabrici” de celule (setCellFactory())
metode◦ {get|set}Value() – specificarea elementului curent modifică obiectul asociat din proprietatea selectionModel
◦ setVisibleRowCount()
◦ setEditable(), setPromptText()
Clasa Separator delimitează elementele unui grup, structurează interfața grafică
nu produce nici o acțiune
metode◦ setOrientation() – orientarea (orizontală / verticală)
◦ setMaxWidth() – dimensiunea
◦ setHalignement() / setValignement() – poziția pe Ox / Oy
derivat din clasa Node, poate fi stilizat
10/31/2014
14
Clasa Slider elemente componente: pistă, cursor, marcaje cu etichete asociate
metode – comune cu ale clasei ScrollPane◦ setMin() / setMax() – valorile extreme
◦ {get|set}Value() – valoarea curentă a cursorului (double)
◦ setShowTickLabels(), setShowTickMarks() – modul de vizualizare al cursorului (asociază etichete gradațiilor)
◦ setMinorTickCount(), setMajorTickCount()
◦ setBlockIncrement() – distanța cu care se mișcă cursorul atunci când utilizatorul apasă pe pista asociată
◦ setSnapToTicks() – alinierea cursorului cu marcajele din cadrul pistei
Clasele ProgressIndicatorși ProgressBar indică faptul că o sarcina este în curs de execuție precum și cantitatea care a fost deja realizatăo ProgressIndicator – grafic circular al cărui conținut este umplut
o ProgressBar – bară a cărei suprafață este umplută subclasă a ProgressIndicator
transmitere valoare (subunitară)◦ constructor
◦ metoda setProgress()
◦ proprietatea progressProperty
◦ în situația în care nu se poate evalua dimensiunea sarcinii în cauză◦ nu se specifică nici o valoare în constructor / valoare negativă
◦ isIndeterminate()
Clasa Hyperlink formatează texte care au semnificația unei legături către o pagină Interneto derivată din clasa Labeled setText(), setGraphic()
starea obiectului – setVisited()
tratarea evenimentului de vizitare – setOnAction()
Hyperlink hyperlink = new Hyperlink();String URL = "http://aipi2014.andreirosucojocaru.ro";hyperlink.setText(URL);hiperlink.setOnAction((ActionEvent actionEvent) ‐> {
new WebView().getEngine().load(URL);}
);
10/31/2014
15
Clasa HTMLEditor editor de texte cu funcționalități pentru redactarea documentelor HTML5
functionalități◦ formatare de text (bold, italic, underline, striketrough)
◦ configurari paragraf (formatare, tip, dimensiune caractere)
◦ culori fundal
◦ indentare text
◦ liste numerotate / nenumerotate
◦ riglă orizontală
◦ copy/paste
metode◦ setPrefWidth() / setPrefHeight()
◦ {get|set}HtmlText() –codul HTML asociat
◦ WebEngine.load() – vizualizarea conținutului într‐un navigator
derivat din clasa Node, i se pot aplica stiluri, efecte vizuale, transformări
Clasa Tooltip texte explicative ce pot fi asociate oricăror controale din pachetul javafx.scene.control
asocierea unui astfel de obiect se face prin metoda setTooltip()
stări◦ 1) activat
◦ 2) vizibil
◦ există o decalare la trecerea între cele două stări
ștergerea textului explicativ se face cu uninstall()
derivat din Labeled, i se poate asocia text
imagine
ClaseleTitledPane / Accordion panouri care au asociat un titlu, încapsulând un obiect de tip Node
o textul și conținutul pot fi transmise în constructor
o setText(), setContent()
pot fi deschise și închiseo setCollapsible() – implicit poate fi deschis / închis
o setAnimated() – animație asociată tranziției
sunt grupate in obiecte de tip Accordion (unde doar un obiect TitledPane poate fi vizualizat la un moment)o nu se specifică înălțimea (minimă / maximă / preferată) a obiectelor TitledPane întrucât pot apărea probleme în momentul expandării
o {set|get}ExpandedPane() – obiectul TitledPane vizualizat în mod curent
10/31/2014
16
ClaseleTitledPane / Accordion(cont’d) obiectul ascultător (ChangeListener<TitledPane>) pentru evenimentul de modificare a selecției se asociazămetodei expandedPaneProperty()
Accordion accordion = new Accordion();TitledPane titledPane1 = new TitledPane(), titledPane2 = new TitledPane();// ...titledPane1.setContent(...);titledPane2.setContent(...);accordion.getPanes().add(titledPane1);accordion.getPanes().add(titledPane2);accordion.expandedPaneProperty().addListener(
(ObservableValue<? extends TitledPane> observableValue, TitledPane oldValue, TitledPane newValue) ‐> {
// ...}
);
Clasa ColorPicker permite selecția unei culori dintr‐o anumită gamă sau specificarea acesteia prin parametrii RGB / HSB
componente: lista pentru selecția culorii, paleta de culori, fereastra de dialog pentru specificarea parametrilor
metodeo {set|get}Value() – culoarea curentă culori pedefinite în clasa Color
metodele statice rgb() / hsb() / web()
o getCustomColors() –> ObservableList<Color>: nu pot fi reîncărcate la repornirea aplicației decât prin adoptarea unui mecanism de persistență
vizualizare: implicit javafx.scene.control.skin.ColorPickerSkino stiluri: ArrowButton, SplitButton
o Redefinirea proprietății ‐fx‐skin a clasei CSS .color‐picker
Clasa ColorPicker(cont’d)
10/31/2014
17
Clasa DatePicker permite selecția unei date dintr‐un anumit calendar
componente: ComboBox editabil având un câmp dată calendaristică, zonă de selecție a unei date dintr‐un calendar
populareo constructor fără parametri / obiect LocalDate ce indică data calendaristică selectată implicit
o setValue()
o LocalDate.now()
metodeo setShowNumberOfWeeks() – afișarea săptămânii în cadrul calendarului
o setChronology() – sisteme de calendare alternative (japonez, Hijrah, Minguo, tailandeze‐budiste)
Clasa DatePicker(cont’d) datele calendaristice sunt reprezentate în formatul definit de sistemul local (mm/dd/yyyy)
modificarea formatului se face prin metoda setConverter()o null – formatul implicit
private DatePicker datePicker = new DatePicker(LocalDate.now());private final String dateFormat = "dd.mm.yyyy";StringConverter converter = new StringConverter<LocalDate>() {
DateTimeFormatter dateTimeFormatter = DateTimeFormatter.ofPattern(dateFormat);@Overridepublic String toString(LocalDate localDate) {
if (localDate != null) {return dateTimeFormatter.format(localDate);
return "";}@Overridepublic LocalDate fromString(String string) {
if (string != null && !string.isEmpty())return LocalDate.parse(string, dateTimeFormatter);
return null;}
};datePicker.setConverter(converter);datePicker.setPromptText(dateFormat.toLowerCase());
Clasa DatePicker(cont’d) schimbarea funcționalității unui obiect DatePicker se face prin atașarea unei fabrici de celule care generează obiecte DateCellcu comportamentul dorito exemplu: dezactivarea anumitor valori (setDisabled())
datePicker.setDayCellFactory(new Callback<DatePicker, DateCell>() {
@Override
public DateCell call(final DatePicker) {
return new DateCell() {
@Override
public void updateItem(LocalDate item, boolean empty) {
super.updateItem(item, empty);
// ...
}
};
}
});
10/31/2014
18
Clasa Pagination navigarea între mai multe pagini corespunzând unui conținut împărțit între mai multe secțiunio utilitate în cazul dispozitivelor mobile
elemente componenteo conținutul paginiio zona de navigare butoane pentru deplasarea înainte/inapoi
butoane pentru fiecare pagină în parte
etichetă de forma “pagina curentă / număr total de pagini”
populareo constructor: fără parametri (numărul de pagini INDETERMINATE), sau cu 1‐2 parametri (număr pagini, pagina curentă)
o setPageCount(), setCurrentPageIndex()
setMaxPageIndicatorCount() – limitarea legăturilor vizibile către numărul de pagini
Clasa Pagination (cont’d) specificarea conținutului – prin intermediul unei fabrici de pagini – setPageFactory()o trebuie să întoarcă null dacă indexul de pagină respectiv nu există
o metoda call() generează un obiect de tip Nodeint totalNumberOfPages = ...;int currentPageNumber = 0;Pagination pagination = new Pagination
(totalNumberOfPage, currentPageNumber);Pagination.setPageFactory((Integer currentPage) ‐> {
// ...}
);
clase CSS – Pagination.STYLE_CLASS_BULLETo ‐fx‐max‐page‐indicator‐count
o ‐fx‐arrows‐visible
o ‐fx‐tooltip‐visible
o ‐fx‐page‐information‐visible
o ‐fx‐page‐information‐alignment
Clasa FileChooser permite navigarea prin sistemul de fișiere, având un look‐and‐feel corespunzător sistemului de operare pe care este apelat
setInitialDirectory() – directorul pe care îl deschideo poate primi ca parametru rezultatul metodei showDialog() din clasa DirectoryChooser
o se poate folosi directorul specific utilizatorului autentificat în cadrul sistemului de operare System.getProperty(“user.home”);
FileChooser fileChooser = new FileChooser();fileChooser.setTitle("Open File");// ...File file = fileChooser.showOpenDialog(stage);FileChooser fileChooser = new FileChooser();fileChooser.setTitle("Open Files");// ...List<File> fileList = fileChooser.showOpenMultipleDialog(stage);
10/31/2014
19
Clasa FileChooser(cont’d) deschiderea unuia sau mai multor fișiere – metode blocante!!!
o showOpenDialog() – selecția unui singur fișier
o showOpenMultipleDialog() – selecția mai multor fișiere
o java.awt.Desktop ‐> open() – vizualizarea conținutului folosind aplicația asociată implicito isDesktopSupported() – verificarea faptului că metodele sunt suportate pe platforma respectivă
o alte meode: browse(), edit(), mail(), print()
salvarea unui conținut pe disco showSaveDialog()
specificarea de filtre ExtensionFilter pentru specificarea tipurilor de fișiere vizibile în listă
FileChooser fileChooser = new FileChooser();fileChooser.setTile("File Chooser");fileChooser.setInitialDirectory(new File(System.getProperty("user.home")));FileChooser.ExtensionFilter allFiles =
new FileChooser.ExtensionFilter("All Files", "*.*");FileChooser.ExtensionFilter documents =
new FileChooser.ExtensionFilter("Documents", "*.docx", "*.pdf");FileChooser.ExtensionFilter images =
new FileChooser.ExtensionFilter("Images", "*.jpg", "*.png");fileChooser.getExtensionFilters().addAll(allFiles, documents, images);
Clasa FileChooser(cont’d)
Controale definite de utilizator extinse din clasa javafx.scene.control.Control
redefinirea unor metode ale controalelor predefinite pentru a corespunde cerințelor funcționale
unele controale permit construirea conținutului pe baza unor “fabrici” de celuleo ComboBox, ListView, TableView, TreeView
o setCellFactory() – primește un obiect Callback, al cărei metodă call()furnizează conținutul dorit
10/31/2014
20
Compatibilitatea JavaFXcu dispozitivele mobile implementarea unor operații specifice
o atingere (doar pentru ecran tactil) – o apăsare la un moment dato gesturi (doar glisare) – ecran tactil, trackpad
tastatură virtualăo introducerea de text în anumite câmpurio vkType: numeric, url, email, text (implicit)
comportament modificat al unor controaleo ScrollBar, ScrollPane – elementele derulante nu sunt vizibile implicit și au doar rol decorativo TextField, PasswordField, TextArea, DatePicker – se vizualizează cursorulo ContextMenu – meniul contextual este dispus orizontal
limitări ale dispozitivelor mobileo TableView ‐ redimensionarea / rearanjarea coloanelor; ordonarea dateloro ListView, TreeView – selecția multiplă;o PasswordField – suport pentru copierea textuluio nu sunt implementate HTMLEditor
redarea de conținut multimedia
Compatibilitatea JavaFXcu dispozitivele mobile(cont’d)
Compatibilitatea JavaFXcu dispozitivele mobile(cont’d)
10/31/2014
21
Gestiunea meniurilor în JavaFX listă de elemente acționabile făcute vizibile la solicitarea utilizatorului
o un singur element din cadrul unui meniu este vizibil la un moment dat
o optimizează spațiu în interfața cu utilizatorul, funcționalitățile nu sunt vizbile tot timpul
MenuBar – meniul principal al unei aplicații
Menu – folosit pentru submeniuri◦ MenuItem – se poate asocia o combinatie de taste
◦ setAccelerator
◦ KeyCombination.keyComnination
◦ poate fi dezactivata – setDisabled(true)
◦ CheckMenuItem, RadioMenuItem, CustomMenuItem (SeparatorMenuItem)
ContextMenu – meniu contextual, folosit când lipsa de spațiu este pregnantă, afișat la apelarea metodei show()
Gestiunea meniurilor în JavaFX (cont’d) listă de elemente acționabile făcute vizibile la solicitarea utilizatorului
o un singur element din cadrul unui meniu este vizibil la un moment dat
o optimizează spațiu în interfața cu utilizatorul, funcționalitățile nu sunt vizbile tot timpul
MenuBar – meniul principal al unei aplicații, ocupă partea superioară a scenei, redimensionat la spațiul disponibil
o constructor fără parametru
o asocierea categoriilor se face prin add() / addAll() apelate pe lista observabilă de meniuri (getMenus())
Menu – folosit pentru submeniuri◦ MenuItem – nu extind clasa Node, nu pot fi incluse direct în scena aplicației poate avea asociat un text și o pictogramă
acțiunea asociată se face prin metoda setOnAction() ce primește un parametru EventHandler<ActionEvent> (metoda handle())
se poate asocia o combinație de taste
• setAccelerator()
• KeyCombination.keyCombination()
poate fi dezactivata – setDisabled()
◦ CheckMenuItem, RadioMenuItem, CustomMenuItem (SeparatorMenuItem)
ContextMenu – meniu contextual, folosit când lipsa de spațiu este pregnantă, afișat la apelarea metodei show(), la coordonatele la care a fost înregistrat click‐ul pe mouse getScreenX(), getScreenY()
Gestiunea meniurilor în JavaFX (cont’d)MenuBar containerMenu = new MenuBar();Menu fileMenu = new Menu("File");Menu operationsMenu = new Menu("Operations");Menu helpMenu = new Menu("Help");containerMenu.getMenus().addAll(fileMenu, operationsMenu, helpMenu);‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐Menu operationsMenu = new Menu("Operations");MenuItem databaseManagementMenu = new MenuItem("DataBase Management");databaseManagementMenu.setAccelerator(KeyCombination.keyCombination("Ctrl+D"));operationsMenu.getItems().addAll(databaseManagementMenu);
CheckMenuItemo poate avea starea selectat (✔) / deselectat (doar textul / imaginea asociate)o selectedProperty() – monitorizarea modificăriloro {get|set}Selected() – starea curentă
RadioMenuItemo asociate unui ToggleGroup (metoda setToggleGroup())o selectedToggleProperty() – monitorizarea modificăriloro {get|set}SelectedToggle() – butonul selectat la momentul de timp respectiv
10/31/2014
22
Gestiunea meniurilor în JavaFX (cont’d)Exemplu
@FXML private MenuBar containerMenu;@FXML private Menu databaseManagementMenu;
// ...
@FXMLprivate void initialize() {
try {
DataBaseWrapper databaseWrapper = DataBaseWrapperImplementation.getInstance();ArrayList<String> tableNames = databaseWrapper.getTableNames();
for (String tableName: tableNames) {MenuItem menuItem = new MenuItem(Utilities.tableNameToMenuEntry(tableName));menuItem.addEventHandler(EventType.ROOT, (EventHandler<Event>)this);databaseManagementMenu.getItems().add(menuItem);
}} catch (SQLException sqlException) {
System.out.println("An exception has occured: "+sqlException.getMessage());if (Constants.DEBUG)
sqlException.printStackTrace();}// ...
}
Gestiunea meniurilor în JavaFX (cont’d)Exemplu
Diagrame în JavaFX grafice – pachetul javafx.scene.chart◦ utilizează sistemul de coordonate (derivate din XYChart, XYChart.Data) LineChart, AreaChart, BubbleChart, ScatterChart, BarChart (StackedBarChart)
valorile axelor de coordonate reprezentate de xValue / yValue + extraValue
axele pot avea tipul CategoryAxis / NumberAxis
mai multe serii de date XYChart.Series
• o serie este identificată prin nume setName()
• asocierea unei serii la diagramă se face prin add() pe rezultatul metodei XYChart.Series.getData()
metode: setLabel(), setSide(), setLowerBound() / setUpperBound(), setTickUnit(), setTickLabelGap(), setTickLabelFill(), setCategoryGap(), setTickLabelRotation(), setAnimated()
o nu utilizează sistemul de coordonate PieChart / PieChart.Data – valorile fiecărei secțiuni (asociere între o etichetă și o valoare numerică)
metode: setClockwise(), setStartAngle()
metode comune: setTitle(), stabilirea poziției, setLabelsVisible(), setLegendVisible(), setLegendSide(), setLabelLineLength()
metodele ascultător asociate fiecărui nod în parte chart.getData()
10/31/2014
23
Diagrame în JavaFX(cont’d)
asocierea unei foi de stil / clase CSS (.default‐colorx, x valoare numerică)
o chart‐area‐symbol
o chart‐series‐area‐line
o chart‐series‐area‐fill
o chart‐symbol
definirea propriului tip de diagramă care extinde clasa ChartCategoryAxis xAxis = new CategoryAxis();NumberAxis yAxis = new NumberAxis();yAxis.setTickLabelFormatter(
new NumberAxis.DefaultFormatter(yAxis, "RON ", null)
);LineChart<String, Number> lineChart =
new LineChar<String, Number>(xAxis, yAxis);lineChart.setTitle("Profit Statistics");XYChart.Series series2014 = new XYChart.Series();series2014.setName("Year 2014");series2014.getData().add(new XYChart.Data("January", ...));// ...lineChart.getData.add(series2014);
Elemente de tip textîn JavaFX instanță a clasei javafx.scene.text.Text
o derivată din clasa Node – suportă efecte, transformări, animații
o Node extinde Shape – se poate specifica o culoare pentru fundalul textului
metodeo constructor – textul de afișat, poziția la care se afișează
o setText(), setColor()
o setFont() Font.font(), Font.getDefault()
Font.loadFont() – seturi de caractere definite de utilizator (.ttf / .otf)
proprietăți de tip bold / italic – FontWeight.BOLD, FontPosture.ITALIC
Elemente de tip textîn JavaFX (cont’d)Text text = new Text();
text.setText("Sample Text");
text.setFont(
Font.getDefault(),
FontWeight.BOLD|FontPosture.ITALIC,
24
);
text.setFontSmoothingType(FontSmoothingType.LCD);
text.setFill(Color.BEIGE);
TextFlow – gruparea mai multor obiecte de tip Text, ignorând coordonatele elementelor, poziționându‐le în funcție de proprietățile sale (lățime, înălțime, aliniere)
stilizarea: încărcarea foilor de stil cu metoda setId()
10/31/2014
24
Elemente de tip textîn JavaFX (cont’d) efecte – sunt aplicate prin metoda setEffect()
◦ PerspectiveTransform – 4 puncte (x, y) ale formei ce definește transformarea de perspectivă
◦ GaussianBlur
◦ DropShadow / InnerShadow – setOffsetX() / setOffsetY(), setColor(), setRadius(), setSpread()
◦ Reflection – setTopOpacity(), setBottomOpacity(), setFraction(), setTopOffset()
◦ combinarea efectelor se face in obiecte de tip Blend (BlendMode.MULTIPLY)◦ setTopInput()
◦ setBottomInput()
Text text = new Text();Blend blend1 = new Blend(), blend2 = new Blend();blend1.setMode(BlendMode.MULTIPLY); blend2.setMode(BlendMode.MULTIPLY);DropShadow dropShadow = new DropShadow(); //...blend1.setBottomInput(dropShadow);InnerShadow innerShadow = new InnerShadow(); // ...Reflection reflection = new Reflection (); // ...blend2.setBottomInput(innerShadow);blend2.setTopInput(reflection);blend1.setTopInput(blend2);text.setEffect(blend1);
Conținut pentru pagini Internet navigator încorporat – javafx.scene.web
◦ bazat pe WebKit, motor open‐source ce implementează foi de stil, JavaScript, DOM, HTML5 (Canvas, SVG, redarea de conținut media, formulare și procesare date, istoric de navigare, etichete interactive, rularea de scripturi Web, sockeți web, seturi de caractere încărcate cu @font‐face, la nevoie)
funcționalitateo redarea de conținut HTML5 local sau la distanță
o istoric de vizitare
o comenzi JavaScript si executie comenzi JavaFX din acest context
o gestiunea ferestrelor
o efecte
WebEngine – funcționalitate de navigare de bază, implementează interacțiunea cu utilizatorul
o încărcarea de conținut Internet, accesarea proprietăților DOM, execuția JavaScript
o conținutul unei pagini Internet se încarcă prin metoda load()
WebView – încorporează conținut HTML în scena aplicațieio extinde clasa Node
o încapsulează un obiect WebEngine – {get|set}Engine()
Conținut pentru pagini Internet(cont’d) încărcarea unei paginiString URL = "http://aipi2014.andreirosucojocaru.ro";WebView webView = new WebView();WebEngine webEngine = webView.getEngine();webEngine.load(URL);
gestiunea ferestrelor proeminente – metodă pentru tratarea evenimentului care întoarce același motor web sau unul diferito clasa PopupFeatures conţine proprietăţile unei ferestre proeminente
webEngine.setCreatePopupHandler(new Callbak<PopupFeatures, WebEngine>() {@Overridepublic WebEngine call(PopupFeatures configuration){
// ...}
});
informaţiile cu privire la navigare sunt stocate în memorieo persistenţa trebuie implementată explicit prin java.net.ResponseCache
istoricul navigăriloro getHistory().getEntries() – informații despre pagină (titlu, URL), data accesăriio go() apelată pe o intrare are un efect similar cu load()
10/31/2014
25
Conținut pentru pagini Internet(cont’d) execuția de cod JavaScript în JavaFX prin executeScript()
o rezultatul execuției este un obiect java.lang.Object Int32 ‐> java.lang.Integer
valori numerice ‐> java.lang.Double
valori șir de caractere ‐> java.lang.String
valori adevărat/fals ‐> java.lang.Boolean
publicarea unui obiect JavaFX cu atributele și metodele publice vizibile în JavaScript prin JSObject.setMember()
o apelată într‐o metodă de tratare asociată evenimentului de încărcare a paginii
o atributele și metodele publice definite în JavaFX vor fi accesibile din JavaScriptwebEngine.getLoadWorker().stateProperty().addListener(
(ObservableValue<? extends State> observableValue, State oldState, State newState) ‐> {
if (newState == State.SUCCEEDED) {
JSObject jsObject = (JSObject)webEngine.executeScript("window");
jsObject.setMember("myObject", new MyClass());
}
}
);
// JavaScript interface object
public class MyClass {public void myMethod() {
// ...
}}
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐<a href="about:blank" onclick="myObject.myMethod()">...</a>
Conținut pentru pagini Internet(cont’d) meniuri contextuale activate implicit – setContextMenuEnabled()
WebEngine.print() – tipărirea conținutului unei pagini Interneto PrinterJob.createPrinterJob() – întoarce null dacă nu există nici o imprinantă configurată pe platforma respectivă
o endJob() – asigură că procesul de tipărire a fost încheiat
o parametri: collation, copies, pageLayout, pageRanges, paperSource, printColor, printResolution, printQuality, printSlides
TabPane – mecanism de includere a mai multor navigatoare
Mecanisme de dispunere a conținutului containere – gestiunea interfeței cu utilizatorul
o componentele interfeței grafice își modifică în mod automat coordonatele și dimensiunea în cazul modificării dimensiunii ferestrei
tipuri disponibileo BorderPane – 5 regiuni pentru poziționarea nodurilor: sus, jos, stânga, dreapta, centru sus – meniu, jos – bară de stare, stânga – panou de navigare, dreapta – informațiii suplimentare, centru –
conținutul propriu‐zis
spațiu prea mic – regiuni suprapuse, spațiu prea mare – alocat zonei centrale
metode: setTop(), setBottom(), setLeft(), setRight(), setCenter()
o HBox / VBox mecanism de dispunere a nodurilor într‐un singur rând / coloană
metode:
setPadding() –> Insets: distanțele față de cele patru laturi ale containerului
setSpacing() – distanțele dintre elementele componente
setMargin() –> Insets: spațiu suplimentar în jurul unui control grafic
add() / addAll() – asocierea unor controale grafice (lista observabilă a componentelor getChildren())
10/31/2014
26
Mecanisme de dispunere a conținutului(cont’d) tipuri disponibile
o StackPane – nodurile dispuse într‐o stivă (nodurile vechi dispuse peste nodurile vechi) suprapunerea unui text peste o imagine / suprapunerea mai multor forme pentru obținerea unor
forme complexe
metode: setPos() – modul de poziționare a componentelor în cadrul containerului, setMargin() – plasarea fiecărui element grafi în parte
o GridPane – dispunere sub formă tabelară, un nod putând ocupa mai spațiul aferent mai multor celule util în cazul formularelor
proprietăți: gridLinesVisible – delimitează liniile și coloanele
metode
o setHgap() / setVgap() – valori întregi indicând distanțele propriu‐zise
o setPadding() – distanța față de marginile containerului
o add() / addAll() – asocierea unui control grafic la obiectul GridPane (coloana, linia, numărul coloanelor, numărul liniilor pe care le ocupă)
o RowConstraints / ColumnConstraints – setHalignment() / setValignment(), HPos / VPos
Mecanisme de dispunere a conținutului(cont’d) tipuri disponibile
o FlowPane – dispunere continuă, în funcție de orientare (verticală – în coloane, orizontală – în rânduri) și de limitele mecanismului de dispunere (înălțime, lățime)
o TilePane – matrice în care fiecare element are aceeași dimensiune, dispunere orizontală (pe rânduri) / verticală (pe coloane), limitându‐se la lățimea / înălțimea disponibile metode: setPrefRows(), setPrefColumns() – specifică dimensiunile unei coloane
o AnchorPane – raportarea poziției unui nod la marginile de sus, jos, stânga, dreapta, centru poziția unui nod poate fi specificată în funcție de mai multe elemente de referință
un element de referință poate servi drept repet pentru mai multe noduri
metode: setTopAnchor(), setBottomAnchor(), setLeftAnchor(), setRightAnchor(), setCenterAnchor()
Mecanisme de dispunere a conținutului(cont’d) dimensiunile unui control grafic – determinate în general de conținut, pentru a fi vizibil în totalitate și de constrângerile containeruluio metode dimensiuni minime: setMinWidth() / setMinHeight() / setMinSize()
dimensiuni maxime: setMaxWidth() / setMaxHeight() / setMaxSize()
dimensiuni preferate: setPrefWidth() / setPrefHeight()
o dimensiuni constante: Control.USE_PREF_SIZE (dimensiuni minime / maxime), specificarea unor dimensiuni preferate
o redimensionarea la spațiul disponibil: Double.MAX_VALUE (dimensiuni minime / maxime)
o alinierea: setAlignment() VPos – aliniere verticală
HPos – aliniere orizontală
Pos – aliniere verticală și orizontală (VALIGN_HALIGN; Pos.CENTER)
10/31/2014
27
Foi de stil aspectul elementelor de interfață cu utilizatorul
specificația 2.1 W3C CSS + actualizări din versiunea 3
modena.css – foaia de stil folosită implicit
asocierea unui stilo setStyle() – listă de tipul atribut:valoare separate prin ; atribut – denumirea elementului de stil (prefixat cu ‐fx‐)
valoare – caracteristica asociată, având o semantică asociată
o scene.getStyleSheets().add(“custom_style.css”) customControl.getStyleClass().add(“custom‐control”) definiția unui stil – denumire sa, prefixată de . (selector / clasă de stil), serie de reguli incluse între {}
.custom‐control {
‐fx‐font: 12px "Arial";
‐fx‐padding: 5;
‐fx‐background‐color: beige;
}
o rezoluția = 96 dpi, 1 px = 0,75pto stil pentru un anumit control – identificatorul controlului, prefixat de #o stil pentru fiecare stare a unui control – denumirea controlului, :, denumirea stării
Gestiunea evenimentelor mecanisme de a transmite aplicației acțiunile realizate de utilizator
o javafx.event.Event – sau subclasele acesteia
tip eveniment – instanță a clasei EventType, organizate ierarhic (Event.ROOT / Event.ANY); subtipul ANY al fiecărui nivel desemnează orice eveniment
sursa eveniment – nodul care are asociat mecanismul de tratare al evenimentului, este modificată de‐a lungul lanțului de propagare
tinta eveniment – instanta a clasei EventTarget (sau a oricarei subclase) pe lantul de transmitere construit de metoda buildEventDispatchChain()
o clasele Window, Scene, Node implementează EventTarget, nu este necesar să stabilească lanțul de transmitere
Gestiunea evenimentelor(cont’d) lanț de propagare a unui eveniment
o selecția tintei
o selecția parcursului urmat de eveniment
o capturarea propriu‐zisă
o întoarcerea la nodul sursă
selecția tinteio tastatură – nodul ce deține controlul
o mouse – nodul de la locația cursorului / punctul de atingere
o gesturi – nodul din centrul acțiunilor utilizatorului, la începutul gestului
o glisare – nodul din centrul acțiunilor utilizatorului, considerându‐se întregul parcurs; trackpad – nodul de la locația cursorului
o atingere pe dispozitive cu ecran tactil – nodul aflat la locația primei apăsări; metodele grab(node) / ungrab() pot fi precizate într‐un anumit punct dintr‐un filtru de evenimente / mecanism de tratare a evenimentelor
10/31/2014
28
Gestiunea evenimentelor(cont’d) stabilirea parcursului urmat de eveniment
o construit de metoda buildEventDispatchChain()
o contine în mod obligatoriu obiectele Stage și Scene a nodului respectiv
o ruta poate fi modificată după cum filtrele / metodele de tratare a evenimentelor apelează metodele consume() / grab()
capturarea propriu‐zisă (event capturing phase)o nod rădăcină → nod țintă
o se pot defini filtre ce pot consuma evenimentul
întoarcerea la nodul sursă (event bubbling phase)o nod nta → nod radacina
o se pot defini metode de tratare ce pot consuma evenimentul
Gestiunea evenimentelor(cont’d) filtre și metode de tratare – implementări ale EventHandler
filtru – executat în etapa de capturare propriu‐zisăo un părinte poate implementa filtre pentru mai mulți fii
o un nod poate avea asociate mai multe filtre, executate în ordinea dată de ierarhia tipului de evenimente (cele specifice înaintea celor generice)
metodă de tratare – executată în etapa de întoarcere la nodul rădăcinăo un fiu poate implementa o metodă de tratare pentru mai mulți părinți
o evenimentele specificate prin metodele de oportunitate se execută ultimele
metoda consume() anunță faptul că procesarea pentru evenimentul respectiv s‐a încheiat
Gestiunea evenimentelor(cont’d) mecanism de oportunitate (eng. convenience method)◦ asociază metode de tratare
◦ sunt definite în clasa Node, fiind disponibile pentru toate subclasele lor
◦ sintaxa
setOnEventType(EventHandler<? super event‐class> value)
◦ event‐type – tipul evenimentului gestionat
◦ event‐class – clasa care definește tipul de eveniment (acceptă o metodă de tratare fie pentru clasa care definește tipul de eveniment, fie pentru una din superclasele acesteia)
◦ exempletableContent.setOnMouseClick(new EventHandler<MouseEvent>() {
@Override
public void handle(MouseEvent event) {
// …
}
});
tableContent.setOnMouseClick(null);
10/31/2014
29
Gestiunea evenimentelor(cont’d)
ACŢIUNEA UTILIZATORULUI TIP DE EVENIMENT CLASASe apasă o tastă de pe tastatură. KeyEvent Node, Scene
Mouse‐ul este mişcat sau se apasă un buton de pe mouse. MouseEvent Node, Scene
Se produce o secvenţă de acţiuni care implică apăsarea unui buton de pe mouse, mişcarea mouse‐ului urmată de
eliberarea butonului.
MouseDragEvent Node, Scene
Se transmite conţinut printr‐o metodă alternativă de introducere a caracterelor (limbă ce utilizează alte tipuri de caractere) InputMethodEvent Node, Scene
Un obiect este mutat între locaţii prin selectarea, transportarea şi deselectarea sa. DragEvent Node, Scene
Obiectul este derulat. ScrollEvent Node, Scene
Se produce un gest de tip rotaţie asupra obiectului. RotateEvent Node, Scene
Se produce un eveniment de tip derulare asupra unui obiect. SwipeEvent Node, Scene
Pe ecranul tactil, este atinsă locaţia la care se află un obiect. TouchEvent Node, Scene
Se produce un gest ce implică modificarea rezoluţiei asupra obiectului respectiv. ZoomEvent Node, Scene
Este solicitată vizualizarea meniului contextual. ContextMenuEvent Node, Scene
Butonul este apăsat.
Lista derulantă este vizibilă sau este ascunsă.
Elementul unui meniu este selectat.
ActionEvent ButtonBase,
ComboBoxBase,
ContextMenu,
MenuItem,
TextField
Se editează elementele dintr‐un obiect de tip listă, tabel sau arbore. ListView.EditEvent
TableColumn.CellEditEvent
TreeView.EditEvent
ListView
TableColumn
TreeView
Obiectul de redare a conţinutului multimedia întâlneşte o eroare. MediaErrorEvent MediaView
Meniul este vizibil sau ascuns. Event Menu
O fereastră pop‐up este ascunsă. Event PopupWindow
Panoul este închis sau selectat. Event Tab
Fereastra e închisă, vizibilă, ascunsă WindowEvent Window
Gestiunea evenimentelor(cont’d)node.addEventFilter(MouseEvent.MOUSE_CLICKED,
new EventHandler<MouseEvent>() {
public void handle(MouseEvent) { ... };
});
EventHandler filter = new EventHandler(<InputEvent>() {
public void handle(InputEvent event) {
// ...
event.consume();
}
node1.addEventFilter(MouseEvent.MOUSE_PRESSED, filter);
node2.addEventFilter(MouseEvent.MOUSE_PRESSED, filter);
node.addEventFilter(KeyEvent.KEY_PRESSED, filter);
node.removeEventFilter(KeyEvent.KEY_PRESSED, filter);
Gestiunea evenimentelor(cont’d)node.addEventHandler(DragEvent.DRAG_ENTERED,
new EventHandler<DragEvent>() {
public void handle(DragEvent) { ... };
});
EventHandler handler = new EventHandler<InputEvent>() {
public void handle(InputEvent event) {
// ...
event.consume();
}
node1.addEventHandler(DragEvent.DRAG_EXITED, handler);
node2.addEventHandler(DragEvent.DRAG_EXITED, handler);
node.addEventHandler(MouseEvent.MOUSE_DRAGGED, handler);
node.removeEventHandler(DragEvent.DRAG_EXITED, handler);
10/31/2014
30
Gestiunea evenimentelor(cont’d)
GEST DESCRIERE EVENIMENTE GENERATE
RotaţieMişcarea unui deget în jurul altuia în sensul acelor de
ceasornic sau în sens contrar acelor de ceasornic.
ROTATION_STARTED
ROTATE
ROTATION_FINISHED
DerulareMişcare de derulare, pe verticală (sus/jos) sau pe
orizontală (stânga/dreapta).
SCROLL_STARTED
SCROLL
SCROLL_FINISHED
Dacă se foloseşte rotiţa de mouse
se generează doar evenimentul
SCROLL.
Parcurgere
Mişcare de parcurgere de‐a lungul ecranului la stânga,
dreapta, în sus sau în jos. Mişcarea pe diagonală nu este
recunoscută ca parcurgere.
SWIPE_LEFT, SWIPE_RIGHT
SWIPE_UP, SWIPE_DOWN
Pentru fiecare gest se generează un
singur eveniment de parcurgere.
Mărire/MicşoareDepărtarea a două degete pentru mărire, respectiv
apropierea lor pentru micşorare.
ZOOM_STARTED
ZOOM
ZOOM_FINISHED
Gestiunea evenimentelor(cont’d) metode de verificare pentru ecranele tactile
o isSynthesized() – evenimentele au fost generate de alte gesturi
o isDirect() – evenimentul nu a fost generat de alt gest
o isInertia() – evenimentul nu s‐a generat ca urmare a inerției unui gest
tratare individuală a evenimentelor (fără gesturi) – TouchEvent
o tipuri: TOUCH_PRESSED, TOUCH_MOVED, TOUCH_STATIONARY, TOUCH_RELEASED
o punctul de contact – TouchPoint (coordonate, stare, nodul țintă)
o numărul de apăsări
o lista punctelor de contact
o identificatorul mulțimii de evenimente – fiecare set de evenimente are un identificator unic incrementat pentru fiecare mulțime asociată unei operații de apăsare
metodele grab / ungrab – elementele ce procesează evenimentul devin ținta acestuia, îl transmit altui nod sau îl detașează
Gestiunea evenimentelor(cont’d) operații de tip drag and drop (transfer între sursa și ținta gestului, aparținând aceleiași aplicații sau unor aplicații diferite, inclusiv non‐JavaFX) – javafx.scene.input.DragEvent
◦ moduri de transfer (TransferMode): COPY, MOVE, LINK, ANY
◦ sursa și ținta trebuie să suporte ambele tipul operației
◦ sursa◦ DRAG_DETECTED→ startDragAndDrop()
◦ DRAG_DONE – operații suplimentare pentru anumite moduri de transfer
◦ ținta◦ DRAG_OVER→ acceptTransferModes() (verifică tipul de date pe care îl conține
obiectul transferat)
◦ DRAG_ENTERED, DRAG_EXITED→ getDragboard() – conținutul, getGestureSource() –nodul sursă
◦ DRAG_DROPPED→ setDropCompleted() – marcarea terminării transferului
10/31/2014
31
Conținut MultimediaEfecte Vizuale pachetul javafx.scene.effect, derivate din clasa Effect
Blend – combinarea mai multor surseo modalități predefinite (BlendMode): SRC_ATOP, MULTIPLY, SRC_OVER
o setBlendMode() intrarea de nivel superior (nodul care este redat)
intrarea de nivel inferior (elementele care sunt sub acesta)
• se includ toate elementele inferioare (ordinea Z)
• procesul este terminat dacă grupul are definită o modalitate de combinare
• dacă grupul are modalitatea de combinare implicită, elementele aflate sub grup sunt incluse recursiv, folosind aceleași reguli
• dacă s‐a ajuns la nodul rădăcină, se include fundalul scenei
Bloom – efect de strălucire asupra porțiunilor de imagine deschiseo setTreshold() – definește un prag (cuprins între 0.0 și 1.0)
Conținut MultimediaEfecte Vizuale (cont’d) Blur – efect de estompare
o BoxBlur – nucleu de filtrare de tip cutie• setWidth(), setHeight() – valori de configurare ale ambelor dimensiuni (independente) pentru controlul cantității de
estompare
• setIterations() – calitatea estompării obținute
o MotionBlur – efect de estompare de tip Gauss setRadius(), setAngle()
o GaussianBlur – algoritm Gauss setRadius() ‐ posibilitatea de configurare a razei
DropShadow – umbră a conținutului pe care este aplicato setColor() – culoarea mai deschisă cu câteva nuanțe decât culoarea de fundal
o setRadius() – aceeași orientare la toate obiectele din cadrul scenei pentru a da senzația unei surse de lumină dintr‐o unică direcție
o setOffsetX(), setOffsetY()
InnerShadow – umbră înăuntrul marginilor conținutului pe care este aplicato setColor(), setRadius(), setOffsetX(), setOffsetY()
Reflection – copie reflectată a conținutului pe care este aplicat, plasată sub acestao setTopOpacity(), setBottomOpacity(), setFraction(), setTopOffset()
Conținut MultimediaEfecte Vizuale (cont’d) Lightning – simulează o sursă de lumină care acționează asupra conținutului pe care este aplicat
o setLight() – sursa de lumină Light.Distant – sursă de lumină distantă
Light.Point – sursă de lumină poziționată la coordonatele (x, y, z)
Light.Spot – sursă de lumină poziționată la coordonatele (x, y, z) cu o direcție și un focus
o setSurfaceScale() – suprafața de scalare
o setDiffuseConstant() – constanta de difuzie
o setSpecularConstant(), setSpecularExponent() – constanta și exponentul de reflexie
Perspective – transformă un obiect bidimensional în spațiul tridimensional, realizând o transformare între două dreptunghiuri
o coordonatele (x, y) pentru cele patru colțuri setLlx(), setLly() – stânga jos
setLrx(), setLry() – dreapta jos
setUlx(), setUly() – stânga sus
setUrx(), setUry() – dreapta sus
o nu sunt actualizate coordonatele corespunzătoare evenimentelor asociate!!!
Înlănțuirea Efectelor – inputProperty / setInput(): alt efect aplicat înaintea realizării efectului pentru care se apelează
10/31/2014
32
Conținut MultimediaTransformări 2D / 3D pachetul javafx.scene.transform
derivate din clasa Transform (subclasa Affine)o bazate pe algebra euclidiană
o asociere liniară între două sisteme de coordonate – conservă ortogonalitatea și paralelismul liniilor
redarea obiectelor 3D – tehnica Z‐bufferingo un obiect solid aflat în prim‐plan blochează elementele din spatele său
o setDepthTest() – DepthTest: ENABLE / DISABLE
realizate de‐a lungul celor trei axe de coordonate (x, y, z) ‐> transformări 3D (+ camera de perspectivă)
aplicate unui singur nod / unui grup de noduri
pot fi realizate independent sau împreună
Conținut MultimediaTransformări 2D / 3D (cont’d) Translate – mută un nod dintr‐o locație în alta, de‐a lungul axelor, relativ la poziția sa
o setX(), setY(), setZ()
o pe controlul grafic: setTranslateX(), setTranslateY(), setTranslateZ()
Rotate – mută un nod în jurul unui punct considerat pivot al sceneio setAxis() – axa din sistemul de coordonate în jurul căreia se va realiza rotația (Rotate.X_AXIS, Rotate.Y_AXIS, Rotate.Z_AXIS)
o setAngle() – unghiul cu care se realizează rotația
o setPivotX(), setPivotY(), setPivotZ() – coordonatele punctului pivot
Scale – face ca un nod să apară mai mic sau mai mare (funcție de factorul de scalare, cu care se multiplică coordonatele axelor de coordonate)
o setX(), setY(), setZ() – factorii de multiplicare de‐a lungul celor trei axe de coordonate
Shear – rotește o axă astfel încât axele Ox și Oy să nu mai fie perpendiculareo setX(), setY() – factorii de multiplicare cu care sunt deplasate coordonatele în sensul pozitiv al axelor
Combinarea Transformărilor – lanț de transformări: add() / addAll() apelată pentru lista observabilă de transformări asociată nodului curent (getTransforms())
Conținut MultimediaAnimații animații– javafx.animation.Animation
o Transition ‐ tranziții: animații având asociată intern o anumită cronologie FadeTransition – schimbă opacitatea de‐a lungul unei secvențe de timp
• constructor: durata, nodul asupra căruia se aplică
• setFromValue(), setToValue(), setAutoReverse(), setCycleCount(), play()
PathTransition –mută un nod de‐a lungul unei căi intr‐o perioadă de timp
• setPath() – obiecte CubicCurveTo: curbă Bezier între elementul curent și un punct (x,y) trecând prin alte 2 puncte de control (controlX1, controlY1), (controlX2, controlY2)
• orientarea – PathTransition.OrientationType
FillTransition, StrokeTransition – schimbă culoarea suprafeței de cumplere / conturului unui nod; valorile limită trebuie să aibă semnificația unor culori
PauseTransition – perioadă de așteptare între tranziții (apelată pe Animation.onFinished())
RotateTransition, ScaleTransition, TranslateTransition – rotirea / scalarea / translatarea unui nod cu un anumit unghi / cu anumite valori pe axele Ox, Oy, Oz / între (x1, y1, z1) → (x2, y2, z2)
ParallelTransition – tranzitiile sunt executate simultan, transformările sunt adăugate cu getChildren().addAll()
SequentialTransition – tranzițiile sunt executate secvențial, în ordinea în care au fost adăugate
10/31/2014
33
Conținut MultimediaAnimații (cont’d)o Timeline ‐ animații bazate pe timp: nodul este definit de anumite proprietăți ce pot fi modificate automat între valori extreme (cadre cheie) funcționalități: oprire (cu sau fără reluare din punctul respectiv), redare în sens invers, repetare
KeyFrame: durata animației, metoda de tratare a evenimentului de terminare a aplicației, obiecte KeyValue
KeyValue: atributul de modificat în intervalul respectiv, valoarea cu care se modifică
o Interpolare (clasa Interpolator) – poziții intermediare ale obiectului pentru care se realizează animația, specificat pentru un obiect KeyValueo predefinită (LINEAR (implicit), DISCRETE, EASE_BOTH, EASE_IN, EASE_OUT)
o definite de utilizator – implementare a metodei curve(), folosită pentru determinarea fracției din metoda interpolate()
Conținut MultimediaRedarea conținutului audio/video pachetul javafx.scene.media
formate suportate – decodificarea unor tipuri de compresii audio‐video se bazează pe motoarele multimedia ale sistemelor de operareo audio: MP3, AIFF, WAV, MPEG‐4/AACo video: FLV, MPEG‐4 (H.264/AVC)
funcționalitățio redarea conținutului multimedia în formatele suportate play, pause, stop, volume, mute, balance, equalizer
redarea de conținut din Internet – parametrii de redare (rata de biți / rezoluția) ajustați în funcție de condițiile respective
o suport pentru protocoalele HTTP / FILEo descărcarea conținutului în mod progresiv (folosirea unei zone de memorie tampon –eng. buffer)
o căutareo comutarea între fluxuri alternative (listă de redare, listă de segmente în care fluxul este corupt)
Conținut MultimediaRedareaconținutului audio/video (cont’d) Media – resursămultimedia + metadata
MediaPlayer – redarea conținutuluio AUTO_PLAY, play()o VOLUME (0.0 – 1.0) – nivelul de redareo BALANCE (‐1.0 – 0 – 1.0) – echilibru stânga‐dreaptao pause(), stop()o getStatus() – starea obiectului MediaPlayer Status: UNKNOWN, HALTED, PLAYING, PAUSED, READY, STOPPED
o seek() – redarea conținutului se face de la momentul indicat ca parametruo getStartMediaTime() – momentul de început al conținutului multimediao setCycleCount() – numărul de redărio evenimente: terminare conținut, stagnare datorită fluxului prea lent, excepții MediaErrorEvent
o mecanisme de oportunitate: setOnPlaying(), setOnPaused(), setOnReady(), setOnEndOfMedia()
10/31/2014
34
Conținut MultimediaRedareaconținutului audio/video (cont’d) MediaView – obiect Node ce încorporează MediaPlayer, suportând animații și efecteo mediaPlayer – obiectul MediaPlayer care redă conținutul
o onError() – metoda de tratare asociată unei excepții
o preserveRatio() – păstrarea raportului lățime/înălțime
o smooth() – algoritm de filtrare performant pentru scalare, conținutul multimedia este scalat la dimensiunile MediaView (fitHeight / fitWidth)
o viewport – cadrul de vizualizare al conținutului multimedia
o x, y – originea obiectului
o trebuie să i se atribuie controale grafice pentru a avea funcționalitatea oricărui produs ce redă conținut multimedia cronometru
bară de progres
butoane pentru redare conținut / oprire cu posibilitatea (sau nu) a reluării de la punctul respectiv, reglarea volumului
Conținut MultimediaRedareaconținutului audio/video (cont’d)
Scene scene = new Scene(new Group(), 500, 500);
String source = getParameters().getRaw().get(0);
Media media = new Media(source);
// Media media = new Media(MEDIA_URL);
MediaPlayer mediaPlayer = new MediaPlayer(media);
mediaPlayer.setAudio(true);
MediaView mediaView = new MediaView(mediaPlayer);
((Group)scene.getRoot()).getChildren().add(mediaView);
Dezvoltarea interfeței graficeîn mod vizualFXML limbaj bazat pe XML ce oferă structura necesară pentru dezvoltarea unei interfețe complexe cu utilizatorul, separând‐o de logica aplicației
nu respectă în mod necesar o schemăo clasele JavaFX ↔ elemente
o proprietăți JavaBeans ↔ atribute
arhitectura MVC: obiecte domeniu Java – model, FXML – vizualizare, clase Java (ce implementează Initializable) – control
util pentru grafuri de scene foarte complexe, de dimensiuni mari, formulare, tabele, animații complicate = !!! interfețe statice
o interfețe dinamice ‐ scripturi
beneficiio sintaxă similară XML
o nu este necesara compilarea aplicației
o graful de scene este mai transparent facilitând construirea și întreținerea lui
o localizare
o compatibilitate cu orice limbaj JVM: Java, Scala, Clojure
o se pot construi servicii, sarcini sau obiecte domeniu
o Integrare cu limbaje de tipul JavaScript
o se pot construi interfețe grafice complexe fără cunoștințe ale unui limbaj de programare de nivel înalt (Java)
10/31/2014
35
Dezvoltarea interfeței graficeîn mod vizualFXML (cont’d) caracteristici JavaFX 2.2
o prefixarea caracterelor speciale cu \
o variabilă implicită pentru controller, documentează spațiul de nume, legătură cu interfața grafică
o constructor pentru FXMLLoader, alternativă la metoda statică load()
o particularizarea instanțierii clasei controller, prin specificarea unei fabrici în obiectul FXMLLoader către care se deleagă construirea clasei
o foi de stil ușor de utilizat
o definirea metodelor de tratare a evenimentelor în clasa controller, fără parametri
o eticheta <fx:constant> facilitaeaza procesul de cautare al constantelor java.lang.Double.NEGATIVE_INFINITY↔ <Double fx:constant=“NEGATIVE_INFINITY” />
o acces îmbunătățit la subclasele care asigură controlul unor noduri definite ca elemente ale scenei din FXML – se construiesc subclasele care asigură controlul în cadrul metodei initialize())
o initializarea claselor care asigură controlul se face prin mecanismul de reflectare (apelează automat metoda initialize() – publică sau adnotată cu @FXML)
o ușurința în realizarea de noi controale prin metodele setRoot() și setController()prin care codul sursă ce le apelează poate stabili valori, astfel că aceste operații nu mai trebuie realizate de FXMLLoader
Dezvoltarea interfeței graficeîn mod vizualFXML (cont’d)
<?xml version="1.0" encoding="UTF‐8"?>
<?import java.lang.*?>
<?import java.net.*?>
<?import java.util.*?>
<?import javafx.geometry.*?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.paint.*?>
<AnchorPane fx:id="AnchorPane" maxHeight="‐Infinity" maxWidth="‐Infinity" minHeight="‐Infinity" minWidth="‐Infinity" prefHeight="128.0" prefWidth="336.0000999999975" style="‐fx‐background‐color: beige;" xmlns="http://javafx.com/javafx/8" xmlns:fx="http://javafx.com/fxml/1" fx:controller="ro.pub.cs.aipi.lab03.controller.Authentication">
<children>
<GridPane layoutX="15.0" layoutY="8.0" prefWidth="309.0">
<children>
<Label text="User name:" GridPane.columnIndex="0" GridPane.rowIndex="0" />
<Label text="Password:" GridPane.columnIndex="0" GridPane.rowIndex="1" />
<TextField fx:id="usernameTextField" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="0" />
<PasswordField fx:id="passwordTextField" prefWidth="200.0" GridPane.columnIndex="1" GridPane.rowIndex="1" />
<HBox prefHeight="100.0" prefWidth="200.0" spacing="5.0" GridPane.columnIndex="1" GridPane.columnSpan="2147483647" GridPane.rowIndex="2">
Dezvoltarea interfeței graficeîn mod vizualFXML (cont’d)
<children>
<Button mnemonicParsing="false" onAction="#okButtonHandler" text="OK" />
<Button mnemonicParsing="false" onAction="#cancelButtonHandler" text="Cancel" />
</children>
<padding>
<Insets bottom="5.0" left="5.0" right="5.0" top="5.0" />
</padding>
</HBox>
<HBox prefHeight="100.0" prefWidth="200.0" GridPane.columnIndex="0" GridPane.columnSpan="2147483647" GridPane.rowIndex="3">
<children>
<Label fx:id="errorLabel" textFill="RED" />
</children>
</HBox>
</children>
<columnConstraints>
<ColumnConstraints hgrow="SOMETIMES" maxWidth="155.0" minWidth="10.0" prefWidth="114.0" />
<ColumnConstraints hgrow="SOMETIMES" maxWidth="206.0" minWidth="10.0" prefWidth="195.0" />
</columnConstraints>
<rowConstraints>
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" valignment="CENTER" vgrow="SOMETIMES" />
<RowConstraints maxHeight="30.0" minHeight="10.0" prefHeight="30.0" vgrow="SOMETIMES" />
</rowConstraints>
</GridPane>
</children>
</AnchorPane>
10/31/2014
36
Dezvoltarea interfeței graficeîn mod vizualFXML (cont’d)
elementul rădăcină specifică proprietatea fx:controller (clasa care se va ocupa de gestiunea interfeței grafice reprezentată de fișierul .fxml) controalele injectate în codul sursă au specificat un identificator fx:id
o trebuie adnotate cu @FXML
o pot fi utilizate după încărcarea scenei și apelul metodei initialize()
metodele de tratare a avenimentelor trebuie precizate explicito prefixate de #
o clasa controller trebuie să le implementeze în mod obligatoriu (adnotate cu @FXML)
Dezvoltarea interfeței graficeîn mod vizualFXML (cont’d) încărcarea unei scene din cadrul unui fișier FXML
try {applicationScene = new
Scene((Parent)FXMLLoader.load(getClass().getResource(Constants.AUTHENTICATION_FXML)));} catch (Exception exception) {
System.out.println ("An exception has occured: "+exception.getMessage());if (Constants.DEBUG)
exception.printStackTrace();}
metodele pentru tratarea evenimentelor și atributele private trebuie adnotate cu @FXML
@FXML private TextField usernameTextField;@FXML private PasswordField passwordTextField;@FXML private Label errorLabel; @FXML protected void okButtonHandler(ActionEvent event) {
// ...}
@FXML protected void cancelButtonHandler(ActionEvent event) {
// ...}
Dezvoltarea interfeței graficeîn mod vizualScene Builder 2.0 versiuni disponibile pe Windows (.msi), MacOS X (.dmg), Linux (.deb și tar.gz) –32/64 biți
caracteristicio interfațăWYSIWYG de tip drag and drop – dezvoltarea rapidă a unui UI fără a scrie cod sursăo integrare facilă cu orice IDE pentru Javao generare automată a codului FXML, separat de logica aplicației și foi de stilo editare în timp real și funcționalități de previzualizare, modificările sunt vizibile pe măsură ce sunt implementate, fără a rula aplicația
o acces la intreaga bibliotecă de controale JavaFX 8o Specificare a unor elemente de interfață grafică definite de utilizator (.jar, .fxml, importate în panourile ierarhie / conținut)
o suport 3D – proprietăți din panoul de inspectare (fără Material / Mesh); obiectele nu pot fi create, doar vizualizate
o suport pentru text particularizat – TextFlow ce poate conține mai multe obiecte Text, gestionate autonom
o JavaFX Scene Builder Kit – API pentru integrarea funcționalităților în interfața grafică a unor IDE‐uri ca NetBeans, Eclipse, IntelliJ
o suport pentru CSSo disponibilitate pe mai multe sisteme de operare, consistențăo gratuitate pentru toate tipurile de utilizatori
10/31/2014
37
Dezvoltarea interfeței graficeîn mod vizualScene Builder 2.0 (cont’d)
Dezvoltarea interfeței graficeîn mod vizualScene Builder 2.0 (cont’d)
Library: bibliotecă de componente cu care se poate construi interfața cu utilizatorulo moduri de dispunere, controale propriu‐zise
o categorii: Containers, Controls, Menu, Miscellaneous, Shapes, Charts, 3D
Documento Hierarchy: ierarhia de noduri – obiectele ce conțin alte noduri au asociate semne de + sau ‐ după cum sunt sau
nu expandate
o Controller – clasa controller asociată fișierului .fxml și componentele care au identificator unic pe baza căruia vor fi injectate în codul sursă
previzualizarea interfetei cu utilizatorulo se construiește interfața cu utilizatorul prin operații de tip drag & drop
o partea superioară: scena de grafuri pentru nodul curent
o la adăugarea unui control, obiectul părinte este evidențiat în mod deosebit
Inspector: căutarea în biblioteca de controale / interfața grafică (pentru UI complexe)
Properties: stabilirea proprietăților obiectului selectat în mod current (efecte, transformări, asocierea unor foi de stil, aliniere, vizibilitate, opacitate, orientare)
Layout: aspecte legate de modul de dispunere al nodului (dimensiuni, aliniere, poziție, transformări, limite)
❼ Code: metodele executate din clasa controller atunci când o acțiune se produce asupra interfeței respective(main, drag & drop, evenimente legate de tastatură și mouse, specifice dispozitivelor mobile)
Modele de date asociatecontroalelor JavaFX model JavaBeans pentru reprezentarea obiectelor ‐ suport pentru
o proprietățiclass MyClass {
private SomeTypeProperty myAttribute = new SomeTypeProperty();
// ...
}
setter și getter: setMyAttribute() / getMyAttribute(); myAttributeProperty()
o dependențe (modificările vizible asupra obiectului cu care se găsește în legătură) – informații din interfața grafică sincronizate cu sursa de date clase specifice tipului de date ‐ DataTypeBinding (DataType = tipul de date respectiv)
clasa Bindings
interfețe pentru notificare la modificarea / invalidarea unei valorio Observable (nu conține și valoarea) ‐> InvalidationListener (evaluare leneșă / rapidă)o ObservableValue (încapsulează valoarea) ‐> ChangeListener (evaluare rapidă)
evaluare leneșă – valoarea este calculată doar când este solicitatăMyClass myObject = new MyClass();myObject.myAttributeProperty().addListener(new ChangeListener() {
@Overridepublic void changed(Observable Value observableValue, Object oldValue, Object newValue) {
// ...}
});
10/31/2014
38
Modele de date asociatecontroalelor JavaFX (cont’d) colecții de date: javafx.collections
interfețeo ObservableList – listă ce permite ascultătorilor să identifice modificările atunci când se produc (< javafx.beans.Observable + java.util.List), FXCollections.observableList(), addListener()
o ListChangeListener – interfață ce primește modificările realizate asupra unui ObservableList
o ObservableMap – asocieri cheie unică – valoare ce permite ascultătorilor să identifice modificările atunci când se produc (< javafx.beans.Observable + java.util.Map), FXCollections.observableMap(), addListener()
o MapChangeListener interfață ce primește modificările realizate asupra unui ObservableMap
claseo FXCollections – clasă de utilitare cu aceeași funcționalitate ca java.util.Collections
o ListChangeListener.Change – schimbare asupra unui obiect ObservableList, poate reține informații despre mai multe modificări (iterator next())
o MapChangeListener.Change – schimbare asupra unui obiect ObservableMap, poate reține informații despre o singurămodificare corespunzătoare operației put() sau remove()
Modele de date asociatecontroalelor JavaFX (cont’d)
List<String> list = new ArrayList<String>();
ObservableList<String> observableList = FXCollections.observableList(list);
observableList.addListener(new ListChangeListener() {
@Override
public void onChanged(ListChangeListener.Change change) {
while (change.next()) {
if (change.wasAdded()) {
}
if (change.wasRemoved()) {
}
if (change.wasReplaced()) {
}
if (change.wasPermutated()) {
}
}
}
});
‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐‐
Map<String,String> map = new HashMap<String,String>();
ObservableMap<String,String> observableMap = FXCollections.observableMap(map);
observableMap.addListener(new MapChangeListener() {
@Override
public void onChanged(MapChangeListener.Change change) {
}
});
Gestiunea concurențeiîn JavaFX pachetul javafx.concurrent – dezvoltarea de aplicații ce rulează pe mai multe fire de execuțieo completează setul de metode din java.util.concurrent
o viteză răspuns satisfăcătoare prin execuția sarcinilor ce consumă resurse pe fire de execuție rulate în fundal (operații ce durează mult timp pe firul de execuție al aplicației JavaFX scade responsivitatea interfeței cu utilizatorul)
interfața Workero obiect ce realizează anumite sarcini pe unul / mai multe fire de execuție
o starea sa este observabilă din firul de execuție al aplicației JavaFX READY – imediat după ce a fost creat
SCHEDULED – programat pentru o anumită sarcină
RUNNING – după ce a fost pornit (dacă este pornit direct, trece oricum prin SCHEDULED)
SUCCEEDED – sarcina este executată cu succes (proprietatea value este transmisă)
FAILED – sarcina nu a putut fi finalizată (proprietatea exception este transmisă)
CANCELED – sarcina este întreruptă de utilizator prin apelul metodei cancel()
10/31/2014
39
Gestiunea concurențeiîn JavaFX (cont’d) clasele ce implementează interfața Worker
o funcționalități pentru un fir de execuție ce comunică cu interfața grafică
o Implementează EventTarget – ascultarea evenimentelor legate de starea firelor de execuție
o Task (< java.util.concurrent.FutureTask) – definirea de sarcini asincrone logica sarcinii care trebuie executată în fundal – metoda call(): realizează operațiile și furnizează
rezultatul
updateProgress(), updateMessage(), updateTitle() – doar proprietăți publice din cadrul firului de execuție JavaFX
transmis unui fir de execuție / folosit din interfața de programare Executor / apelat prin FutureTask.run() din contextul unui fir de execuție ce rulează în fundal
trebuie să verifice dacă nu a fost înterupt isCanceled() (generază InterruptedExceptiondacă cancel() este apelat în timpul unor metode blocante)
proprietățile totalWork, workDone, progress / progressProperty – vizualizarea progresului unui obiect de tip Task
Gestiunea concurențeiîn JavaFX (cont’d) clasele ce implementează interfața Worker
o Service – execuția sarcinilor asincrone execută un obiect de tip Task pe unul sau mai multe fire de execuție care rulează în fundal
asigură interacțiunea dintre firele de execuție care rulează în fundal și firul de execuție al aplicației JavaFX
operații: pornire, repornire, oprire
pe parcursul rulării sale furnizează starea proceselor din fundal
rulare: Executor / fir de execuție de tip daemon / ThreadPoolExecutor
WorkerStateEvent – modificarea stării unui obiect Workero ANY, WORKER_STATE_CANCELLED, WORKER_STATE_FAILED, WORKER_STATE_READY, WORKER_STATE_RUNNING, WORKER_STATE_SCHEDULED, WORKER_STATE_SUCCEEDED
o cancelled(), failed(), ready(), running(), scheduled(), succeeded() –metode pentru tratarea tranzițiilor dintre stări
Recomandări referitoare la implementarea aplicațiilor JavaFX nivelul de logică a aplicației
o procese de lungă durată → ecrane animate care indică progresulo denumiri simbolice pentru pachete – mentenanță mai facilăo implementarea arhitecturii MVC prin intermediul fișierelor FXML pentru definirea sceneloro rularea sarcinilor ce implică volum mare de date pe fire de execuție ce rulează în fundal
nivelul de prezentareo organizarea interfeței grafice prin panouri de dispunereo aceleași dimensiuni pentru controale similare (încadrarea în panouri VBox / indicarea dimensiunilor maxime și dispunerea într‐un TilePane)
o mentinerea nodurilor la dimensiunile preferate (Control.USE_PREF_SIZE) pentru prevenirea comportamentelor nedorite la redimensionare
o prevenirea operației de redimensionare prin indicarea dimensiunilor minime, maxime, preferate la aceeași valoare
o alinierea nodurilor si panourilor prin metoda setAlignment() ce primește constante din pachetul javafx.geometry (HPos / VPos / Pos)
o folosirea foilor de stil