0.17   Il CSS dell'applicazione


CLASSE CSS, FILE CSS

Questo capitolo ha come scopo quello di consentire al programmatore di intervenire sui vari aspetti grafici di un’applicazione. In particolare si vedrà come utilizzare e gestire il file di CSS che sovrintende alla renderizzazione delle interfacce.


Obiettivi

Al termine di questo capitolo il programmatore sarà in grado di:


Introduzione

Non è negli scopi di questo capitolo voler costituire una documentazione sull’uso dei CSS (Cascading Style Sheets): qui assumeremo una conoscenza elementare dell’HTML e del possibile uso di librerie esterne di definizione grafica (file CSS).

A questo aggiungeremo solo che o2, per una maggiore flessibilità e efficacia, non prevede, sui controlli, proprietà specifiche per tutte quelle caratteristiche grafiche che non abbiano una rilevanza funzionale. Ovvero non troverete nell’interfaccia alcun luogo dove specificare il colore del bordo di un controllo o l’immagine di sfondo della finestra. Una classe di stile può riassumere in sé tutte le caratteristiche desiderate e consentite dai CSS: o2 utilizza una classe di stile per ogni elemento grafico che sia possibile variare.


0.17.1   Il file CSS dell’applicazione


Il file CSS dell’applicazione è un file che raccoglie una serie di definizioni grafiche, ognuna col proprio nome (classi di stile). Variando il file CSS dell’applicazione è possibile sostituire in blocco le definizioni grafiche corrispondenti ad ogni nome, ottenendo così lo stesso effetto di variare il tema in Windows o in KDE.

Nella pagina delle proprietà dell’applicazione trovate il campo dove indicare il nome del file CSS. o2runtime controllerà nelle seguenti cartelle la presenza del file indicato:

  1. file://[app_root]/htdocs/css/ (cioè http://[app_alias]/css/)
  2. file://[o2_root]/css/ (cioè http://[o2_alias]/css/)

Nel caso in cui il file non venga trovato o nessun file di CSS venga specificato, o2runtime provvederà ad utilizzare il CSS di default fornito con la distribuzione (/[o2_root]/css/default.css).

La variazione del file di CSS sarà visibile al client solo all’apertura della prossima sezione, ovvero dopo il prossimo login.


0.17.2   La grafica dei controlli


I controlli, sulla base della loro rappresentazione HTML, si dividono in due categorie:

  1. semplici
  2. composti

Si dicono semplici tutti quei controlli ai quali (come al combo box, all’edit field o all’immagine) in HTML corrisponde uno specifico e singolo tag, mentre indicheremo come composti quei controlli che (come la tabella, il navigatore o la finestra) vengono assemblati dall’o2runtime utilizzando e giustapponendo più tag HTML.

A tutti gli elementi semplici è associata un’unica classe di stile, mentre gli elementi composti prevedono più classi di stile per i singoli tag costituenti.

Le classi di stile associate alla window si trovano nella pagina delle proprietà della form.

Le classi di stile dei controlli si trovano nella finestra delle proprietà Object Inspector dei singoli controlli, nella sessione di edit della form.

Premendo F5 sui campi destinati alle classi di stile, l’interfaccia cercherà il file di CSS collegato all’applicazione (se non sarà in grado di identificarlo chiederà al programmatore di indicarlo su file system) e mostrerà l’elenco delle classi di stile presenti sul file e che non inizino con l’identificativo “o2_” (vedi oltre i default). In alto una finestra di preview mostra le caratteristiche della classe e permette di selezionare una voce da associare al controllo.

In questo modo è possibile associare ad un controllo (o ad una parte del controllo, per i controlli complessi) un alias di renderizzazione, che poi verrà risolto dall’o2runtime utilizzando il file di CSS specificato per l’applicazione.


Le classi CSS di default


Qualora nessuna classe di stile venga specificata per un controllo o per una sua proprietà, l’o2 utilizzerà una classe di default specifica e la cui definizione è contenuta nel file default.css della distribuzione.

Per alcune proprietà grafiche dell’applicazione (come, ad esempio, i menu o lo sfondo della finestra del browser) non è possibile specificare la classe di stile ma è comunque possibile modificare la classe di default associata.

Le classi il cui nome termina con i suffissi “_focus”, “_hover” e “_dis” vengono composte automaticamente dall’o2runtime a partire dal nome della classe associata, al fine di ottenere certi effetti grafici con particolari significati funzionali:

Se, ad esempio, voglio utilizzare una classe di nome “importo” per un certo controllo edit, dovrò provvedere a creare nel file CSS dell’applicazione anche le rispettive classi “importo_focus” e “importo_dis”, che sovrintenderanno alla renderizzazione del controllo nei casi, rispettivamente, che il controllo diventi il controllo attivo o che il controllo sia disabilitato alla modifica.


Ecco un elenco delle classi previste per i singoli controlli, con l’indicazione del tag HTML a cui si applicano, il nome della classe di default e una breve descrizione:

Controllo Proprietà Default Tag HTML Descrizione
    o2_sfondo <body> Aspetto generale e sfondo della finestra del browser
Menu   o2_barraMenu <table> Barra dei menu di livello 0
o2_sottoMenu <table> Menu a tendina di livello > 0
o2_voceMenu <td> Ogni voce di menu quando non attiva
o2_voceMenuAttiva <td> Ogni voce di menu quando attiva
o2_spacerMenu <hr> Separatore orizzontale
Form Form o2_form_window <div> Ingombro totale della finestra
Document button o2_form_doc <td> Angolo in alto a sinistra della finestra
Minimize button o2_form_close <td> Pulsante di minimizzazione della finestra (a sinistra della crocetta di chiusura, quando la finestra è massimizzata)
Maximize button o2_form_open <td> Pulsante di ripristino della finestra (a sinistra della crocetta di chiusura, quando la finestra è minimizzata)
Close form button o2_form_exit <td> Angolo in alto a destra della finestra (crocetta di chiusura)
Resize form button o2_form_resize <td> Angolo in basso a destra della finestra, quando la barra di stato è visibile. Contiene il pulsante di resize della form
Title on active form o2_form_title <table> Barra del titolo per le finestre attive
Title on inactive form o2_form_title_no <table> Barra del titolo per le finestre inattive
Body o2_form_body <div> / <iframe> Spazio interno della finestra
Status bar o2_form_status <table> Barra di stato
Table CssDiv o2_tab_space <div> Ingombro esterno stanziato della tabella (come da design)
CssTab o2_tab_tab <table> Ingombro esterno effettivo della tabella (a seconda del numero di righe presenti)
Css Header (controllo) o2_tab_testa <th> Barra dei titoli di colonna. Questa classe è controllabile anche dal campo Css Header delle Parent Options del controllo in tabella
CssBody (form) / Css Line (controllo) o2_tab_corpo <td> Cella del corpo della tabella per le righe diverse dal record corrente. Questa classe è controllabile anche dal campo Css Line delle Parent Options del controllo in tabella
CssCurrentLine (form) / Css Line (controllo) o2_tab_sele <td> Cella del corpo della tabella per la sola riga del record corrente. Questa classe è controllabile anche dal campo Css Line delle Parent Options del controllo in tabella
CssLine o2_tab_riga <tr> Righe dispari del corpo
CssAlternate o2_tab_alt <tr> Righe pari del corpo
CssMouseOverLine o2_tab_point <tr> Riga, non del record corrente, quando vi si posizioni sopra il puntatore del mouse
  o2_tab_sort <span> Pulsante a fianco del titolo che indica la possibilità di sorting per la colonna
