FasterJoomla

Joomla security and optimization

Visita il nuovo sito FasterJoomla che raccoglie i nostri articoli ed estensioni per Joomla!

Si parla di sicurezza, velocità, sviluppo di estensioni per Joomla.

Trovate pubblicate anche le nostre guide pratiche.

Se vogliamo usare il nostro messageBox sarà necessario renderlo presentabile. Rimanendo facile da usare.

Per questo desidero che abbia gli angoli arrotondati, e che sia scalabile a piacere.

Le tecniche per avere gli angoli arrotondati si riducono a :

  • Usare un browser che supporti CSS3
  • Usare una tabella per posizionare i vari pezzi dello sfondo (9 pezzi necessari)
  • Usare un foglio di stile e vari elementi div cui associare un minimo di 4 pezzi
  • Usare un foglio di stile e vari elementi cui associare parti diverse della stessa immagine (riducendo notevolmente il tempo di download, e la grafica viene mostrata in un unico momento, e non un pezzo alla volta)

Scelgo l'ultima.

Una implementazione facile è descritta in Even More Rounded Corners With CSS. Useremo questa con piccole modifiche.

Cosa vogliamo vedere

Prima di tutto vediamo il risultato in azione:

Per ottenerlo, è sufficiente inserire questo html:

<div ID="msgBoxDiv" class="dialog color_red">
<div class="content">
<div class="wrapper">
<div class="t"></div>
<div id="msgBoxHeader" class="hd" >
Domanda
</div>
<div class="bd">
<p id="msgBoxText">Messaggio</p>
</div>
<div class="ft">
<p><A ID="msgBox1">Si</A>
<A ID="msgBox2">No</A></p>
</div>
</div>
</div>
<div class="b"><div></div></div>
</div>

ed il css (che trovate nel pacchetto da scaricare). Mi soffermo un momento sul sistema usato per ancorare l'immagine in punti diversi:

.dialog .content,
.dialog .t,
.dialog .b,
.dialog .b div {
background:transparent url(dialog-blue.png) no-repeat top right;
_background-image:url(dialog-blue.gif);
}
.dialog .t {
background-position:top left;
}
.dialog .b {
background-position:bottom right;
}

 

e così via. In sostanza definisco una volta sola l'immagine per tutte le classi dei bordi; quindi per ciascuna modifico solo background-position.

Compatibilità con i browser

Ora vediamo come viene su chrome:

e su ie6? beh c'è il problema dei PNG a 24 bit, è solo dal 2000 che si usano in fin dei conti... come poteva un browser uscito nel 2003 già supportarli?

Notate la differenza? La trasparenza è sparita! Come si fa ad ottenere un risultato così fantastico?

Semplice: un trucchetto.

 background:transparent url(dialog-blue.png) no-repeat top right;
_background-image:url(dialog-blue.gif);
una delle tante funzioni assurde di ie, specifico una immagine con _background-image (nota il "_"); questo viene ignorato ovviamente dagli altri browser.

Integriamolo con l'oggetto

Le modifiche da fare sono veramente poche.

Prima di tutto, visto che l'obiettivo è di avere una funzione msgBox e non di scrivere markup, mettiamo l'html nel codice di inizializzazione del bottone;

function _msgBox(aColor)
{
this.divMsg = null;
this.message = "";
this.button1Div = null;
this.button2Div = null;
this.divHeader = null;
this.divContent = null;

this.button1 = "Si";
this.button2 = "No";
this.button1Result = true;
this.button2Result = false;
this.callBackFunction = null;
this.color=aColor;

this.divMsg = document.getElementById("msgBoxDiv")
if (this.divMsg==null)
{
var aMsgBoxContent =
'<div ID="msgBoxDiv" class="dialog color_'+this.color+'">'+
' <div class="content">'+
' <div class="wrapper">'+
' <div class="t"></div>'+
' <div id="msgBoxHeader" class="hd" >'+
' Domanda'+
' </div>'+
' <div class="bd">'+
' <p id="msgBoxText">Messaggio</p>'+
' </div>'+
' <div class="ft">'+
' <p><A ID="msgBox1">Si</A>'+
' <A ID="msgBox2">No</A></p>'+
' </div>'+
' </div>'+
' </div>'+
' <div class="b"><div></div></div>'+
'</div>';
document.body.innerHTML += aMsgBoxContent
this.divMsg = document.getElementById("msgBoxDiv")
}
}

Questa funzione prende un parametro. Il colore dello sfondo da utilizzare.Il secondo foglio di stile, dialog-variants.css, contiene esclusivamente le diverse immagini per i vari stili.

 

Visto che interagisce con l'innerHTML,

dovremo sincerarci che venga eseguito dopo che la pagina è caricata:

var msgBox

function initBox()
{
msgBox = new _msgBox('red')
};
window.onload = initBox;

Questa è tutta la configurazione necessaria per poterlo usare. 

Inoltre saranno sempre presenti nella intestazione del file html:

  • <link rel="stylesheet" href="/msgbox/msgbox.css?u=1" media="screen" >
  • <link rel="stylesheet" href="/msgbox/dialog-variants.css" media="screen" />
  • <SCRIPT type="text/javascript" src="/msgbox/msgbox.js"></SCRIPT>

 

Ora con tutti questi test,mi sono stancato di premere Ok sull'alert. Spostiamo l'output su una textarea.

Visto che i files sono diventati tanti, li ho spostati nella cartella msgbox (la fantasia è la mia prima dote :-P


I file descritti in questo articolo si possono scaricare dall'introduzione

L'archivio nella pagina introduzione è il più aggornato e contiene i files di tutte le lezioni