Cerca nel blog

sabato 7 ottobre 2017

Oracle Apex 5 - Personalizziamo la Login Page

In questo nuovo post voglio illustrare come si può facilmente personalizzare la pagina di Login in Oracle Apex 5.
Definiamo una nuova webapp app_login di tipo Desktop e selezioniamo nel page designer la login page. Nella sezione dei page items ho creato la region Autenticazione con gli item P01_USERNAME E P01_PASSWORD:



















Settiamo la proprietà Appearance con il template Login per avere in visualizzazione la login page.






















Selezioniamo in successione i due items P01_USERNAME e P01_PASSWORD ed impostiamo la proprietà Value Placeholder con il suggerimento per l'immissione testo negli item sopra citati. Per la username ad esempio potremmo suggerire 'inserisci la tua username'.
Modifichiamo la dimensione del Button LOGIN, nelle proprietà del template settiamo width con il valore stretch



















Ulteriore customizzazione per gli item di username e password si possono fare richiamando nelle proprietà degli item la sezione icon CSS Classes , in tal modo possiamo scegliere l'icona per la username e l'icona per la password che compariranno negli items. Imposteremo i valori icon-login-username e icon-login-password



















Possiamo ulteriormente customizzare la login page con la scelta dell'icona inerente alla tipologia di azienda/settore/ambito. Nelle proprietà della Region Autenticazione, selezioniamo la sezione icon CSS Classes e possiamo divertirci nello scegliere l'icona più adatta


















Come ultima cosa possiamo inserire una immagine di sfondo. Dapprima carichiamo la foto tra gli oggetti della webapp, cliccliamo sulla icona dei Shared Components-->static files ed effettuiamo l'upload dell'immagine desiderata.
Adesso nelle proprietà della login page settiamo l'immagine come sfondo di background attraverso le proprietà del CSS iserendo il codice seguente:
.t-PageBody--login .t-Body{
background: url(#APP_IMAGES#DSC_4240.JPG);
background-repeat: no-repeat;
background-size: cover;
}

Per localizzare la foto prima caricata usiamo la consueta referenzialità: #APP_IMAGES#nome immagine:

















Di seguito come si presenta la pagina personalizzata di login:






















A prox post su Oracle Apex.

1 commento:

  1. Articolo interessante. Ho cominciato ad usare APEX da poco, ma lo trovo un pochino ostico. Sto cercando una community italiana dove poter trovare aiuto e suggerimenti piu' velocemente. Spero qualcuno legga questo commento. Saluti

    RispondiElimina