Nell'articolo precedente abbiamo analizzato in dettaglio la classe Ext.Component e abbiamo compreso cosa sono e come funzionano i componenti grafici in ExtJS. I widget già analizzati però presentavano elementi ancora abbastanza astratti e nonostante la loro facilità d'utilizzo non permettevano ancora di realizzare interfacce utilizzabili. In questo articolo continueremo con la "discesa" dall'albero gerarchico delle classi grafiche esposte dal framework ExtJS ed introdurremo alcuni elementi fondamentali: le sottoclassi di Ext.BoxComponent tra le quali spicca sicuramente la più importante: Ext.Container.
Le sottoclassi di Ext.BoxComponent
Come descritto nell'ultimo articolo, la classe Ext.BoxComponent è ancora una classe a basso livello che permette di creare componenti passando ancora dal codice HTML e non sfruttando le reali potenzialità del framework. Proprio per questo l'utilizzo della classe dovrebbe essere demandato solo ai meta-sviluppatori che sono interessati a realizzare widget complessi e che hanno bisogno di un accesso più diretto al markup del componente.
Per realizzare invece interfacce basandosi sui componenti "core" presenti in ExtJS è necessario scendere di un livello nella scala gerarchica delle classi e istanziare le classi che estendono Ext.BoxComponent.
Ovviamente tutte le sottoclassi di Ext.BoxComponent acquisiscono le funzionalità e i metodi della classe padre e quindi possono essere renderizzate in pagina, mostrate/nascoste e abilitate/disabilitate esattamente allo stesso modo della superclasse.
Per rendere più comprensibile l'organizzazione delle classi di ExtJS ecco un grafico riassuntivo che precede l'analisi della singola sottoclasse:
Ext.Button
La classe autoesplicativa Ext.Button permette di realizzare bottoni che possono essere inseriti in diversi contesti: dal form di inserimento dati, alla toolbar. La classe permette di realizzare bottoni semplici, bottoni a doppio stato (premuto/non premuto) e gruppi di bottoni all'interno del quale solo un bottone può essere premuto. La creazione di bottoni è molto semplice (esempio):
<html>
<head>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
<style>
.icon-button { background-image: url(icon.png) !important; padding-left: 30px !important }
</style>
<script>
Ext.onReady(function() {
var b1 = new Ext.Button({
text: "bottone 1"
});
b1.on("click", function(button, event) {
Ext.Msg.alert('Click', 'Hai premuto il bottone 1');
b2.on("click", function(button, event) {
Ext.Msg.alert('Click', 'Hai premuto il bottone 2');
});
});
b1.render(Ext.getBody());
var b2 = new Ext.Button({
icon: "icon.png"
});
b2.render(Ext.getBody());
var b3 = new Ext.Button({
iconCls: "icon-button",
text: "bottone 3",
handler: function(button, event) { //equivalente all'onclick
Ext.Msg.alert('Click', 'Hai premuto il bottone 3');
})
});
b3.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>Oltre ai bottoni "standard" le ultime versioni di ExtJS presentano due tipologie di bottoni più complesse: Ext.SplitButton e Ext.CycleButton. La prima permette di creare bottoni composti da un sottomenu per accorpare più voci nello stesso tasto e la seconda ne estende le funzionalità permettendo anche la ciclicità delle azioni di default (esempio):
<html>
<head>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
<script>
Ext.onReady(function() {
var b1 = new Ext.SplitButton({
text: 'Split button',
handler: function(button,event) {
Ext.Msg.alert("Split", "Bottone cliccato");
},
menu: {
items: [{
text: 'Elemento 1',
handler: function(item, event) {
Ext.Msg.alert("Split", "Elemento 1 cliccato");
}
}, {
text: 'Elemento 2',
handler: function(item, event) {
Ext.Msg.alert("Split", "Elemento 2 cliccato");
}
}]
}
});
b1.render(Ext.getBody());
var b2 = new Ext.CycleButton({
showText: true,
items: [{
text:'Elemento 1',
checked:true
},{
text:'Elemento 2'
}],
changeHandler:function(button, item){
Ext.Msg.alert('CycleButton', item.text + " cliccato");
}
});
b2.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>Ext.DataView
Gli Ext.DataView sono componenti molto particolari che fanno parte di quella categoria di widget che rappresentano visivamente degli oggetti particolarmente complessi (chiamati Ext.data.Record) che vengono incapsulati in contenitori detti Ext.data.Store. Questa classe è sicuramente il più semplice e personalizzabile esempio di questa tipologia di componenti e permette di personalizzare a basso livello, quindi lavorando direttamente sul codice HTML, la modalità di visualizzazione di ciascun Ext.data.Record.
Ext.DataView presenta una sottoclasse (Ext.GridView) che facilita la creazione di griglie di dati semplici (per le griglie complesse è meglio utilizzare Ext.grid.GridPanel).
Data la necessità di introdurre concetti più data-centrici come appunto Ext.data.Record e Ext.data.Record, l'argomento verrà trattato più avanti. È stato inserito in questo articolo solo per completezza e per avere la struttura gerarchica degli elementi completa.
Ext.FlashComponent
Questo componente rappresenta la classe di base per qualsiasi elemento Flash che è possibile includere all'interno della nostra applicazione. Grazie ad esso possiamo inserire filmati, animazioni o giochi sviluppati con la tecnologia Adobe. Il suo utilizzo è semplicissimo ed è simile, l'unica particolarità rispetto agli altri componenti è quella di dover specificare l'url del file swf da includere in pagina (esempio):
<html>
<head>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
<script>
Ext.onReady(function() {
var b1 = new Ext.FlashComponent({
url: "plasma.swf",
height: 300,
width: 400
});
b1.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>Ext.ProgressBar
La classe Ext.ProgressBar permette di realizzare le classiche barre di caricamento che notificano all'utente la necessità di attendere il completamento di una certa operazione. Esistono due tipologie di ProgressBar: manuale ed automatica. Quelle manuali permettono di incrementare appunto manualmente il livello di completezza forzando una determinata percentuale ed eventualmente un messaggio mentre quelle automatiche incrementano la barra ad internalli temporanei pre-fissati.
Ecco un piccolo esempio:
<html>
<head>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
<script>
Ext.onReady(function() {
var progress_auto = new Ext.ProgressBar({
height: 20,
width: 300,
animate: true
});
progress_auto.render(Ext.getBody());
var button_auto = new Ext.Button({
text: "Start",
handler: function() {
progress_auto.wait();
}
});
button_auto.render(Ext.getBody());
var progress_man = new Ext.ProgressBar({
height: 20,
width: 300,
animate: true
});
progress_man.render(Ext.getBody());
var button_man_1 = new Ext.Button({
text: "10%",
handler: function() {
progress_man.updateProgress(.1, "10%");
}
});
button_man_1.render(Ext.getBody());
var button_man_2 = new Ext.Button({
text: "20%",
handler: function() {
progress_man.updateProgress(.2, "20%");
}
});
button_man_2.render(Ext.getBody());
var button_man_3 = new Ext.Button({
text: "30%",
handler: function() {
progress_man.updateProgress(.3, "30%");
}
});
button_man_3.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>Ext.Spacer
L'Ext.Spacer è sicuramente il componente più semplice e banale di tutto il framework. Il suo unico scopo è quello di creare spaziature tra altri componenti per permettere di realizzare interfacce oltre che funzionali anche gradevoli e ordinate. Spesso questo elemento viene utilizzato nelle toolbar per allineare elementi sulla destra.
Ext.Toolbar.Item
Gli elementi di tipo Toolbar.Item rappresentano qualsiasi tipologia di componente che è posizionabile all'interno di una Ext.Toolbar. Approfondiremo questa categoria quando analizzeremo più nel dettaglio la creazione e la personalizzazione delle toolbar nei prossimi articoli.
Ext.form.Field
La classe Ext.form.Field rappresenta la superclasse dal quale derivano tutti i campi di input presenti nelle form. Offre funzionalità come la gestione e la validazione dei valori inseriti, il dimensionamento e la gestione degli eventi. Anche in questo caso posticiperemo l'approfondimento di questa tipologia di widget nel momento in cui introdurremo la gestione delle form e di tutto il package Ext.form.
Ext.Label
Come per Ext.form.Field, anche Ext.Label viene spesso utilizzata all'interno di form per aggiungere una particolare etichetta per i campi di input. L'elemento è molto semplice e il suo utilizzo, che comunque verrà approfondito quando tratteremo le form, è banale.
Ext.slider.MultiSlider e Ext.Slider
La classe Ext.slider.MultiSlider e in generale tutto il package Ext.slider permette di creare barre di selezione per valori numerici: le cosiddette slider. Esse possono orientate orizzontalmente o verticalmente, avere valori incrementali, valore minimo e massimo personalizzabili e possono essere utilizzati anche con la tastiera. Il framework espone due classi: Ext.slider.MultiSlider e Ext.slider.SingleSlider. La differenza tra le due classi risiede nel fatto che il MultiSlider permette di avere più slider sovrapposti alla stessa barra.
Per garantire la retrocompatibilità entrambe le classi presentano un alias verso Ext.Slider. La differenza tra lo slider multiplo e singolo risiede nella presenza della proprietà value (per i singoli) e values (per i multipli). La distinzione in due classi è semplicemente per una maggiore organizzazione a livello di codice tant'è che anche la documentazione ufficiale di ExtJS suggerisce di utilizzare sempre e comunque la classe Ext.Slider.
Ecco un esempio utilizzando appunto l'alias Ext.Slider e le proprietà value e values per differenziare la tipologia di slider (esempio).
<html>
<head>
<script src="../extjs/adapter/ext/ext-base.js"></script>
<script src="../extjs/ext-all.js"></script>
<link rel="stylesheet" href="../extjs/resources/css/ext-all.css" />
<script>
Ext.onReady(function() {
var s = new Ext.Slider({
width: 200,
values: [50,70, 90], //valori multipli = MultiSlider
increment: 10,
minValue: 0,
maxValue: 100
});
s.render(Ext.getBody());
var s2 = new Ext.Slider({
renderTo: Ext.getBody(),
value: 30, //valore singolo = SingleSlider
height: 300,
minValue: 0,
maxValue: 100,
vertical : true
});
s2.render(Ext.getBody());
var b = new Ext.Button({
text: "slider 2",
handler: function() {
Ext.Msg.alert("slider", "valore: " + s2.getValue());
}
});
b.render(Ext.getBody());
});
</script>
</head>
<body>
</body>
</html>Ext.Container
La classe Ext.Container verrà trattata nel prossimo articolo in maniera più analitica data la vastità dell'argomento e la necessità di approfondire ulteriori concetti come quello dei layout.
