Alma Mater Studiorum - Universit`a di Bologna Campus di Cesena SCUOLA DI SCIENZE Corso di Laurea in Ingegneria e Scienze Informatiche Progettazione object-oriented di un’interfaccia grafica JavaFX per il simulatore Alchemist Tesi in Programmazione ad Oggetti Relatore: Presentata da: Prof. Mirko Viroli Niccol`o Maltoni Correlatore: Prof. Danilo Pianini II sessione di laurea Anno Accademico 2016 - 2017 Parole chiave Progettazione object-oriented Simulazione Java JavaFX Interfaccia grafica Sommario Lo scopo di questa tesi è la progettazione e la successiva implementazione di un’interfaccia grafica 2D per il simulatore Alchemist. La nuova interfaccia permette di interagire con la simulazione a tempo di esecuzione e di vedere chiaramente rappresentate informazioni su di essa. In particolare, è supportata una struttura modulare di effetti che rende facilmente osservabili determinate entità del sistema ed eventuali loro proprietà: rispetto alla classe di effettidell’interfacciaclassica,lanuovatipologiadieffettinonèpiùunafunzionedalsingolo nodo alla rappresentazione grafica, bensì fa riferimento all’intero ambiente, permettendo di costruire rendering complessi facilmente esportabili tramite file JSON. Si è scelto di mantenere un’interfaccia il più possibile user-friendly, mantenendo un design più simile ai simulatori a scopo videoludico per favorire l’utilizzo da parte di utenti inesperti. Lo stile estetico al quale si è deciso di allinearsi è il Material Design di Google e la libreria grafica utilizzata per l’implementazione è stata JavaFX. Indice Sommario II Introduzione 1 1 Background 3 1.1 Alchemist . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3 1.1.1 Introduzione ad Alchemist . . . . . . . . . . . . . . . . . . . . . . . 3 1.1.2 Astrazioni e modello di Alchemist . . . . . . . . . . . . . . . . . . . 4 1.1.3 Interfaccia utente classica . . . . . . . . . . . . . . . . . . . . . . . 6 Esperienza utente . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7 Swing . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8 Gli effetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 1.2 JavaFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10 1.2.1 Introduzione al framework JavaFX . . . . . . . . . . . . . . . . . . 10 1.2.2 Architettura del framework JavaFX . . . . . . . . . . . . . . . . . . 11 1.2.3 Struttura di una Applicazione JavaFX . . . . . . . . . . . . . . . . 12 1.2.4 JavaFX e Swing a confronto . . . . . . . . . . . . . . . . . . . . . . 14 1.3 Interfaccia JavaFX per Alchemist: motivazioni . . . . . . . . . . . . . . . . 16 2 Contributo 18 2.1 Analisi dei requisiti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 2.1.1 Requisiti funzionali . . . . . . . . . . . . . . . . . . . . . . . . . . . 18 Rappresentazione dell’ambiente di simulazione . . . . . . . . . . . . 18 Gestione degli effetti . . . . . . . . . . . . . . . . . . . . . . . . . . 19 Serializzazione Human-readable . . . . . . . . . . . . . . . . . . . . 19 Effetti standard per nodi e collegamenti . . . . . . . . . . . . . . . 19 Interazione con simulazione e ambiente rappresentato . . . . . . . . 19 III Rappresentazione di ambienti con mappa . . . . . . . . . . . . . . . 20 2.1.2 Requisiti non funzionali . . . . . . . . . . . . . . . . . . . . . . . . 21 JavaFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Performance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 Supporto Hi-DPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.2 Stato dell’arte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 21 2.2.1 Simulatori a scopo videoludico . . . . . . . . . . . . . . . . . . . . . 22 SimCity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22 Universe Sandbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23 2.2.2 Material Design . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2.3 Design dell’interfaccia. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24 2.4 Progettazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 2.4.1 L’architettura degli effetti . . . . . . . . . . . . . . . . . . . . . . . 26 I singoli effetti e l’interfaccia EffectFX . . . . . . . . . . . . . . . . 26 I gruppi di effetti e l’interfaccia EffectGroup . . . . . . . . . . . . 28 Caricamento, salvataggio e modifica di gruppi di effetti . . . . . . . 28 2.4.2 La struttura dei drawer e le proprietà osservabili . . . . . . . . . . . 29 2.4.3 Nodi grafici come monitor per la simulazione . . . . . . . . . . . . . 29 2.4.4 Costruzione e avvio dell’interfaccia . . . . . . . . . . . . . . . . . . 30 2.5 Dettagli implementativi . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.5.1 La barra inferiore . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 2.5.2 Drawer, liste e celle . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 2.5.3 Librerie esterne utilizzate . . . . . . . . . . . . . . . . . . . . . . . . 32 ControlsFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32 JFoenix . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 jIconFont . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Google Gson . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 2.5.4 Strumenti utilizzati . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Qualità del codice e controllo del software . . . . . . . . . . . . . . 33 Controllo di versione . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Automazione dello sviluppo e integrazione continua . . . . . . . . . 35 Ambiente di sviluppo integrato . . . . . . . . . . . . . . . . . . . . 35 2.6 Test e valutazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 36 2.6.1 Unit testing e valutazione del codice . . . . . . . . . . . . . . . . . 36 2.6.2 Valutazione dell’interfaccia . . . . . . . . . . . . . . . . . . . . . . . 36 3 Conclusioni 41 3.1 Risultati . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41 3.2 Lavori futuri . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 42 Appendice A Simulazione di prova 43 A.1 YAML della simulazione . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 A.2 JSON degli effetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44 A.3 AES degli effetti . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 Bibliografia 47 Introduzione Il lavoro illustrato in questa tesi è volto alla progettazione e all’implementazione di una nuova interfaccia grafica 2D per il simulatore Alchemist che possa sostituire quella già esistente. Alchemist [25] è un meta-simulatore estendibile completamente open-source che esegue su Java Virtual Machine (JVM); nonostante tragga ispirazione dalla chimica stocastica, esso può essere utilizzato come framework di simulazione in differenti ambiti di ricerca a seconda dell’incarnazione utilizzata. La simulazione può essere lanciata ed eseguita sia da linea di comando (CLI, Command Line Interface), senza coinvolgere in alcun aspetto l’interfaccia grafica, sia attraverso una GUI (Graphical User Interface); in questo elaborato si tratterà unicamente di quest’ultima modalità. Con“interfacciagrafica”[24]siintendel’insiemedeicomponentigraficiattraversoiqua- li l’utente può interagire con il computer e, più nello specifico, con un determinato software che viene eseguito dalla macchina. La caratteristica di maggiore importanza per un’inter- faccia grafica, come per ogni mezzo di interazione con un oggetto quotidiano [23], sta nel riuscire a offrire le proprie funzionalità nel modo più intuitivo possibile, ossia l’usabilità. A partire dagli anni ‘80, con l’affermarsi degli studi di ergonomia cognitiva [18], di- ventano altrettanto rilevanti anche le caratteristiche estetiche e simboliche che il sistema software mette a disposizione, andando a definire quella che viene chiamata “esperienza utente” (o “UX”). L’interfaccia classica di Alchemist non è in grado di offrire un’esperienza d’uso appa- gante e risulta poco user-friendly, in quanto è difficile per l’utente intuirne le modalità d’uso: nonostante Alchemist si presti ad essere utilizzato come framework di simulazione per ricerche in molti ambiti diversi (ad esempio, la chimica), l’interfaccia grafica è pensata per un utilizzatore avanzato, che predilige l’interazione da riga di comando e che, qua- lora dovesse necessitare della GUI, ne ha una conoscenza profonda e sa come richiamare rapidamente le funzionalità desiderate. Di conseguenza, si ha una curva di apprendimen- 1 2 to molto ripida, in quanto a primo impatto essa si presenta estremamente poco chiara e dunque poco utilizzabile; ciò sta portando il simulatore ad avere problemi nella diffusione per l’utilizzo in ambito scientifico per simulazioni a scopo di ricerca, poiché gli utenti che intendono utilizzare la GUI prediligono l’utilizzo di altri strumenti che offrono loro una maggiore semplicità. Le difficoltà di utilizzo e l’aspetto grafico ormai datato hanno dunque portato alla necessità di progettare un’interfaccia grafica nuova: contributi recenti [5] hanno permesso unparzialerinnovamentolimitatoallapartediambienteintegratocheaccogliel’utilizzatore che stia lanciando il simulatore senza una simulazione specificata e il lavoro illustrato in questa tesi mira a progettare una nuova interfaccia relativa all’ambiente di esecuzione della simulazione. Durante la fase di progettazione si è deciso di ispirarsi alle GUI utilizzate da simula- tori a scopo videoludico quali SimCity e Universe Sandbox, anziché allo stato dell’arte in ambito scientifico, poiché ritenuti maggiormente orientati all’immediatezza d’uso, requisito essenzialedellafasedianalisi. Esteticamente, lostilegraficoalqualesièdecisodiallinearsi è il Material Design di Google. La struttura degli effetti è stata completamente riprogettata: da un mezzo per rendere graficamente proprietà dei singoli nodi, la nuova tipologia di effetti diventa una funzio- ne dall’intero ambiente alla rappresentazione grafica, offrendo una maggiore libertà allo sviluppatore che volesse implementare rendering complessi per simulazioni specifiche. Lalibreriagraficautilizzataperl’implementazioneèstataJavaFX.Lasceltaèstatadet- tatadallemaggiorifunzionalitàmesseadisposizionedalnuovoframeworkrispettoaSwing, che permettono di realizzare GUI nel contempo graficamente più leggere, esteticamente più moderne e progettualmente meglio incapsulate e modulari. La seguente trattazione è strutturata su tre capitoli: nel Capitolo 1 viene introdotto il contesto nel quale il lavoro descritto nella tesi ha avuto luogo, introducendo il simulatore Alchemist, la sua interfaccia grafica classica e il framework JavaFX; nel Capitolo 2 si espone l’intero contributo fornito al progetto, studiando singolarmente le fasi di analisi dei requisiti, design e progettazione, implementazione della nuova interfaccia e in ultimo testingdiquantorealizzato; infine, ilCapitolo3analizzairisultatiottenuti, interpretandoli anche in ottica di miglioramenti futuri. Capitolo 1 Background 1.1 Alchemist Alchemist1 [25] è un meta-simulatore estendibile completamente open-source che esegue su Java Virtual Machine (JVM), nato all’interno dell’Università di Bologna e distribuito su licenza GNU GPLv3+ con linking exception; il codice è reperibile su GitHub2, do- ve chiunque fosse interessato può collaborare sviluppando nuove estensioni, migliorando funzionalità esistenti e risolvendo possibili bug. 1.1.1 Introduzione ad Alchemist In generale, una simulazione [3] è una riproduzione del modo di operare di un sistema o un processo del mondo reale nel tempo. L’imitazione del processo del mondo reale è detta modello; esso risulta essere una riproduzione più o meno semplificata del mondo reale, che viene aggiornata ad ogni passo di esecuzione della simulazione. Alchemist rientra nell’archetipo dei simulatori ad eventi discreti (DES) [2, 8]: gli eventi sono strettamente ordinati e vengono eseguiti uno alla volta, determinando il passare del tempo. L’idea dietro al progetto è quello di riuscire ad avere un framework di simulazione il più possibile generico, in grado di simulare sistemi di tipologia e complessità diverse, mantenendo le prestazioni dei simulatori non generici (come ad esempio quelli impiegati in ambito chimico [12]). Perperseguirequestoobiettivo, laprogettazionedell’algoritmoèpartitadallostudiodel lavoro di Gillespie del 1977 [13] e di altri scienziati nell’ambito della simulazione chimica. 1http://alchemistsimulator.github.io 2https://github.com/AlchemistSimulator/Alchemist 3 1.1 Alchemist 4 Nonostante siano presenti algoritmi in grado di eseguire un numero di reazioni addirittura in tempo costante, la scelta dell’algoritmo è infine ricaduta su una versione migliorata dell’algoritmo SSA di Gillespie, il Next Reaction Method [11] di Gibson e Bruck: ad ogni passo di simulazione, esso è in grado di selezionare la reazione successiva in tempo costante e richiede un tempo logaritmico per aggiornare le strutture dati interne al termine dell’esecuzione dell’evento. 1.1.2 Astrazioni e modello di Alchemist Il modello di astrazione di Alchemist è ispirato dal lavoro della comunità scientifica nell’ambito dei simulatori a scopo di ricerca chimica e ne riprende dunque la nomenclatura. Le entità (visibili in Figura 1.2) su cui lavora sono le seguenti: Molecola Una Molecola rappresenta il nome dato ad un particolare dato all’interno di un Nodo, del quale ne astrae parte dello stato. Un parallelismo con la programmazione imperativa vedrebbe la Molecola come un’a- strazione del nome di una variabile. Concentrazione La Concentrazione di una Molecola è il valore associato alla proprietà rappresentata dalla Molecola. Mantenendo il parallelismo con la programmazione imperativa, la Concentrazione rappresenterebbe il valore della variabile. Nodo IlNodo èuncontenitorediMolecole eReazioni cherisiedeall’internodiunAmbiente e che astrae una singola entità. Ambiente L’Ambiente è l’astrazione che rappresenta lo spazio nella simulazione ed è l’entità che contiene i Nodi. Esso è in grado di fornire informazioni in merito alla posizione dei Nodi nello spazio, alla distanza tra loro e al loro vicinato; opzionalmente, l’Ambiente può offrire il supporto allo spostamento dei Nodi. Regola di collegamento La Regola di collegamento è una funzione dello stato corrente dell’Ambiente che associa ad ogni Nodo un Vicinato. Vicinato Un Vicinato è un’entità costituita da un Nodo detto “centro” e da un insieme di altri Nodi (i “vicini”).