o2_tab_sorta <span> Pulsante a fianco del titolo quando la colonna è già segmento ascendente di sorting
o2_tab_sortd <span> Pulsante a fianco del titolo quando la colonna è già segmento discendente di sorting
Navigator orizzontale (o2_ctrl_nav_) e verticale (o2_ctrl_navv_) CssSpace o2_ctrl_nav_space / o2_ctrl_navv_space <table> Ingombro totale del navigatore
CssSlide o2_ctrl_nav_i / o2_ctrl_navv_i <td> Barra scorrevole che indica la parte visibile
CssNavBar o2_ctrl_nav_e / o2_ctrl_navv_e <td> Slitta del navigatore in cui scorre la barra e che rappresenta la totalità del recordset
CssFirst o2_ctrl_nav_first / o2_ctrl_navv_first <div> Pulsante di Vai a primo record
CssPrevPage o2_ctrl_nav_prevpg / o2_ctrl_navv_prevpg <div> Pulsante di Vai a pagina precedente
CssPrev o2_ctrl_nav_prev / o2_ctrl_navv_prev <div> Pulsante di Vai a record precedente
CssNext o2_ctrl_nav_next / o2_ctrl_navv_next <div> Pulsante di Vai a record successivo
CssNextPage o2_ctrl_nav_nextpg / o2_ctrl_navv_nextpg <div> Pulsante di Vai a pagina successiva
CssLast o2_ctrl_nav_last / o2_ctrl_navv_last <div> Pulsante di Vai a ultimo record
Text label Css class o2_ctrl_label <div> Etichette di testo
Separator Css class o2_ctrl_separatore <hr> Separatore orizzontale
Edit field Css class o2_ctrl_edit <input type=’text’> Campo di edit quando modificabile e non è il controllo su cui è il cursore
Css class o2_ctrl_edit_focus <input type=’text’> Campo di edit quando modificabile ed è il controllo su cui è il cursore
Css class o2_ctrl_edit_dis <input type=’text’> Campo di edit quando non modificabile
Text area Css class o2_ctrl_text <textarea> Multiline edit area quando modificabile e non è il controllo su cui è il cursore
Css class o2_ctrl_text_focus <textarea> Multiline edit area quando modificabile ed è il controllo su cui è il cursore
Css class o2_ctrl_text_dis <textarea> Multiline edit area quando non modificabile
List/combo box Css class o2_ctrl_listcombo <select> List/combo box quando non è il controllo su cui è il cursore
Css class o2_ctrl_listcombo_focus <select> List/combo box quando è il controllo su cui è il cursore
Button (standard button)     Css class o2_ctrl_button <input type =’button’> Bottone quando abilitato e non vi è sopra il puntatore del mouse
Css class o2_ctrl_button:hover <input type =’button’> Bottone quando abilitato e vi è sopra il puntatore del mouse
Css class o2_ctrl_button_dis <input type =’button’> Bottone quando non è abilitato
Link (href style button) Css class o2_ctrl_ref <span> Link ipertestuale attivo e quando non vi è sopra il puntatore del mouse
Css class o2_ctrl_ref_hover <span> Link ipertestuale attivo e quando vi è sopra il puntatore del mouse
Css class o2_ctrl_ref_dis <span> Link ipertestuale non attivo
File upload   Css class o2_ctrl_file <input type=’file’> Controllo di file upload quando non è il controllo su cui è il cursore
Css class o2_ctrl_file_focus <input type=’file’> Controllo di file upload quando è il controllo su cui è il cursore
Multipage         Css class o2_ctrl_multi_out <table> Ingombro totale esterno del controllo
Css class o2_ctrl_multi_in <div> Spazio disponibile interno del controllo
Css class o2_ctrl_multi_on <input type =’button’> Pulsante della pagina non attivabile (pagina corrente)
Css class o2_ctrl_multi_off <input type =’button’> Pulsanti delle pagine attivabili (non pagina corrente) quando non vi è sopra il puntatore del mouse
Css class o2_ctrl_multi_off:hover <input type =’button’> Pulsanti delle pagine attivabili (non pagina corrente) quando vi è sopra il puntatore del mouse

0.17.3   La modifica delle classi di stile


A questo punto apparirà evidente che, per variare il modo in cui o2runtime rappresenta graficamente un controllo o una sua parte, al programmatore si offrono tre distinte possibilità:

  1. Associare al controllo una classe diversa da quella di default

    Serve a differenziare un certo controllo, in una sua specifica istanza, in una specifica form, da tutti gli altri controlli dello stesso tipo. Questo modo di intervenire risulta particolarmente utile per risolvere peculiarità grafiche contingenti (come, ad esempio, per differenziare una certa colonna in una tabella o per evidenziare un titolo o una informazione in una specifica form) ma richiede che lo sviluppatore intervenga direttamente sul controllo da modificare.

  2. Variare nel file CSS dell’applicazione la classe di default

    Questo secondo metodo, invece, serve a fondare uno standard di riferimento per tutta l’applicazione e ad avvicinare tutti i controlli di una stessa categoria alle preferenze grafiche e funzionali dello sviluppatore. Questo tipo di intervento può essere molto utile per definire uno standard grafico collettivo in una situazione di sviluppo in equipe o per intervenire “in un colpo solo” su tutti i controlli di una stessa categoria, per variarne le caratteristiche senza dover rintracciare e modificare ogni programma che ne faccia uso.

    ATTENZIONE: la definizione generale dell’aspetto per i singoli controlli è un problema che dovrebbe essere preso in considerazione prima di intraprendere lo sviluppo dei programmi, in quanto la definizione successiva di certe caratteristiche (ad esempio di dimensione, di bordi o di overflow) potrebbe costringere gli sviluppatori a correggere posizioni e spaziature per i controlli già inseriti nelle form.

  3. Variare il file di CSS associato all’applicazione

    Questa terza ed ultima possibilità consiste nell’indicare per l’applicazione un diverso file CSS o nel sovrascrivere il file indicato per l’applicazione con un diverso file. In questi due casi (entrambi facilmente realizzabili anche senza l’ausilio dell’interfaccia di sviluppo) si avrà come risultato, al successivo login, la variazione di tutte le caratteristiche grafiche dell’applicazione: questo metodo può essere particolarmente utile per creare veri e propri temi o skin, cioè set preconfezionati di definizioni grafiche, intercambiabili per le proprie interfacce.


0.17.4   Note e consigli


Per chi abbia una minima familiarità con l’uso dei CSS non sarà difficile immaginare quali difficoltà si possano celare dietro la modifica delle classi; per tutti gli altri vogliamo farne una rapida rassegna:


Consigli operativi