JavaScript  »  Articoli  »  Ext.js 

Abbiamo conosciuto  Ext e abbiamo intravisto le sue  potenzialità; abbiamo steso le basi per superare i primi due grandi ostacoli: impaginazione e personalizzazioni; ora possiamo cominciare a sviluppare tutto ciò che ci viene in mente o ci viene richiesto. Per far questo abbiamo bisogno di conoscere uno ad uno gli elementi che compongono la nostra libreria e metterli nella classica cassetta degli attrezzi per poi poter essere capaci di scegliere lo strumento giusto a seconda dell'applicazione che stiamo sviluppando.

Lo scopo di questo articolo in due parti è quello di introdurre l'utilizzo degli oggetti Ext.Panel ed Ext.Window. Alla fine di questi due articoli, il lettore sarà in grado di stabilire quale dei due oggetti è più consono ai propri scopi, disegnare interfacce che contengono più Panel e Window, personalizzare esempi che assomigliano a complesse formattazioni di pagine di giornale o creare semplici motori che generano Window simili a post-it.

Object Oriented ed Ereditarietà

Le componenti Ext, come abbiamo già detto nei precedenti articoli, sono molte e tutte disegnate con un orientamento gerarchico ad oggetti. L'oggetto più utile alla base della catena di ereditarietà Ext è il Panel.

Per chi è pratico di programmazione orientate agli oggetti (Java, .NET ad esempio), è facile intravedere le analogie con oggetti tipici della programmazione desktop (Swing / SWT). 

Per chi non conoscesse la programmazione OO (Object Oriented) consigliamo innanzitutto la lettura di qualche pagina di questo articolo su HTML.it:  Pensare Object Oriented; inoltre possiamo semplificare molto i concetti che compongono questa utile tecnica di programmazione rapportando il nostro codice al mondo reale. Tutto cio' che ci circonda (il foglio o il monitor su cui stiamo leggendo queste righe) sono particolari istanze di una generica classe Oggetto. Quando diciamo quindi che Oggetto è un'entità astratta, intendiamo appunto questo: un oggetto può essere esteso ed istanziato in qualsiasi cosa. I concetti di ereditarietà tra oggetti si inseriscono in questo esempio se si pensa che il foglio su cui stiamo leggendo è un particolare foglio, figlio dell'oggetto Carta che a sua volta è figlio dell'oggetto Materiali e così via. Diversi fogli (un A4, una carta da regalo, un post-it) sono specializzazioni di Carta. Per chiudere questa breve carrellata esemplificativa, il foglio che abbiamo in mano è un'istanza che identifica esattamente il foglio che stiamo reggendo, con i suoi attributi che lo diversificano e lo rendono unico rispetto a un altro foglio.

Gli oggetti in Ext

Tornando ad Ext, quindi, leggiamo insieme l'albero genealogico dell'oggetto che ci interessa per comprendere a pieno le sue proprietà. Ogni oggetto deriva da una componente astratta generica chiamata Observable. Questa equivale all'oggetto più astratto che possiamo immaginare e che viene utilizzato come base per costruire altri oggetti. Per agganciarci al nostro esempio, pensiamo al seguente codice:

Foglio = function(name){
   this.name = name;
   this.addEvents({
       "stampa" : true, 
       "archivia" : true,
       "straccia" : true
   });
}
Ext.extend(Foglio, Ext.util.Observable);

Continuando la lettura genealogica del nostro oggetto, incontriamo quella che è la base per tutte le interfacce grafiche Ext: l'oggetto Component.

Altri articoli

Altre guide

Altre newsletter