Oracle Apex e controlli JavaScript

Le potenzialità delle librerie Javascript sono ben consolidate nel contesto di Oracle Apex.
Risulta quindi possibile inserire frammenti di codice jscript per gestire ad esempio molteplici e sempre utili controlli client-side.
In questo articolo metteremo in evidenza  la possibilità di effettuare controlli client-side sugli item di una pagina/form della nostra generica web application sfruttando le potenziali di Javascript e non ricorrendo quindi a controlli server-side.
Creiamo quindi una generica web application nella quale definiremo la pagina controlli_jscript ed una html region con degli item su cui faremo validazione mediante controlli client-side jscript.

La nostra semplice web application permette all'utente di inserire i dati anagrafici ed effettua il controllo di validazione sull'item P9_ETA verificando che il valore imputato  sia maggiore o superiore a 18 anni con alert di errore nel caso il valore fosse inferiore a 18.
La validazione dell'item P9_ETA sarà effettuata mediante una semplice funzione javascript che effettua in modalità client-side il controllo del valore inserito nell'item P9_ETA:


<script type="text/javascript">
function ControllaEta(object){
if(parseInt(object.value)<18)
alert('Valore non ammesso. Età inferiore a 18 anni');
}
</script>

il codice sarà inserito nella proprietà/tabs tab Html Header della pagina controlli_jscript:

mentre la chiamata della funziona ControllaEta sarà eseguita al verificarsi dell'evento javascript onblur (evento che scatta una volta che diventa passivo l'item P9_ETA):

Ed ecco il risultato della validation sull'item P9_ETA una volta che viene inserito un valore inferiore a 18:

L'utilizzo delle librerie jscript in Oracle Apex consente di implementare molteplici controlli, quello visto in questo esempio richiede la scrittura di codice da parte dello sviluppatore mentre le dynamic action (ne parlo qui) consentono mediante wizard la realizzazione di potenti controlli che implementano nativamente codice jscrip e ajax.

Al prox post su......Oracle Apex.

Salvatore Bartucci

Dynamic Action in Oracle Apex

Le Dynamic Action permettono di implementare controlli client-side sugli applicativi sviluppati in Oracle Apex mediante la combinazione di controlli Javascript ed Ajax.
La realizzazione di Dynamic Action avviene mediante l'uso di wizard guidati che facilitano notevolmente lo sviluppatore il quale non si preoccupa della stesura del codice Javascript.
Attraverso la creazione di dynamic action diventa quindi possibile attuare controlli client-side che permettono di nascondere/mostrare (meccanismo di hide/show) item o bottoni delle web form al verificarsi di particolari eventi sulla maschera (double click, valorizzazione di item, etc).
Vediamo un semplice esempio di utilizzo delle dynamic action, in particolare realizziamo una nuova pagina nella nostra web application nella quale saranno presenti due items nazione e descrizione.
Definiamo l'item nazione come select list con valori statici (Francia, Germania, Italia, Usa) mentre l'item descrizione sarà di tipo Text Area per contenere la descrizione della nazione che l'utente potrà inserire.
Realizziamo una semplice dynamic action che verifichi il valore della lista delle nazioni ed allorquando l'utente sceglie 'Italia' l'item descrizione sarà immediatamente valorizzato con un testo predefinito.
Creiamo quindi la pagina P_Dyn_Act di tipo blank page con all'interno la region html R_Dyn_Act ed associamo alla region gli item I1_DYN_ACT ed I2_DYN_ACT.
I1_DYN_ACT sarà di tipo select list e corrisponde alle nazioni mentre I1_DYN_ACT sarà di tipo text area e corrisponde alla descrizione delle nazioni.

Definiamo adesso la Dynamic action attraverso la quale l'utente una volta selezionata la nazione Italia dal select item avrà immediatamente valorizzato il campo descrizione con il testo seguente 'La penisola italiana si trova nel cuore del mediterraneo.'
Attraverso il wizard a livello di item I1_DYN_ACT creiamo la Dynamic action Dyn_Nazione, l'evento che scatenerà la Dynamic Action sarà il 'change' nel select item delle nazioni, in particolare nella sezione When viene indicato l'item I1_DYN_ACT con condition equal to al valore Italia:

