Le nuove finestre chromeless

Le finestre chromeless sono delle finestre di pop-up contenenti normale testo HTML, ma prive del bordo superiore di colore blu e delle solite cornici di finestra di windows. Create da Gabriel Suchowolski e messe gratuitamente a disposizione degli sviluppatori, le finestre chromeless hanno riscosso un grande successo, nonostante fossero visualizzate in questa piacevole veste grafica solamente da IE 5.0 o superiore. Questo tipo di finestre è descritto in questo articolo.

Le finestre chromeless

Internet Explorer aggiornato con il Service Pack 1 non ha più supportato la corretta visualizzazione delle chromeless, aprendo le finestre in full screen. Gabriel Suchowolski ha prontamente rilasciato una patch. Questa si limitava, però, a disabilitare le chromeless e trasformarle in normali finestre di popup anche nel caso che il browser utilizzato fosse la versione 6.0 di Internet Explorer. La grande maggioranza dei navigatori non avrebbe più, così, goduto della grafica delle chromeless. Tutto ciò ha spinto gli sviluppatori ad abbandonarne l'utilizzo.

Oggi, però, c'è una buona notizia per tutti gli amanti delle gradevoli finestre di popup: Mariano Klein ha realizzato un nuovo script per visualizzare finestre chromeless anche con Internet Eplorer 6.0 e il suo Service Pack 1. Netscape 6.0 e Navigator 4.0 continuano, tuttavia, a visualizzare la chromeless come una normale finestra di pop-up. Lo script si può scaricare gratuitamente dal sito "ufficiale" delle chromeless.

La licenza con cui vengono distribuite è la General Public License (GPL) che permette a chiunque di utilizzarle e modificarle fermo restando l'obbligo di manterne intatta la licenza. Noi abbiamo lavorato un po' su queste chromeless e qui di seguito vi forniamo una descrizione e alcuni suggerimenti per la personalizzazione.

Le impostazioni da personalizzare.

L'esempio, scaricabile dal link Download in alto in questa pagina, è formato, oltre che da due pagine HTML (una principale ed una contenente il testo della pop-up), da tre file di codice JavaScript che andranno richiamate all'interno della pagina HTML principale.

• Il file ByKlein_chromeless2.0.js contiene il codice realizzato da Klein e non necessita di personalizzazioni.
• Il file compatilility.js, lo ho creato al solo scopo di nascondere alcuni link ai browser non compatibili con le finestre di chromeless. Contiene poche righe che ricavano il browser utilizzato e può essere utilizzato per gestire appunto la compatibilità tra i browser.
• Infine, il file impostazioni_chromeless.js, contiene le impostazioni da personalizzare. Le ho inserite in un file esterno per evitare di dover riscrivere il codice in ogni pagina che apre una chromeless.

Vediamolo in dettaglio:

function createChromeless()
{
    var B = "popup.htm";JavaScript   // URL
    var K = "img/titlebar.gif";    // immagine barra del titolo
    var Y = "ByKleins Chromeless Windows";    // titolo
    var L = 25;JavaScript    // altezza barra del titolo
    var E = "Arial";JavaScript    // font titolo
    var I = 10;JavaScript    // dimensione titolo
    var N = "#F0F0F0";JavaScript    // colore titolo
    var C = false;JavaScript    // scrollbars
    var h = 520;JavaScript    // larghezza (w)
    var r = 235;JavaScript    // altezza (h)
    var o = true;JavaScript    // centratura
    var m = 10;JavaScript    // xPos
    var e = 10;JavaScript    // yPos
    var l = "#59657B";JavaScript    // colore bordo
    var e_= 5;JavaScript    // dimensione bordo
    var s = "img/minimizar.gif";    // bottone minimizza
    var s_= "img/cerrar.gif";    // bottone chiudi

  myChromeless = new ChromelessWindow(B,Y,K,L,E,I,N,C,h,r,o,m,e,l,e_,s,s_);
}
createChromeless();

L'istruzione

var B = "popup.htm";JavaScript    // URL

