Sencha – Slide, Fade, Highlight: effetti grafici con ExtJs

fonte: dal web

Fornire effetti visuali interessanti e piacevoli ad una applicazione è un elemento importante nella progettazione ed implementanzione delle interfacce grafiche: grazie ad essi infatti possiamo non solo fornire informazioni e feedback all’utente finale in maniera semplice ed estremamente intuitiva e gradevole, ma anche e soprattutto rendere la navigazione del sito piacevole e decisamente più accattivante.

In questo tutorial vedremo alcuni dei più importanti effetti grafici che Sencha ExtJs ci permette di applicare agli elementi della nostra interfaccia. Vedremo come, con pochissime righe di codice e con qualche accortezza, possiamo dare alle nostre interfacce tutto un altro aspetto.

Highlight

L’Highlight è un interessante effetto visuale che ci permette di evidenziare determinati messaggi, focalizzando l’attenzione dell’utente su ciò che gli vogliamo comunicare (ad esempio un cambiamento nell’interfaccia, fornire un feedback, ecc.).

 Ext.get('elemento_html').highlight( '00ff77', {
	attr: 'background-color',
        easing: 'easeOut',
	duration: 3
 });

Applichiamo questo effetto ad esempio ad un DIV HTML con attributo id uguale a “elemento_html”: cambiano il colore di default (giallo) con un a nostra scelta (00ff77), applichiamo l’effetto all’attributo ‘background-color’ con un effetto a scomparsa (‘easeOut’), il tutto per una durata di 3 secondi circa.

Slide

Ci sono due tipi di slide, “slideIn” e “slideOut”: entrambi permettono rispettivamente di visualizzare/nascondere degli elementi nello schermo con un effetto davvero gradevole ed interessante. Ecco il codice:

var el = Ext.get('element');
Ext.get('slideIn').on('click',function(){
	el.slideIn(); //visualizza l'elemento
});
Ext.get('slideOut').on('click',function(){
	el.slideOut(); //nascondi l'elemento
});

Anche in questo caso applichiamo l’effetto ad un elemento HTML, che può essere un DIV con attributo id uguale a ‘element’.  In HTML dobbiamo anche creare altri due elementi che devono avere l’id uguale a ‘slideIn’ e ‘slideOut’  su cui cliccare per attivare l’effetto: attraverso la funzione “on” infatti stiamo catturando l’evento ‘click’ sugli elementi HTML ‘slideIn’ e ‘slideOut’, che una volta cliccati eseguiranno il codice corrispondente.

Frame

L’effetto Frame è un particolare effetto grafico che crea una sorta di cornice intorno all’elemento a cui è applicato, cornice che scompare in automatico dopo un tempo che possiamo impostare da codice. E’ molto utile per fornire feedback efficaci all’utente, ad esempio quando attraverso chiamate Ajax sono stati modificati dati di una porzione della pagina web. Per ottenere l’effetto sono sufficienti queste poche righe di codice:

var el = Ext.get('frame_this');
Ext.get('element').on('click',function(){
 el.frame('ff0000',3);
});

dove impostiamo la durata dell’effetto a 3 secondi e il colore della cornice visualizzata a ‘ff0000′. Anche in questo caso ‘element’ è l’elemento HTML sul quale clicchiamo per scatenare l’effetto frame, mentre ‘frame_this’ è l’elemento HTML su cui viene applicato l’effetto.

Vi sono molti altri effetti disponibili, come ad esempio lo Shift, che permette di cambiare posizione, dimensione e opacità nello stesso momento, l’Easing che permette di accellerare/decellerare un determinato effetto, lo Scale che invece permette di ridimesionare un elemento, e molto altro ancora.

Tutti possono essere impostati sostanzialmente nello stesso modo degli esempi che abbiamo visto: molti altri esempi si trovano sul sito ufficiale di Sencha ExtJs, o nell’area dedicata ai tutorial.