Una questione di stile

Dopo una prima sperimentazione, aver commesso degli errori, ed essersi resi conto delle difficoltà possiamo cominciare a dare qualche consiglio sull'utilizzo dei CSS con SmartWeb.

Premesso che si può continuare a lavorare con gli include per quelle parti che sono ripetitive, vi presentiamo alcuni esempi su come è meglio scrivere le pagine JSP senza metterci dentro da subito gli aspetti estetici.

Partiamo da una pagina di elenco, solitamente la pagina al centro delle operazioni su una entità: avremo bisogno di una zona per fare le ricerche, un elenco degli elementi trovati, le operazioni che si possono eseguire sull'elenco e, naturalmente, della paginazione.

Ecco un esempio che ricopre i tre aspetti:


<!-- ricerca -->
<div class="search>
<form>
<div class="field">
<span>my label</span><input name="xxx" type="text"/>
</div>
<div class="field">
<span>my label</span><input name="xxx" type="text"/>
</div>
<div class="commands">
<input type="submit"/>
<input type="button"/>
<input type="cancel"/>
</div>
</form>
</div>

<!-- elenco -->
<div class="list>
<h1>My list header</h1>
<p>My list long description<p>
<table>
<tr class="header">
<th></th>
...
</tr>
<logic:iterate id="xxx" name="xxx" indexId="index">
<tr class="<%= (index.intValue() % 2 == 0 ? "even" : "odd") %>" onMouseOver="highlight(this)" onMouseOut="lowlight(this)" onClick="select(this)">
<td>
<!--
class="id" per il campo primario,
class="date" per le colonne data/ora,
class="note" per i testi lunghi,
class="number" per i numerici,
class="currency" per le valute,
class="commands" per i comandi in linea
-->
</td>
...
</tr>
</logic:iterate>
</table>

<!-- paginazione -->
<div class="paginate">
<%@ include file="paginate.jsp" %>
</div>

<!-- comandi -->
<div class="commands">
<form>
<input type="submit"/>
<input type="button"/>
<input type="cancel"/>
</form>
</div>
<h2>My list footer</h2>
<p>My list long description<p>
</div>


Poi ci sono i moduli di inserimento e modifica delle informazioni, tipicamente potrebbero essere gestiti in questo modo:

<!-- modulo -->
<form class="edit">
<h1>My form header</h1>
<p>My form long description<p>
<div class="field">
<span class="label">my label</span><input name="xxx" type="text"/>

</div>
<div class="field">
<span class="label">my label</span><input name="xxx" type="text"/>
</div>
<div class="field">
<span class="label">my label</span><input name="xxx" type="text"/>
</div>
<h2>My form footer</h2>
<p>My form long notes<p>
<div class="commands">
<input type="submit"/>
<input type="button"/>
<input type="cancel"/>
</div>
</form>

La dove è necessario avere anche una pagina di visualizzazione (senza modifica) si può pensare alla stessa struttura precedente senza il form:

<!-- vista -->
<div class="view">
<h1>My form header</h1>
<p>My form long description<p>
<div class="field">
<span class="label">my label</span><span>my value</span>
<!--
class="id" per il campo primario,
class="date" per le colonne data/ora,
class="note" per i testi lunghi,
class="number" per i numerici,
class="currency" per le valute,
class="commands" per i comandi in linea
-->

</div>
<div class="field">
<span class="label">my label</span><span>my value</span>
</div>
<div class="field">
<span class="label">my label</span><span>my value</span>
</div>
<h2>My form footer</h2>
<p>My form long notes<p>
<div class="commands">
<input type="submit"/>
<input type="button"/>
<input type="cancel"/>
</div>
</div>


Naturalmente questi sono degli esempi e come tali non prendono in considerazione casi particolari che vanno studiati di volta in volta....