INTERFACCIA UTENTE

Partendo dalle considerazioni sulle strategie di layout ed impostazione di pagina adottate, l’ambiente che è stato realizzato consente di mettere in pratica l’efficacia delle soluzioni di autenticazione, autorizzazione e login descritte precedentemente. L’intera mappa del sito è mostrata nella figura seguente ed illustra la navigazione dal punto di vista logico.

L’aspetto grafico dell’applicazione è gestito dai fogli di stile login.css e home.css. La regione colorata in figura delimita l’Area Protetta, ovvero l’insieme delle risorse accessibili solamente a seguito della procedura di autenticazione. Come già discusso infatti, se si tenta di bypassare l’autenticazione digitando direttamente nella barra degli indirizzi l’URL delle pagine protette, si viene reindirizzati alla pagina di login. La welcome-page di default dell’applicazione è rappresentata dalla pagina login.jsp, la quale per prima cosa mostra a video uno splash-screen di benvenuto della durata di pochi secondi che poi sparisce dissolvendosi e lasciando spazio al contenuto vero e proprio della pagina.

login.jsp

login.css invia.jsp

login.js ajax.js

home.jsp

ajax.js home.js _home.css getfile.jsp logout.jsp dataaccess.jsp

Tenendo conto del poco spazio disponibile su uno schermo mobile è stato fatto in modo di mettere in risalto solo le parti importanti di testo ed i menu di navigazione, relegando alcune funzionalità e contenuti all’interno di componenti che sono visibili solo su richiesta dell’utente tramite pressione di appositi bottoni. Il primo esempio è rappresentato da un pannello a scomparsa laterale che fornisce la form per l’inserimento delle credenziali e per l’esecuzione dell’autenticazione, secondo le modalità ampiamente descritte nei paragrafi precedenti. Tale pannello è accessibile tramite il tasto Login dell’header menu. La form permette l’inserimento prima del Codice Fiscale e, solamente quando è stata convalidata questa prima credenziale, successivamente compare l’input per poter inserire la OTP.

Figura 39 – Successione delle funzioni coinvolte nella procedura di invio delle credenziali.

Ricapitolando brevemente: per prima cosa viene verificata la validità della forma del Codice Fiscale inserito con la funzione JavaScript ControllaCF(), in caso di esito positivo viene invocata la funzione invia_CF() che esegue una chiamata AJAX inviando i dati alla pagina Invia.jsp la quale si occuperà di dialogare con il Web Service e verificare la presenza dell’utente all’interno del DataBase. Questa pagina restituisce un token di conferma oppure un eventuale messaggio dell’errore riscontrato, che sarà visualizzato a video tramite un popup. In caso di esito positivo viene invocata la funzione Scrivi_form_verifica() che effettuerà l’append, alla form precedente, del codice HTML contenente il secondo campo di input. A questo punto una procedura simile si occuperà di convalidare anche la seconda credenziale. Con HTML5 sono stati introdotti nuovi tipi di campo come ad esempio il tipo “tel”, che è stato utilizzato per l’input OTP. Il vantaggio principale che ne deriva sta nel fatto che, nei device mobile, quando l’utente seleziona il campo in questione la tastiera a video cambia formato (verrà utilizzato solo un formato numerico in questo caso) rendendo più facile la digitazione. Sebbene al momento non tutti i tipi siano supportati dalle varie piattaforme, nella peggiore delle ipotesi verrà visualizzato un semplice input di testo secondo il comportamento di default.

Figura 40 – Pagina di home.

Se tutte le operazioni finora descritte sono andate a compimento, si ha l’accesso alla pagina home.jsp e a tutte le risorse ad essa collegate. Il menu che permette la navigazione a partire dalla schermata principale è stato realizzato secondo lo stile di una GridListView; in particolare, a seconda delle dimensioni dello schermo, cambia la morfologia dei tasti ed inoltre si passa da un layout a due colonne, ad uno a tre o quattro colonne. Una volta entrati nelle varie sottosezioni, se si vuole accedere al menu senza dover tornare indietro alla home page, il pulsante Menu apre un pannello a scomparsa contenente un menu di navigazione analogo.

Figura 41 – Menu a scomparsa laterale.

Tra le risorse messe a disposizione, due delle sezioni riportano rispettivamente informazioni sulla Fondazione e sui recapiti telefonici da poter utilizzare per mettersi in contatto con le tre strutture che la costituiscono.

Il pulsante Referti invece porta al cuore dell’applicazione, ovvero alla consultazione dei referti delle analisi di laboratorio effettuate presso la struttura. L’accesso a questi dati avviene passando prima per una form di ricerca; sempre nell’ottica di sfruttare pienamente il poco spazio a disposizione su un display di dimensioni ridotte, jQuery Mobile offre un’interfaccia mobile-friendly per alcuni tipi di controlli, come ad esempio per il DatePicker ed il menu a tendina. Come si può notare dall’immagine seguente, i campi impostabili nel modulo di ricerca sono il range temporale ed il regime (INTERNO/ESTERNO).

Figura 43 – Form di ricerca dei referti e dettaglio dell’input della data.

Una volta inoltrata la ricerca, l’elenco dei referti disponibili viene restituito da una chiamata asincrona alla pagina dataaccess.jsp. I parametri da passare al server sono contenuti all’interno di una stringa e separati tra loro dal carattere &.

var dataString = "method=2&table=TABELLA_REFERTI"; $.ajax({

type: "post",

data: dataString, cache: false, success: function(msg) { scrivi_elenco($.trim(msg)); }, error: function() {

scrivi_popup("Chiamata fallita, si prega di riprovare..."); }

});

