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.

ColumnConfig<BandoDG, String> dataOperazione = new ColumnConfig<BandoDG, String>(props.dataPubblicazione(), 10, "Data Operazione");
dataOperazione.setToolTip(SafeHtmlUtils.fromString("Data Operazione"));
dataOperazione.setHorizontalAlignment(ColumnConfig.ALIGN_RIGHT);
ColumnConfig<BandoDG, String> descrizione = new ColumnConfig<BandoDG, String>(props.oggetto(), 50, "Descrizione");
descrizione.setToolTip(SafeHtmlUtils.fromString("Descrizione"));

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

TextCell textCell = new TextCell(){
@Override
public void render(com.google.gwt.cell.client.Cell.Context context,
String value, SafeHtmlBuilder sb) {
String tooltipValue = value;
String cellValue = value;
sb.appendHtmlConstant("<span qtip=\""+tooltipValue+"\">"+cellValue+"</span>");
}
};
descrizione.setCell(textCell);
dataOperazione.setCell(textCell);

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

new QuickTip(grid);

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

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:

grid.addHandler(new MouseMoveHandler() {

@Override
public void onMouseMove(MouseMoveEvent event) {

BandoDG newHover = null;
NativeEvent natev = event.getNativeEvent();
if (Element.is(natev.getEventTarget())) {
int hoverIdx = grid.getView().findRowIndex( Element.as(natev.getEventTarget()) );
newHover = grid.getStore().get(hoverIdx);
}

if (newHover == null) {
return;
}

String note = newHover.getNote();
String html = newHover.getOggetto();
if (note!=null && !note.isEmpty()) {
html = "<span qtip='" + note + "'>" + note + "<br/>" + newHover.getOggetto() + "</span>";
} 
grid.setToolTip(html);

}
}, MouseMoveEvent.getType());

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

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

mvn archetype:generate -DarchetypeGroupId=org.codehaus.mojo -DarchetypeArtifactId=gwt-maven-plugin -DarchetypeVersion=2.5.1 -DgroupId=it.finazzo -DartifactId=sencha -Dversion=1.0

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

<repositories>
<repository>
<id>sencha-commercial-release</id>
<name>Sencha commercial releases</name>
<url>https://maven.sencha.com/repo/commercial-release/</url>
</repository>
</repositories>

E infine aggiungiamo la dipendenza da GXT tramite il blocco

<dependency>
<groupId>com.sencha.gxt</groupId>
<artifactId>gxt</artifactId>
<version>${gxt.version}</version>
</dependency>

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

<inherits name="com.sencha.gxt.ui.GXT" />

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

<link rel="stylesheet" type="text/css" href="/joomla/Application/reset.css">

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.