Gli Elements
I Browser implementano quello che è conosciuto come DOM(Document Object Model), Javascript non è direttamente legato ai browser (falsa opinione comune) che sono solo il luogo dove gli sviluppatori solitamente usano questo linguaggio per accedere a questa struttura. I browser stessi d’altro canto, estendono il linuaggio di base aggiungendo metodi e proprietà agli oggetti Javascript ( nativi del linguaggio stesso) che sono la rappresentazione dei tag html utilizzati per definire la grafica di una pagina web(e non solo).
I metodi nativi degli oggetti Element, come molti altri metodi nativi di Javascript, lasciano a desiderare e non pemettono la scrittura di un codice pulito e ben strutturato in oltre, per le motivazioni enunciate in precedenza, dipendono direttamente dai browser in cui il codice viene eseguito limitandone la portabilità.
MooTools, il cui scopo è quello di mettere un web developer nella condizione di produrre un codice riusabile e di ingegnerizzare un mondo in cui la buona progettazione è un argomento tabù, mette a disposizione un tipo di oggetto Element e molti metodi che estendono le potenzialità base del linguaggio offrendo la possibilità di migliorare la qualità del lavoro prodotto.
Istanziare un Element MooTools
Istanziamo un element che rappresenta un tag img
var myImg = new Element('img',
{
src: '/foo.jpg',
alt: 'this is foo',
'class': 'fooClass',
events: {
click: function(){ alert('click!');}
},
styles: {
border: '1px solid blue',
marginTop: '10px'
}
});
la sintassi è molto piu simile a quella di un linguaggio OO class-based, all’element istanziato vengono associati in fase di creazione anche altri attributi come gli styles ed events che vedremo in seguito.
Al costruttore viene passato come parametro, una stringa identificativa del tag html che l’element deve rappresentare e un oggetto Javascript che rappresenta le options dell’element cioè gli attributi aggiuntivi che ne descrivono lo stile e la reazione a particolari eventi, quindi possiamo generalizzare e scrivere
Var element=new Element(
‘HtmlTag’,
{
Src:’bla bla’
// insomma oggetto javascript che ha come attributi
// gli attributi da passare al nuovo element al
// momento dell’istaziazione
//options del nuovo element
},
Styles
{
//stile dell’element che si sta istanziando
} );
la dichiarazione di un elemento può essere anche divisa dalla sua caratterizzazione usando i metodi degli Element definiti da mootools come generalizzazione di quelli forniti dal linguaggio.
Element.set(property,value);
Element.setStyle(attribute,style);
Element.get(property);
Element.getStyle(attribute);
grazie all’utilizzo di questi metodi possiamo creare e modificare interamente la struttura di un element.
In aggiunta ai metodi precedenti nella libreria è presente anche il metodo
Element.erase(property);
Quello che è stato fatto fino ad ora riguarda come istanziare e modificare la struttura di un element, questo però non avrà un effettivo valore fino a quando non sarà inserito nel dom per questo analizziamo i metodi che MooTools mette a disposizione per adempiere a questo compito.
Injection and Removal
Element.inject(newElement,position);Element.grab, Element.adopt assolvono allo stesso compito con piccole differenze quindi per la loro trattazione si rimanda alla documentazione ufficiale.Element.empty();
elimina tutti i figli dell’ elemento su cio è invocato.Element.destroy();
elimina l’elemento dal dom e ne libera lo spazio di memoria occupato.Element.dispose();
rimuove l’elemento dalla posizione occupata senza però rimuoverlo dalle strutture di memoria permettendo un suo futuro reinserimento.
Ora conosciamo gli strumenti principali per creare,modificare e eliminare Elements, nei prossimi post analizzaremo caratteristiche piu avanzate degli Elements che mootools ci mette a disposizione come Events e Storage.
sabato 18 aprile 2009
Mootools - cap 2 - gli Elements
Mootools - cap 1 - Il pane quotidiano
Il Pane quotidiano - funzioni $ e gli Element
Javascript è un linguaggio di scripting che fondamentalmente svolge la funzione di dare logica a quello che è la grafica data da HTML e CSS in una pagina web.
Il pane quotidiano quindi di un "programmatore web" è prendere un elemento dalla pagina, manipolarlo e fare computazione. Vediamo come Mootools ci viene in aiuto nella stesura del nostro codice.
Le funzioni $ e $$
Dicevamo che "accattarsi" un elemento dalla pagina e manipolarlo è un'operazione presente forse in ogni script javascript. Javascript ci mette a disposizione la funzione document.getElementById('id') fortunatamente cross-browser (con un solo piccolo problema) ma eccessivamente scomoda (troppo lunga! ricordiamoci che 'ctrl+c' + 'ctrl+v' = 'problemi') e limitata (limitata lo direte dopo aver letto quest'articolo...).
Mootools ci mette a disposizione la funzione $ che ha la duplice funzione di restituirci un elemento a partire dal suo id e restituirci quell'elemento come oggetto nativo di tipo Element (nel prossimo paragrafo). var myElement=$('myElementId');
Restituisce un Element se ne esiste uno con quell'id, null altrimenti. var div=document.getElementById('myElementId');
div=$(div);
Restituisce un Element a partire dall'element nella pagina. Attenzione, non ho sbagliato a scrivere la frase precedente (cerco di mettervi un pò di curiosità sugli Element, o ci sto riuscendo o vi sto creando confusione in testa...fatemelo sapere).$$('a'); //Ritorna tutti i tag a nella pagina (i link per capirci).
$$('a', 'b'); //Ritorna tutti i tag a e tutti i tag b nella pagina.
Restituisce un Array contenente tutti gli Element che "matchano" con i criteri inseriti tra le virgolette. I criteri sono i selettori utilizzati per definire il css nella pagina quindi:$$('.classe'); //Ritorna tutti gli elementi del dom con class="classe"
$$('#unId .unaClasse'); //Ritorna tutti gli elementi del dom figli dell'elemento con id="unId" e con class="unaClasse".
$$('#unId a.unAltraClasse'); //Ritorna tutti i tag a figli dell'elemento con id="unId" ma con class="unAltraClasse".
Grazie a queste due funzioni "si ha il dom in mano" (questa è una citazione...) con una sintassi estremamente ridotta e facile da ricordare.
Gli Element
A questo punto almeno uno dei lettori di quest'articolo mi starà maledicendo dicendo "ma questi Element cosa sono?"... ci penso subito caro lettore!
Gli Element sono un'estensione del tipo nativo element del dom grazie al quale è possibile invocare tutti i metodi definiti dalla libreria.
Tratteremo il tipo Element bene nel prossimo capitolo ma giusto per darvi un piccolo assaggio vi facciamo vedere un esempietto.
Un bel div 100x100px
Beh, il codice (una sola riga) vedetelo con firebug XD...
Mootools - Introduzione al framework - Sommario dei tutorial
Mootools è un framework di sviluppo object oriented modulare per javascript. I vantaggi principali nell'utilizzo di tale "libreria" sono quindi quelli che si hanno nel passare dalla programmazione procedurale a quella ad oggetti ma non solo. Mootools offre una quantità enorme di classi (appunto) già pronte e (attenzione attenzione) cross-browser che rendono la stesura di codice javascript molto più agevole, veloce ed intuitiva e permettono l'utilizzo di effetti grafici efficaci ed efficenti.
Una volta presa dimestichezza con il modo di pensare, con la sintassi e le classi principali di Mootools, sarà un gioco da ragazzi (sempre relativamente XD) creare richieste Ajax, effetti da "wow!" e, cosa più importante di tutte (molti diranno di no, ma è così), definire classi ed istanziare oggetti nelle creazione delle nostre web application (ho scritto web application e non siti web non a caso).
Tendo a sottolineare che chi scrive non è un esperto del settore, nè un esperto in nulla, ma solo uno studente di ingegneria informatica (non ancora laureato tra l'altro) che sta scoprendo un mondo di tecnologie nuove, le sta studiando ed ha voglia di condividere i suoi studi.
Iniziamo con i link utili.
Sul sito ufficiale Mootools.net è possibile scaricare la libreria in vari formati includendo magari solo i moduli necessari alle nostre esigenze (ricordiamoci infatti che tutto andrà a finire sul client ed è buona norma alleggerire il più possibile le nostre pagine). Sempre sul sito ufficiale troviamo una reference guide molto dettagliata e ben fatta.
Il mastodontico e onniscente Html.it presenta una percorso dettagliato e fondamentale per l'apprendimento qui.
La cosa forse indispensabile per realizzare (in generale) pagine web dinamiche è utilizzare firefox con il suo plugin firebug; se ancora non lo avete istallato fatelo immediatamente, è un ordine! XD
Ah, non vi ho detto che il creatore di Mootools si chiama Valerio Proietti e che (come molti furboni avranno capito, volponi!) è italiano.
Inoltre non vi ho detto che cosa significa Mootools, beh My Object Oriented Tools.
Sempre per curiosità vi consiglio di leggere l'intervista che html.it ha fatto al creatore di questo strumento straordinario.
Ecco quindi tutti i capitoli del nostro viaggio.
Il pane quotidiano
Si tratteranno le funzioni indispensabili a qualsiasi uso di mootools e il tipo nativo Element.
Lavoriamo con gli Element
I metodi principali per istanziare, manipolare ed eliminare Element.
Il costruttore Class
Vedremo come definire, istanziare ed estendere classi javascript grazie a mootools.
Gli eventi
Scateniamo, definiamo e associamo nuovi e catastrofici eventi alla nostra pagina XD.
Effetti grafici
Una panoramica generale sugli effetti che mootools ci rende pronti per essere utilizzati.
Creiamo richieste asincrone - AJAX con Mootools
Utilizzo della classe Request.HTML che rende AJAX semplice da utilizzare.
Costruttori nativi
Brevissima panoramica sull'utilizzo dei costruttori nativi quali Array, Hash e String.
lunedì 6 aprile 2009
Terremoto in Abruzzo
Stanotte farò molta fatica a dormire e quindi ecco un piccolo ma dovuto off topic. L'Aquila, la città che ha donato a tutto il nostro gruppo (e a tantissimi altri studenti) anni ricchi di esperienza, divertimento e conoscenza è stata colpita da una tragedia. Quindi non posso che esprimere la mia vicinanza ai parenti delle vittime della furia della natura e a tutte le famiglie rimaste senza nulla che passeranno la notte senza un tetto sulla testa. Mentre scrivo ho sentito un'altra scossa, non so se vera o immaginaria(sono ad Avezzano e la cittadinanza è colpita da un terrore che mi ha pervaso nonostante cercavo di resistere) non oso neanche immaginare cosa stanno provando tutti gli sfollati ora.
Posso quindi segnalarvi alcune delle gare di solidarietà che tentano di donare un sorriso alle facce stanche e addolorate dei cittadini aquilani e abruzzesi.
-Le compagnie di telefonia mobile italiane, d'intesa con il Dipartimento della Protezione Civile, hanno attivato la numerazione solidale 48580 per raccogliere fondi a favore della popolazione dell'Abruzzo gravemente colpita dal terremoto. Ogni Sms inviato contribuirà con 1 euro, che sarà interamente devoluto al Dipartimento della Protezione Civile per il soccorso e l'assistenza. Sarà possibile anche donare 2 euro attraverso chiamata da rete fissa di Telecom Italia, utilizzando lo stesso numero: 48580. Il Dipartimento della Protezione Civile fornira' tutte le indicazioni sull'utilizzo dei fondi raccolti
-MEDIAFRIENDS
Terremoto in Abruzzo
per donazioni tramite bonifico bancario:
Conto Corrente intestato a: Mediafriends
IBAN: IT41 D030 6909 4006 1521 5320 387
Causale: terremoto Abruzzo
-CORRIERE DELLA SERA
“Un Aiuto subito per L’Abruzzo”
BONIFICO BANCARIO:
Intesa-San Paolo, ABI 3069, CAB 05061, conto corrente n. 1000/144, intestato a: “Un aiuto subito – Terremoto dell’Abruzzo”.
Cod. IBAN: IT 03 B 03069 05061 100000000144
VERSAMENTI CON CARTE DI CREDITO
(CartaSì, MasterCard, Visa, American Express)
Numero Verde di Cartasì: 800 317800 (da alcuni cellulari è necessario digitare il 12 prima del numero)
Dall’estero: 02 34980235
Tenere la carta di credito a portata di mano e seguire le istruzioni del sistema.
-SKY
SKY Per l’Abruzzo
Versamento sul conto:
IBAN IT 22 O 03226 01606 000500074972
Grazie.
domenica 5 aprile 2009
Creazione componenti in Joomla - Tutorial, presentazione, ed esempio
La creazione di componenti in Joomla! richiede passaggi non molto intuitivi e senza una buona documentazione è difficile capire come fare.
Vi mettiamo in allegato la presentazione di una lezione-seminario tenuta dal nostro coetaneo dott. Stefano Giuliani. Stefano ha svolto una interessante tesi di laurea sfruttando Joomla! per creare un servizio online di appoggio a ricercatori e professori delle varie facoltà d'Italia. In questa tesi come in un'altro progetto nel quale siamo stati coinvolti anche io ed Emilio è stato necessario creare componenti Joomla ad-hoc per l'applicazione da realizzare. Nella cartella allegata è presente una presentazione PowerPoint che spiega l'architettura da rispettare, un esempio di componente ed un video. Ringraziamo Stefano per averci fornito questo materiale. Stiamo anche tenendo in considerazione la redazione di un paio di articoli proprio sullo sviluppo in Joomla, in particolare sull'utilizzo di Ajax. Stay Tuned!
Download
visite dal 24.11.2008
