quimo

Dopo aver installato il framework ed averne testato il funzionamento con qualche semplice layout possiamo affrontare il discorso menù e toolbar.

Continua…

Dopo aver installato il framework ed averne testato il funzionamento, procediamo oltre e vediamo quali strumenti abbiamo a disposizione per progettare il layout della nostra pagina web.

Ext ci fornisce un oggetto contenitore – Ext.Viewport – che rappresenta l’area visualizzabile dell’applicazione. All’interno di esso verranno inclusi tutti i componenti che andranno a costituire il layout definito (pannelli, toolbar, pulsanti ecc…). Una volta creato, l’oggetto Viewport, si auto-renderizza entro il document.body della pagina e va a ricoprire l’intero spazio di visualizzazione del browser. Può esistere una sola istanza di un Viewport nell’intera applicazione.

Ext.Viewport


var myview = new Ext.Viewport({
layout:'border',
items:[panel1,panel2,panel3]
});

Questa è la definizione minima di un Viewport. Prende in ingresso un oggetto con una proprietà layout (la modalità con cui visualizza i componenti che andranno a costituirlo) e una serie di elementi da contenere (items).

La proprietà layout ammette questi valori (stringhe): accordion, anchor, border, card, column, fit, form e table. Ogni tipo di layout caratterizza una diversa tipologia, comportamento e collocazione dei componenti del Viewport (items).

La proprietà items è un array di oggetti Ext.Component che in pratica sono le componenti dell’interfaccia utente visualizzate entro il Viewport.

Tra i vari component possibili prendiamo in considerazione gli oggetti di tipo Ext.Panel. Questi pannelli non sono altro che contenitori di altri component. Ogni panel è una sorta di frame che si occupa di accorpare component con funzionalità logicamente correlate. L’Ext.Panel possiede metodi e proprietà che gli consentono di visualizzarsi in un certo modo, di nascondersi o apparire a seguito di determinati eventi, di possedere toolbar, pulsanti e molto altro.

Nel codice precedente i tre oggetti panel1, panel2 e panel3 sono proprio oggetti Panel definibili come segue…

Ext.Panel


var panel1 = new Ext.Panel({
title: 'left',
region: 'west',
contentEl: 'mydiv',
border: true,
width: 300
});


Ogni panel si compone di un header (che ospita il titolo del panel), una toolbar (composta da menù o bottoni), un body (il vero e proprio contenuto del panel) e un footer (un contenitore per una serie di bottoni).

La proprietà title rappresenta il titolo che compare nell’header, la proprietà region serve a localizzare il panel in una data posizione entro il layout del suo contenitore (sia esso un panel o un viewport), la proprietà contentEl è l’id dell’elemento del DOM da cui il panel prenderà i propri contenuti. Esistono poi svariate altre proprietà che si occupano di come visualizzare il panel stesso (larghezza, altezza, bordo ecc…).

I panel sono racchiudibili uno nell’altro sfruttando la proprietà items già vista nel viewport…


//pannello superiore con toolbar
var top = new Ext.Panel({
tbar: [
new Ext.Button({
handler: function() {alert('first')},
icon: 'icons/accept.png'
}),
new Ext.Button({
text: 'second',
handler: function() {Ext.Msg.alert('Alert', 'second')}
}),
new Ext.Button({
text: 'third'
})
]
});
//pannello inferiore con bottoni
var bottom = new Ext.Panel({
buttons: [
new Ext.Button({
text: 'first'
}),
new Ext.Button({
text: 'second',
})
]
});
//contenitore
var container = new Ext.Panel({
items: [top,bottom]
});


I panel possono ricevere il proprio contenuto in linea (proprietà html) o acquisendolo da un elemento del DOM (proprietà contentEl). Vengono renderizzati a video quando sono inclusi in un oggetto Ext.Viewport o quando posseggono la proprietà renderTo (che accetta come valore un elemento del DOM da usare come contenitore del panel).


Ext.onReady(function() {
var top = new Ext.Panel({
layout: 'fit',
title: 'Sopra',
contentEl: 'top'
});
var bottom = new Ext.Panel({
layout: 'fit',
title: 'Sotto',
html: '<h1>Sotto</h1>'
});
var container = new Ext.Panel({
layout: 'anchor',
items: [top, bottom],
renderTo: 'container'
});
});


ExtJS è un framework javascript giunto recentemente alla versione 2.0. Viste le notevoli potenzialità del pacchetto, peraltro ben evidenziate dalle demo online, mi sono deciso a provarlo.

Per iniziare a sperimentare è sufficiente scaricare il file ext-2.0.zip dalla pagina download e scompattarlo nella propria cartella di sviluppo (io per esempio ho usato js/ext-2.0).

Due file sono il minimo indispensabile per controllare se il framework funziona correttamente…

index.htm


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>DEMO Ext</title>
<!-- BEGIN Ext -->
<link rel="stylesheet" type="text/css" href="js/ext-2.0/resources/css/ext-all.css"/>
<script type="text/javascript" src="js/ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="js/ext-2.0/ext-all.js"></script>
<!-- END Ext -->
<script type="text/javascript" src="index.js"></script>
</head>
<body>
</body>
</html>


Ciò che è contenuto tra ‘BEGIN Ext’ ed ‘END Ext’ sono i riferimenti alla libreria. Un CSS con gli stili di default (sfondi, pulsanti, icone ecc…) e due file JS per il framework.

index.js


Ext.onReady(function() {
    alert('Installazione riuscita!');
});


L’ggetto Ext possiede un metodo Ext.onReady() che viene invocato quando la pagina è stata caricata. A differenza del classico window.onload() viene eseguito al completamento dell’albero del DOM senza attendere la visualizzazione di eventuali immagini.

Bene, se lanciando il file index.htm vedrete un simpatico alert javascript… il meno è fatto

Nella prossima puntata vedremo come organizzare un rudimentale layout di pagina con le classi Ext.Panel ed Ext.Viewport.