Hello World: » Javascript

Introduzione a EXT JS Javascript Framework

admin — Wed, 18 Mar 2009 01:21:00 +0000

Ext: Non l’ennesima libreria javascript

Oggi introdurremo la libreria EXT JS, un potente framework che da allo sviluppatore web la possibilità di creare interfacce avanzate con poche linee di codice. Queste interfaccie comprendono Feed Viewer, Gallerie di immagini, griglie o liste ( le grid ), tabs, finestre, layout, form, toolbars, menu, drag&drop e molto altro. Ext nasce inizialmente come una estensione della Yahoo User Interface Library dalla quale col tempo si separa diventando un framework vero e proprio per di più open source.

Se per caso avete già ‘adottato’ un vostro framework e state per chiudere questa pagina, vi consiglio prima di dare un’occhiata a questa pagina per vedere subito di cosa è capace ExtJs, per giunta è anche possibile integrarlo con la vostra libreria preferita.

Download di Ext Js

Potete scaricare Ext da questa pagina http://extjs.com/products/extjs/download.php, ad oggi la versione disponibile è la 2.2.1, cliccate quindi sul tasto ‘download’ a fianco di ‘Ext JS 2.2.1 SDK’, un archivio che conterrà tutto ciò di cui avete bisogno per cominciare ( circa 6,6 Mb ).

Installazione di Ext

Una volta scaricato l’archivio, scompattatelo, ne otterrete diverse cartelle e files. I file di cui avrete bisogno per far funzionare il tutto sono ext-base.js, che contiene il motore della libreria, ext-all.js o in alternativa la sua versione non compressa, ext-all-debug.js, da utilizzarsi in ambiente di sviluppo. Inoltre avrete la necessità di includere nei vostri file html le directories resources e adapter, qui di seguito un breve esempio di un codice html funzionante per ext:



   ExtJs Hello World

Vediamo nel dettaglio i file inclusi:

ext-all.css: il file CSS principale di Ext, contiene le regole dello stile per i widget di Ext. Questo file css NON va modificato, eventuali modifiche sono da inserirsi in un altro file, da inserire nel codice html in una riga seguente a questo. Per essere sicuri di sovrascrivere una certa regola css il consiglio è di utilizzare la parola chiave ‘important!’ nel vostro css.
ext-base.js: come già detto è il motore di Ext. Risiede nella cartella adapters in quanto va sostituito con un altro nel caso volessimo utilizzare Ext insieme alla nostra libreria preferita, come per esempio jQuery
ext-all-debug.js/ext-all.js: tutti i widgets di Ext risiedono all’interno di questo file. La versione compressa da utilizzare in produzione pesa più di 530 kb!

Ext Hello World

Vediamo un esempio veloce di utilizzo di Ext. Partendo dal codice html scritto in precedenza, aggiungetevi l’inclusione di un ulteriore file javascript, chiamatelo, per esempio, main.js



   ExtJs Hello World

All’interno di main.js inserite questo codice

  Ext.onReady(function(){
    Ext.Msg.alert('Hello', 'World');
  });

Se tutto è andato per il verso giusto otterrete un simpatico alert. Come potete notare il codice javascript personalizzato, come avviene anche in jQuery, dev’essere inserito all’interno del metodo ‘ready’.

Per ora è tutto, questo tutorial voleva solo essere una introduzione veramente di base a questo utile framework. Nei prossimi articoli sull’argomento, vedremo come implementare Ext con altre librerie e qualche guida più avanzata ai widget più utili, come per esempio grid e form.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Firebug per Firefox

admin — Tue, 20 Jan 2009 09:04:49 +0000

L’estensione indispensabile per lo sviluppatore web

Firebug è un plugin per Firefox sviluppato da Joe Hewitt che possiede alcune funzionalità a cui nessuno sviluppatore vorrebbe fare a meno.

Dopo aver scaricato ed installato l’estensione ed aver riavviato il browser, vedremo in basso a destra della finestra del browser l’incona di un insetto. Cliccandoci sopra si aprirà il pannello di controllo di Firebug.

Attivare firebug

Come potrete notare il plugin necessita di essere abilitato per iniziare a funzionare nel pieno delle sue caratteristiche, quindi dovrete inserire le spunte nei pannelli desiderati per attivarli.

