tooltip | www.valeriofinazzo.it

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.

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"));

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);

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(""+cellValue+"");

}

};

descrizione.setCell(textCell);

dataOperazione.setCell(textCell);

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

new QuickTip(grid);

1	new QuickTip(grid);

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

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:

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());

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 = "" + note + " " + newHover.getOggetto() + "";

}

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

www.valeriofinazzo.it

Archivi tag: tooltip

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

TUTORIAL SENCHA GXT 2 – GESTIRE IL TOOLTIP IN UN GRID

Il sito dell'ingegnere Valerio Finazzo