In questo articolo parliamo di come creare applicazioni mobile in Oracle APEX.
La prima cosa che devi sapere è che quando si parla di sviluppo mobile esistono davvero tantissime possibilità a partire dalla distinzione che c’è tra applicazioni native, cioè destinate a specifici sistemi operativi (iOS e Android), e quelle ibride che sono invece indipendenti dal sistema operativo.
Ad esempio, le applicazioni mobile sviluppate con Oracle APEX sono di tipo browser based perché vengono eseguite all’interno del browser installato nel dispositivo.
Da un lato questa è una cosa positiva, perché vuol dire che le applicazioni APEX sono compatibili con praticamente tutti i dispositivi muniti di un browser.
D’altro canto, per funzionare hanno bisogno di una connessione Internet attiva.
Questo vuol dire che non è possibile utilizzare APEX in modalità off-line?
Ad oggi la risposta è affermativa: le applicazioni APEX standard possono funzionare solo on-line. Tuttavia c’è da dire che qualcuno ha provato a realizzare un Progressive Web APP in APEX.
Ma non è di questo che discuteremo oggi.
Rimanendo nell’ambito delle funzionalità out-of-the-box che abbiamo a disposizione vorrei darti alcuni semplici accorgimenti che ti aiuteranno a sviluppare applicazioni APEX ottimizzate per l’utilizzo su dispositivi mobile.
In particolare imparerai:
- come organizzare il menù e le pagine di una app mobile first
- come rendere l’applicazione responsive
- come implementare gli eventi Touch
Non spaventarti, scriveremo pochissimo codice, quindi mettiti comodo e buon divertimento!.
IN QUESTO ARTICOLO
Prima di iniziare
Come al solito, quale modo migliore per imparare se non con le mani in pasta?
Forse lo sai già, Oracle mette a disposizione di tutti coloro che lo desiderano un ambiente di sviluppo 100% cloud di prima classe tramite la piattaforma Oracle Cloud.
Registrandoti al servizio Oracle Cloud Free Tier avrai a disposizione gratuitamente e per tempo illimitato due Oracle Autonomous Database già configurati per essere utilizzati con Oracle APEX e Oracle SQL Developer
In alternativa, se vuoi giocare un po’, puoi sempre ottenere un ambiente di prova gratis su apex.oracle.com.
Applicazione Contatti
Come esercizio, creeremo una semplicissima applicazione per la gestione dei contatti aziendali.
- Accedi al Workspace APEX
- Vai in SQL Workshop > SQL Commands
- Inserisci lo script per creare la tabella EMPLOYEE
CREATE TABLE "EMPLOYEE"
( "ID" NUMBER GENERATED BY DEFAULT ON NULL AS IDENTITY MINVALUE 1 MAXVALUE 9999999999999999999999999999 INCREMENT BY 1 START WITH 1 CACHE 20 NOORDER NOCYCLE NOKEEP NOSCALE NOT NULL ENABLE,
"FIRST_NAME" VARCHAR2(4000 CHAR),
"LAST_NAME" VARCHAR2(4000 CHAR),
"EMAIL" VARCHAR2(4000 CHAR),
"BIRTH_DATE" DATE,
"DEPARTMENT" VARCHAR2(4000 CHAR),
"CITY" VARCHAR2(255 CHAR),
"ADDRESS" VARCHAR2(4000 CHAR),
CONSTRAINT "EMPLOYEE_ID_PK" PRIMARY KEY ("ID")
USING INDEX ENABLE
)
/
- Vai in APP Builder e premi Create

- Dai un nome alla tua applicazione
- Se lo desideri puoi già da subito configurare le schede principali dell’applicazione. Qui sotto trovi un esempio.

- Quando hai fatto premi Create Application e lancia la Page Preview per vedere il risultato.

Fin qui, nulla di diverso dal solito.
Ora vedremo come trasformare questa semplice applicazione una app mobile a tutti gli effetti!
Navigation Menu
Partiamo con la progettazione del menu di navigazione, aspetto da non trascurare visto che non solo deve guidare l’utente a trovare ciò di cui ha bisogno, ma è anche il punto dove tornerà più spesso per spostarsi agevolmente da una funzionalità all’altra.
In Oracle APEX è possibile implementare molto facilmente un menù di navigazione mobile posizionato nella parte inferiore dello schermo, come nell’immagine seguente.

Questa soluzione, come forse avrai intuito, è una di quelle maggiormente utilizzate ed è facile capirne il motivo.
Facilita la navigazione e il passaggio tra le schede principali; inoltre, con un semplice tocco di un’icona si passa direttamente alla scheda di destinazione.
Vediamo come implementare in Oracle APEX questo tipo di menù.
- Accedi all’APP Builder e seleziona l’APP che vuoi modificare
- Vai in Shared Components > User Interface Attributes > Navigation Menu
- Seleziona le opzioni seguenti:
- Position: Top
- List Template: Top Navigation Tabs
- Template Option > Desktop: Display labels inline
- Template Option > Mobile: Do not display labels

Header & Footer
Nella maggior parte dei casi la struttura base di qualsiasi applicazione mobile è fatta da tre parti principali.
- Una Intestazione o Header
- Il Corpo Principale (Body) in cui viene visualizzato il contenuto.
- Un Footer che generalmente può contenere link o pulsanti.

Vediamo come puoi costruire l’Header e il Footer di una qualsiasi scheda della tua APP.
Mobile Page Header
- Accedi all’APP Builder e seleziona la pagina dove vuoi creare l’intestazione.
- Aggiungi una Page Region di tipo Static Content.

- Seleziona la Page Region che hai creato e vai in Appearance.
- Selezione il template Hero.

- Puoi aggiungere dei componenti all’interno della Page Region, ad esempio un Page Button.

- Seleziona il Page Button e posizionalo nella sezione Next

- Seleziona sempre il Page Button e vai in Appearance.
- Configura il template Icon e seleziona l’icona che preferisci.

- Clicca su Template Options e seleziona l’opzione
- Style: Display as Link

- Clicca sulla Page Root

- Vai in Appearance > Template Options

- Seleziona l’opzione Sticky Header on Mobile

- Questo è il risultato

Mobile Page Footer
- Aggiungi al Content Body una nuova Page Region di nome Page Footer

- Vai in Appearance e seleziona il template Buttons Container

- Clicca su Template Options e selezione l’opzione Stick to Bottom for Mobile

- Aggiungi alla Page Regions i Page Buttons di cui hai bisogno.

- Se esegui la Preview questo dovrebbe essere il risultato

Tabular Reports
Devo essere onesto, visualizzare dei report tabellari in una app mobile non è mai la scelta migliore.
Per capire il motivo di questa affermazione proviamo a creare una region di tipo Interactive Report + Form che consenta di visualizzare e modificare le informazioni anagrafiche dei dipendenti di una generica azienda usando la tabella EMPLOYEE creata precedentemente.
- Accedi all’APP Builder e clicca Create Page.
- Seleziona la tipologia Form > Report with Form

- Aggiungi una voce dedicata al menù di navigazione (quello che abbiamo personalizzato pochi minuti fa).

- Nell’Origine Dati indica la tabella che APEX utilizzerà per salvare i records

- Specifica la Primary Key

- Questo è il risultato finale

Se eseguiamo la preview otteniamo qualcosa di simile alla schermata successiva.

Notiamo fin da subito un problema: un dispositivo mobile non è in grado di contenere tutta la griglia.
Inevitabilmente l’utente dovrà usare usare la scrollbar per scoprire tutte le colonne.
Questo risultato, che si ottiene usando i report tabellari (Interactive Report ed Interactive Grid), non è certo ottimale.
Fortunatamente Oracle APEX mette a disposizione alcune soluzioni alternative che ti consentono di risolvere agevolmente il problema.
Vediamone insieme alcune che ritengo particolarmente interessanti.
Reflow Report
Il Reflow Report è un componete che consente di visualizzare in un’unica schermata tutte le colonne di un report, indipendentemente da loro numero.
Non ci credi?
- Crea una nuova Page Region di tipo Reflow Report

- Configura il Reflow Report specificando l’origine dati
- Esegui la Page Preview

Il risultato finale a prima vista sembra quello di un classico report tabellare.
Tuttavia, è sufficiente vedere il risultato su dispositivo mobile per apprezzare una differenza sostanziale: ogni riga del report viene visualizzata con un formato verticale che consente all’utente di visualizzare tutte le colonne del record in un’unica schermata.

Column Toggle Report
Questo secondo componente permette di nascondere velocemente le colonne di una tabella affinché l’utente possa vedere quelle di proprio interesse.
In questo caso, a differenza del Reflow Report, la formattazione tabellare è mantenuta.
- Crea una nuova Page Region di tipo Column Toggle Report

- Configura il Reflow Report specificando l’origine dati
- Esegui la Page Preview e premi Columns

- Seleziona le colonne che vuoi visualizzare.

Classic Report
L’ultimo metodo che desidero spiegarti si basa sull’uso del Classic Report che, come forse sai già, grazie all’utilizzo dei Template HTML è in grado di offrire una grande flessibilità.
In questo caso, rispetto ai precedenti, dobbiamo necessariamente modificare la query SQL affinché i valori da visualizzare siano mappati con i placeholders del template HTML.
- Crea una nuova Page Region di tipo Classic Report

- Seleziona il report e vai in Attributes.
- Seleziona il template che preferisci, ad esempio Media List

- Esegui la Preview

- Per mappare le colonne della query con i placeholders del template HTML è necessario modificare la query aggiungendo i campi che vuoi visualizzare nel record:
- LIST_TITLE, LIST_TEXT, LIST_BADGE, ICON_CLASS, LINK
select ID,
FIRST_NAME,
LAST_NAME,
EMAIL,
BIRTH_DATE,
DEPARTMENT,
CITY,
ADDRESS,
/* COLONNE TEMPLATE HTML */
FIRST_NAME ||' '|| LAST_NAME LIST_TITLE,
EMAIL LIST_TEXT,
DEPARTMENT LIST_BADGE,
'fa fa-user' ICON_CLASS,
APEX_UTIL.PREPARE_URL(p_url => 'f?p=' || :APP_ID || ':9:'|| :APP_SESSION||'::NO::P9_ID:'||ID) LINK
from EMPLOYEE

- Questo è il risultato finale

In questo esempio ho utilizzato un template predefinito ma ovviamente puoi crearne di nuovi.
Responsive CSS Classes
La scelta di utilizzare componenti ottimizzati è sicuramente l’approccio corretto da seguire se vuoi ottenere l’esperienza migliore per l’utente mobile.
Ciò non toglie che penalizzare del tutto l’utente desktop può essere controproducente, soprattutto se stai realizzando applicazioni gestionali che con molta probabilità saranno utilizzate principalmente da PC.
Cerco di spiegarmi meglio.
Focalizziamoci sull’Interactive Report (ma il discorso vale anche per l’Interactive Grid): è semplicissimo da configurare ed è allo stesso tempo è molto versatile per l’utente finale.
Puoi visualizzare o nascondere le colonne, applicare filtri, raggruppare i dati, costruire grafici pivot, scaricare i records in excel, pdf, ecc…
Insomma, rinunciare a tutto questo ben di Dio è davvero un peccato.
D’altro canto, costruire due versioni della stessa applicazione (una destinata agli utenti mobile e l’altra agli utenti desktop) è forse ancora peggio.
Come fare? Non preoccuparti, anche in questo caso ci pensa Oracle APEX.
Una ricca serie di classi CSS (Responsive Classes) che puoi recuperare qui consentono di rendere l’applicazione web responsiva e non semplicemente adattativa.
Utilizzandole nel modo opportuno possiamo creare una sola applicazione APEX può essere utilizzata al meglio sia in ambito mobile che desktop.
Vediamo insieme come fare.
- Accedi all’APP Builder e seleziona la pagina APEX da modificare
- Crea 2 report e configurali affinché visualizzino gli stessi record
- Un Classic Report ottimizzato per mobile
- Un Interactive Report

- Seleziona il Classic Report
- Vai in Appearance > CSS Classes e inserisci la classe CSS hidden-xs-up

La classe CSS hidden-xs-up (che ho evidenziato nella tabella sotto) rende visibile lo specifico componente solo su schermi minori di 640 pixel.

In maniera del tutto analoga, andremo ad impostare sull’Interactive Report una Responsive CSS Class che lo rende visibile per schermi superiori ai 640 pixel: hidden-xxs-down

- Seleziona l’Interactive Report
- Vai in Appearance > CSS Classes e inserisci la classe CSS hidden-xxs-down

Per una dimensione superiore o uguale ai 640 pixel APEX mostrerà l’Interactive Report.

Quando la dimensione dello schermo si riduce, l’Interactive Report scompare e compare il Classic Report.

Questo risultato è notevole perché non penalizza nessuno ed offre il migliore compromesso possibile.
Mobile Events
Al di là di come vengono presentati visivamente i dati, c’è una differenza sostanziale tra una applicazione mobile ed una desktop ossia come l’utente interagisce fisicamente con l’interfaccia.
Un applicazione mobile non può dirsi tale se non è in grado di intercettare eventi Touch.
La facoltà di un display di riconoscere il movimento di uno o più dita dell’utente è di fondamentale importanza.
Ciò ha rappresentato una svolta generazionale nei device facilitando il passaggio delle tastiere hardware e permettendo l’avvento di quelle software che noi tutti conosciamo.
Nell’ultima parte di questo articolo impareremo come implementare in una applicazione mobile APEX gli eventi Touch, di cui puoi trovare l’elenco completo a questo link.
Proviamo ad implementare l’evento Press (un particolare evento Touch) che scatta quando tieni premuto il dito su un particolare record del Classic Report.

- Seleziona il Classic Report e vai nella definizione dell’Origine Dati.
- Modifica la query aggiungendo il valore LINK_ATTR che conterrà l’attributo record-id valorizzato come nella query seguente
select ID,
FIRST_NAME,
LAST_NAME,
EMAIL,
BIRTH_DATE,
DEPARTMENT,
CITY,
ADDRESS,
FIRST_NAME ||' '|| LAST_NAME LIST_TITLE,
EMAIL LIST_TEXT,
DEPARTMENT LIST_BADGE,
'fa fa-user' ICON_CLASS,
APEX_UTIL.PREPARE_URL(p_url => 'f?p=' || :APP_ID || ':9:'|| :APP_SESSION||'::NO::P9_ID:'||ID) LINK,
' record-id='||ID LINK_ATTR
from EMPLOYEE
- Vai in Dynamic Action e crea una nuova azione dinamica con le seguenti caratteristiche:
- Event: Press
- Selection Type: jQuery Selector
- jQuery Selector: .t-MediaList-itemWrap


- Aggiungi una Action di tipo Execute JavaScript Code ed aggiungi il seguente codice JS
var record_id = this.triggeringElement.getAttribute('record-id');
alert("Press Event on Record " + record_id);

In maniera analoga possiamo implementare anche l’evento Swipe (che scatta quando scorri il dito lateralmente).
- Vai in Dynamic Action ed aggiungi una una nuova azione dinamica:
- Event: Swipe
- Selection Type: jQuery Selector
- jQuery Selector: .t-MediaList-itemWrap


Per testare il risultato finale ti consiglio di aprire l’applicazioni con il tuo smartphone.
Ecco il risultato!

In questo caso mi sono limitato a mostrare un semplice alert. Ovviamente tu implementare la logica applicativa che desideri.
Ad esempio potresti eseguire del codice PL-SQL , mostrare o nascondere degli oggetti, mandare una notifica e-mail,… il limite è la fantasia!
Conclusioni
Bene, siamo arrivati alla fine.
Ovviamente creare applicazioni mobile non si limita a quello che abbiamo visto e ci sono tante altre cose che puoi fare per rendere la tua app mobile APEX più bella ed accattivante.
Ad esempio, potresti implementare l’autenticazione social oppure personalizzare la pagina di login.
Allo stesso tempo potrebbe essere utile sapere come collegarla ad altri sistemi tramite api REST.
Spero che tu abbia trovato interessanti queste informazioni.
Un abbraccio
Daniele
Lascia un commento