UNIVERSITA’ DEGLI STUDI DI ROMA TOR VERGATA Facoltà di Ingegneria Informatica Buonasera. Il mio nome è Giancarlo Conti e sono qui per presentare la mia tesi in ingegneria informatica dal titolo: Progettazione e realizzazione di estensioni ad un framework grafico multipiattaforma per servizi su terminali mobili. (CLICK) PROGETTAZIONE E REALIZZAZIONE DI ESTENSIONI AD UN FRAMEWORK GRAFICO MULTI-PIATTAFORMA PER SERVIZI SU TERMINALI MOBILI Relatore: Prof. Stefano Salsano Candidato: Giancarlo Conti

INNOVAZIONI NELL’AMBIENTE MOBILE AMBITI: Hardware Software - Sistemi operativi - Applicazioni / Servizi Il lavoro della mia tesi riguarda la risoluzione di alcune problematiche su un framework per lo sviluppo di servizi, che introdurrò in seguito, seguite all’innovazione nell’ambiente mobile . Le novità introdotte nei dispositivi in commercio riguardano principalmente 2 ambiti: La parte fisica del dispositivo, quindi l’hardware, e la parte software. Per quest’ultima queste novità riguardano 2 settori fondamentali che sono La realizzazione o l’aggiornamento dei sistemi operativi e lo sviluppo di applicazioni e servizi nei maggiori campi di interesse dell’utente. Il problema di fondo che ho affrontato riguarda fondamentalmente le applicazioni ed i servizi del framework. (CLICK) ossia garantirne la portabilità : è ovviamente preferibile che esse possano adattarsi e girare su dispositivi totalmente differenti, non seguendo la strada tracciata da applicazioni come le APP di iPhone oppure il servizio OviMaps di Nokia, totalmente proprietarie ed incompatibili con altri device. PROBLEMATICA : PORTABILITA’

Paradigma della semplicità SMS E MOVE PROGETTO SMS MOVE è il framework per lo sviluppo di servizi SMS: scritto in Java Micro Edition , è disponibile per gli OS Symbian, Windows Mobile, Blackberry e (presto) Android. CARATTERISTICHE: cross-platform (!!!) Open Source rispetta i principi del progetto SMS: Il framework su cui ho operato è stato sviluppato nell’ambito del progetto SMS per lo sviluppo di servizi per terminali mobili ed è chiamato MOVE. Esso fornisce una soluzione al proprio problema del porting mediante la costruzione di apposite versioni per i diversi sistemi operativi al momento supportati. (CLICK) Questo framework, scritto in Java Micro Edition, presenta altre caratteristiche, oltre al cross-platform, quali l’essere OpenSource e il rispetto dei principi fondamentali del progetto SMS. Facilità d’uso Configurazioni automatizzate Meccanismi di affidabilità end-to-end Aiuti per lo sviluppatore Paradigma della semplicità in 4 punti

SERVIZI OFFERTI DA MOVE I servizi offerti da MOVE sono già molti: tra i principali è possibile citare i 3 mostrati in figura: il servizio per la condivisione e l’invio di note elettroniche categorizzate, quello per la navigazione indoor ed outdoor e la community. (CLICK)

IL FRAMEWORK GRAFICO OBIETTIVI DELLA TESI piattaforme Widgets di Thinlet OBIETTIVI DELLA TESI Lavorare al porting sulle diverse piattaforme Superare le limitazioni preesistenti del framework Migliorare/introdurre funzioni per aumentare le potenzialità grafiche Facilitare l’aggiunta di nuovi servizi Thinlet è il toolkit grafico utilizzato per la costruzione delle pagine del client. La parte grafica dell’applicazione è realizzata con Thinlet, un toolkit grafico che estende Canvas (la classe con la grafica di base per j2me) e che è stato evoluto rispetto alla sua “forma” originale. (CLICK) L’obiettivo della tesi, ossia lo sviluppo dell’intero framework, è mirato a 4 aspetti principali. Nel particolare ho lavorato sulla questione del porting, cercando di superare alcune limitazioni preesistenti. Ho introdotto inoltre nuove funzioni o migliorato quelle già presenti per aumentarne le potenzialità del comparto tecnico e grafico dell’applicazione. Infine ho cercato di elaborare una logica di inserimento e manipolazione di pagine comune a tutti i servizi e ho provato tutte le modifiche in un nuovo servizio da me aggiunto.

GESTIONE DEI CAMPI DI TESTO Thinlet “simula” il comportamento dei campi di testo. L’input dell’utente è gestito da un elemento di javax.microedition.lcdui (il comparto grafico di base per Canvas) Digitazione utente Pressione Ok [abc] IMPORTANTE: definizione di gestioni appropriate per i diversi tipi di tastiera (qwerty, normale, su schermo) APPROPRIATA!! Un primo problema “tecnico” risolto riguarda il “disaccoppiamento” di Thinlet dal pacchetto LCDUI di java microedition per la gestione dei campi di testo. Thinlet , che come abbiamo detto estende Canvas, non usa questi elementi. Nel caso delle caselle di testo, il nostro framework le “simula” mediante elementi grafici come rettangoli su cui disegnare l’input utente. L’input in sé viene invece catturato e gestito da una TextBox di LCDUI. La modifica che ho apportato rende Thinlet in grado di gestire personalmente l’interazione tra utente e campi di testo. (CLICK) Inoltre, ho provveduto ad inserire un indicatore della modalità di input utilizzata (indicato nella slide in rosso di fianco al testo), originariamente non prevista sul framework in quanto già presente nella TextBox. INAPPROPRIATA!! Modifica apportata: gestione “locale” dell’interazione tra utente ed elemento grafico.

