Personalizzare la pagina di login
copia linkTrascrizione
L’accesso controllato all’applicazione prevede una pagina di login ‘standard’ ovviamente con una grafica altrettanto standard; in che modo possiamo personalizzare la pagina ? Iniziamo con il dire che la pagina è una pagina HTML, che viene preprocessata dall’applicazione prima della creazione della vera pagina di login mostrata all’utente: cerchiamo il file nel template dell’applicazione:
Albero di progetto => Applicazione YouBb => tasto destro => Apri cartella di output.
Tra i vari file riconosciamo un file denominato login1.htm: questo è il file che il sistema utilizza per la creazione del file finale di login: copiamo e incolliamo il file nella cartella customapp.
Utilizzando un editor apriamo il file, e scopriamo essere una classica pagina html, quindi un file completamente modificabile in ogni sua parte: volessimo aggiungere immagini, cambiare stili etc... quello che desideriamo.
Solo due cose dobbiamo tenere conto e dobbiamo mantenere:
Per capire il significato di queste righe dobbiamo comprendere il meccanismo alla base per la creazione della pagina di login finale: successivamente all’emissione dell’evento Initialize viene creata, se richiesta, la pagina di login, con la lettura di ogni riga presente nel file login1.htm; le righe normali passano direttamente al file di login finale, al contrario delle righe che iniziano con il simbolo \ (backslash) il cui contenuto viene passato a una funzione di linguaggio simile a questa:
WriteStr(“CONTENUTO RIGA”)
Prendiamo nel file una riga che inizia con \ come:
\ <div class=\"bugBtn\">" + DebugButton() + "</div>
Togliamo il simbolo \ iniziale e innestiamola nella funzione:
WriteStr(“<div class=\"bugBtn\">" + DebugButton() + "</div> “)
Come notate, in questo caso abbiamo 3 elementi uniti dal simbolo + dove 2 sono stringhe e una parte è il risultato di una funzione di linguaggi.
Con questo stratagemma possiamo includere nella pagina di Login codice applicativo, che verrà eseguito prima della creazione della pagina di login finale, come ad esempio funzioni, valori di variabili globali etc...
Ora la parte più difficile potrebbe essere: come scrivo correttamente la riga nel file login1.htm?
Faccio un esempio così sarà più chiaro il metodo: vorrei aggiungere sotto al nome dell’applicazione una frase che cambi ogni giorno o quasi; non posso scriverla diretta nel file login1.htm mi serve customizzare
. Prima inseriamone una fissa sotto a h1:
<h3>Wow! Siete pronti per ospitare?</h3>
Sistemiamo il CSS:
h3 {
font-weight: normal;
font-size: medium;
color: red;
text-align: center;
margin: 5px 20px;
}
Salviamo e ricompiliamo l’applicazione: ed ecco la pagina di login modificata.
Torniamo nel progetto: se ricordate all’inizio vi ho detto ‘“dopo l’emissione dell’evento Initialize” se necessaria si crea la pagina di login: vuole dire che se valorizziamo qualcosa nell’evento Initialize possiamo leggerlo nel login. Creiamo una variabile globale di tipo string.
Albero di progetto, applicazione, tasto destro Aggiungi variabile globale.
Assegniamo come identificativo Claim ed impostiamo il tipo Character 50.
Aggiungiamo una procedura CreaClaim() che serve a valorizzare la variabile globale,
Per ora facciamo frasi diverse a seconda se i minuti dell’orario sono pari o dispari.
Public void creaclaim() {
Int minuti = 0
Minuti = getMinutes(now())
If (minuti % 2 = 0) {
Claim = ‘Siete pronti per viaggiare’
}
Else {
Claim = ‘Il tuo prossimo ospite ti aspetta’
}
}
Nell’evento Initialize richiamiamo la funzione creaclaim().
Ottimo ed ora ultima mossa, il contenuto della variabile di tipo stringa deve comparire nella pagina di login dopo la parola Wow!. Attenzione perché il nome che leggiamo nel progetto della variabile è un Alias, esternamente dobbiamo vedere come è definito alla voce Codice: CLAIM maiuscolo, ed aggiungo, che siccome è gestita come variabile ma è un oggetto Foundation per ottenere all’esterno il valore ho bisogno di una funzione a seconda del tipo contenuto:
Quindi il codice corretto sarà CLAIM.stringValue().
Quindi step 1 trasformiamo la riga come fosse una stringa:
“<h3>Wow!</h3>”
Dove vogliamo inserire il valore della variabile dobbiamo spezzare le stringhe e unirle con il simbolo +.
“<h3>Wow!” + “</h3>”
Ottimo in mezzo adesso possiamo aggiungere la funzione che recupera il valore della variabile.
“<h3>Wow! ” + CLAIM.stringValue() + “</h3>”
E’ necessario controllare che le stringhe costanti presenti nella riga siano valide in linguaggio C# o Java: se nelle stringhe fossero presenti altri simboli di “ dovremmo trasformarli in C# come \” od anche i simboli di \ devono diventare \\.
Ci siamo ora ultima modifica, aggiungiamo in prima posizione il simbolo \ backslash e togliamo il 1 e l’ultimo DOPPIO APICE presente: il gioco è fatto.
Prendete la riga e provate a inserirla in WriteStr(“ CONTENUTORIGA “) e vedrete che è corretta.
Mandiamo in esecuzione e testiamo.
Partendo da queste nozioni, potete personalizzare a vostro piacimento la pagina di login assegnando anche funzionalità dinamiche.
Albero di progetto => Applicazione YouBb => tasto destro => Apri cartella di output.
Tra i vari file riconosciamo un file denominato login1.htm: questo è il file che il sistema utilizza per la creazione del file finale di login: copiamo e incolliamo il file nella cartella customapp.
Utilizzando un editor apriamo il file, e scopriamo essere una classica pagina html, quindi un file completamente modificabile in ogni sua parte: volessimo aggiungere immagini, cambiare stili etc... quello che desideriamo.
Solo due cose dobbiamo tenere conto e dobbiamo mantenere:
- Tag FORM con metodo post e con i campi input hidden etc: perché è il metodo di invio della richiesta di login.
- Le righe contenenti come primo carattere il simbolo di \ (backslash).
Per capire il significato di queste righe dobbiamo comprendere il meccanismo alla base per la creazione della pagina di login finale: successivamente all’emissione dell’evento Initialize viene creata, se richiesta, la pagina di login, con la lettura di ogni riga presente nel file login1.htm; le righe normali passano direttamente al file di login finale, al contrario delle righe che iniziano con il simbolo \ (backslash) il cui contenuto viene passato a una funzione di linguaggio simile a questa:
WriteStr(“CONTENUTO RIGA”)
Prendiamo nel file una riga che inizia con \ come:
\ <div class=\"bugBtn\">" + DebugButton() + "</div>
Togliamo il simbolo \ iniziale e innestiamola nella funzione:
WriteStr(“<div class=\"bugBtn\">" + DebugButton() + "</div> “)
Come notate, in questo caso abbiamo 3 elementi uniti dal simbolo + dove 2 sono stringhe e una parte è il risultato di una funzione di linguaggi.
Con questo stratagemma possiamo includere nella pagina di Login codice applicativo, che verrà eseguito prima della creazione della pagina di login finale, come ad esempio funzioni, valori di variabili globali etc...
Ora la parte più difficile potrebbe essere: come scrivo correttamente la riga nel file login1.htm?
Faccio un esempio così sarà più chiaro il metodo: vorrei aggiungere sotto al nome dell’applicazione una frase che cambi ogni giorno o quasi; non posso scriverla diretta nel file login1.htm mi serve customizzare
. Prima inseriamone una fissa sotto a h1:
<h3>Wow! Siete pronti per ospitare?</h3>
Sistemiamo il CSS:
h3 {
font-weight: normal;
font-size: medium;
color: red;
text-align: center;
margin: 5px 20px;
}
Salviamo e ricompiliamo l’applicazione: ed ecco la pagina di login modificata.
Torniamo nel progetto: se ricordate all’inizio vi ho detto ‘“dopo l’emissione dell’evento Initialize” se necessaria si crea la pagina di login: vuole dire che se valorizziamo qualcosa nell’evento Initialize possiamo leggerlo nel login. Creiamo una variabile globale di tipo string.
Albero di progetto, applicazione, tasto destro Aggiungi variabile globale.
Assegniamo come identificativo Claim ed impostiamo il tipo Character 50.
Aggiungiamo una procedura CreaClaim() che serve a valorizzare la variabile globale,
Per ora facciamo frasi diverse a seconda se i minuti dell’orario sono pari o dispari.
Public void creaclaim() {
Int minuti = 0
Minuti = getMinutes(now())
If (minuti % 2 = 0) {
Claim = ‘Siete pronti per viaggiare’
}
Else {
Claim = ‘Il tuo prossimo ospite ti aspetta’
}
}
Nell’evento Initialize richiamiamo la funzione creaclaim().
Ottimo ed ora ultima mossa, il contenuto della variabile di tipo stringa deve comparire nella pagina di login dopo la parola Wow!. Attenzione perché il nome che leggiamo nel progetto della variabile è un Alias, esternamente dobbiamo vedere come è definito alla voce Codice: CLAIM maiuscolo, ed aggiungo, che siccome è gestita come variabile ma è un oggetto Foundation per ottenere all’esterno il valore ho bisogno di una funzione a seconda del tipo contenuto:
- stringValue() per le variabili Char.
- intValue per le variabili intere.
- decValue per le variabili decimal.
Quindi il codice corretto sarà CLAIM.stringValue().
Quindi step 1 trasformiamo la riga come fosse una stringa:
“<h3>Wow!</h3>”
Dove vogliamo inserire il valore della variabile dobbiamo spezzare le stringhe e unirle con il simbolo +.
“<h3>Wow!” + “</h3>”
Ottimo in mezzo adesso possiamo aggiungere la funzione che recupera il valore della variabile.
“<h3>Wow! ” + CLAIM.stringValue() + “</h3>”
E’ necessario controllare che le stringhe costanti presenti nella riga siano valide in linguaggio C# o Java: se nelle stringhe fossero presenti altri simboli di “ dovremmo trasformarli in C# come \” od anche i simboli di \ devono diventare \\.
Ci siamo ora ultima modifica, aggiungiamo in prima posizione il simbolo \ backslash e togliamo il 1 e l’ultimo DOPPIO APICE presente: il gioco è fatto.
Prendete la riga e provate a inserirla in WriteStr(“ CONTENUTORIGA “) e vedrete che è corretta.
Mandiamo in esecuzione e testiamo.
Partendo da queste nozioni, potete personalizzare a vostro piacimento la pagina di login assegnando anche funzionalità dinamiche.
Ultima modifica: 19/03/2021 / Validità: da 20.5.8000