Differences
This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
laboratoare:laborator03 [2014/10/27 12:41] Andrei Roșu-Cojocaru [Activitate de Laborator] |
laboratoare:laborator03 [2014/11/17 20:48] (current) Andrei Roșu-Cojocaru [Soluții] |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ===== Obiective ==== | ===== Obiective ==== | ||
| + | * familiarizarea cu facilitățile oferite de tehnologia JavaFX pentru dezvoltarea de interfețe cu utilizatorul în comparație cu alte soluții existente; | ||
| + | * identificarea principalelor componente din cadrul arhitecturii JavaFX; | ||
| + | * descrierea structurii generale a unei aplicații JavaFX și a firelor de execuție din contextul cărora pot fi accesate obiectele corespunzătoare controalelor grafice, respectiv interacțiunii cu utilizatorul; | ||
| + | * implementarea unei interfețe cu utilizatorul folosind Scene Builder 2.0 / FXML cu injectarea controalelor grafice / metodelor de tratare a evenimentelor în clasa controller din codul sursă; | ||
| + | * înțelegerea mecanismului de tratare a evenimentelor legate de interacțiunea cu utilizatorul în JavaFX; dezvoltarea de filtre și metode de tratare pentru diferite acțiuni ale utilizatorului; | ||
| + | * însușirea practicilor utilizate pentru dezvoltarea aplicațiilor JavaFX. | ||
| ===== Cuvinte Cheie ==== | ===== Cuvinte Cheie ==== | ||
| Line 10: | Line 16: | ||
| ===== Materiale Ajutătoare ====== | ===== Materiale Ajutătoare ====== | ||
| + | {{ :laboratoare:laborator03:aipi2014-lab03-slides.pdf }} | ||
| + | |||
| + | {{ :laboratoare:laborator03:aipi2014-lab03-slides-3pp.pdf }} | ||
| ===== JavaFX - aspecte generale ===== | ===== JavaFX - aspecte generale ===== | ||
| Line 20: | Line 29: | ||
| * **limbajul de adnotare FXML şi utilitarul SceneBuilder**. FXML este un limbaj declarativ de adnotare bazat pe XML prin intermediul căruia pot fi dezvoltate interfeţe grafice cu utilizatorul, fără a fi necesar ca aplicaţia să fie recompilată de fiecare dată când sunt modificate elemente din cadrul acesteia. În acest mod se realizează o separare între nivelul de prezentare și nivelul de logică a aplicației. SceneBuilder permite construirea interfeţei în mod vizual, generând automat şi documentul FXML asociat, acesta putând fi integrat apoi în orice mediu de dezvoltare. Astfel, nu mai este necesară decât implementarea mecanismelor de tratare a evenimentelor corespunzătoare diferitelor controale (elemente din cadrul interfeței grafice); | * **limbajul de adnotare FXML şi utilitarul SceneBuilder**. FXML este un limbaj declarativ de adnotare bazat pe XML prin intermediul căruia pot fi dezvoltate interfeţe grafice cu utilizatorul, fără a fi necesar ca aplicaţia să fie recompilată de fiecare dată când sunt modificate elemente din cadrul acesteia. În acest mod se realizează o separare între nivelul de prezentare și nivelul de logică a aplicației. SceneBuilder permite construirea interfeţei în mod vizual, generând automat şi documentul FXML asociat, acesta putând fi integrat apoi în orice mediu de dezvoltare. Astfel, nu mai este necesară decât implementarea mecanismelor de tratare a evenimentelor corespunzătoare diferitelor controale (elemente din cadrul interfeței grafice); | ||
| * **componente WebView**. Un modul ce foloseşte tehnologia WebKitHTML permite integrarea de pagini Internet în cadrul unei interfeţe grafice. De asemenea, codul JavaScript ce rulează în WebView poate accesa orice API-uri Java, la fel cum API-urile Java pot executa cod JavaScript care rulează în WebView. Există suport și pentru anumite funcționalități HTML5 (Web Sockets, Web Workers, Web Fonts) sau capabilități de tipărire; | * **componente WebView**. Un modul ce foloseşte tehnologia WebKitHTML permite integrarea de pagini Internet în cadrul unei interfeţe grafice. De asemenea, codul JavaScript ce rulează în WebView poate accesa orice API-uri Java, la fel cum API-urile Java pot executa cod JavaScript care rulează în WebView. Există suport și pentru anumite funcționalități HTML5 (Web Sockets, Web Workers, Web Fonts) sau capabilități de tipărire; | ||
| - | * **interoperabilitate cu tehnologia Swing**. Aplicaţiile Swing existente pot fi extinde cu funcţionalităţi JavaFX, ca redarea de conţinuturi grafice sau a unor pagini Internet integrate. Clasa ''SwingNode'' permite integrarea unui conținut dezvoltat folosind tehnologia Swing în cadrul aplicației JavaFX; | + | * **interoperabilitate cu tehnologia Swing**. Aplicaţiile Swing existente pot fi extinse cu funcţionalităţi JavaFX, ca redarea de conţinuturi grafice sau a unor pagini Internet integrate. Clasa ''SwingNode'' permite integrarea unui conținut dezvoltat folosind tehnologia Swing în cadrul aplicației JavaFX; |
| * **biblioteci de controale şi foi de stil**. JavaFX pune la dispoziţia programatorilor majoritatea controalelor necesare pentru dezvoltarea unei interfeţe cu utilizatorul complete (inclusiv ''DatePicker'' și ''TreeTableView''), aspectul acestora putând fi particularizat folosind tehnologii web standard ca foile de stil (//eng.// CSS – cascading style sheets), prin intermediul claselor ''Styleable*''; | * **biblioteci de controale şi foi de stil**. JavaFX pune la dispoziţia programatorilor majoritatea controalelor necesare pentru dezvoltarea unei interfeţe cu utilizatorul complete (inclusiv ''DatePicker'' și ''TreeTableView''), aspectul acestora putând fi particularizat folosind tehnologii web standard ca foile de stil (//eng.// CSS – cascading style sheets), prin intermediul claselor ''Styleable*''; | ||
| * **tema Modena** este folosită ca implicită pentru toate aplicațiile JavaFX (înlocuind tema Caspian, care poate fi utilizată prin apelul metodei ''setUserAgentStylesheet(STYLESHEET_CASPIAN)'' în metoda ''start()'' a clasei derivate din ''Application''; | * **tema Modena** este folosită ca implicită pentru toate aplicațiile JavaFX (înlocuind tema Caspian, care poate fi utilizată prin apelul metodei ''setUserAgentStylesheet(STYLESHEET_CASPIAN)'' în metoda ''start()'' a clasei derivate din ''Application''; | ||
| Line 283: | Line 292: | ||
| {{ :laboratoare:laborator03:figura04.png?nolink&700 }} | {{ :laboratoare:laborator03:figura04.png?nolink&700 }} | ||
| - | Pe lângă controalele clasice (existente în AWT şi Swing) au fost dezvoltate şi alte componente, precum ''Accordion'', ''ColorPicker'', ''Chart'' , ''DatePicker'', ''Pagination'', ''TitledPane'', ''TreeTableView''. | + | Pe lângă controalele clasice (existente în AWT şi Swing) au fost dezvoltate şi alte componente, precum ''Accordion'', ''ColorPicker'', ''Chart'', ''DatePicker'', ''Pagination'', ''TitledPane'', ''TreeTableView''. |
| - | Fiind derivate din clasa ''Node'', controalele pentru interfaţa cu utilizatorul pot fi integrate în diferite animaţii, efecte , transformări sau tranziţii în cadrul procesului de randare a scenei. | + | Fiind derivate din clasa ''Node'', controalele pentru interfaţa cu utilizatorul pot fi integrate în diferite animaţii, efecte, transformări sau tranziţii în cadrul procesului de randare a scenei. |
| === Label === | === Label === | ||
| Line 383: | Line 392: | ||
| Dimensiunea câmpului text este precizată prin metoda ''setPrefColumnCount()''. | Dimensiunea câmpului text este precizată prin metoda ''setPrefColumnCount()''. | ||
| - | Unui astfel de element i se poate asocia un text descriptiv indicând semnificaţia conţinutului, prin metoda ''setPromptText()''. Ştergerea textului conţinut de aceste obiecte se face apelând metoda ''clear()''. O astfel de funcționalitate este utilă atunci când nu se utilizează etichete împreună cu câmpurile text pentru a specifica conținutul acestora. Totuși, doar valoarea specificată de utilizator poate fi obținută prin metoda ''getText()'' asociată acestui tip de control. | + | Unui astfel de element i se poate asocia un text descriptiv indicând semnificaţia conţinutului, prin metoda ''setPromptText()''. O astfel de funcționalitate este utilă atunci când nu se utilizează etichete împreună cu câmpurile text pentru a specifica conținutul acestora. Totuși, doar valoarea specificată de utilizator poate fi obținută prin metoda ''getText()'' asociată acestui tip de control. |
| + | |||
| + | Ştergerea textului conţinut de aceste obiecte se face apelând metoda ''clear()''. | ||
| Metodele puse la dispoziţie de aceste clase sunt: | Metodele puse la dispoziţie de aceste clase sunt: | ||
| Line 912: | Line 923: | ||
| | ''Button'',\\ ''Hyperlink'',\\ ''MenuButton'',\\ ''ToggleButton'' | atingere | activează butonul | | | ''Button'',\\ ''Hyperlink'',\\ ''MenuButton'',\\ ''ToggleButton'' | atingere | activează butonul | | ||
| | ''CheckBox'' | atingere (//eng.// tap) | comută între stările selectat / deselectat | | | ''CheckBox'' | atingere (//eng.// tap) | comută între stările selectat / deselectat | | ||
| - | | ''ComboBox'' | atingere pictogramă pictogramă | afișează sau ascunde lista activă; elementul afișat în câmpul text este selectat când lista activă este vizibilă | | + | | ''ComboBox'' | atingere pictogramă | afișează sau ascunde lista activă; elementul afișat în câmpul text este selectat când lista activă este vizibilă | |
| | ::: | atingere câmp text | ♦ controale non-editabile: afișează lista activă | | | ::: | atingere câmp text | ♦ controale non-editabile: afișează lista activă | | ||
| | ::: | ::: | ♦ controale editabile: plasează cursorul în câmpul text | | | ::: | ::: | ♦ controale editabile: plasează cursorul în câmpul text | | ||
| Line 1213: | Line 1224: | ||
| </code> | </code> | ||
| - | Modul în care sunt gestionate ferestrele proeminente poate fi specificat prin intermediul unei metode de tratare care poate întoarce acelaşi motor web ca cel curent (caz în care pagina respectivă este deschisă în acelaşi navigator) sau alt motor web. Clasa ''PopupFeatures'' descrie proprietățile unei ferestre proeminente (așa cum sunt descrise de specificația JavaScript), instanța sa fiind transmis metodei de tratare a evenimentului de încărcare a unui conținut de acest tip. | + | Modul în care sunt gestionate ferestrele proeminente poate fi specificat prin intermediul unei metode de tratare care poate întoarce acelaşi motor web ca cel curent (caz în care pagina respectivă este deschisă în acelaşi navigator) sau alt motor web. Clasa ''PopupFeatures'' descrie proprietățile unei ferestre proeminente (așa cum sunt descrise de specificația JavaScript), instanța sa fiind transmisă metodei de tratare a evenimentului de încărcare a unui conținut de acest tip. |
| <code java> | <code java> | ||
| Line 1224: | Line 1235: | ||
| </code> | </code> | ||
| - | Componenta ''WebView'' reține informațiile cu privire la navigare în memorie, astfel încât acestea sunt pierdute atunci când aplicația este terminată. Persistența poate fi însă implementată în mod explicit prin clasa ''java.bet.ResponseCache''. | + | Componenta ''WebView'' reține informațiile cu privire la navigare în memorie, astfel încât acestea sunt pierdute atunci când aplicația este terminată. Persistența poate fi însă implementată în mod explicit prin clasa ''java.net.ResponseCache''. |
| Clasa ''WebEngine'' pune la dispoziţie metoda ''executeScript()'' pentru a rula o comandă JavaScript declarată în cadrul documentului încărcat în navigator la momentul de timp respectiv. Rezultatul execuției metodei este convertit la un obiect ''java.lang.Object'', pe baza următoarelor reguli: | Clasa ''WebEngine'' pune la dispoziţie metoda ''executeScript()'' pentru a rula o comandă JavaScript declarată în cadrul documentului încărcat în navigator la momentul de timp respectiv. Rezultatul execuției metodei este convertit la un obiect ''java.lang.Object'', pe baza următoarelor reguli: | ||
| Line 1261: | Line 1272: | ||
| Pentru obiectele ''WebView'', meniurile contextuale sunt activate implicit, dezactivarea lor realizându-se prin metoda ''setContextMenuEnabled()''. | Pentru obiectele ''WebView'', meniurile contextuale sunt activate implicit, dezactivarea lor realizându-se prin metoda ''setContextMenuEnabled()''. | ||
| - | Istoricul paginilor vizitate poate fi obţinut prin metoda ''getHistory()'' aplicată obiectului de tip ''WebEngine'', întorcând un obiect de tip ''WebHistory''. Acesta este o listă de intrări ce poate fi accesată prin metoda ''getEnteries()'', conţinând informaţii despre pagină (URL şi titlu) sau despre data la care aceasta a fost vizitată cel mai recent. Metoda ''go()'' a acestei clase forțează navigatorul să încarce pagina reţinută la indexul respectiv. | + | Istoricul paginilor vizitate poate fi obţinut prin metoda ''getHistory()'' aplicată obiectului de tip ''WebEngine'', întorcând un obiect de tip ''WebHistory''. Acesta este o listă de intrări ce poate fi accesată prin metoda ''getEntries()'', conţinând informaţii despre pagină (URL şi titlu) sau despre data la care aceasta a fost vizitată cel mai recent. Metoda ''go()'' a acestei clase forțează navigatorul să încarce pagina reţinută la indexul respectiv. |
| Conținutul unei pagini Internet poate fi tipărit folosint imprimanta instalată în cadrul mașinii, folosind metoda ''print()'' din clasa ''WebEngine''. Aceasta primește un obiect de tip ''PrinterJob'', obținut prin apelul metodei statice ''PrinterJob.createPrinterJob()''. În situația în care nu există nici o imprimantă instalată, rezultatul întors va fi ''null''. De asemenea, trebuie apelată metoda ''endJob()'' a obiectului ''PrinterJob'' pentru a se asigura faptul că procesul de tipărire a fost terminat. | Conținutul unei pagini Internet poate fi tipărit folosint imprimanta instalată în cadrul mașinii, folosind metoda ''print()'' din clasa ''WebEngine''. Aceasta primește un obiect de tip ''PrinterJob'', obținut prin apelul metodei statice ''PrinterJob.createPrinterJob()''. În situația în care nu există nici o imprimantă instalată, rezultatul întors va fi ''null''. De asemenea, trebuie apelată metoda ''endJob()'' a obiectului ''PrinterJob'' pentru a se asigura faptul că procesul de tipărire a fost terminat. | ||
| Line 1277: | Line 1288: | ||
| === BorderPane === | === BorderPane === | ||
| - | Un container de tip ''BorderPane'' oferă cinci regiuni pentru poziționarea nodurilor: sus, jos, stânga, dreapta li centru, acestea putând avea orice dimensiune. | + | Un container de tip ''BorderPane'' oferă cinci regiuni pentru poziționarea nodurilor: sus, jos, stânga, dreapta şi centru, acestea putând avea orice dimensiune. |
| <note tip>În situația în care aplicația JavaFX nu are nevoie de o anumită regiune, aceasta nu va fi definită, nefiind alocat spațiu pentru ea.</note> | <note tip>În situația în care aplicația JavaFX nu are nevoie de o anumită regiune, aceasta nu va fi definită, nefiind alocat spațiu pentru ea.</note> | ||
| Line 2134: | Line 2145: | ||
| * ''READY'' (imediat după ce a fost creat); | * ''READY'' (imediat după ce a fost creat); | ||
| * ''SCHEDULED'' (atunci când este programat pentru o anumită sarcină) | * ''SCHEDULED'' (atunci când este programat pentru o anumită sarcină) | ||
| - | * ''RUNNING'' (după ce a fost pornit) - în cazul în care firul de execuţie este pornit în mod direct, el va trece mai înainte prin starea ''SCHEDULED'' înainte de RUNNING, chiar dacă nu a fost programat propriu-zis; | + | * ''RUNNING'' (după ce a fost pornit) - în cazul în care firul de execuţie este pornit în mod direct, el va trece mai înainte prin starea ''SCHEDULED'' înainte de ''RUNNING'', chiar dacă nu a fost programat propriu-zis; |
| * ''SUCCEEDED'' (dacă sarcina este executată cu succes, proprietatea ''value'' fiind transmisă rezultatului acestui obiect); | * ''SUCCEEDED'' (dacă sarcina este executată cu succes, proprietatea ''value'' fiind transmisă rezultatului acestui obiect); | ||
| * ''FAILED'' (dacă sarcina nu a putut fi finalizată, proprietatea ''exception'' fiind transmisă excepţiei care s-a produs) | * ''FAILED'' (dacă sarcina nu a putut fi finalizată, proprietatea ''exception'' fiind transmisă excepţiei care s-a produs) | ||
| Line 2213: | Line 2224: | ||
| ===== Soluții ===== | ===== Soluții ===== | ||
| - | disponibile pe 3 noiembrie 2014 | + | [[https://github.com/aipi2014/Laborator03/tree/master/Eclipse/|Proiect Eclipse]]\\ |
| + | [[https://github.com/aipi2014/Laborator03/tree/master/NetBeans/|Proiect NetBeans]] | ||
