Lavora con noi

JavaScript

Siti tematici

Speciali

Ajax

JavaScript » Articoli » Ext.js

Pagine:

RSS

Analisi della classe Ext.util.Observable

di: Alberto Bottarini 10 Maggio 2010

La classe Ext.util.Observable rappresenta la classe principale delle API di Ext.js: moltissime altre classi infatti la estendono acquisendo in questo modo la possibilità di istanziarsi come oggetti appunto observable (traducibili in osservabile o, forse meglio, in ascoltabile).

Un oggetto observable presenta la possibilità di integrarsi con altri oggetti tramite il concetto di evento. Questo concetto ultimamente sta ottenendo sempre più consensi nel mondo della programmazione tant'è che si è dato un nome a questa tipologia di sviluppo software: Event-oriented programming.

Event-oriented programming

Quando si realizza un'applicazione di una certa complessità, è buona norma quella di scomporre i problemi complessi in tanti sotto processi più piccoli e facilmente gestibili. Una volta realizzati i diversi componenti, però, è necessario che scambino tra di loro le informazioni per poter realmente integrarli in una applicazione più grande. La event-oriented programming è un tipo di programmazione che utilizza il concetto di evento proprio per permettere la comunicazione tra i vari elementi.

Un oggetto che espone determinati eventi rappresenta un oggetto che presenta diversi punti aggancio verso il mondo esterno e quindi verso altri oggetti presenti nella applicazione. Immaginiamo un'applicazione composta semplicemente da un menu laterale con diverse voci e un pannello centrale che mostra dati in base alla voce di menu selezionata. L'oggetto menu e l'oggetto pannelloPrincipale saranno completamente slegati tra di loro in quanto ognuno presenta comportamenti propri che non hanno nulla a che fare con il resto dell'applicazione. Questi due componenti devono però poter comunicare in quanto nel caso in cui l'utente dovesse cliccare su una voce del menu, egli si aspetterebbe che il contenuto del pannello principale cambi. Questo significa che l'oggetto menu, in qualche modo, ha la necessità di comunicare con l'oggetto pannelloPrincipale.

È proprio in questo caso che intervengono gli eventi. Grazie a loro è infatti possibile definire determinati comportamenti per ciascun evento esposto. Nel nostro caso procedente all'evento click sull'oggetto menu avremmo assegnato il metodo show dell'oggetto pannelloPrincipale. Una funzione associata ad un determinato evento prende il nome di listener in quanto è come se fosse una funzione "in ascolto" verso lo scatenarsi di un determinato evento.

La classe Ext.util.Observable e la gestione degli eventi in ExtJS

All'interno di Ext.js tutta la parte relativa agli eventi e alle relative funzioni listeners viene implementata all'interno appunto della classe Ext.util.Observable.

Esistono due alternative per assegnare ad un evento di un oggetto (gerarchicamente sottoposto a Ext.util.Observable) delle funzioni listeners. Ecco due esempi nei quali verrà assegnata una funzione per mostrare un avviso una volta che i pannelli vengono renderizzati nella pagina (esempio):

<html> 
<head> 
<script src="../ext-base.js" type="text/javascript"></script> 
<script src="../ext-all-debug.js" type="text/javascript"></script> 
<link rel="stylesheet" href="../css/ext-all.css"></link> 
<script type="text/javascript"> 
Ext.onReady(function() {
	var renderCallback = function() { 
		alert("Panel is now rendered");
	}

	var panel = new Ext.Panel({ 
		html: "Contenuto del pannello", 
		title: "Titolo del pannello", 
		width: 300, 
		height: 400, 
		listeners: {
			render: renderCallback
		} 
	});
	panel.render("div01");

	var panel2 = new Ext.Panel({ 
		html: "Contenuto del pannello 2", 
		title: "Titolo del pannello 2", 
		width: 500, 
		height: 200,
	}); 
	panel2.on("render", renderCallback); 
	panel2.render("div01");
}); 
</script> 
</head> 
<body> 
<div id='div01'></div> 
</body> 
</html>

L'unica differenza tra i due approcci è quella che utilizzando il metodo on (che non è nient'altro che un alias di addListener) è possibile assegnare più funzioni listeners allo stesso evento, cosa non possibile per quanto riguarda la proprietà listeners in fase di creazione del componente.

Pagina successiva

Pagine: