APP Mobile in Oracle APEX: 5 suggerimenti da tenere a mente

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!

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

Crea Applicazioni Gestionali con Oracle APEX e gli strumenti Low-Code.

APP Mobile in Oracle APEX: 5 suggerimenti da tenere a mente

Prima di iniziare

Applicazione Contatti

Navigation Menu

Header & Footer

Mobile Page Header

Mobile Page Footer

Tabular Reports

Reflow Report

Column Toggle Report

Classic Report

Responsive CSS Classes

Mobile Events

Conclusioni

TI POTREBBE INTERESSARE:

Lascia un commento Annulla risposta

Prima di iniziare

Applicazione Contatti

Navigation Menu

Header & Footer

Mobile Page Header

Mobile Page Footer

Tabular Reports

Reflow Report

Column Toggle Report

Classic Report

Responsive CSS Classes

Mobile Events

Conclusioni

TI POTREBBE INTERESSARE:

Interazioni del lettore

Lascia un commento Annulla risposta