Caratteristiche

Firebug offre davvero molte funzionalità interessanti. Quelle che personalmente preferisco ed utilizzo maggiormente sono la possibilità di effettuare il debug degli script javascript, caratteristica che fa risparmiare allo sviluppatore molto tempo e il DOM Inspector.

Sono inoltre importanti il pannello ‘Net’, dove possiamo visualizzare tutte le richieste che ha effettuato la pagina web, richieste tra le quali rientrano il download di immagini, di fogli di stile, javascript esterni e così via.

Sotto il pannello ‘Console’ invece possiamo vedere le richieste asincrone che la pagina sta effettuando.

Una curisità, per quanto riguarda il pannello ‘Net’, è la possibilità di visualizzare, per quei siti che offrono il servizio di condivisione video, il percorso reale del file video e quindi poterlo scaricare direttamente.

Per quanto riguarda il DOM Inspector, dopo aver installato firebug, cliccando col tasto destro su un qualsiasi elemento della pagina web, noteremo nel menù la voce ‘Analizza Elemento’: cliccando su questa voce potremo visualizzare dove nel DOM ( Document Object Model ) è posizionato quell’elemento, le regole css ad esso applicato ed inoltre potremo effettuare delle modifiche in tempo reale, sia sul codice html che sul css.

Conclusioni

Una volta provato non potrete più fare a meno di Firebug. Le caratteristiche offerte da questa estensione sono a dir poco indispensabili per uno sviluppatore ma potrebbero tornare utili anche ad un ‘comune’ utente. Sicuramente vi starete chiedendo ‘Ma gli altri browser’? La risposta è semplice, firebug NON esiste per altri browser fuorchè Firefox.

Tuttavia esistono plugin sia per Internet Explorer che per Opera che cercano di imitare le possibilità offerte da Firefox, magari li vedremo più avanti.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Menu a tendina multilivello crossbrowser con jQuery e Css

admin — Sat, 04 Oct 2008 04:21:10 +0000

Crossbrowser Multi Level Drop Down Menu Con jQuery e Css

I menu a tendina sono molto utilizzati nelle applicazioni web, e molto spesso per crearli si ricorre a chilometri di codice javascript, scelta che potrebbe comportare diverse problematiche a livello di portabilità, accessibilità, efficienza ecc… Non è il caso del menù che andremo a vedere tra poco, interamente realizzato dal sottoscritto, creato quasi completamente utilizzando ’semplice’ codice css con un pizzico di jQuery. Prima di buttarmi in questo lavoro ho effettuato diverse ricerche per vedere se ciò di cui avevo bisogno fosse già stato creato da qualcuno, ed in effetti, in molti hanno già creato cose abbastanza simili. Ciò che mi ha fatto decidere di creare qualcosa ex novo è stata la difficoltà di riadattare il codice altrui alle mie esigenze, e spero che con le spiegazioni che darò qui di seguito nessuno vada incontro alle medesime problematiche.

Ecco subito un esempio di cosa andremo ad ottenere e qui di seguito il codice:

index.html

  
  
    
      
      
      
      
      Drop Down Menu
    
  

  
    
      Voce 1
        
          Sub Voce 1-1
            
              Sub Voce 1-1-1
                
                  Sub Voce 1-1-1-1
                  Sub Voce 1-1-1-2sssssss sssssssss ssssss
                  Sub Voce 1-1-1-3
                  Sub Voce 1-1-1-4
                    
                      Sub Voce 1-1-1-4-1
                      Sub Voce 1-1-1-4-2
                      Sub Voce 1-1-1-4-3
                      Sub Voce 1-1-1-4-4
                      Sub Voce 1-1-1-4-5
                      Sub Voce 1-1-1-4-6
                    
                  
                  Sub Voce 1-1-1-5
                  Sub Voce 1-1-1-6
                
              
              Sub Voce 1-1-2
                
                  Sub Voce 1-1-2-1
                  Sub Voce 1-1-2-2
                  Sub Voce 1-1-2-3
                  Sub Voce 1-1-2-4
                  Sub Voce 1-1-2-5
                  Sub Voce 1-1-2-6
                  Sub Voce 1-1-2-7
                
              
              Sub Voce 1-1-3
            
          
          Sub Voce 1-2
        
      
      Voce 2
      Voce 3
        
          Sub Voce 3-1
          Sub Voce 3-2
            
              Sub Voce 3-2-1
              Sub Voce 3-2-2
              Sub Voce 3-2-3
            
          
        
      
      Voce 4
      Voce 5
      Voce 6

style/style.css

	html, body, div, span, applet, object, iframe,
	h1, h2, h3, h4, h5, h6, p, blockquote, pre,
	a, abbr, acronym, address, big, cite, code,
	del, dfn, em, font, img, ins, kbd, q, s, samp,
	small, strike, strong, sub, sup, tt, var,
	b, u, i, center,
	dl, dt, dd, ol, ul, li,
	fieldset, form, label, legend,
	table, caption, tbody, tfoot, thead, tr, th, td {
		margin: 0;
		padding: 0;
		border: 0;
		outline: 0;
		font-size: 100%;
		vertical-align: baseline;
		background: transparent;
	}

	body {
		line-height: 1;
	}

	ol, ul {
		list-style: none;
	}

	blockquote, q {
		quotes: none;
	}

	blockquote:before, blockquote:after,
	q:before, q:after {
		content: '';
		content: none;
	}

	/* remember to define focus styles! */
	:focus {
		outline: 0;
	}

	/* remember to highlight inserts somehow! */
	ins {
		text-decoration: none;
	}

	del {
		text-decoration: line-through;
	}

	/* tables still need 'cellspacing="0"' in the markup */
	table {
		border-collapse: collapse;
		border-spacing: 0;
	}

	span {
		display: none;
	}

	#navigator {
		width: 990px;
		height: 21px;
		background-color: rgb(250,211,211);
	}

	#navigator ul {
		list-style-type:none;
		border: 0px solid #000000;
		position: absolute;
		z-index: 90;
	}

	#navigator ul li {
		width: 130px;
		float: left;
		border: 1px solid black;
		text-align: center;
		font-size: 11px;
		font-weight: bold;
		display: block;
	}

	#navigator ul li ul {
		display: none;
		visibility: hidden;
		width: 130px;
		border: 0px;
		border-left: 1px solid black;
		border-right: 1px solid black;
		background-color: #ffffff;
		margin: 1px 0px 0px -1px;
	}

	* html #navigator ul li ul {
		margin: 0px;
		background-color: #fff000;
		margin: 1px 0px 0px -66px;
	}

	#navigator ul li ul li {
		border: 0px solid black;
		border-bottom: 1px solid black;
		width: 130px;
	}

	#navigator ul ul ul {
		border: 0px solid black;
		border-top: 1px solid black;
		border-left: 1px solid black;
		border-right: 1px solid black;
		float: left;
		width: 130px;
		margin: -18px 0px 0px 130px;
		height: auto;
	}

	* html #navigator ul ul ul {
		margin: 0px;
		margin: -18px 0px 0px 65px;
	}

	#navigator ul li p {
		margin: 0px;
		padding: 3px 0px 3px 0px;
		color: #000000;
		width: 100%;
		height: 100%;
		background-color: #ff0000;
	}

	#navigator ul li p a {
		color: #000000;
		background-color: #00ff00;
	}

js/menu.js


  $(document).ready(function(){
    $("#navigator li").hover(
      function(){
        $(this).children('ul:first:hidden').css({visibility: "visible",display:'block'});
      },
      function(){
        $(this).children('ul:first:visible').css({visibility: "hidden",display:'none'});
      }
    );
  });

Ricordatevi inoltre di includere correttamente la libreria jQuery.

Il file html non ha bisogno di spiegazioni, un semplice div che contiene un ul con degli li che a loro volta possono contenere altri ul ecc..

Il file menu.js utilizza il metodo hover di jQuery, che in pratica, mette in ascolto gli oggetti LI presenti all’interno del DIV#navigator con i metodi onmouseover e onmouseout.

Il file style.css è quello che andremo a dissezionare, vedendo passo passo i comportamenti che prende il nostro menu al variare del suo contenuto. Procederemo quindi in vari step che ci porteranno alla versione finale. Il codice in testa al file è parte del Meyerweb Reset che personalmente includo in ogni progetto.

