Recommandé
Recommandé
Contenu connexe
Similaire à Miniaturizzazione dell'interfaccia utente da applicazioni Java ad Android.pptx
Similaire à Miniaturizzazione dell'interfaccia utente da applicazioni Java ad Android.pptx (20)
Miniaturizzazione dell'interfaccia utente da applicazioni Java ad Android.pptx
- 1. Miniaturizzazione dell’interfaccia utente da applicazioni Java ad Android: Radio Button, CheckBox e ComboBox Relatori: Prof. Michele Risi Candidato: Pasquale Matrone
- 2. Motivazioni • In 10 anni da 100 milioni a 1,5 miliardi di smartphone venduti all’anno
- 4. Sviluppo app mobile 1. Nuovo processo di sviluppo del software
- 5. Sviluppo app mobile 1. Nuovo processo di sviluppo del software 2. Documentazione, Manuali, Testing
- 6. Sviluppo app mobile 1. Nuovo processo di sviluppo del software 2. Documentazione, Manuali, Testing 3. Nuovo personale
- 7. Miniaturizzazione • Sviluppo meccanismo per miniaturizzare applicazioni desktop verso il mobile
- 8. Tecnologie utilizzate e strategia di migrazione • Separare l’interfaccia dal resto dell’applicazione (creare wrapper per classi grafiche di Java) • Libreria pAWT (che ha il compito di sostituire le chiamate alle classi AWT o Swing con nuove classi che permettano di lavorare con Apache Cordova)
- 9. Strategia di migrazione Java App Parsing Integrazione Cordova Integrazione Plugin Android App
- 10. Strategia di migrazione Java App Parsing Integrazione Cordova Integrazione Plugin Android App • Sostituzione classi delle librerie grafiche native Java con pAWT (FramepFrame, ButtonpButton, ecc.) • Ogni componente grafico avrà un equivalente in HTML (nuova UI gestita da Cordova tramite plugin)
- 11. Strategia di migrazione Java App Parsing Integrazione Cordova Integrazione Plugin Android App • Plugin di comunicazione (adapter tra logica applicazione originale e nuova UI in HTML) <BUTTON type="button" id="IDbutton“ onClick="app.fire(id)"> MyButton </BUTTON>
- 13. Obiettivi e lavoro svolto • Radio Button • Check Box • Combo Box • Nuovi eventi (es. gestione FocusEvent)
- 14. Radio Button, Check Box e Combo Box • Radio Button, Check Box fire(id) • Combo Box fire(id, value) fire: function(id, value, successCallback, errorCallback) { cordova.exec( successCallback, errorCallback, 'AWTPlugin', 'fire', [{"id": id, "element": value}] );}
- 15. Esempio di miniaturizzazione Tavolozza.java • 3 radio button, 2 checkbox
- 16. App Tavolozza
- 17. Conclusioni e sviluppi futuri • Processo di porting da semi-automatico ad automatico • Estensione libreria pAWT (es. Liste, ottimizzare funzionalità app miniaturizzata)
Notes de l'éditeur
- La nostra vita quotidiana non è più la stessa dopo l’avvento degli smartphone. Social network, fotocamere prestanti, Google Maps, internet, email, giochi in alta definizione sempre a porta di mano hanno modificato le nostre abitudini. Sono passati 10 anni dalla commercializzazione del primo iPhone e la vendita degli smartphone è cambiata in maniera impressionante con numeri che nel 2007 si attestavano su poco più di 100 milioni a livello globale mentre a distanza di 10 anni oggi se ne vendono addirittura 1,5 miliardi in un solo anno. Questo mercato non è passato di certo inosservato agli occhi delle piccole e grandi aziende, che per rimanere a passo con i tempi, devono sostituire le applicazioni pensate per essere eseguite su ambiente desktop, se vogliono renderle disponibili anche in ambiente mobile.
- L’idea di riscrivere l'intera applicazione preesistente per il mobile ha il vantaggio di sfruttare al meglio le potenzialità del nuovo ambiente/linguaggio e di sbarazzarsi di codice inutile
- Ma riscrivere un’applicazione da zero significa andare incontro ad un nuovo processo di sviluppo del software che richiederebbe tempistiche piuttosto lunghe.
- Bisognerebbe riscrivere documentazione e manuali e ci sarebbe bisogno di una nuova fase di testing.
- Inoltre, le aziende potrebbero aver bisogno di assumere più sviluppatori con conoscenze diverse per realizzare applicazioni per i diversi sistemi operativi per dispositivi mobili (Android, iOS, Windows Phone e così via).
- Una soluzione a queste problematiche è la possibilità di sviluppare un meccanismo per miniaturizzare applicazioni esistenti e funzionanti in ambienti desktop verso il mondo mobile. L’ideale, per una buona strategia di migrazione che tenga conto anche delle performances dell’app, è lasciare la logica in Java e mappare l’interfaccia grafica del programma Java di partenza in HTML.
- In questa slide introduciamo le tecnologie utilizzate e la strategia di migrazione. Per la strategia di migrazione gli strumenti di sviluppo messi a disposizione da Apache Cordova giocano un ruolo fondamentale. Apache Cordova è un framework che permette agli sviluppatori di creare applicazioni mobili usando CSS, HTML e Javascript invece di affidarsi ad API specifiche delle piattaforme Android, iOS o Windows Phone. Partendo da un programma Java, la strategia di migrazione richiede di determinare i punti che non sono compatibili con l’applicazione mobile, in particolare le classi grafiche Java (AWT o Swing). L’idea è quella di separare l’interfaccia dal resto dell’applicazione: creare un wrapper per le classi grafiche di Java, utilizzando delle loro classi corrispondenti, definite in una libreria di supporto (chiamata pAWT), senza alterarne la logica. Il compito della libreria pAWT sviluppata, quindi, è quello di sostituire le chiamate alle classi AWT o Swing con nuove classi che permettano di lavorare con Cordova.
- Il grafico della slide riporta tutti gli step principali per la miniaturizzazione di un software scritto in Java verso il sistema operativo mobile Android.
- Partendo da un codice sorgente Java, nella fase di Parsing sostituiamo le classi delle librerie grafiche native java con quelle da noi sviluppate. La naming convention utilizzata per rappresentare gli elementi è la stessa di Java, con la «p» davanti al nome (es. Frame diventa pFrame, Button diventa pButton e così via). Inoltre, è necessario un metodo (chiamato getTopComponent()) che si occupi di recuperare l’elemento radice della gerarchia degli elementi grafici, in modo da poter interagire con tutto l’albero dei componenti. Bisognerà aggiungere questo metodo in ogni classe in cui è presente un frame. Ogni componente grafico presente nella vecchia interfaccia utente sarà sostituito da un suo equivalente in HTML che ne preserverà le funzionalità originali. La nuova interfaccia utente permetterà a Cordova di gestire gli eventi associati ad ogni elemento grafico presente (bottoni, campi di testo, ecc…) attraverso un plugin di comunicazione sviluppato per Cordova.
- Un plugin è un componente software che consente di mappare una funzione JavaScript al codice nativo, estendendo in questo modo le API di Cordova. Questo è alla base del sistema di comunicazione tra l’interfaccia grafica in Cordova e la nostra applicazione nativa. Il plugin si comporterà come un adapter tra la logica dell’applicazione originale e la nuova interfaccia grafica in HTML. Ad esempio, dopo il click di un bottone, il plugin, dopo che gli è stato restituito l’elemento radice attraverso la chiamata al metodo getTopComponent() è in grado di invocare l’evento associato a quel determinato bottone. Più in dettaglio: nella slide è riportato il codice HTML che chiama la funzione JavaScript fire() dopo il verificarsi dell’evento “onClick” per un pButton. Al metodo exec() che permette il passaggio di controllo al codice Java nativo, verrà passato l’id del bottone che ha scatenato l’evento (in questo caso “IDbutton”) e l’evento “fire” che verrà catturato dalla classe pFrame, che ha il compito di invocare l’evento associato all’oggetto pButton identificato dal suo id.
- L’output del processo è l’apk dell’applicazione miniaturizzata per Android.
- L’obiettivo che ci siamo posti era quello di migliorare il processo di miniaturizzazione: se si voleva estendere il processo di miniaturizzazione ad applicazioni desktop composte da tipi di elementi grafici diversi dal semplice JButton o JTextField, bisognava estendere la libreria delle pAWT. Ed il miglioramento che si è apportato al progetto esistente è stato appunto l’estensione della libreria pAWT. In particolare, si è ampliata la libreria per consentire il porting dei Radio Button, delle Check Box e Combo Box in modo che sia così possibile miniaturizzare applicazioni Java che fanno uso di tali componenti grafici. Inoltre, si è aumentare il numero di eventi generati dall’interfaccia grafica capaci di essere gestiti dall’applicazione miniaturizzata (in particolare si è lavorato per gestire i FocusEvent).
- In questa slide faremo una panoramica dei tre componenti prima citati: Radio Button, Check Box e Combo Box. Per quanto riguarda il processo di miniaturizzazione, in caso di selezione di un radio button o di una check box, la funzione JavaScript invocata dal lato HTML sarà la fire(con l’id del bottone come parametro) mentre in caso di selezione di un elemento di una Combobox sarà la fire(con parametri id e value) poiché occorrerà passare informazioni aggiuntive alla funzione exec(), ovvero oltre all’id bisognerà passare anche «il valore» della scelta effettuata dall’utente tra quelle presenti nella combo box. Vengono quindi recuperate nella classe AWTPlugin che estende CordovaPlugin tutte le informazioni utili dall’array JSON, come l’id del componente che ha generato l’evento o il valore dell’elemento scelto dall’utente ed invocato in pFrame il metodo fire() della classe del componente pAWT, dopo il recupero di quest’ultimo dalla tabella hash.
- Per illustrare il processo di miniaturizzazione descritto, prendiamo come esempio il programma Java Tavolozza, che presenta un’interfaccia grafica realizzata usando il package AWT. Il programma è composto da tre radio button che permettono di colorare una casella di testo di tre colori differenti e da due checkbox che permettono di colorare la casella di rosso, giallo o, se sono selezionate entrambe, di arancione. In figura abbiamo l’output del programma se l’utente seleziona sia la checkbox “rosso” che “giallo”.
- L’output del processo di miniaturizzazione è l’app Tavolozza per Android.
- Il lavoro svolto ha ruotato principalmente sul porting di elementi dell'interfaccia grafica, ma in futuro ulteriori miglioramenti del processo di miniaturizzazione sono auspicabili. Ad esempio, l’intero processo realizzato, che ad oggi può essere definito semi-automatico, in quanto alcuni punti richiedono ancora l’intervento manuale, potrà essere reso del tutto automatico, raffinando ulteriormente alcune delle fasi funzionali finora descritte. La libreria pAWT potrà essere ulteriormente estesa, aggiungendo classi wrapper per mappare altri componenti comuni dell’interfaccia utente di un programma Java (come le Liste, per esempio) o per ottimizzare alcune funzionalità quando si trasforma un’applicazione desktop in una mobile. Ad esempio, se l’applicazione Java di partenza richiede di caricare una foto dal file system, all’applicazione miniaturizzata si potrebbe aggiungere l’opzione di aprire la fotocamera per scattare una foto e poi successivamente caricarla.
- Grazie per l’attenzione!