Ottimizzate al massimo i vostri progetti StyleVision grazie alla selezione dinamica dei file CSS

Una delle caratteristiche principali di StyleVision è la sua flessibilità. Con StyleVision, è possibile creare fogli di stile e report visivamente sofisticati per la visualizzazione in diversi formati, tra cui HTML, PDF e moduli elettronici standard. Ora, StyleVision rende ancora più semplice adattarsi a diverse esigenze di formattazione all'interno di un unico progetto, grazie alla selezione dinamica dei file CSS, una nuova funzionalità introdotta in StyleVision 2012.

Sebbene sia ancora possibile gestire praticamente tutte le attività di formattazione direttamente all'interno del design di StyleVision, la selezione dinamica dei file CSS consente di creare un singolo modello utilizzabile in diverse situazioni. A titolo di esempio, abbiamo creato una fattura per la fittizia società Nanonull Corporation, il cui design cambia in base al numero di giorni trascorsi tra la data di emissione della fattura e la data di scadenza. Sebbene avremmo potuto utilizzare XPath per modificare la formattazione di ogni elemento in base al numero di giorni trascorsi, in questo caso è più efficiente creare singoli file CSS che si applicano a diversi scenari.

Di seguito è riportata la fattura che abbiamo progettato con StyleVision. Notate che, al di là delle intestazioni in grassetto, è quasi priva di formattazione: applicheremo la formattazione in base al numero di giorni trascorsi tra la data di emissione della fattura e la data di scadenza, utilizzando file CSS.

Ora possiamo creare i nostri file CSS in XMLSpy, il software di Altova Editor XML con supporto integrato per la modifica di CSS2 e CSS3.

Innanzitutto, creeremo un file CSS per le fatture con date di scadenza successive alla data di emissione (ovvero, fatture che non sono in scadenza). In questo caso, abbiamo semplicemente creato il selettore "body" con uno sfondo giallastro, il logo di Nanonull e una classe per l'intestazione.

Ora creeremo un CSS più elaborato per le fatture scadute. Il selettore "body" includerà un'immagine che indica la scadenza, il selettore "paragraph" avrà un carattere rosso in grassetto di 20 punti, e le classi "header" e "small header" avranno un carattere rosso in grassetto di diverse dimensioni.

Ora possiamo assegnare i file CSS al progetto di design di StyleVision e, successivamente, assegnare classi a diversi elementi del design.

In StyleVision, è sufficiente cliccare su "aggiungi nuovo file CSS" nella sezione "Panoramica del design" e navigare fino ai file CSS che abbiamo creato in XMLSpy. StyleVision supporta l'utilizzo di più file CSS nello stesso progetto.

Il nostro progetto ora ha questo aspetto: notate che la formattazione proveniente sia da CSSRegular che da CSSOverdue è stata applicata nella vista di progettazione di StyleVision.

Tuttavia, vorremmo assegnare il file CSS in base alla distanza tra la data di emissione della fattura e la data di scadenza. Pertanto, faremo clic con il tasto destro del mouse sulla freccia accanto al file CSS nella sezione "Panoramica del design" e selezioneremo l'opzione "Seleziona un file CSS con XPath" (indicata di seguito).

Questo aprirà la finestra di dialogo "Seleziona file CSS tramite XPath" (mostrata di seguito). Possiamo utilizzare XPath in questa finestra di dialogo per selezionare il file CSS appropriato in base a input dinamici. In questo caso, abbiamo istruito StyleVision a utilizzare il file CSSOverdue.css se la data di scadenza della fattura è precedente alla data di emissione della fattura, e il file CSSRegular.css in tutti gli altri casi.

Ecco l'XPath completo che abbiamo inserito nella finestra di dialogo "Seleziona file CSS tramite XPath" mostrata in precedenza.

Ora possiamo assegnare le classi definite nei file CSS ai singoli elementi di design all'interno del progetto StyleVision.

Qui, abbiamo assegnato il paragrafo contenente il testo "Fattura" alla classe "header" nel pannello degli stili. In base al contenuto dei nostri file CSS, questo testo apparirà in rosso, con carattere grassetto di 20 punti, per le fatture scadute, e in nero, con carattere grassetto di 20 punti, per le fatture la cui data di scadenza è ancora futura.

Analogamente, assegneremo la data di scadenza della fattura alla classe "intestazione secondaria"

Ora siamo pronti per visualizzare l'anteprima della fattura.

Di seguito è disponibile un'anteprima HTML di una fattura scaduta. Si noti che il testo "Fattura" e la data di scadenza sono visualizzati in rosso e in grassetto, e che l'immagine "Scaduta" è stampata al centro.

Ora, esaminiamo la stessa fattura, ma con una data di scadenza futura: notate lo sfondo giallo, il logo di Nanonull, e il fatto che le parole "Fattura" e la data di scadenza appaiono in nero.

La possibilità di selezionare un file CSS in base a input dinamici apre un'ampia gamma di possibilità e rende i vostri progetti StyleVision ancora più flessibili. Grazie a questa funzionalità, è possibile apportare modifiche alla formattazione in tempo reale tramite i file CSS associati a un progetto, il che è particolarmente utile per i progetti con molti elementi.

Avete realizzato un progetto eccezionale utilizzando il foglio di stile e il designer di report StyleVision, oppure uno degli altri strumenti di Altova, e volete mostrarlo? Condividete la vostra esperienza con gli altri utenti di Altova lasciando un commento a questo articolo del blog.

Se pensate che la vostra esperienza possa essere un ottimo caso di studio, visitate la pagina "Casi di studio Altova". Se utilizzeremo la vostra storia, riceverete una carta regalo Amazon del valore di 200 dollari. Saremo lieti di ricevere notizie da voi!