Step 1

Il primo passo è semplice… eliminate il contenuto che segue alla definizione degli attributi per il div#navigator, otterrete questo risultato. Il contenuto degli ul li è subito visibile ed ogni elemento è a capo dell’altro. I file html e js sono rimasti invariati, infatti passando con il mouse sugli elementi LI potremo visualizzare/nascondere eventuali ul figli se disponibili.

Step 2

Non seguiremo l’ordine del codice come impostato nel file css nei vari step, infatti il file css di questo secondo passaggio sarà la versione dello step 1 con aggiunta delle definizioni di ‘#navigator ul li p’ e ‘#navigator ul li p a’. Cliccate qui per vedere il risultato e controllare se state eseguendo tutto correttamente. Abbiamo formattato i tag P ed A presenti all’interno degli LI. Perchè tag P? La versione fnale del menu senza la presenza dei tag P aveva un fastidioso difetto di sovrapposizione degli UL. Più nel dettaglio, la coordinata X dell’UL era uguale alla coordinata X del testo presente nell’LI parente sommata della sua lunghezza ( l’UL compariva subito dopo la fine del testo e non alla fine dell’LI, donando un effetto di disordine ).

Step 3

In questo passaggio le cose iniziano a prendere forma. Aggiungiamo le definizioni per ‘#navigator ul’ e ‘#navigator ul li’ ovvero l’UL che conterrà gli LI che rappresenteranno le categorie. Scrivo ‘rappresenteranno’ in quanto adesso la definizione prende tutti gli UL e gli LI discendenti del div#navigator. Ciò che abbiamo ottenuto è che adesso, le sottocategorie compaiono al di sotto della categoria a cui appartengono. Questo step 3 sarà visualizzato in maniera abbastanza differente dai vari browser ( leggi: su IE6 viene interpretato in modo differente che dagli altri browser ). Da sottolineare la presenza dell’attributo position: absolute; che permette la visualizzazione degli UL come se fossero al di fuori di qualsiasi altro elemento ( modificare questa voce con relative o rimuoverla per capire di cosa sto parlando ).

Step 4

Aggiungiamo le definizioni di ‘#navigator ul li ul’, ‘#navigator ul li ul li’ e ‘* html #navigator ul li ul’. In questo modo differenziamo la visualizzazione delle categorie di primo livello ( lo abbiamo fatto nello step 3 ) dalle sottocategorie ( a qualsiasi livello ). Inoltre definiamo che le sottocategorie di default NON debbano visualizzarsi. Della loro visualizzazione se ne occupera il file js ( che cerca il primo figlio UL nascosto dell’LI scatenante l’evento mouseover e lo visualizza ). Ciò che otteniamo è la corretta visualizzazione delle categorie di primo livello. Da notare che un selettore preceduto dal suffisso ‘* html’ viene letto esclusivamente da IE6, quindi le proprietà al suo interno sono specifiche per far funzionare il tutto anche su questo browser.

Final Step

Infine aggiungiamo le regole ‘#navigator ul ul ul’ e ‘* html #navigator ul ul ul’ che definiscono la visualizzazione per le categorie dal terzo livello in poi. Otteniamo quindi il risultato finale.

Riadattare il tutto

Ciò a cui bisogna porre attenzione modificando il css di questo menù sono principalmente la larghezza degli li/ul e la loro altezza, data principalmente dalla proprietà padding del tag P. Inoltre, la presenza del bordo di 1px è da tenere in considerazione in quanto la sua rimozione/modifica comporterebbe la modifica di altre proprietà per fare in modo che tutto si riadatti. Rispettando l’equilibrio tra le varie proprietà non dovrebbe essere eccessivamente un problema riadattare il tutto alle proprie esigenze.

Si conclude qui questo tutorial. Eventuali commenti per richieste o consigli su come modificare in meglio il codice sono sempre ben accetti.

Note: There is a rating embedded within this post, please visit this post to rate it.

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Introduzione a JQuery

admin — Fri, 03 Oct 2008 05:50:20 +0000

Il Framework jQuery

