Experimentalia

Appunti raminghi

Extjs: Action

leave a comment »

Prima di dedicarci ai pannelli penso sia il caso di scaldarci parlando di uno dei più piccoli componenti di extjs. Si tratta di action che non è altro, a mio parere, che la trasposizione in chiave extjs del pattern command.

Tralasciamo la teoria e passiamo alla pratica. Questo componente non fa altro che racchiudere in un oggetto un’azione – lo avreste immaginato? – che può essere associata a diversi tipi di controlli: un pulsante, una voce di menù o una delle icone in una toolbar o, più in generale qualunque controllo che supporti l’interfaccia di Action.

Parleremo dopo dell’interfaccia action, per ora concentriamoci sulle opzioni di configurazione. Extjs configura gli oggetti passando al costruttore un letterale oggetto contenente i settaggi dell’istanza da creare.

Il metodo principale della classe, quello che contiene il codice della funzione incapsulata, è handler. La funzione a cui fa capo verrà invocata ogni volta che uno dei componenti che fanno riferimento all’azione viene attivato, ad essa è associata la proprietà scope, che però viene utilizzata raramente, che stabilisce l’ambito di esecuzione dell’handler (in altre parole quale è l’oggetto a cui fare riferimento per le variabili esterne).

Una volta descritta la proprietà text, che specifica la testo da mostrare come label dei pulsanti o come testo delle voci di menù associati all’azione, il più è fatto e l’oggetto è pienamente utilizzabile.

Proviamo a fare un’esempio ed a costruire una semplice azione da associare alla voce about di un menù.

{ id: 'aboutAction',
  handler: function(){
     alert("Extjs tutorial \nVersione 0.1a\nAll right reversed");
  },
  text: 'About'
}

La finestra che appare è spartana ma, con le conoscenze che abbiamo ora non possiamo fare di meglio, dopo aver visto come creare ed usare le messagebox di extjs potremo creare delle finestre di notifiche con una grafica coerente con il resto dell’applicazione con una facilità disarmante. Per ora copiate ed incollate il codice seguente in una pagina html (attenzione al percorso della libreria e dei fogli di stile) per provare un accenno di utilizzo.

<html>
<head>
  <title>Extjs: Esempio di utilizzo di action</title>
  <link rel="stylesheet" type="text/css" href="extjs/resources/css/ext-all.css">
  <style type="text/css">
.icona {
   background-image: url(../ext-2.2/resources/images/default/shared/calendar.gif) !important;
   background-repeat: no-repeat;
   background-attachment:relative;
}
</style>
</head>
<body>
<div id="contenitore"></div>
<div id="pulsante"></div>
  <script type="text/javascript" src="extjs/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="extjs/ext-all-debug.js"></script>
  <script type="text/javascript">
    var action, t, b;
    Ext.onReady(function(){
      action = new Ext.Action({
      handler: function(){
        alert("Extjs tutorial \nVersione 0.1a\nAll right reversed");
      },
      text: 'About',
      iconCls:'icona'});
      t=new Ext.Toolbar({items:[action], renderTo: 'contenitore' });
      b=new Ext.Button(action);
      b.render('pulsante');
    });
</script>
</body>
</html>

Possiamo impreziosire la visualizzazione dei pulsanti aggiungendo loro un’icona. per farlo bisogna creare una regola css che definisca un background da associare al componente e specificarla nella proprietà di configurazione iconCls per vedere apparire l’icona accanto alla voce del menù o alla label del pulsante.

Apparizioni e sparizioni

Avere i comandi centralizzati è utile perché ci permette di abilitare e disabilitare tutti i controlli che fanno capo ad un’azione invocando sull’azione stessa il metodo setDisabled(). Il metodo setHidden() è analogo e permette di nascondere o visualizzare i controlli a seconda del valore booleano che gli viene passato. L’oggetto di configurazione di Action ha due campi corrispondenti: hidden (default: false) e disabled (default: false), il loro utilizzo lo lascio alla vostra immaginazione.🙂

Per vedere in azione questi metodi non abbiamo neanche bisogno di modificare  il piccolo codice d’esempio; basta attivare firebug e digitare un paio di comandi nella console (ecco il perché della dichiarazione globale della variabile azione). Possiamo provare i seguenti comandi in ordine sparso:

action.setDisabled(true);
action.setHidden(true);
action.setHidden(false);
action.setDisable(false);
action.setIconClass('');
action.setIconClass('icona');

Ci siamo divertiti abbastanza, ora torniamo al nostro pezzo.

Interfaccia di Action a chi?

Chi ha familiarità con Java so già di cosa sto per parlare, agli altri basterà sapere che si dice che un oggetto supporta, o implementa, un’interfaccia quando possiede una serie di metodi, elencati insieme alla loro segnatura (il tipo, il numero e l’ordine dei parametri necessari all’invocazione) in quella che viene chiamata interfaccia.

Passatemi la semplificazione, anche perché in javascript le interfacce sono una semplice convenzione  e perché mi interessa elencarne i metodi, ne abbiamo già utilizzato alcuni, che compongono quella di Action. I nomi sono indicativi, si tratta di setter delle proprietà che abbiamo appena visto e quindi mi limito ad elencarli:setText(string), setIconClass(string), setDisabled(boolean), setVisible(boolean) e setHandler(function).

Dulcis in fundo

Ormai abbiamo rivoltato la classe come un calzino, ci sono rimasti da esplorare due metodi: execute() ed each(). Del primo non ho da dire molto di più di quanto non si intuisca dal suo nome. Serve ad invocare direttamente la funzione racchiusa dall’oggetto inoltrandogli i parametri specificati. Il metodo each() invece è un po’ più comlplesso. Facciamo finta di poter creare un po’ di suspance e partiamo dalla sua segnatura. Il primo parametro è una funzione che accetta come unico parametro un oggetto, e, come secondo parametro, lo scope in cui far eseguire il primo parametro. Il metodo non fa altro che passare, uno alla volta, tutti i componenti che fanno capo all’Action alla funzione del primo parametro.

Si è fatto tardi, vi sarete annoiati, ed io non ho più nulla da raccontare sulle Action. La prossima volta introdurremo i componenti Panel, per ora è tutto.

Written by Eineki

ottobre 15, 2008 a 2:02 am

Pubblicato su extjs, extjs-pastebin, javascript

Tagged with ,

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: