Salvatore Bartucci Blog (Oracle Application Express

mercoledì 21 novembre 2012

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

martedì 13 novembre 2012

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

mercoledì 7 novembre 2012

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

Salvatore Bartucci Blog (Oracle Application Express - APEX)

Cerca nel blog