|
DocBrowser Plus - Personalizzazione report di stampa Software di archiviazione ottica dei documenti |
I report di stampa sono dei semplici file HTML e possono quindi essere modificate da un qualsiasi editor di testi HTML quali per esempio il FrontPage, HotDog, HomeSite o WordPadJ
E necessario però avere un po' daccortezza nella modifica di tali pagine poiché, nascoste all'interno del codice HTML di queste pagine, vi sono delle sezioni particolari che però sono fondamentali per la corretta visualizzazione del report stesso.
Tali sezioni vengono modificate, sostituite o riempite dal motore di stampa dei report in base ai dati di stampa prelevati dall'archivio.
Vi sono sostanzialmente tre tipologie di elementi a cui è necessario prestare attenzione:
1) TAG non standard ossia tag che non sono riconosciuti dai browser HTML. Questi TAG, prima di essere inviati a video o alla stampante, sono processati dal sistema e, al loro posto, viene inserito del codice dinamico. Sono tali tag che fanno apparire i dati dinamici all'interno del report di stampa. Possono essere di tipi:
a. <TMPL_VAR NAME="txtVar"> Testo d'esempio </TMPL_VAR>
b. <TMPL_IF NAME="boolVar"> Testo d'esempio <TMPL_ELSE> Testo d'esempio </TMPL_IF>
c. <TMPL_LOOP NAME="loopName"> Testo ripetuto <TMPL_VAR NAME="varLoop1"> Testo d'esempio </TMPL_VAR> </TMPL_LOOP>
2) Commenti che indicano quale parte del codice HTML deve essere utilizzata e quale no. Infatti, come vedremo sotto, di alcune pagine viene utilizzata solo una parte e il resto viene scartato. Un esempio è la pagina products.htm in cui limpostazione grafica è formato da questo file eccezion fatta per la tabella dei prodotti presenti nel negozio virtuale. Questo elemento viene invece ricavato dal file productSection.htm. Questo file è però un file html regolare e contiene quindi anche altro codice. I tag di commento <CSTART> e </CSTART> indicano dunque al sistema quale blocco di codice allinterno del file deve essere preso e quale deve essere tralasciato.
3) Codice HTML reale che è necessario mantenere per il funzionamento del sistema. Anche se questa è una parte limitata dell'intero sistema, è molto importante mantenere tale codice perché la sua mancanza potrebbe pregiudicare il funzionamento del report. Parti di codice HTML fondamentali potrebbero essere eventuali blocchi di codice Javascript presenti nel modello html.
Da quanto appena detto si evince che, per personalizzare le stampe, oltre alla capacità di usare un editor grafico per formattare le pagine HTML, è necessario conoscere, anche se superficialmente, il linguaggio HTML. Si rimanda quindi ad un qualsiasi manuale di HTML per la parte riguardante il puro codice HTML.
Il modulo di stampa è basato su di un porting personalizzato del modulo CPAN per il linguaggio Perl HTML::Template e, più in particolare, dei moduli HTML::Template::Extention::* per cui è possibile anche dare un'occhiata ai manuali di questi moduli per ulteriori informazioni.
[ SEZIONE ANCORA DA AGGIORNARE ]
Come già detto, allinterno dei file HTML, vi è del codice non standard che viene sostituito dal sistema prima di essere inviato al browser. Questi TAG, successivamente chiamati direttive, vengono sostituiti con un valore appropriato ricavato da elaborazioni interne al sistema.
Questo TAG è presente allinterno del file HTML per essere sostituito durante lelaborazione da un blocco di codice dinamico. Lattributo NAME del TAG indica quale particolare valore dinamico sarà inserito nel contesto. Il testo contenuto tra linizio del tag (<TMPL_VAR>) e la fine del TAG (</TMPL_VAR>) viene cancellato durante lelaborazione ed è inserito solo per rendere loutput visivo durante la modifica della grafica da parte di un editor visuale di pagine HTML.
Facciamo un esempio del TAG <TMPL_VAR> prendendo, come esempio, una versione epurata del file products.htm. Questo file è poi quello che formatta graficamente la lista dei prodotti acquistabili.
Listato del file products.htm |
1 <html>
2 <head>
3 <title>EuronetZone E-Commerce</title>
4 </head>
5 <body bgcolor="#FFFFFF" topmargin="0" leftmargin="0">
6 <table border="0" align="center" style="right: 5" width="100%">
7 <tr>
8 <td align="left" width="341">
9 <TMPL_VAR NAME=choose_page> 10 Vai alla pagina: 1 2 3 4 5 11 </TMPL_VAR>
12 </td>
13 <td align="right" width="345">
14 Trovati
15 <TMPL_VAR NAME=pcount> 16 12 17 </TMPL_VAR>
18 prodotti su
19 <TMPL_VAR NAME=pages> 20 4 21 </TMPL_VAR>
22 pagine <font color="#008000">
23 Pagina
24 <TMPL_VAR NAME=page> 25 3 26 </TMPL_VAR>
27 </font>
28 </td>
29 </tr>
30 </table>
31 <p>
32 <br>
33 <center>
34 <table border="0" width=560 align="center" cellpadding="0" cellspacing="0">
35 <tr>
36 <td>
37 <TMPL_VAR NAME=productSection> 38 <table width="573" border="0" cellpadding="0" 39 cellspacing="4"> 40 .............omiss................ 41 </table> 42 </TMPL_VAR>
43 </td>
44 </tr>
45 </table>
46 </center>
47 </body>
48 </html> |
Vediamo cosa succede quando questa pagina viene visualizzata a video:
1) La sezione <TMPL_VAR NAME=choose_page>&</TMPL_VAR> è sostituita con altro codice HTML e, in particolare, con il codice necessario per poter sfogliare le varie pagine di presentazione articoli;
2) La sezione <TMPL_VAR NAME=pcount>&</TMPL_VAR> è sostituita con altro codice HTML e, in particolare, con il numero totale di articoli trovati;
3) La sezione <TMPL_VAR NAME=pages>&</TMPL_VAR> è sostituita con il numero di pagine totali su cui si sviluppa la ricerca;
4) La sezione <TMPL_VAR NAME=page>&</TMPL_VAR> è sostituita con il numero di pagina corrente;
5) La sezione <TMPL_VAR NAME=productSection>&</TMPL_VAR> è sostituita con il codice HTML della lista dei prodotti presenti su questa pagina.
Soffermiamoci su questultimo punto. Quando viene vista allinterno di un editor visuale quale FrontPage® la pagina products.htm ha il formato grafico in figura.
|
Pagina products.htm come vista dal FrontPage®. |
Quando la stessa pagina è processata dal sistema loutput grafico si presenta invece modificato.
|
Pagina products.htm come vista dopo lelaborazione interna. |
Risulta subito evidente che, oltre a variazioni marginali, la parte centrale della tabella è completamente differente nei due casi.
E questo che si intende quando si afferma che il codice HTML presente tra il TAG <TMPL_VAR NAME=productSection> e il TAG </TMPL_VAR> viene eliminato e sostituito da codice dinamico.
|
Qualsiasi modifica effettuata tra il TAG <TMPL_VAR> e il TAG </TMPL_VAR> risulterà ininfluente in quanto tale codice sarà rimosso in fase di output dela pagina |
Ci si potrebbe allora chiedere se e come sia possibile modificare limpostazione grafica della tabella centrale.
Abbiamo già visto come non sia possibile operare direttamente sul codice relativo presente nel file products.htm in quanto questo è rimosso dal sistema in fase di output. Ma dove prende il sistema il codice per sovrascrivere la sezione dinamica productSection ?
La prende da un altro file HTML e in particolare dal file productSection.htm. Vedremo questo file in seguito come esempio nel paragrafo riguardante la direttiva <!--CSTART-->.
La direttiva <TMPL_IF> è utilizzata per mostrare o meno delle sezioni di codice HTML a seconda che una data condizione sia vera o falsa. La condizione è specificata dallattributo NAME della direttiva e viene passata alla pagina dal motore di elaborazione interna del sistema tramite un valore booleano che può quindi essere vero (1) o false (0).
Ci sono due possibili utilizzi del tag:
a) <TMPL_IF NAME= boolVar >Codice HTML</TMPL_IF>
b) <TMPL_IF NAME=boolVar>Codice HTML<TMPL_ELSE>Codice HTML alternativo</TMPL_IF>
Il loro, spero, ovvio significato è:
a) se boolVar è vera allora viene mostrato il codice interno alla direttiva altrimenti non viene mostrato nulla;
b) se boolVar è vera allora viene mostrato il codice tra la direttiva <TMPL_IF NAME=boolVar> e la direttiva <TMPL_ELSE> altrimenti viene mostrato quello tra la direttiva <TMPL_ELSE> e la direttiva </TMPL_IF> .
Si può quindi affermare che:
|
a) == <TMPL_IF NAME=boolVar>Codice HTML<TMPL_ELSE></TMPL_IF> |
Consideriamo come esempio una parte del codice omessa nellesempio precedente e presente nellheader del file products.htm.
Header del file products.htm |
1 <html>
2 <head>
3 <script language="javascript">
4 <!--
5 function refreshTopFrame() {
6 <TMPL_IF NAME=refreshLeft> 7 if (typeof(parent.frames[0]) == 'object') { 8 parent.frames[0].location.href='top.mpl'; 9 } 10 if (typeof(parent.frames[1]) == 'object') { 11 parent.frames[1].location.href='left.mpl'; 12 } 13 </TMPL_IF>
14 }
15 //-->
16 </script>
17 <title>EuronetZone E-Commerce</title>
|
Il codice da riga 5 a riga 15 è quello relativo allaggiornamento del frame laterale e superiore. Tale blocco di codice JavaScript viene richiamato dallevento onLoad della pagina products.htm ossia, al caricamento della pagina, si vuole che, in alcuni casi, sia aggiornato il frame laterale e quello superiore.
Il blocco <TMPL_IF>...</TMPL_IF> assolve proprio alla funzione di tradurre in linguaggio logico lespressione in alcuni casi.
Se il sistema ritiene necessario aggiornare suddetti frame allora invia la modulo un valore vero per la variabile refreshLeft di modo che il codice JavaScript viene restituito in fase di output della pagina e viene così eseguito il refresh.
Se il sistema invia invece un valore falso per la variabile refreshLeft allora la funzione refreshTopFrame risulterà vuota e non sarà quindi eseguito alcun aggiornamento.
Vediamo ora un ulteriore esempio sulla direttiva <TMPL_IF> per mostrare come, attraverso leditor html, sia possibile ridefinire, oltre che limpostazione grafica del sito, anche alcuni suoi aspetti funzionali.
Consideriamo quindi, a tal proposito, le pagine relative al wizard di creazione nuovo utente presenti allinterno della cartella ecp/tmpl/<LANG>/wizard.
Nel secondo step del wizard si deve scegliere se si è un soggietto privato o unazienda. Da questo momento in poi verrà propagata una variabile internal_isAzienda di tipo booleana che indica se è stata scelta la tipologia aziendale o quella privata.
Tale variabile è stata poi usata pesantemente negli step successivi per ottenere modifiche funzionali al flusso di inserimento dei dati nel wizard.
Quello che si voleva fare, per esempio, era ottenere nel terzo step la ragione sociale e la partita IVA nel caso di soggetto aziendale e il cognome e il nome nel caso di soggetto privato. Inoltre le informazioni circa il nome e il cognome dovevano essere richieste nel quarto step quale referente aziendale nel caso la scelta fosse stata quella di una registrazione aziendale mentre, nel caso di una registrazione di un utente privato, si voleva ottenere nel quarto step il codice fiscale del soggetto.
Per ottenere ciò è stato scritto il seguente codice nel file userAdd_Step3.htm:
Estratto dal file userAdd_Step3.htm |
1 <TMPL_IF NAME=internal_isAzienda> 2 <tr> 3 <td width="87">Ragione Sociale:</td> 4 <td width="207"> 5 <input type="text" name="ragsoc" size="39" 6 value="<TMPL_VAR NAME=useranagr_ragsoc>"> 7 </td> 8 </tr> 9 <tr> 10 <td width="103">Partita Iva:</td> 11 <td width="191"><input type="text" name="cf" size="39" 12 value="<TMPL_VAR NAME=userinfo_cf>"> </td> 13 </tr> 14 <TMPL_ELSE> 15 <tr> 16 <td width="87">Cognome: </td> 17 <td width="207"><input type="text" name="cognome" size="39" 18 value="<TMPL_VAR NAME=useranagr_cognome>"> </td> 19 </tr> 20 <tr> 21 <td width="87">Nome: </td> 22 <td width="207"><input type="text" name="nome" size="39" 23 value="<TMPL_VAR NAME=useranagr_nome>"> </td> 24 </tr> 25 </TMPL_IF>
|
e questo nel file userAdd_Step5.htm (per un errore il quarto step del wizard si chiama userAdd_Step5 e il quinto step viene gestito graficamente dal file userAdd_Step4.htmJ)
Estratto dal file userAdd_Step5.htm |
1 <TMPL_IF NAME=internal_isAzienda> 2 <tr> 3 <td width="100">Cognome referente: </td> 4 <td width="194"><input type="text" name="cognome" size="35" 5 value="<TMPL_VAR NAME=useranagr_cognome>"> </td> 6 </tr> 7 <tr> 8 <td width="100">Nome referente: </td> 9 <td width="194"><input type="text" name="nome" size="35" 10 value="<TMPL_VAR NAME=useranagr_nome>"> </td> 11 </tr> 12 <TMPL_ELSE> 13 <tr> 14 <td width="116">Codice Fiscale:</td> 15 <td width="178"><input type="text" name="cf" size="35" 16 value="<TMPL_VAR NAME=userinfo_cf>"> </td> 17 </tr> 18 </TMPL_IF>
|
|
|
Quindi, come si vede anche facilmente dando unocchiata al codice sopra, dal punto di vista dello sviluppatore delle pagine www, le pagine vengono viste come una fusione delle due possibili situazioni, quella aziendale e quella privata.
Punto di vista dello sviluppatore del codice HTML (FrontPage view) |
|
File userAdd_Step3.html |
File userAdd_Step5.html |
|
|
mentre dal punto di vista del client le due pagine sono viste in modo differente
Punto di vista dello client dopo elaborazione del motore interno |
|
File userAdd_Step3.html (azienda) |
File userAdd_Step3.html (privato) |
|
|
File userAdd_Step5.html (azienda) |
File userAdd_Step5.html (privato) |
|
|
|
Si può quindi operare delle modifiche funzionali al prodotto agendo sul solo codice HTML. |
Questa direttiva, dal punto di vista di un browser HTML, rappresenta nientaltro che un commento, infatti tutto quello racchiuso tra i caratteri <!-- e i caratteri --> rappresentano per il browser del testo da non processare.
Questi due particolari commenti, se inseriti allinterno di una pagina HTML di questo sistema non giungeranno mai al browser del client in quanto rappresentano delle direttive del sistema e vengono quindi elaborate dal motore di elaborazione interno.
Qualè il significato di questi due TAG? Quando il sistema di elaborazione trova allinterno di un file HTML la direttiva <!--CSTART--> capisce che deve partire da quel punto a processare il codice HTML e deve tralasciare tutto quanto letto fino a quel momento. Il sistema processera dunque il codice HTML dal TAG <!--CSTART--> fino ad incontrare il TAG <!--CEND--> e da lì ripartirà alla ricerca eventualemente di un successivo TAG <!--CSTART--> da cui riprendere lelaborazione.
Riassumendo il codice che si ottiene da una pagina HTML che contiene la direttiva <!--CSTART--> e solo e soltanto quello contenuto tra questa direttiva e la direttiva <!--CEND-->.
A cosa può essere utile ciò?
Ricordiamo che nellesempio del file products.htm presentato nel pagagrafo relativo alla direttiva <TMPL_VAR> si parlava del fatto che la pagina finale era la fusione di due pagine, la productSection.htm per quanto riguarda limpostazione grafica della tabella centrale che, potendo contenere un numero imprecisato di prodotti era per sua natura un elemento dinamico della pagina e dalla pagine products.htm che impostava il restante layout grafico che componeva la pagina definitiva.
Soffermiamoci dunque sulla pagina productSection.htm. Questa, quando viene vista dalleditor di pagine HTML, deve essere una corretta pagina HTML e deve contenere quindi, per esempio, un header, un tag <HTML>, un tag <HEADER>, un tag <BODY> e cosi via.
Il fatto è che invece, quando questa pagina viene incollata allinterno del file products.htm al posto della sezione productSection deve essere, per così dire, epurata di tali elementi, in quanto la pagina finale li possiede già essendo quelli presenti nel file products.htm.
Ciò che si vuole incollare è, per ogni prodotto del negozio virtuale, il layout grafico della tabella contenuta nel file productSection.htm. Questo si ottiene, come si vede in figura, tramite la direttiva <!CSTARTà...<!CENDà
Listato del file productSection.htm |
1 <html> 2 <head> 3 <title>Carrello spesa</title> 4 </head> 5 <body> 6 <!CSTARTà
7 <table width=573 border=0 cellpadding=0 cellspacing=4>
40 <tr> 41 <td valign=top width=135 bgcolor=#fee7b1> 42 <table border=0 cellpadding=2 height=100% width=100%> 43 <tr valign=top> 44 <td width=100% valign=center bgcolor=#fee7b1> 45 <A href=product.mpl?productId=<TMPL_VAR NAME=id> 46 </TMPL_VAR> 47 <IMG height=100 alt=Clicca qui per la foto grande 48 src=<TMPL_VAR NAME=link_pict></TMPL_VAR> 49 width=100 vspace=2 border=0 > 50 </A> 51 </TD> 52 </TR> 53 <tr> 54 <td width=100% bgcolor=#4aa5ff valign=top> 55 <font color=white>Carrello spesa</FONT> 56 </TD> 57 </TR> 58 <tr> 59 <form method=post 60 action=<TMPL_VAR NAME=link_form></TMPL_VAR> 61 name=FORM_<TMPL_VAR NAME=id></TMPL_VAR>> 62 <td width=100% bgcolor=#fee7b1 valign=baseline> 63 </td> 64 </FORM> 65 </TR> 66 </TABLE> 67 </TD> 68 </TR>
37 </TABLE>
38 <!CENDà 39 </body> 40 </html>
|
|
Il processo che porta alla creazione della pagina dei prodotti può essere quindi graficamente schematizzato dalla seguenti figura.
Alcune pagine contengono del codice JavaScript necessario al funzionamento del sistema stesso.
Ne è un esempio il codice JavaScript presentato nel paragrafo relativo alla direttiva <TMPL_IF> ove il codice relativo alla pagina products.htm era necessario ad aggiornare il frame superiore e quello laterale.
Va da se che se tale codice dovesse essere modificato o addirittura eliminato vi possono essere delle discrepanze tra le informazioni contenute nei vari frame.
Altro esempio di codice JavaScript importante ai fini del funzionamento del sistema è il codice necessario alla validazione dei campi di input nei vari form quale, per esempio, nei vari step del wizard di aggiunta nuovo utente al sistema. Tale codice è necessario ad assicurare la coerenza dei dati inseriti.
Va da se che se tale codice viene eliminati possono accadere degli effetti imprevedibili.
Per esempio, se nello step 1 si elimina il codice JavaScript necessario a verificare che le due password inserite siano identiche si ottiene che il sistema continua a funzionare ma potrebbe accadere che un errore di battitura nellinserimento della prima password, quella che poi viene effettivamente salvata nel sistema, impedisca allutente registratosi di poter entrare nel sistema in quanto la password inserita risulta differente da quella che lutente pensa di aver digitato.
Da quanto detto fin ora risulta chiaro che le pagine HTML possono essere modificate tramite qualunque editor HTML avendo laccortezza di:
1) controllare dopo ogni modifica la coerenza delle varie direttive inserite nel file aiutandosi, al limite, con il programma COLORIZE;
2) modificare quanto meno possibile il codice JavaScript e, se proprio necessario, farlo con cognizione di causa;
3) fare sempre una copia di backup del file HTML funzionante in modo da poter sempre ripristinare una condizione funzionante.
A parte questo è utile ricordare alcuni accorgimenti necessari ad evitare errori ed inutili perdite di tempo durante lo sviluppo dellimpostazione grafica del prodotto.
Se si tratta di un editor visuale, ossia di un editor che mostra la pagina così come poi viene vista dal browser, quale per esempio il Microsoft FrontPage, è utile attivare la visualizzazione dei TAG non standard nel file HTML.
In FrontPage, per esempio, ciò si fà attivando il pulsante . I TAG non standard tra cui, in particolar modo, le direttive interne del sistema saranno così visibili e visualizzate tramite licona .
A cosa serve ciò? Server ad evitare errori del seguente tipo. Supponiamo di avere del testo allinterno del tag <TMPL_VAR> come il seguente:
<TMPL_VAR NAME=var>Testo desempio</TMPL_VAR>
Questo blocco di codice se non attivata la visualizzazione dei TAG non standard, viene visto dal FrontPage come:
Supponiamo ora di voler colorare in rosso il testo che poi apparira allinterno della direttiva al posto della scritta Testo desempio. Per fare ciò selezionamo dalleditor il testo e impostiamolo come rosso.
Non meravigliatevi se, una volta visualizzata dal browser il testo continuerà ad avere come colore il nero.
Lenigma è sciolto se si va a guardare al codice HTML una volta eseguita la codifica del colore del testo dallambiente grafico. Che che si trova è il seguente codice:
<TMPL_VAR NAME=var><FONT color=#FFFF00>Testo desempio</FONT></TMPL_VAR>
Come si vede il tag FONT è stato inserito dalleditor HTML allinterno della direttiva <TMPL_VAR> e quindi limpostazione del colore rosso per il testo viene eliminato dallelaborazione fatta dal motore di rendering del sistema.
Il modo corretto per avere il codice relativo alla variabile var di colore rosso è quello di ottenere dalleditor HTML il seguente codice:
<FONT color=#FFFF00><TMPL_VAR NAME=var>Testo desempio</TMPL_VAR></FONT>
Per fare ciò attivare la modalità di visualizzazione dei TAG non standard premendo il pulsante e selezionare oltre che il testo anche le icone che lo delimitano.
Si può ora verificare che uil risultato finale risulterà correttamente formattato in rosso.
Unaltra cosa su cui bisogna prestare attenzione durante la modifica del codice è ricordare sempre che alcune zone del codice HTML non verranno mai ritornate effettivamente al browser. Ricordare che, per esempio,nella direttiva <!--CSTART--> tutto ciò esterno a questa e alla direttiva <!--CEND--> non viene ritornato al browser e quindi modifiche fuori da tali blocchi sono inutili e inefficaci.