La pagina dataaccess.jsp si occupa dunque di effettuare le interrogazioni al database e ricavare le informazioni richieste. Dato che questa stessa pagina sarà utilizzata in seguito anche per consultare i dati anagrafici è stato fatto in modo che, al fine di rendere il più adattabile possibile il codice, le query da eseguire vengano costruite dinamicamente sulla base dei parametri passati in ingresso alla pagina secondo la seguente sintassi:

 method: deve essere sempre nella prima posizione e, a seconda del metodo indicato, vengono eseguite operazioni diverse cambiando il formato dei risultati restituiti;

 table: è il secondo parametro che deve essere passato e definisce quale tabella/vista del database deve essere interrogata;

 ulteriori parametri sono facoltativi ed indicano eventuali condizioni di ricerca, impostabili secondo la sintassi NOME_CAMPO=”VALORE”.

Il parametro CODICE_FISCALE invece viene sempre passato di default e recuperato dalle variabili memorizzate in sessione.

queryBuilder.append("SELECT * FROM ");

//Preno i nomi dei parametri passati tramite la richiesta Enumeration paramNames = request.getParameterNames();

//Il primo parametro è il tipo di visualizzazione richiesto in uscita (tabella o lista) paramNames.nextElement();

String method = (String) request.getParameter("method"); //Il secondo parametro è la tabella su cui effettuare la query paramNames.nextElement();

String parameterValue = (String) request.getParameter("table"); queryBuilder.append(parameterValue);

queryBuilder.append(" WHERE CODICE_FISCALE='"+username+"' "); if(paramNames.hasMoreElements()){

while (paramNames.hasMoreElements()) { //Prendo il nome del parametro

String parameter = (String) paramNames.nextElement(); System.out.println(parameter);

if(parameter.equals("DataDa")){

//Prendo il valore corrispondente al parametro

parameterValue = (String) request.getParameter(parameter); //Assemblo la stringa

queryBuilder.append(" AND TO_DATE(DATA_ESECUZIONE, 'DD-MON-YY')").append(" > TO_DATE('").append(parameterValue).append("','YYYY-MM-DD') ");

}

else if(parameter.equals("DataA")){

//Prendo il valore corrispondente al parametro

parameterValue = (String) request.getParameter(parameter); //Assemblo la stringa

queryBuilder.append(" AND TO_DATE(DATA_ESECUZIONE, 'DD-MON-YY')").append(" < TO_DATE('").append(parameterValue).append("','YYYY-MM-DD') ");

//Prendo il valore corrispondente al parametro

parameterValue = (String) request.getParameter(parameter); //Assemblo la stringa

queryBuilder.append(" AND ").append(parameter).append(" = '").append(parameterValue).append("' ");

} } }

String query = queryBuilder.toString(); System.out.println("Query: "+query);

Arrivati a questo punto, a seconda del metodo specificato nei parametri, i record ricavati dall’esecuzione della query andranno a popolare delle adeguate porzioni di codice HTML che successivamente saranno utilizzate dalla funzione JavaScript scrivi_elenco() per l’impaginazione dei risultati. In questo caso i dati inseriti vengono messi all’interno di una ListView, come mostrato nella figura successiva.

Figura 44 – Report dei referti e popup per la visualizzazione o il download.

HTMLBuilder.append("<li data-role='list-divider'>"

+rs.getObject("DATA_ESECUZIONE").toString()+ "</li>"); HTMLBuilder.append("<li data-icon='gear' data-theme='c'>

<a

href='javascript:pdf_popup("+rs.getObject("CODICE_REFERTO").toString()+")' data-rel='popup' data-position-to='window' data-transition='pop'>"); HTMLBuilder.append("<h2>Tipo: "+rs.getObject("NOME_DOCUMENTO").toString()+"</h2>"); HTMLBuilder.append("<p>Codice Struttura: "+rs.getObject("STRUTTURA").toString()+". Reparto: "+rs.getObject("REPARTO").toString()+"</p>"); HTMLBuilder.append("</a></li>");

Un popup permette di scegliere se scaricare il file selezionato sul proprio dispositivo o visualizzarlo on-line tramite il plug-in per la lettura dei file di tipo pdf integrato nel browser. Partendo dalla lista dei referti, il recupero del file vero e proprio avviene tramite la pagina getfile.jsp, la quale si occupa di effettuare l’estrazione dell’oggetto di tipo MIME dal campo BLOB della tabella REFERTI. L’ultima funzionalità messa a disposizione riguarda la consultazione ed il controllo dei propri dati anagrafici che sono in possesso della struttura. Anche in questo caso i dati vengono recuperati tramite la pagina dataaccess.jsp, secondo una modalità analoga a quella precedentemente descritta per la lista dei referti.

Figura 45 – Pagina di consultazione dei propri dati anagrafici.

Per fornire un’esperienza utente più vicina ad un’applicazione nativa, è stata abilitata la modalità fullscreen, grazie alla quale le barre di navigazione vengono mostrate o nascoste

alternativamente quando l’utente clicca sulla pagina. In questo modo il vantaggio è che lo spazio utile per la visualizzazione del contenuto si estende a tutto lo schermo, mentre lo svantaggio è che il contenuto finale della pagina potrebbe essere nascosto dalle barre. Per abilitare questa modalità è stato sufficiente impostare le barre su data-position="fixed" ed aggiungere all’elemento con data- role="page" il flag data-fullscreen="true". La barra di navigazione infine, ricopre un’importanza fondamentale nell’interfaccia mobile in quanto rappresenta il punto di interazione per passare da una pagina all’altra e per effettuare il logout in maniera sicura.

Figura 46 – Finestra che sollecita ad effettuare il logout prima di abbandonare la pagina.