Definiamo le condizioni true e false della dynamic action in base alle quali l'item della descrizione I2_DYN_ACT assumerà il valore predefinito (caso true = Italia) oppure apparirà vuoto e quindi pronto all'inserimento di testo nel caso condizione false.

La condizione true con il relativo valore ('La penisola italiana...') che assumerà l'item I2_DYN_ACT:

La condizione false con l'azione di clear dell'item I2_DYN_ACT:

Infine eseguendo la web application avremo il risultato seguente nel caso di nazione diversa da Italia:

Mentre la selezione del valore Italia comporterà il caricamento in automatico nel campo descrizione:

Attraverso le dynamic action si possono implementare sofisticati meccanismi client side che rendono le web application molto funzionali ed estremamente dinamiche agli eventi che scaturiscono nel flusso di selezione dei dati.

Al prox post su...Oracle Apex

Salvatore Bartucci

Oracle Apex - Una web application per la raccolta differenziata

In questo nuovo post sulle funzionalità ed uso di Oracle Apex ho implementato una semplice web application    per la gestione della raccolta Differenziata. Ci ritroviamo quotidianamente a chiederci come debbano esssere differenziati i vari tipi di rifiuti che quotidianamente vengono prodotti e spesso siamo assaliti da dubbi amletici per capire quel tipo di rifiuto come dev'essere differenziato e quindi in quale 'contenitore' dev'essere riposto allora grazie all'uso del web effettuiamo ricerche di pagine web per avere una risposta. Questa semplice web application censisce un numero (censimento work-in-progress) di 'rifiuti' e indica quale sia la modalità di 'differenziare' più idonea.

Creiamo quindi la nostra semplice web appllication GestDifferenziata e definiamo due nuove pagine al suo interno.

Avremo la pagina 1 che chiameremo P_RicercaRifiuto, sarà di tipo page blank con all'interno una region html R_RicercaRifiuto nella quale definiamo il text item P1_RIFIUTO che sarà di tipo autocomplete Fig.1:

Fig.1

Questo text_field sarà valorizzato con le tipologie di rifiuti censiti nella relativa tabella del DB. Ad esempio si potrebbe creare una semplice tabella come la seguente(chiaramente si possono creare più tabelle e relazionarle,etc):

CREATE TABLE "RIFIUTI" 
("ID_RIFIUTO" NUMBER NOT NULL ENABLE, 
"DESCRIZIONE" VARCHAR2(100) NOT NULL ENABLE, 
"TIPOLOGIA_RIFIUTO" VARCHAR2(50) NOT NULL ENABLE, 
"CONTENITORE" VARCHAR2(50) NOT NULL ENABLE)

In tal caso avremmo una sola tabella nella quale censiremo la tipologia di rifiuto con relativo Id e descrizione, le categorie dei rifiuti (Organico, carta, indifferenziata, etx) ed il contenitore in cui dev'essere differenziato (Bianco - Carta; Marrone - Organico; Blu - Multi-materiale; Verde - Vetro).

Sempre all'interno della region R_RicercaRifiuto definiamo anche un button region P1_CERCA, che una volta valorizzato il text field P1_RIFIUTO, avrà come action Fig.2 quella del submit della pagina P_RicercaRifiuto che punterà al link definito attraverso il branches p_6 (Fig. 3) della sezione Page Processing.

Fig. 2

Fig. 3

   

Fig. 4

Il branches P_6 non avrà altro che la funzione di invocare la pagina 6 (vedremo in seguito che sarà una pagina di tipo report) passando il parametro p1_rifiuto della page 1 che valorizzerà il data field IT_6 nella page 6 (Fig. 4).

Creiamo infine la pagina 6 P_GestDiff dove sarà mostrato il risultato di come differenziare il rifiuto cercato nella pagina 1. 