imposta l'indirizzo URL di default della pagina da aprire.

Le righe di codice

var K = "img/titlebar.gif";    // immagine barra del titolo
var Y = "ByKleins Chromeless Windows";    // titolo
var L = 25;JavaScript    // altezza barra del titolo
var E = "Arial";JavaScript    // font titolo
var I = 10;JavaScript    // dimensione titolo
var N = "#F0F0F0";JavaScript    // colore titolo

fanno riferimento alla barra del titolo.

La prima riga richiama un'immagine da visualizzare. La seconda indica il testo da mostrare in alternativa all'immagine. La terza riga imposta l'altezza della barra. Le restanti righe si riferiscono al font, alla dimensione e al colore dell'eventuale testo.

Il testo del titolo, e tutte le sue impostazioni, verranno utilizzate solamente nel caso non venga fornita un'immagine. Ma, attenzione, la variabile K deve essere comunque dichiarata. Alternative possibili per non fornire un'immagine sono, dunque:

var K;
var K = "";
var K = null;

La stringa sottostante

var C = false;JavaScript    // scrollbars

indica se visualizzare o meno una scrollbar nella finestra di pop-up.

Le dimensioni della finestra di chromeless possono essere impostate con il seguente codice:

var h = 520;JavaScript    // larghezza (w)
var r = 235;JavaScript    // altezza (h)

Le righe di codice

var o = true;JavaScript    // centratura
var m = 10;JavaScript    // xPos
var e = 10;JavaScript    // yPos

si riferiscono alla posizione della finestra di chromeless. La prima riga indica se farla apparire al centro dello schermo. Le altre due indicano la distanza dallo schermo, rispettivamente da sinistra e dall'alto, quando la centratura è impostata su false.

Le righe di codice

var l = "#59657B";JavaScript    // colore bordo
var e_= 5;JavaScript    // dimensione bordo

fanno riferimento al bordo che circonda la finestra di chromeless. Vengono impostati, rispettivamente, il colore e la dimensione.

Le immagini per minimizzare la finestra e quella per chiuderla vengono così impostate:

var s = "img/minimizar.gif";            // bottone minimizza
var s_= "img/cerrar.gif";            // bottone chiudi

Le immagini standard sono comprese nel file zip da scaricare. Ovviamente, il percorso delle gif può essere tranquillamente cambiato.

Molti di questi parametri potranno, ovviamente, essere ulteriormente personalizzati per ogni finestra di chromeless che verrà aperta. Per far questo si ricorrerà, come vedremo, a dei metodi pubblici.

Apertura della finestra di chromeless

Vediamo adesso la pagina index.html che lancerà lo script per aprire la finestra di chromeless.
Tra i tag <head> devono essere contenuti i richiami ai due principali file JavaScript esterni:

<script type="text/javascript" src="ByKlein_chromeless2.0.js"></script>

<script type="text/javascript" src="impostazioni_chromeless.js"></script>

Il link per aprire la finestra di chromeless andrà invece posizionato nella posizione desiderata all'interno dei tag <body>:

<a href="javascript:myChromeless.openChromeless();">APRI LA CHROMELESS DI PROVA</a>

Come si vede, il link richiama semplicemente il metodo openChromeless dell'oggetto myChromeless, che viene definito all'interno dello script di Klein.

I metodi pubblici

Nella pagina index.html ho inserito anche una lista di link che richiamano tutti i metodi pubblici che compongono questo oggetto.

<DIV id="metodi" style="position: relative; visibility: hidden">
  <span style="font-weight: bold;">METODI PUBBLICI</span><br><br>
  <a href="javascript:myChromeless.openChromeless();">myChromeless.openChromeless()</a><br><br>
  <a href="javascript:myChromeless.closeChromeless()">myChromeless.closeChromeless()</a><br><br>
  <a href="javascript:myChromeless.minimizeChromeless()">myChromeless.minimizeChromeless()</a><br><br>
  <a href="javascript:myChromeless.setURL('http://www.dmstk.com')">myChromeless.setURL('http://www.dmstk.com')</a><br><br>
  <a href="javascript:myChromeless.resizeChromeless(800,600)">myChromeless.resizeChromeless(800,600)</a><br><br>
  <a href="javascript:myChromeless.moveChromeless(400,400)">myChromeless.moveChromeless(400,400)</a><br><br>
