La struttura.

Adesso che abbiamo definito il gadget graficamente, o per lo meno ci abbiamo provato; dobbiamo costruire la struttura html della pagina che lo rappresenta (?).

Per impaginare una pagina html ci sono diversi modi. Voglio citare quelli che a parer mio sono i piu' diffusi. Il primo, super-obsoleto, è l' impaginazione tabellare. Ovvero, includere tutti i contenuti in una tabella html senza bordi. Il secondo, definito anche come box-model, è l' impaginazione tramite DIV o pannelli.

La struttura del gadget sarà ad albero, quindi avremo qualcosa del genere :

<div id="contenitore">
	<!--	Pannello per l' attesa//-->
	<div id="waiter"></div>
	<!--	Pannello per il titolo//-->
	<div id="header"></div>
	<!--	Pannello per i controlli	(TextBox, Label ...)//-->
	<div id="body"></div>
	<!--	Parte finale per pulsanti//-->
	<div id="footer"></div>
</div>

Per ogni div dobbiamo creare la sua struttura nel foglio di stile css. Alcuni div, potranno essere visibili da subito, altri invece, lo saranno soltanto in certe situazioni. Per nascondere un div, possiamo settare la sua visibility a hidden oppure il suo display a none. La differenza è che nel primo caso lo spazio fisico occupato dal pannello resta visualizzato nel browser, nel secondo caso no.

Prima cosa il corpo della pagina :

BODY
{
	width:140px;
	height:180px;
	padding-top:5px;
	font-family: Tahoma;
	color: #666666;
	font-size: 8pt;
	background: url('../../images/Background.png') no-repeat;
}

Ho definito le dimensioni, il font e il colore del testo. Per il background la nostra widget spostata in alto a sinistra.
Salvando la pagina si puo' incominciare a visualizzare una preview nel browser IE.

I pannelli.

Adesso inseriamo la gif animata che deve ingannare l' attesa. Siccome non deve essere subito visibile, ualà con i css la nascondiamo.

<div id="waiter" style="display:none;">
<span><strong>Please, wait ...</strong></span>
<br /><br />
<img 
   src="../images/waiter.gif" 
   alt="wait for a response." />
<br /><br />
<span><strong>I'm searching</strong></span>
</div>

La testata del nostro gadget, invece, sarà composta da un' etichetta e un' immagine che la rappresenta. Sotto una textBox di ricerca.

<div id="header">
<img src="../images/search.png" alt="Search" />
<span><strong>Translate</strong> :</span>
<br />
<input type="text" id="txtSearch" class="cTextBox" />
</div>

Anche qui un po' di css non fa mai male.

 

.cTextBox
{
	font-family: Tahoma;
	font-size: 8pt;
	width:107px;
}
#container
{
	margin-top:30px;
	margin-left:5px;
	width: 110px;
}
#waiter
{
	padding: 15px 0 0 20px;
	background-color:Transparent;
}
#header
{
	padding: 0 0 5px 0;
}