Fig. 5

P_GestDiff sarà quindi di tipo report, all'interno avremo il data filed di tipo hidden IT_6 che riceve il valore di parametro P1_RIFIUTO passato nel branches P_6. _Il data field IT_6 sarà quindi usato nella query del report R_GesDiff presente nella page 6 (Fig. 5).

Infine nella Fig.6 è evidenziata la semplice query di ricerca che utilizziamo nel report R_GesDiff con l'uso del parametro hidden IT_6(che avrà il valore di P1_RIFIUTO per via del passaggio di parametro effettuato attraverso il branches P_6) nella where condition della Sql Query.

Infine nelle figure 7 e 8 l'esecuzione della web application con la ricerca del rifiuto e il risultato di come differenziarlo

Fig. 6

Fig. 7

Fig. 8

Qui è visualizzabile la semplice web application GestDifferenziata, spero nel corso del tempo di renderla più appetibile come veste grafica e censire più rifiuti possibili.

Al prox post su Oracle Apex.

Salvatore Bartucci

Autenticazione Custom in Oracle Apex - Custom Authentication

Le modalità di autenticazione per accedere alle web application sviluppate mediante Oracle Apex sono sostanzialmente le tre seguenti:
- Autenticazione mediante user/credenziali di Oracle Apex
- Autenticazione mediante utenti di Database
- Custom Authentication mediante credenziali di accesso memorizzate in tabella di database.
In questo breve tutorial parleremo della Custom Authentication che risulta utile in diverse realizzazioni di web app per profilare l'accesso all'applicazione mediante le credenziali di utenti memorizzati in tabella di Database.
Realizziamo quindi nello schema del Database, dove punta la nostra Workspace, la tabella utenti nella quale verranno memorizzati i dati relativi agli utenti che hanno diritto di accesso alla generica web application.
Possiamo agevolmente creare la tabella utenti mediante l'interfaccia di SQL Workshop e la sezione Object Navigator--> create table
Di seguito lo script relativo al DDL della nostra tabella utenti:

CREATE TABLE  "UTENTI" 
   ( "ID_UTENTE" NUMBER(5,0) NOT NULL ENABLE, 
 "COGNOME" VARCHAR2(50), 
 "NOME" VARCHAR2(30), 
 "USERNAME" VARCHAR2(30) NOT NULL , 
 "PASSWORD" VARCHAR2(10) NOT NULL , 
  CONSTRAINT "UTENTI_PK" PRIMARY KEY ("ID_UTENTE") ENABLE
   )

Definiamo anche la funzione plsql myauth che ci consente di verificare se la combinazione username/password che l'utente inserisce nella fase di login si congrua rispetto alle credenziali memorizzate nella tabella Utenti e quindi consenta o meno l'accesso alla web application:

create or replace FUNCTION myauth (
p_username IN VARCHAR2,
p_password IN VARCHAR2
)
RETURN BOOLEAN
IS
conta NUMBER;
BEGIN
SELECT COUNT(*) 
into conta 
from utenti 
WHERE Username = p_username 
AND Password = p_password;
IF conta > 0 THEN
RETURN TRUE;
ELSE
RETURN FALSE;
END IF;
END;

Creiamo una generica web application che chiameremo CustomApp ed  all'interno della nostra applicazione definiamo una pagina di tipo Blank che sarà raggiunta dopo il login nel caso le credenziali saranno, mediante la funzione myauth, autenticate valide.

Step successivo sarà quello di modificare all'interno della web application CustomApp l'authentication schema, sarà quindi necessario selezionare la web application CustomApp, cliccare su Shared Components  e quindi selezionare Authentication Schemes:

 

Definiamo quindi un nuovo authentication schemes che chiameremo myauth

e nel wizard di creazione nella sezione Create Authentication Scheme inseriamo sotto la voce authentication function il seguente codice:

 return myauth