“Stratagemma grafico “ che aggira i problemi di Canvas in 5 fasi MODALITA’ FULL SCREEN FASE 1: RAPPRESENTAZIONE DEL MENU’ Sx Menu “Stratagemma grafico “ che aggira i problemi di Canvas in 5 fasi Pagina senza menu Composizione di immagini Menubar PROBLEMI DI PORTING  SOLUZIONE: Dx Menu Un problema relativo al porting in cui mi sono imbattuto riguardava l’abilitazione della modalità full screen su tutti i dispositivi. Originariamente generava problemi con alcuni modelli di dispositivi. La soluzione implementata si articola in 5 fasi ed adotta uno stratagemma “grafico”: (CLICK) Invece di utilizzare pulsanti o menù standard di Canvas o Thinlet, il menù viene “disegnato” mediante la composizione di 3 immagini: 2 per i pulsanti destro e sinistro ed una per la barra centrale. Dopo esserci riservati una porzione della parte bassa dello schermo alta quanto le immagini e aver forzato i componenti a proporzionarsi alle sue nuove misure, le 3 immagini che compongono il menù vengono disegnate secondo necessità. Questo tipo di soluzione permette di poter utilizzare altre immagini per i menù semplicemente mantenendo inalterate le dimensioni delle originali, sovrascrivendo quelle di base. La seconda fase consiste nella stampa sulle immagini che rappresentano il menù del testo indicante l’azione associata. La maniera più semplice di far questo è sostituire l’aggiunta di un comando con la stampa del testo sull’immagine del menù corrispondente. Se ad esempio nella parte sinistra veniva caricato il pulsante “Back” ora sul menù di sinistra si stampa invece la scritta. FASE 2: ASSEGNAZIONE DELLE AZIONI Aggiunta del testo sui pulsanti: conversione da inserimento di un comando a disegno di una stringa sullo schermo. Es: da addCommand(backCommand) a drawString(“Back”)

MODALITA’ FULL SCREEN FASE 3: CONVERSIONE DELLE PAGINE JAVAX IN THINLET Sostituzione di tutte le pagine costruite con elementi del package javax.microedition.lcdui con le stesse fatte in Thinlet. FASE 4: GESTIONE DELLE AZIONI Avvio della porzione di codice prevista per il comando sostituito: La terza fase consiste in un passaggio intermedio di riprogettazione di pagine. Bisogna ricreare quelle fatte che contengono elementi LCDUI utilizzando soltanto widgets Thinlet. Il motivo associato a questa operazione è legato a dei problemi di ridisegno che gli elementi javax impongono al framework e che portano alla comparsa del menù standard anche in modalità a schermo intero. L’aspetto principale di questo passaggio è mantenere inalterata la logica delle azioni di ogni singolo elemento presente sulla pagina. (CLICK) La quarta fase consiste nella gestione delle azioni. Alla pressione dei tasti assegnati ai menù, si rileva l’azione leggendo la scritta sul menù associato. Poi, basta ricopiare il codice contenuto nella gestione del comando sostituito nella porzione di codice che gestisce quella particolare azione stampata sul menù. if (command==backcommand) { if (action.equals(“Back”)){ Codice per la gestione del comando Codice per la gestione del comando } else if … } else if …

Se il dispositivo è dotato della funzionalità, alla pressione delle MODALITA’ FULL SCREEN FASE 5: ABILITAZIONE DEL TOUCH-SCREEN Se il dispositivo è dotato della funzionalità, alla pressione delle zone di interesse del menù viene avviata la gestione codice come sopra. if (command==backcommand) { Codice per la gestione del comando Codice per la gestione del comando } else if … La quinta ed ultima fase riguarda l’abilitazione del touch screen sul menù. Alla pressione del puntatore sullo schermo, si analizzano le coordinate del punto premuto e, se corrispondono ad una zona interessata dal menù (CLICK) si esegue la stessa operazione fatta in precedenza. Nel metodo pointerPressed(int x, int y): if ( x <65 && y > getHeight() – 17 && txt==“Back”) { } else if …

PROGETTAZIONE DI ESTENSIONI GRAFICHE Un’ulteriore aggiunta al GUI toolkit riguarda la possibilità di aggiungere elementi grafici che rendono le pagine più gradevoli. Home Page originale del Client Uno sviluppo alle modifiche finora apporate consiste in una serie di migliorie all’apparato grafico che rendano il look&feel del framework più gradevole, oltre che semplice da utilizzare. (CLICK) Per quanto semplice da gestire, la grafica di Thinlet rimane un po’ povera. Necessita di modifiche per migliorare il Look&Feel.

