Come utilizzare il template per personalizzare il layout del form.

A partire dalla versione 06.00.09, SQLEdit si arricchisce di un motore di templating molto più potente. Nelle versioni precedenti, l'elenco dei campi editabili nel database era costruito tramite un costrutto TMPL_LOOP. Si utilizzava quindi, il codice HTML contenuto in questa sezione per costruire, per ogni colonna del database, il codice HTML corrispondente.

Se, per esempio, la sezione TMPL_LOOP del template "example1" dell'elemento SQLEdit era

<table>

 <TMPL_LOOP name="fields_loop">

     <tr>

         <td><TMPL_VAR NAME="field.label">: </td>

         <td><TMPL_VAR NAME="field.form"></td>

     </tr>

 </TMPL_LOOP>

</table>

i campi del database venivano formattate su righe di una tabella ove nella prima colonna appariva, allineato a destra, il nome del campo del database mentre in una seconda colonna, appariva l'elemento del form corrispondente per l'editing.

Prendendo, per esempio, quattro colonne di tipo testo, "a","b","c","d", il modulo SQLEdit che viene generato dall'utilizzo del template "example1", appare come

<table>
    <tr>
        <td>a</td>
        <td><INPUT TYPE="text" NAME="a" VALUE="...."></TD>
    <tr>
    <tr>
        <td>b</td>
        <td><INPUT TYPE="text" NAME="b" VALUE="...."></TD>
    <tr>
    <tr>
        <td>c</td>
        <td><INPUT TYPE="text" NAME="c" VALUE="...."></TD>
    <tr>
    <tr>
        <td>d</td>
        <td><INPUT TYPE="text" NAME="d" VALUE="...."></TD>
    <tr>
</table>

Seppure questo metodo era già sufficientemente personalizzabile in quanto era possibile formattare con qualsivoglia layout grafico gli elementi del form, non era, per esempio, possibile dare formattazioni differenti a campi differenti, o posizionare alcuni campi del form tutti sulla stessa riga.

Benchè nella versione 06.00.09 questa modello di templating rimane invariato, per compatibilità, esso risulta deprecato a favore del nuovo modello in cui, oltre al template globale dell'elemento SQLEdit, è stato aggiunto un modello di templating per i singoli campi.

Prendiamo quindi l'esempio di cui sopra e vediamo come replicarlo nel nuovo modello di templating. Il template da utilizzare sarà qualcosa tipo

<table>

    <TMPL_VAR name="form.fields.template">

</table>

che, come si vede, non possiede più un elemento TMPL_LOOP ma al suo posto c'è una variabile TMPL_VAR. Questa variabile sarà sostituito con la concatenazione dei singoli template dei singoli campi.

Dove si definisce il template dei campi? Nello stesso tab vi è, dalla versione 06.00.09 in poi un nuovo elemento chiamato "Default field template". Questo elemento definisce il template standard dei campi da utilizzare, se non diversamente specificato. D'ora in poi definiremo:

• template globale: il template del modulo SQLEdit ossia il campo "Template" del tab "Layout" della configurazione globale dell'elemento SQLEdit

• template default dei campi: il nuovo elemento "Default field template" appena visto ossia il campo "Default field template" del tab "Layout" della configurazione globale dell'elemento SQLEdit

• template del campo: il template che, come vedremo, è definibile a livello di singolo campo.

• template per i campi: un qualsiasi template presente nella lista che appare nel template standard dei campi o nel template del campo (namespace: SQLEdit_field)

Andiamo a definire un nuovo template per i campi, con questo codice

<tr>
    <td><TMPL_VAR NAME="field.label">: </td>
    <td><TMPL_VAR NAME="field.form"></td>
</tr>

che si vede corrispondere esattamente al codice HTML contenuto nel template "example1". Utilizzando queste impostazioni si vedrà come il risultato coincide esattamente con quello ottenuto con il singolo template "example1".

L'utilizzo del vecchio o nuovo modello di templating è automatica. Se si usa, nel template globale, il TMPL_LOOP automaticamente le impostazioni del template dei campi saranno ignorate, se si utilizza il <TMPL_VAR name="form.fields.template"> si utilizzerà invece queste impostazioni ulteriori.

Finora quello che abbiamo fatto corrisponde a quanto già si poteva fare con il vecchio modello di templating. Cosa differenzia allora il nuovo dal vecchio? La differenza sta nel fatto che ora esiste, in ogni campo, una proprietà che definisce il tipo di template del campo da utilizzare. Di default viene impostato il valore "inherited " ossia viene utilizzato il modello di template definito nel campo "Default field template" del tab "Layout" della configurazione globale dell'elemento SQLEdit.

Ma modificando tale impostazione è possibile variare il layout di singoli elementi. Vediamo, per esempio come è possibile mettere due campi su una stessa riga.

Definendo un template per i campi "two_columns" cosi fatto (per impostare questi template su singoli elementi, avremo bisogno dei pulsanti amministrativi sui singoli campi:

<tr>
    <td><TMPL_VAR name="field.adminTools"> <TMPL_VAR NAME="field.label"></td>
    <td colspan="3"><TMPL_VAR NAME="field.form"></td>
</tr>

e utilizzandolo come template di default per i campi, il layout del form non cambia. Ma ora andiamo a definire due ulteriori template per i campi, "two_columns_1" cosi fatto:

<tr>
    <td><TMPL_VAR name="field.adminTools"> <TMPL_VAR NAME="field.label"></td>
    <td><TMPL_VAR NAME="field.form"></td>

e "two_columns_2" cosi fatto:

    <td><TMPL_VAR name="field.adminTools"> <TMPL_VAR NAME="field.label"></td>
    <td><TMPL_VAR NAME="field.form"></td>
</tr>

Andiamo ora nella configurazione del campo "a" e cambiamo il template del campo da "inherited " a "two_columns_1". Andiamo quindi nella configurazione del campo "b" e cambiamo il template del campo da "inherited " a "two_columns_2".

Salvando il risultato sarà che i campi "a" e "b" si trovano ora sulla stessa riga mentre i campi "c" e "d" si comportano in modo "standard" ossia sono disposti su due righe.

Il codice HTML corrispondente sarà quindi:

<!-- Template globale -->
<table>
<!-- il <TMPL_VAR name="form.fields.template"> viene sostituito con -->
<!-- Template "two_column_1" -->
    <tr>
        <td>a</td>
        <td><INPUT TYPE="text" NAME="a" VALUE="...."></td>
<!-- Template "two_column_2" -->
        <td>b</td>
        <td><INPUT TYPE="text" NAME="b" VALUE="...."></td>

    </tr>
<!-- Template di default "two_column" -->
    <tr>
        <td>c</td>
        <td colspan="3"><INPUT TYPE="text" NAME="c" VALUE="...."></td>
    </tr>
<!-- Template di default "two_column" -->
    <tr>
        <td>d</td>
        <td colspan="3"><INPUT TYPE="text" NAME="d" VALUE="...."></td>
    </tr>
</table>

che corrisponde a quanto si supponeva.

Come ulteriore esempio, supponiamo di voler inserire una linea orizzontale di separazione tra la prima riga, quella dei campi "a" e "b" dalla seconda, quella con il campo "c". Creiamo a questo scopo un ulteriore template per i campi come segue:

<tr>

    <td colspan="4"><hr></td>

</tr>

<tr>
    <td><TMPL_VAR name="field.adminTools"> <TMPL_VAR NAME="field.label"></td>
    <td colspan="3"><TMPL_VAR NAME="field.form"></td>
</tr>

e chiamiamolo "two_column_hr" e applicano questo template al solo campo "c", si otterrà il risultato voluto.