Procediamo quindi nel completare wizard cliccando sempre su next sino al termine della creazione del nuovo schema di autenticazione.
Adesso come step finale non resta che associare alla web application CustomApp il nuovo schema di autenticazione, per fare ciò sempre da Shared Components --> Authenitication Schemes e selezioniamo la tab Change Currents e dal menu a discesa selezioniamo la voce myauth :

Eseguendo la web application CustomApp  avremo quindi in fase di login il controllo delle credenziali effettuate attraverso il nuovo schema di autenticazione myauth.
Questa modalità di autenticazione può essere resa fortemente più sicura utilizzando delle funzioni per criptare le password (come può ad esempio essere un algoritmo MD5), in tale circostanza memorizziamo password cifrate nel campo password della  tabella Utenti rendendo la nostra applicazione più sicura e robusta in fase di autenticazione.

Al prox post su Oracle Apex.

Salvatore Bartucci

Applicazione mobile in Oracle Apex 4.2

Punto di forza della versione Oracle Application Express 4.2 è senz' altro il supporto per lo sviluppo di applicazioni mobile. 
La versione 4.2 supporta il framework jquery mobile e consente quindi lo sviluppo di applicazioni web mobile garantendo il supporto ad un largo numero di dispositivi e sistemi operativi mobile. Disponibile qui l’insieme dei dispositivi e sistemi operativi compatibili con il framework jquery mobile.
Vediamo come realizzare una semplice applicazione web mobile in Oracle Apex 4.2. 
Per la realizzazione utilizzeremo la nostra workspace di lavoro disponibile su apex.oracle.com (qui è ben discusso come iniziare a muovere i primi passi con Apex 4.2 utilizzando l'ambiente su apex.oracle.com)Definiamo la nuova web app che chiameremo Mobile_App e che avrà come user interface jquery mobile smartphone:


Creiamo nella nostra applicazione Mobile_App la pagina 1 (di tipo blank page ) che chiameremo P_Mobile e creiamo all'interno della pagina P_Mobile la html region R_Mobile la cui proprietà source sarà valorizzata con il seguente codice:



Nella proprietà region source abbiamo inserito il codice HTML5 per creare una nested list mediante il framework jquery mobile, di seguito la schermata che appare sulla piattaforma android 4.2 con smartphone galaxy nexus:

Step successivo è quello di realizzare le pagine per visualizzare la lista dei clienti ed il dettaglio del singolo cliente, utilizzeremo per tale scopo la creazione di una nuova pagina di tipo Form ed in particolare una form on table with List view.
Definiamo quindi una nuova pagina che conterrà una list view basata su di una tabella d'esempio presente (Emp, demo_customers,etc) nello schema della workspace . 
Partiamo quindi con il definire una nuova page di tipo Form-->Form on a table with List view:



inseriamo le colonne da visualizzare nella pagina che mostrerà la list view dei Clienti:



Clicchiamo su Next e ci verrà proposto di definire la detail page che conterrà il dettaglio dati relativi al cliente selezionato nella nested list view:


Non ci resta che indicare i campi da visualizzare e cliccare su Create Page 
Di seguito le schermate relative al funzionamento della web app su dispositivo mobile (Android 4.2, samsung nexus, opera browser):

Nested List relativa ai Clienti:

Dettaglio dello specifico Cliente:

Al prossimo post su............. Oracle Apex.

Salvatore Bartucci

Realizzare un menu fisheye in Oracle Apex

Il legame Oracle Apex e Javascript permette l'utilizzo di molteplici script per realizzare differenti tipologie di menù. Un semplice e funzionale menu da implementare riguarda il FishEye menu o menu ad 'occhio di pesce'  che risulta anche molto utile nel caso di numero di icone elevato dal momento che consente di focalizzare sempre l'icona in primo piano.

Lo script necessario all'implementazione del menù FishEye è scaricabile da qui.

Realizziamo una semplice web application in Oracle Apex che chiameremo AppFishEye e creiamo la Html page P_AppFishEye. 

Editiamo le proprietà della page P_AppFishEye ed in particolare nella form Html header inseriamo il seguente codice che localizza lo script interface.js per l'animazione del menu fisheye: 
------------------------------------------------------------------------------------------------------------

<html>
<head>
   <script src=#WORKSPACE_IMAGES#interface.js" type="text/javascript"></script>
</head>
<html>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------

Mediante la sezione Shared Components procediamo quindi al caricamento nella Workspace del file interface.js e del file interface-fisheye.css:

Alla nostra applicazione aggiungiamo la  region R_AppFishEye, editiamo quindi le proprietà ed inseriamo nella parte source il seguente codice:

------------------------------------------------------------------------------------------------------

<HTML>
<head>
<meta http-equiv="Content-Language" content="en" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apex and Fisheye menù </title>
<script type="text/javascript" src="#WORKSPACE_IMAGES#interface.js"></script>
    <link   type="text/css"       href="#WORKSPACE_IMAGES#interface-fisheye.css" rel="stylesheet"> 
</head>
<body>
<div id="fisheye" class="fisheye">
<div class="fisheyeContainter">
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES#appf_1.jpg" width="30" /><span>Home</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_2.jpg " width="30" /><span>Email</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_3.jpg " width="30" /><span>Display</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_4.jpg " width="30" /><span>Clock</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_5.jpg " width="30" /><span>Web</span></a>
<a href="f?p=103:2:&APP_SESSION." class="fisheyeItem"><img src="#WORKSPACE_IMAGES#home.png" width="30" /><span>Home</span></a>
<a href="#" class="fisheyeItem"><img src="#WORKSPACE_IMAGES# appf_6.jpg " width="30" /><span>Email</span></a>
</div>
<script type="text/javascript">
$(document).ready(
function()
{
$('#fisheye').Fisheye(
{
maxWidth: 50,
items: 'a',
itemsText: 'span',
container: '.fisheyeContainter',
itemWidth: 40,
proximity: 90,
halign : 'center'
}
)
}
);
</script>
</body>
</HTML>
----------------------------------------------------------------------------------------------------------
Il codice inserito definisce il div della html region dove saranno richiamate in modalità fisheye menù le icone (caricate nella Workspace sempre attraverso la sezione Shared Components) indicate nel codice, appf_1.jpg, appf_2.jpg,etc.
Qui è visibile il semplice menu Fisheye realizzato.

Al prossimo post.....su Apex

Salvatore Bartucci

Validazione input item in Oracle Apex

Oracle Apex, per garantire il controllo formale dei dati inseriti nei text item della nostra web application, permette attraverso la proprietà di Validation della sezione Page Processing di definire una vasta tipologia di controlli che verificano il formale contenuto inserito.

Di seguito i tipi di controlli validazione disponibili:

Come caso di esempio mostriamo il semplice ma utilissimo controllo per la validazione del codice fiscale attraverso l’uso delle espressioni regolari. Definito nella nostra web app l’item P6_COD_FISC destinato a contenere il codice fiscale inserito in fase di input dall’utente, andiamo nella sezione page processing e sotto la voce validation creiamo un nuovo validatore:

Definito a livello di Item:

Scegliamo l’Item su cui effettuare la validazione:

Definiamo il tipo di validazione, nel nostro caso Espressione regolare:

Nel campo error Display location possiamo indicare la posizione dove indicare il messaggio di errore nel caso il codice inserito non sia validato:

   

In questa schermata inseriamo l’espressione regolare per la validazione del codice fiscale ed il messaggio che sarà mostrato nel caso di codice fiscale non corretto:

Definiamo nella proprietà When Button Pressed il button P6_INSERISCI che farà scattare il controllo di validità del codice fiscale:

Quindi facciamo click su Create per terminare la definizione del validation.

Eseguendo la nostra generica web application , durante l’evento di pressione del bottone Inserisci se il codice fiscale risulta non rispettare il controllo dell' espressione regolare avremo la segnalazione di errore sull'item relativo:

Al prossimo post su......Apex

Salvatore Bartucci