Archivi tag: sencha

SENCHA GXT

TUTORIAL SENCHA GXT 3 – GESTIRE IL TOOLTIP IN UN GRID – LA RIVINCITA

Ho continuato lo studio per gestire il tooltip in un datagrid gxt. Il giro è un pò più complesso di quello che pensavo, ma neanche tanto, basta cambiare il punto di vista.

Il Grid è definito aggiungendo le colonne una per una e associando a ciascuna di esse una configurazione, tramite la classe ColumnConfig.

Ipotizziamo di voler creare un classico grid con 2 colonne e di voler attivare il tooltip sia sull’intestazione che sul contenuto.

Con la chiamata setToolTip stabiliamo il tooltip associato all’intestazione.

Adesso definiamo il tooltip a livello di cella.  Per fare ciò ci viene in soccorso la classe TextCell, e ridefinendo la funzione di render in modo da associare un tooltip alla singola cella

Per attivare il tooltip occorre instanziare un oggetto QuickTip associandolo al grid

e a questo punto invocando il datagrid sarà visibile il tooltip a livello di cella.

tooltip

SENCHA GXT

TUTORIAL SENCHA GXT 2 – GESTIRE IL TOOLTIP IN UN GRID

Nell’articolo di oggi vedremo come integrare un tooltip in una datagrid sencha.  Nel fare questa attività ho avuto qualche rimpianto per la semplicità di utilizzo di Flex, che permette di definire in modo semplice (tramite una sola properties) Il tooltip da far apparire per una determinata colonna.

Con Sencha la cosa non è così intuitiva, probabilmente esiste un modo molto semplice, ma non ho trovato una soluzione che mi soddisfacesse a pieno.  La soluzione che vi presento permette di definire un tooltip su un datagrid ed è provata e testata su gxt 3.1.0 e gwt 2.6.1.

La classe grid presenta una properties tooltip, ma essa riceve una string come argomento, pertanto si presta solo per tooltip statici, mentre la mia esigenza è quella di un tooltip funzione della riga selezionata e ancora meglio della cella selezionata.

Per soddisfare la necessità ho dovuto gestire gli eventi dell’oggetto, avrei sperato in una property della row ma le mie ricerche non hanno avuto esito positivo.

Pertanto considerando di avere a che fare con un oggetto Grid della classe com.sencha.gxt.widget.core.client.grid.Grid possiamo definire un handler sul mouse hover in questo modo:

Tramite tale approccio riusciremo a vedere il tooltip al passare del mouse, un tooltip funzione del model associato al grid.

Nei miei piano avrei v oluto anche gestire la comparsa e scomparsa del tooltip in funzione della colonna, ma i comandi relativi non hanno avuto l’effetto desiderato.

In questo caso direi meglio questo che niente. Alla prossima

 

SENCHA GXT

TUTORIAL SENCHA GXT 1 – LAVORARE CON MAVEN

Iniziamo una serie di articoli dedicati a Ext GWT, più brevemente GXT, il framework sviluppato da Sencha, che consente di estendere le potenzialità della libreria del Google Web Toolkit.

In questo articolo ci preoccupiamo di configurare un progetto GXT usando Maven ed Eclipse come IDE. Per configurare Eclipse occorre scaricare la versione Juno (4.2) , installare il GWT plugin usando l’update site disponibile all’url http://dl.google.com/eclipse/plugin/4.2 e installare m2eclipse tramite l’update site disponibile all’url http://download.eclipse.org/technology/m2e/releases.

Configurato Eclipse realizziamo il nostro primo progetto avvalendoci di maven e dell’archetipo gwt-maven-plugin tramite la direttiva

Tramite questa direttiva maven crea un progetto che supporta l’alberatura di GWT. Durante l’esecuzione della direttiva specifichiamo il nome del modulo principale (nel mio caso Application), ovvero la classe che implementa l’entry point, il punto di accesso alla nostra applicazione.

A questo punto tramite la direttiva mvn gwt:eclipse possiamo generare i file necessari ad effettuare l’import in Eclipse.

Resta da aggiungere la dipendenza da GXT, agendo sul pom.xml e sul file xml associato al modulo entry point.

Aggiungiamo la versione di GXT da usare tramite il tag <gxt.version>3.0.1</gxt.version>

Specifichiamo il repository  da cui scaricare i sorgenti di GXT

E infine aggiungiamo la dipendenza da GXT tramite il blocco

Una volta aggiunta la dipendenza rendiamola attiva nel progetto eclipse tramite la direttiva mvn gwt:eclipse che si preoccuperà di scaricare le nuove librerie.

Resta da modificare il modulo Application.gwt.xml per rimuovere il tema di GWT e innestare l’eredità da GXT tramite il comando

e linkare il file reset.css nella pagina Application.html tramite la direttiva

Nel file Application.java sostituiamo il gwt-button con un oggetto sencha com.sencha.gxt.widget.core.client.button.TextButton  e se abbiamo operato correttamente tramite la direttiva mvn gwt:run possiamo verificare che il progetto venga avviato correttamente.