PROGETTAZIONE DI ESTENSIONI GRAFICHE Il programmatore può inserire un’immagine, indicando se adattarla alle dimensioni della pagina o definendo la posizione dove disegnarla (la prima esclude l’altra). L’uso degli sfondi può essere combinato con la scelta dei colori di background. SOLUZIONE: opzione per l’uso di immagini di sfondo nei pannelli. ADATTAMENTO POSIZIONAMENTO XPosition XPosition YPosition Left Center Right YPosition Left Center Right Top Top Una prima soluzione riguarda la possibilità di inserire immagini di sfondo sui pannelli che contengono i vari componenti da combinare con il colore di background. (CLICK) Adottando un sistema a coordinate come quelle in figura con cui possono essere identificati i punti chiave dei pannelli e delle immagini, per il programmatore è ora possibile aggiungere sfondi indicando la tipologia di inserimento. Le opzioni sono 2: adattare l’immagine alla dimensione dello schermo. In questo caso è buona norma verificare l’effetto della scalatura delle dimensioni dell’immagine e far si che non risulti eccessivamente distorta. Oppure, si può scegliere di posizionare l’immagine in uno dei 9 punti cardinali principali del pannello, individuati da delle costanti, e combinarlo con il colore di background. Center Center Immagine da aggiungere Bottom Bottom

PROGETTAZIONE DI ESTENSIONI GRAFICHE SOLUZIONE 2: migliorare l’aspetto dei componenti esistenti Introduzione di temi personalizzati: Modifica alla rappresentazione di qualche componente Modifica alla colorazione dell’intero ambiente Una seconda soluzione è quella dell’introduzione dei temi. L’operazione si sviluppa in due fasi: La prima (CLICK) riguarda la modifica alla rappresentazione di alcuni componenti. La seconda modifica riguarda la colorazione di default degli elementi sullo schermo. Nei settaggi del client l’utente potrà poi scegliere tra i temi precaricati sulla piattaforma.

AGGIUNTA DI UN SERVIZIO Sfruttando il framework con le nuove funzionalità e le funzioni a disposizione all’interno del client ho aggiunto alla piattaforma il servizio ACEA. Si compone di due parti principali: SEZIONE INFORMATIVA: descrizioni della società ACEA, dei “nasoni” (fontanelle romane), e della qualità dell’acqua, pagina con i Credits. L’ultima parte del lavoro della tesi consiste nel combinare e testare le varie modifiche in un nuovo servizio da aggiungere alla piattaforma. Principalmente informativo, esso riguarda la società ACEA, operatore principale a livello nazionale nel settore idrico, e la localizzazione su mappa delle fontanelle romane chiamate “nasoni”. (CLICK) Analizzando un video di presentazione sulle necessità del servizio ho individuato 2 sezioni principali: Una parte informativa con descrizioni varie e una pagina con i credits; Ed una parte che si aggancia al servizio di navigazione presente su MOVE per la localizzazione di fontanelle e/o monumenti. SEZIONE SU MAPPA: localizzazione di “nasoni” e monumenti sul navigatore.

IL RISULTATO FINALE Icona di avvio WELCOME PAGE INFO PAGE MAIN PAGE CREDITS NAVIGATOR Sfruttando il lavoro eseguito sul framework, ho costruito le varie sezioni del servizio e ho raggiunto il seguente risultato. (CLICK) Per costruire pagine di questo tipo, dopo il lavoro fatto, basta seguire uno schema comune per l’aggiunta dei componenti e la definizione delle caratteristiche di pagina e dei widgets; aggiungere UNA singola riga di codice per assegnare uno sfondo al pannello; e opzionalmente costruire un menù ad hoc per il servizio.

CONCLUSIONI NUOVE BASI PER SVILUPPI FUTURI: FUNZIONALITA’ : aggiunta di elementi originariamente non previsti (es: T9 per le text) ; MENU’ NON STANDARD : visualizzazioni alternative; Sia le modifiche apportate che il modo in cui sono state progettate possono essere utilizzate come base per sviluppare ulteriormente il framework. Si possono aggiungere funzionalità “nuove” non previste dalla piattaforma ma presenti negli standard odierni; Si può valutare la progettazione di visualizzazioni alternative di menù, ad esempio in stile iPhone. Si possono progettare delle estensioni alla personalizzazioni dei temi oltre il semplice cambio di colorazione. Altre estensioni o modifiche possono riguardare la parte più interna del core del framework, ma l’importante è che tutte queste modifiche garantiscano la portabilità dell’applicazione sulle varie piattaforme come nelle soluzioni da me proposte. (CLICK) GRAFICA: estendere il raggio d’azione della personalizzazione a temi dell’applicazione; IL TUTTO PROGETTANDO SOLUZIONI CHE GARANTISCONO IL PRINCIPIO DI PORTABILITA’

GRAZIE PER L’ATTENZIONE (CLICK)