Creare un web widget in Javascript, HTML e CSS

Oramai i nostri siti sono pieni di web widget, a partire da Google Analytics, Twitter, Facebook, Google Plus.
E se desiderassimo offrire un nostro widget in modo tale che possa essere incorporato in altri siti?

Creaimo il nostro web widget

In questo articolo illustrerò come creare un web widget utilizzando Javascript.
Procederò a steps, partendo da un semplice widget e, via via, aggiungendo funzionalità.

Codice da includere

Partiamo dal codice che richiama il web widget, ossia il codice che deve essere inserito nella pagina HTML in cui visualizzare il widget.

<div id="acwidget"></div>
<script src="http://www.andrea-cardinale.it/examples/web-widget/widget-1.js" type="text/javascript"></script>

Come potete vedere il codice da includere è abbastanza semplice. E’ composto da:

  • un div, con id acwidget, che conterrà il nostro HTML
  • un file javascript che si occuperà di visualizzare il nostro widget

Widget

Passiamo al file javascript che si occuperà di visualizzare il nostro contenuto.

// Funzione anonima
(function() {
    // ...il nostro codice
})(); // Eseguiamo subito la nostra funzione anonima

Il nostro codice è all’interno di una anonymous function, ciò ci permetterà di dichiarare variabili e funzioni valide esclusivamente all’interno di essa.

Widget – esempio 1 – Scriviamo “hello world!”

Il primo widget che andremo a creare visualizzerà all’interno del div acwidget la frase “hello world!”

widget-1.js

//funzione anonima
(function() {
    var acwidget = document.getElementById('acwidget');
    acwidget.innerHTML = 'hello world!'
})(); // Chiamiamo subito la nostra funzione anonima

Potete vederlo in azione qui.
Il widget non fa altro che modificare l’innerHTML del nostro div.

Widget – esempio 2 – widget con iframe

Il secondo widget si occuperà di caricare un iframe.

widget-2.js

//funzione anonima
(function() {
    var acwidget = document.getElementById('acwidget');
    // Creaiamo l'iframe
    var myiframe = document.createElement('iframe');
    // Settiamo alcune proprietà dell'iframe
    myiframe.frameBorder = 0;
    myiframe.allowTransparency = true;
    myiframe.scrolling = 'no';
    myiframe.style.width = '300px';
    myiframe.style.height = '400px';
    myiframe.src='http://www.andrea-cardinale.it/examples/web-widget/widget-2-iframe.html';
    // Aggiungiamo l'iframe al nostro div
    acwidget.appendChild(myiframe);
})(); // Chiamiamo subito la nostra funzione anonima

Potete vederlo in azione qui.

Widget – esempio 3 – widget con JSONP, Javascript e CSS

Iniziamo a fare sul serio 🙂
Il nostro widget adesso ricaverà le informazioni da visualizzare da un file PHP attraverso una chiamata JSONP (chiamata ajax, cross-domain, utilizzando il formato JSON).
Per far ciò ci serviremo di una libreria molto leggera: Lightweight-JSONP.
Dunque occorrerà caricare anche il file jsonp.js e per completare aggiungiamo anche un file CSS che conterrà gli stili del nostro widget.

widget-3.js

//funzione anonima
(function() {
    // Creiamo l'elemento javascript
    var js_jsonp=document.createElement('script');
    // Impostiamo il type
    js_jsonp.setAttribute("type","text/javascript");
    // Impostiamo l'src del javascript da caricare
    js_jsonp.setAttribute("src", "http://www.andrea-cardinale.it/examples/web-widget/jsonp.js");

    //Quando il javascript viene caricato richiamiamo la funzione init

    // Per vecchie versioni di IE
    if (js_jsonp.readyState) {
        js_jsonp.onreadystatechange = function () {
            if (this.readyState == 'complete' || this.readyState == 'loaded') {
                init();
            }
        };
    // Per tutti gli altri browser
    } else {
        js_jsonp.onload = init;
    }

    // Inseriamo il javascript nell'head
    (document.getElementsByTagName("head")[0] || document.documentElement).appendChild(js_jsonp);

    // Creiamo l'elemento CSS
    var mycss=document.createElement("link");
    mycss.setAttribute("rel", "stylesheet");
    mycss.setAttribute("type", "text/css");
    mycss.setAttribute("href", "http://www.andrea-cardinale.it/examples/web-widget/widget-3.css");
    // Inseriamo il CSS nell'head
    document.getElementsByTagName("head")[0].appendChild(mycss);

    // Funzione che effettua la chiamata JSONP ed inserisce il contenuto nel div
    function init() {
        var acwidget = document.getElementById('acwidget');
        // Effettuiamo la chiamata JSONP
        JSONP.get(
            // URL del file
            'http://www.andrea-cardinale.it/examples/web-widget/widget-3-jsonp.php',
            // Eventuali parametri {param1:'abc', param2:'123'}
            {},
            // Funzione di callback. Viene richiamata quando si ha la risposta dalla chiamata JSONP.
            function(response){
                // Inseriamo nel nostro div le informazioni
                acwidget.innerHTML = '<div>Sono le ore: ' + response.time + '</div><div>del giorno ' + response.day + '</div>';
            }
        );
    }
})(); // Chiamiamo subito la nostra funzione anonima

Potete vederlo in azione qui.
Non c’è molto da dire, i commenti nel codice sono molto chiari.

Ti è piaciuto questo articolo? Condividilo... oppure lascia un commento 😉

Contenuto bloccato in attesa del consenso  
Contenuto bloccato in attesa del consenso  
Related Posts Plugin for WordPress, Blogger...
Taggato con: , ,
Pubblicato in Javascript

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

*

Altro... Javascript
Verificare se un plugin jQuery è caricato

Per verificare se un plugin di jQuery è stato caricato possiamo utilizzare il seguente codice: if( jQuery().pluginname ) { //codice...

Chiudi