</div>

Questi metodi sono, però, compatibili solamente con IE 5.0 o superiore, perciò ho voluto nascondere i link ai browser non compatibili ed ho impostato la proprietà visibility del tag DIV su "hidden".

Quando, come in questo caso, si necessita di utilizzare i metodi dell'oggetto, occorre richiamare il file JavaScript che controlla se il browser è compatibile con le finestre di chromeless e quindi inserire, sempre all'interno dei tag <head> la seguente riga di codice:

<script language="javascript" src="compatibility.js"></script>

In questo caso, se il browser è compatibile, voglio visualizzare il DIV contenente l'elenco dei metodi. Ho inserito, a questo scopo, il seguente codice:

<script language="javascript">
onload = initialize;
function initialize()
{
  if (chromelessCompatible)
    document.getElementById("metodi").style.visibility = "visible";
}
</script>

Vediamo adesso quali sono i metodi pubblici che lo script utilizza:

• closeChromeless(): chiude la finestra di chromeless eventualmente aperta.
• minimizeChromeless(): se la finestra è aperta, viene ridotta a icona.
• setURL(stringa_url): cambia l'url della finestra di chromeless.
• resizeChromeless(larghezza, altezza): imposta le dimensioni della finestra.
• moveChromeless(xPos, yPos): modifica la distanza della finestra dal bordo sinistro e da quello in alto dello schermo.

I primi due metodi, ovviamente, hanno effetto soltanto se la finestra è stata già aperta. I restanti metodi possono essere richiamati sia prima della sua apertura, per impostarne le proprietà, sia quando la chromeless è già stata aperta, per cambiarle dinamicamente.

Per essere maggiormente precisi sulla compatibilità tra i browser, volevo puntualizzare che il primo e l'ultimo metodo sono in realtà funzionanti anche con Netscape. Li ho qui nascosti per praticità e brevità di codice.

La finestra di pop-up

La finestra di pop-up, quella che veicola i contenuti, è una normalissima pagina HTML.

Anche da qui possiamo gestire le proprietà della chromeless. Ma, a differenza della pagina principale, per richiamarle dobbiamo usare delle funzioni. Nella pagina di pop-up, infatti, non disponiamo più dell'oggetto myChromeless e lo script di Klein ci consente di accedere alle proprietà della chromeless con delle funzioni.

Vediamole in dettaglio:

• closeChromeless():chiude la finestra di chromeless.
• setURL(stringa_URL): cambia l'url della finestra di chromeless.
• resizeChromeless(larghezza, altezza): modifica le dimensioni della finestra.
• moveChromeless(xPos, yPos): modifica la distanza della finestra dal bordo sinistro e da quello in alto dello schermo.
• dragChromeless(valre_booleano): permette di spostare la finestra tenendo premuto il tasto sinistro del mouse.

Le prime quattro funzioni eseguono operazioni già viste nel caso della finestra principale e sono chiamate allo stesso modo. Per creare un link che chiude la finestra, ad esempio, dovremo scrivere all'interno del tag <body>:

L'ultima funzione, invece, è un po' più complessa, perché occorre agire sugli eventi onMouseDown e onMouseUp:

In questo modo, tenendo premuto il tasto sinistro del mouse sul link (evento onMouseDown) sarà possibile trascinare la finestra. Quando poi il tasto verrà rilasciato (evento onMouseUp) l'effetto finirà.

Tutte queste funzioni sono compatibili solamente con Internet Explorer 5.0 o superiore. Per questo, anche in questo caso, ho inserito l'elenco delle funzioni disponibili in un DIV nascosto:

Ho poi, anche qui, mostrato il riquadro solamente quando il browser utilizzato è compatibile con le finestre di chromeless: