JavaScript  »  Articoli  »  Ext.js 

Ext.js: il componente Window

di: Nunzio Fiore     15 Settembre 2008

Partiamo rapidi sulla base di quanto visto nell'articolo prcedente: principi di programmazione Object Oriented, catene di ereditarietà che dall'oggetto Observable ci hanno condotto alla classe Ext.Panel, l'esempio di impaginazione complessa e nidificata di oggetti ottenuto tramite alcuni degli attributi principali di Panel.

Le Window

Suddividere una pagina in zone risulta quindi semplice. Associare a queste zone dei Panel, è una facile conseguenza. Se volessimo che questi Panel siano trascinabili (draggable) all'interno della nostra pagina, basterebbe definire la proprietà draggable : true. Ma chiediamo di più alle nostre interfacce e cominciamo a pensare che siamo nel Web 2.0, ovvero in un mondo fatto di contenuti rapidi, personalizzabili, condivisibili, estendibili e estremamente vicini alla user experience quotidiana che un qualsiasi utente ha con il suo pc. Ecco che la catena evolutiva delle nostre pagine ci porta quindi alla nascita dell'oggetto Window.

Figura 1 - Gerarchia dell'oggetto Window

screenshot

Cos'è una Window

Una Window è un pannello specializzato per essere utilizzato come finestra di un'applicazione. Le Windows sono trascinabili per default e possiedono caratteristiche specifiche come le proprietà di maximize e restore. Iniziare a lavorare con le Windows è utile in quanto avvicina il programmatore di interfacce web alle complessità che normalmente sono tipiche di una programmazione più sofisticata, collegata al mondo desktop. 

Proprietà di Window Manager, per capire qual è la finestra visualizzata in un determinato momento, quali sono le finestre aperte e come sono collegate una all'altra; così come  un Focus Manager, per capire come la finestra che è attiva debba comportarsi e debba vincolare il movimento del mouse; sono tutte problematiche che riguardano gli sviluppatori di applicazioni desktop oriented. Cominciare a sentirne parlare e venire a contatto con questi temi, aiuta il programmatore web a entrare nelle dinamiche di disegno GUI che portano gli appassionati di Web 2.0 a parlare di Web Application. Allo stesso tempo, grazie ad Ext, non abbiamo necessità di concentrarci eccessivamente su queste caratteristiche, in quanto la libreria ci soccorre anche in questo frangente con le sue utilities.

Una Window può quindi essere collegata a un Ext.WindowGroup o gestita dall' Ext.WindowManager che fornisce le utiliities che abbiamo citato.

Gli Attributi di una Window

Nell'articolo precedente non abbiamo potuto parlare di tutti gli attributi dell'oggetto Panel, rimandando il lettore a una consultazione delle API di Ext scaricabili dal  sito . Essendo Window un'estensione di Panel, riusciamo ad ereditare nella prima tutte le caratteristiche del secondo. Pertanto rinnovo l'invito alla consultazione delle API. Prima però di procedere con l'analisi dell'esempio possiamo vedere insieme alcune delle caratteristiche più interessanti e immediate che le Window aggiungono al Panel per specializzarlo.

Guide JavaScript

Canvas, guida pratica

Canvas, tra gli elementi di HTML5 è forse quello di maggior impatto....

Guida jQuery UI

Creare siti ricchi e dinamici con jQuery UI, il progetto ufficiale...

Guida Javascript: tecniche avanzate

Una guida dal taglio pratico per approfondire la programmazione a...

Altre guide

Newsletter @JavaScript

Ogni martedì, direttamente nella tua e-mail: guide, articoli, script, novità e approfondimenti tecnici su JavaScript.

Iscriviti alla newsletter

Altre newsletter

Corsi in aula

Corso Google AdWords Base

27 Febbraio 2012 a Milano
Disponibilità: 7 Posti

Corso Webmaster base

12 Marzo 2012 a Milano
Disponibilità: 6 Posti

Corso JQuery e Ajax per Webmaster

19 Marzo 2012 a Milano
Disponibilità: 7 Posti

Corso Webmaster base

20 Febbraio 2012 a Roma
Disponibilità: 7 Posti

Corso Google AdWords Base

28 Marzo 2012 a Roma
Disponibilità: 7 Posti