Stile Visuale

Uno stile visuale rappresenta un insieme di proprietà grafiche degli oggetti che appariranno nell’interfaccia utente. Insieme al parametro di compilazione Tema grafico, permette di configurare l’aspetto grafico dell’applicazione.

Video corso: Concetto di stile visuale di pannello

Nome: rappresenta il nome logico dello stile visuale, così come sarà riconosciuto all'interno del progetto Instant Developer.

Descrizione: contiene una descrizione significativa dello scopo dello stile visuale. Il testo inserito verrà utilizzato per meglio descrivere il progetto software.

Tipi di anteprima: questi bottoni permettono di scegliere fra tre tipi di anteprima:

• Lista: l’anteprima mostrerà come appariranno in formato lista i campi che avranno questo stile visuale.
• Dettaglio: l’anteprima mostrerà come appariranno in formato dettglio i campi che avranno questo stile visuale.
• Bordi personalizzati: l’anteprima mostrerà come appariranno gli oggetti con i bordi personalizzati definiti da questo stile visuale.

Anteprima: nel riquadro apparirà l’anteprima scelta, con particolare riferimento ai campi dei pannelli. Cliccando nei vari punti dell’anteprima si potranno selezionare le varie proprietà dello stile da modificare con i campi indicati sotto.

• Sfondo pannello: imposta il colore di sfondo dell’intero pannello.
• Testo campi: rappresenta il colore ed il font del valore dei campi.
• Sfondo campi: rappresenta il colore ed il bordo del valore dei campi.
• Allineamento campi: imposta l’allienamento dei valore nel campo.
• Sfondo righe alternate: rappresenta il colore dello sfondo delle righe alternate. Se impostato al valore predefinito, tutte le righe avranno lo sfondo come impostato nella proprietà Sfondo campi.
• Testo intestazione: rappresenta il colore ed il font dell’intestazione dei campi.
• Sfondo intestazione: rappresenta il colore ed il bordo dell’intestazione dei campi.

• Testo gruppi: rappresenta il colore ed il font dell’intestazione dei gruppi.
• Sfondo gruppi: rappresenta il colore ed il bordo dell’intestazione dei gruppi.
• Colore riga attiva: rappresenta il colore di sfondo della riga attiva (selezionata) del pannello.
• Coloreediting: rappresenta il colore di sfondo della cella attiva del pannello
• Colore bordi: rappresenta il colore dei bordi della cella o del pannello.
• Distanza fra le righe: rappresenta la distanza in pixel fra le righe del pannello, valido solo per il visual style applicato all’oggetto pannello.

• Distanza intestazione: rappresenta la distanza in pixel fra l’intestazione e la prima riga del pannello, valido solo per il visual style applicato all’oggetto pannello.
• Sfondo gruppi (dettaglio): rappresenta il colore ed il bordo dello sfondo dell’intero gruppo nella visualizzazione in dettaglio.
• Sfondo intestazione (dettaglio): rappresenta il colore ed il bordo dello sfondo dell’intestazione del campo nella visualizzazione in dettaglio.
• Testo gruppi (dettaglio): rappresenta il colore ed il font dell’intestazione dei gruppi nella visualizzazione in dettaglio.
• Sfondo QBE: rappresenta il colore di sfondo dei campi quando il pannello è nello stato inserimento criteri di ricerca.

• Sfondo sola lettura: rappresenta il colore di sfondo dei campi quando essi sono in sola lettura.
• Colore riga attiva sola lettura: rappresenta il colore di sfondo dei campi della riga attiva del pannello quando essi sono in sola lettura.
• Sfondo campi (dettaglio): rappresenta il colore ed il bordo del valore dei campi nella visualizzazione in dettaglio.
• Allineamento intestazione: imposta l’allienamento dell’intestazione del campo.
• Allineamento intestazione (dettaglio): imposta l’allienamento dell’intestazione del campo nella visualizzazione in dettaglio.

• Spaziatura fra caratteri: imposta la spaziatura fra i caratteri in centesimi di punto. Se si inserisce un valore negativo, i caratteri risulteranno più compatti, con un valore positivo essi saranno più spaziati del solito. In anteprima non tutti i browser gestiscono correttamente questa opzione.
• Spaziatura fra parole: imposta la spaziatura fra le parole in centesimi di punto. Se si inserisce un valore negativo, le parole risulteranno più compatte, con un valore positivo esse saranno più spaziate del solito. In anteprima non tutti i browser gestiscono correttamente questa opzione.
• % allargamento font: è la percentuale di zoom orizzontale del font. Inserendo un valore positivo il font risulterà più largo del solito, con un valore negativo, risulterà più stretto. In anteprima non tutti i browser gestiscono correttamente questa opzione.

