Applicazioni Commerciali realizzate in Oracle Apex

In questo breve post volevo segnalare questo interessante link, presente sul portale della oracle.com relativo alle applicazioni web realizzate in tecnologia apex.
In particolare la pagina recensisce le diverse soluzioni per differenti aziende/clienti commerciali, con una breve descrizione dell'applicativo, i punti di forza dell'applicativo stesso ed il link al sito web dell'azienda.
Interessante anche la possibilità data dalla stessa Oracle di includere in questa pagina la propria applicazione scrivendo all'indirizzo email seguente: oracle-application-express_ww@oracle.com

Al prox post su Oracle Apex

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

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

Utilizzo di Oracle Application Express Apex

Dopo aver sviluppato codice Pl/Sql per diversi anni, creato diverse applicazioni con Oracle Form&Report, ho deciso tempo fà di intraprendere il viaggio all'interno del mondo di Oracle Application Express (Apex). Dapprima ho incrociato Apex quando era denominato Html DB (release 1.6) e devo dire l'ho molto apprezzato per la facilità di utilizzo nell'importazione/manipolazione dei fogli di calcolo all'interno del Database. Con la versione 4.1 di questo prodotto presente all'interno della versione free di Oracle Database Express Edition (corrente versione11XE), Oracle  ha immesso sul mercato una piattaforma per lo sviluppo di web-application dalle innumerevoli potenzialità e dalla semplicità di sviluppo. La nascita di questo blog vuole essere punto di incontro per condividere idee, approfondimenti, spunti tecnici,etc su Oracle Apex sperando in una crescente futura community  Apex Italia (già molto densa e vasta la community mondiale). Ma vediamo quali sono i principali contesti dove l'utilizzo di Apex diventa efficace ed efficiente in fase di sviluppo di web-application:

• Realizzazione di web-application con operazioni di CRUD (Create, Read,Update e Delete) all'interno del Database e conseguente volume di transazioni
• Utilizzo del Database Oracle 
• Sviluppo delle web-application in tempi rapidi e con semplicità di sviluppo
• Utilizzo di linguaggi di sviluppo quali Pl/Sql (componente di businnes logic) e JavaScript (componente di scripting)
• Strumenti di sviluppo minimali: Browser e database

Le applicazioni sviluppate mediante Apex sono quindi interamente memorizzate nel Database attraverso codice Pl/Sql per la componente di Businnes Logic, metadati memorizzati nelle tabelle per la parte di form,report, scripting code.
Utilizzando la versione gratuita del Database Oracle 11G XE, Apex è già installato e pronto all'uso per cui sviluppare applicazioni web significa solo utilizzare il Browser web.....zero necessità di altre piattaforme software!!

Per Provare online le funzionalità di Apex ci si può registrare direttamente sulla seguente url web

http://apex.oracle.com dove è già attiva la release 4.2 rilasciata il 14 Ottobre 2012 con la nuova feature del supporto per il mobile development.

Molto interessante visitare anche il seguente link:

http://www.oracle.com/technetwork/developer-tools/apex/application-express/apex-com-internet-apps-098508.html

racchiude le applicazioni/siti web realizzati con Oracle Apex e censiti nel sito ufficiale di Oracle.

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

Salvatore Bartucci

linkedin Salvatore Bartucci

twitter Salvatore Bartucci