JQuery è un framework javascript che semplifica, e anche di molto, il lavoro per tutti quelli che hanno a che fare con il suddetto linguaggio. JQuery è inizialmente scritto da John Resig, a cui si sono unite altre persone creando un vero e proprio team. Diversi grandi nomi utilizzano questo framework nei loro siti internet, tra cui Google, Mozilla.org, Technorati ed altri che potete vedere sul sito di JQuery, dove tra l’altro, potete anche scaricarlo a scelta tra la versione compressa per produzione e non.

Ma cosa ci permette di fare questo framework? Niente altro che tutto quello che ci permette di fare javascript, ma in maniera estremamente più semplice e veloce. Prima di scendere nel dettaglio con qualche codice di esempio, vediamo come inizializzare JQuery. Il mio consiglio è quello creare un file esterno ed includerlo nelle pagine subito dopo aver incluso il file principale della libreria:

prova.html

  
  
    
      
      
      
      
      JQuery Test Application
    
  
  [...]

myJQueryStuff.js

$(document).ready(function(){

// codice javascript/jquery

});

Tutto qui. Da questo momento in poi potrete usufruire di tutte le caratteristiche della libreria, come per esempio:

Selettori

Tramite la chiamata della funzione $, è possibile selezionare praticamente qualsiasi oggetto html in qualsiasi maniera si voglia. La sintassi dei selettori è molto simile ai selettori css, quindi per esempio, se volessimo selezionare il

del nostro documento html, il codice sarebbe:

Selezione del div #container

 var container = $('#container');

Alla stessa maniera è quindi possibile selezionare uno o più oggetti per classe, tagName, per via gerarchica utilizzando il simbolo >

Selezione degli ul ‘figli’ del div #container

 var container = $('#container > ul');

e molti altri ancora. Esistono inoltre una grande quantità di filtri, raggruppati per filtri base, filtri di contenuto, visibilità, attributo, per i figli, per i forms ecc.. potete trovare tutto spiegato in maniera dettagliata con la spiegazione dei vari valori ritornati cliccando qui.

Ajax

JQuery semplifica radicalmente la creazione delle richieste asincrone. Non dovremo più preoccuparci delle problematiche crossbrowser di creazione dell’oggetto XMLHttpRequest, JQuery ci pensa per noi, di seguito un esempio dello script da utilizzare:

richiesta Ajax con JQuery

      $.ajax({
        url: './myServerScript.php',
        type: 'GET',
        data: 'myVar='+myVar,
        success:  function(html){
        }
      });

Questo è solo un esempio di come poter effettuare una richiesta di tipo GET al file myServerScript.php. Eventuali dati ritornti dalla richiesta saranno contenuti nella variabile html. Sono inoltre disponibili le chiamate POST e JSON. E’ possibile inoltre specificare diverse altre proprietà per efttuare la chiamata ajax, per approfondimenti vi rimando a questo link.

Eventi

Molto intuitiva anche la gestione degli eventi, con cui è possibile aggiungere o rimuovere un oggetto dall’ascolto di un determinato evento. Esiste inoltre la possibilità di scatenare un certo evento mediante il metodo trigger. Di seguito un esempio che mette in ascolto un elemento all’evento click:

esempio evento click

  $('myButton').bind('click',function(){
    alert('hai cliccato myButton!');
  });

Per tutti i dettagli sulla gestione degli eventi cliccate qui.

Effetti

Ovviamente non poteva mancare una gestione degli effetti, come animazioni, comparsa/scomparsa, slide ecc.. Ecco un esempio:

Effetto slide su un div

    $("button").click(function () {
      $("div.slide").slideToggle("slow");
    });

Potete trovare tutta la documentazione con esempi pronti qui.

Su jQuery c’è moltissimo da scrivere, questo tutorial aveva il semplice scopo di introdurre le funzionalità base del framework, ritorneremo presto sull’argomento con interessanti script pronti all’uso. Nel mentre, ecco alcuni link estremamente interessanti di alcuni utilissimi plugin che estendono le già non poche funzionalità:

Note: There is a rating embedded within this post, please visit this post to rate it.

Introduzione a EXT JS Javascript Framework Ext: Non l'ennesima libreria javascript Oggi introdurremo la libreria EXT...

Related posts brought to you by Yet Another Related Posts Plugin.