• Testo campi in stato errore: rappresenta il colore ed il font del valore dei campi se essi sono in stato di errore.
• Sfondo campi in stato errore: rappresenta il colore del valore dei campi se essi sono in stato di errore.
• Testo campi in stato warning: rappresenta il colore ed il font del valore dei campi se essi sono in stato di warning.
• Sfondo campi in stato warning: rappresenta il colore del valore dei campi se essi sono in stato di warning.
• Intestazione campi obbligatori: rappresenta il colore ed il font dell’intestazione dei campi obbligatori. In caso di valore predefinito, verrà usata la proprietà Testo Intestazione.

• Colore righe alternate in sola lettura: rappresenta il colore dello sfondo delle righe alternate se il campo è in sola lettura. Se impostato al valore predefinito, tutte le righe avranno lo sfondo come impostato nella proprietà Sfondo sola lettura.

Se lo stile viene associato ad una box o span di report, le proprietà significative saranno:

• Sfondo campi: rappresenta il colore ed il bordo della box.
• Sfondo righe alternate: rappresenta il colore dello sfondo della box nelle sezioni associate a righe alternate. Se impostato al valore predefinito, tutte le box avranno lo sfondo come impostato nella proprietà Sfondo campi.
• Testo campi: rappresenta il colore ed il font degli span nella box.
• Allineamento campi: imposta l’allienamento del valore nella box.
• Colore bordi: rappresenta il colore dei bordi della box.

Se lo stile viene associato ad un grafico, le proprietà significative saranno:

• Sfondo pannello: è il colore di sfondo interno agli assi del grafico; nel caso di grafico a torta è l'interno sfondo del grafico.
• Sfondo intestazione: è il colore di sfondo del grafico esterno agli assi; non considerato in un grafico a torta.
• Colore bordi: è il colore del bordo del grafico.
• Testo intestazione: è il font ed il colore del titolo del grafico.
• Allineamento intestazione: permette di modificare l'allineamento del titolo del grafico.
• Testo campi: è il font ed il colore utilizzato per i valori degli assi.
• Testo gruppi: è il font ed il colore utilizzato nella legenda e nelle label dei grafici a torta.

• Sfondo gruppi: rappresenta il colore di sfondo della legenda.
• Intestazione campi obbligatori: è il font ed il colore utilizzato per le label degli assi.
• Mostra valori: tramite questa check-box si può decidere se mostrare o meno le etichette con i valori vicino ai punti del grafico.

Se lo stile viene associato ad una serie di un grafico, le proprietà significative saranno:

• Sfondo campi: è il colore che verrà utilizzato per disegnare la serie. Attenzione: L'impostazione della direzione del gradiente è globale, quindi se si utilizzano gradienti tutte le serie che definiscono un gradiente devono essere configurate con la stessa direzione.
• Testo campi: è il font utilizzato nella label dei valori per la serie (ma non nelle label dei grafici a torta).
• Bordo custom superiore: configura lo stile della linea nel caso di un grafico a linee; se il grafico è a barre configura il colore e lo stile del bordo barra.

Selezione colore: permette di scegliere il colore associato alla proprietà selezionata. Il valore predefinito significa trasparente.

Selezione font: permette di scegliere il font associato alla proprietà selezionata.

Selezione bordi: permette di scegliere il tipo di bordo associato alla proprietà selezionata. Selezionando Personalizzato, verranno usate le proprietà definite nell’anteprima Bordi personalizzati.

Selezione valore: permette di scegliere il valore associato alla proprietà selezionata.

Sfumatura: indica il tipo di sfumatura associata alla proprietà selezionata. Attenzione: non tutti i browser supportano ancora la definizione di sfumature dinamiche.

Selezione colore sfumatura: permette di scegliere il colore finale della sfumatura selezionata.

Opacità: valore da 0 (trasparente) a 100 (opaco), indica il grado di opacità associata alla proprietà selezionata.

Lato bordo (anteprima bordi personalizzati): permette di scegliere il lato del bordo da configurare.

Colore (anteprima bordi personalizzati): permette di scegliere il colore del lato selezionato.

Tipo linea (anteprima bordi personalizzati): permette di scegliere il tipo di linea del lato selezionato.

Larghezza linea (anteprima bordi personalizzati): permette di scegliere lo spessore della linea del lato selezionato. Il valore è espresso in quarti di punto tipografico.

Margine (anteprima bordi personalizzati): permette di scegliere il margine interno del lato selezionato. Il valore è espresso in quarti di punto tipografico.

Password: indica che il campo contiene una password quindi verrà visualizzato con gli asterischi o i puntini.

Mostra valore: in caso di valore proveniente da una lista valori, il campo deve mostrare anche il valore non decodificato.

Mostra descrizione: in caso di valore proveniente da una lista valori, il campo deve mostrare anche il valore decodificato.

Mostra icona: in caso di valore proveniente da una lista valori, il campo deve mostrare anche l’icona associata alle costanti, se presente.

Cliccabile: i campi associati a questo stile visuale risulteranno cliccabili.

Incorpora Font: durante la creazione del PDF, i campi che avranno questo stile causeranno l’incorporazione del font associato nel file PDF. Il file PDF crescerà di dimensione.

Font Unicode: durante la creazione del PDF, i campi che avranno questo stile causeranno la gestione unicode del font. Il file PDF crescerà di dimensione.

Campi modificabili

• Campi di tipo numerico: è possibile usare i token 0 per indicare una cifra sempre presente ed il token # per indicare una cifra opzionale. Il token punto rappresenta il separatore decimale e la virgola il separatore delle migliaia. A runtime i reali separatori usati dipendono dalla lingua e dalle impostazioni dell’applicazione. Se il campo è più lungo della maschera, il primo carattere della maschera verrà esteso, se il campo è più corto della maschera, essa verrà troncata a partire da destra. Esempi:
  #0: campo intero con almeno una cifra.
  #,###,###,##0.00: campi valuta con due decimali, sempre esplicitati.

• Campi di tipo alfanumerico: i token riconosciuti sono: a, per lettere minuscole, A per lettere maiuscole, # per cifre e & per cifra o lettera maiuscola. E’ possibile aggiungere altri caratteri che verranno interpretati come segni fissi. Se la maschera è però impostata a >, allora tutto il campo verrà convertito in maiuscolo, se impostata a < tutto il campo sarà minuscolo e se impostata a =, allora non verrà effettuata la codifica HTML e sarà possibile vedere un testo html realmente formattato.
  Esempi:
  A&: codice che inizia per lettera maiuscola e poi può contenere lettere o numeri.
  AAA-AAA-##A##-A###A: codice fiscale.

• Campi di tipo data: vengono riconosciuti i seguenti token: g o d per il giorno, m per il mese, a o y per l’anno, h per l’ora, n per i minuti e s per i secondi. Attualmente non è possibile usare date con anno a due cifre, ma sempre a quattro.
  Esempi:
  dd-mm-yyyy: data in formato italiano.
  dd-mm-yyyy hh:nn: data e ora in formato italiano.

Campi non modificabili In questo caso è possibile utilizzare tutti i token descritti precedentemente, ma in più è possibile anche usare i token riconosciuti dalle funzioni di conversione degli ambienti java e .net. In particolare:

• Campi di tipo numerico: in java vengono formattati tramite la classe DecimalFormat, in .NET tramite la Decimal.ToString.
• Campi di tipo data: in java vengono formattati tramite la classe SimpleDateFormat, in .NET tramite la Decimal.ToString. Per uniformare i due ambienti, nella stringa passata come maschera vengono fatte delle sostituzioni: il token m viene sostituito con M, il token h con H ed il token n con m. Inoltre in java il token dddd viene sostituito con EEEE ed il token ddd con EEE.

Tipo di controllo: questa proprietà permette di selezionare il tipo di controllo da visualizzare. I possibili valori sono:

• Selezione automatica: verrà utilizzata una combo box se il campo ha associata una lista valori, oppure una edit box.
• Edit Box: il campo verrà sempre modificato tramite una edit box.
• Combo Box: verrà utilizzata una combo box se il campo ha associata una lista valori, oppure una edit box.
• Check Box: il campo verrà modificato tramite un check box, se il campo ha associata una lista valori, oppure una edit box.
• Radio button: il campo verrà modificato tramite radio button (option button), se il campo ha associata una lista valori, oppure una edit box.
• Bottone: il campo verrà mostrato come bottone.
• HTML Editor: all'interno del campo verrà mostrato un editor avanzato.

Cursore: permette di specificare quale cursore dovrà essere mostrato nei campi e nelle box di report a cui lo stile visuale è associato.

Class name: Permette di specificare una o più classi CSS da applicare all'oggetto a cui il Visual Style è associato.