Retrieve record from TileGrid on Hover

[cguven]

Hi,

I'm using a TileGrid that consist of two DetailViewerField (icon, and name of the icon). The purpose of the TileGrid is to display all the icons to the user. The functionality I wish to achieve is to change the icon when the user is a mouses over a tile. I haven't been able to figure out how to grab the Tile associated with the mouseover.

final TileGrid tileGrid = new TileGrid();

DetailViewerField iconField = new DetailViewerField("icon");
iconField.setType("image");
iconField.setImageSize(64);

DetailViewerField nameField = new DetailViewerField("name");  


tileGrid.setFields(iconField, nameField);
            
tileGrid.addMouseOverHandler(new MouseOverHandler()
{
      @Override
      public void onMouseOver(MouseOverEvent event) {
            //HOW TO ACCESS MOUSED-OVERED TILE, SO THAT I CAN CHANGE THE ICON?
      }
                  
});

How can I access the Record that is associated with the tile the user has hovered over?

Thanks

[Isomorphic]

A call to EventHandler.getTarget() should return the active tile since it's the target of the current mouse event at the time you are hovering over it.

[darewreck]

TileRecord?

I'm probably missing something, but how would you get the TileRecord from EventHandler.getTarget(); which returns the TileGrid(). From the code above, you always have access to the tilegrid. The question is then how would you access the individual TileRecord that the mouse is hovering over? All the calls that TileGrid() provides seems to provide you all the data records, but not the one that you hover over. When an icon is selected, you can figure out the tile recorded for that, but not for a mouse over.

How would you get the tileRecord?

Any advice appreciated,
Thanks
D

[Isomorphic]

Did you actually try this? Doesn't sound like it. Try a call to getTarget() *when the mouse is over a tile* not over the blank spaces around tiles.

[darewreck]

EventHandler.getTarget() returns a canvas.

This isn't valid TileRecord tile = (TileRecord) tile.getTarget() since the java compiler say that I can't cast it to a TileRecord.

So this made me think, what else can I cast it to. The only other option I could think of was a TileGrid. I then wondered if I called getData() would it return me a record list with only one record containing the selected Tile Record. But that doesn't work either.

Code below:
public void onMouseOver(MouseOverEvent event)
{
// TODO Auto-generated method stub
TileGrid tile = (TileGrid)EventHandler.getTarget();
Record[] data = tile.getData();
for(int i = 0; i < data.length; i++)
{
Record rec = data[i];

String json = JSON.encode(rec.getJsObj());
SC.logWarn(json);

}
}

I did try it, but I'm also relatively new to smart gwt, so maybe i'm missing something.

Any advice appreciated,
Thanks,
D

[Isomorphic]

It's correct for the target to be a Canvas - that's what the Tiles generated by the TileGrid are. They would not be TileRecords (that's a data object and not a widget) and they wouldn't be TileGrids (that's the container).

With the Tile in hand you want to update the data then ask the tile to redraw().

Unfortunately there isn't currently a getRecordForTitle() or getTileIndex() method or similar - we'll look at adding something like this to make the problem simply - but in the meantime you could override getTile(record) and just return the result of super(), but add an attribute on the Tile that you can use to find the corresponding record later (eg, the PK value).

[darewreck]

I'm still not making the connection how how this will be connected. I understand the idea your suggesting, but not how it is implemented.

I actually put a break point on a overloaded getTile(Record rec) {} function and it never gets called. A also verified it by putting a SC.logWarn msg as well and that never got printed out. The getTileHtml(Record rec) actually gets called when you first bring up the TileGrid and everytime you mouse over the tiles. Even if I'm able to set an attribute for that Tile, how would I access it later.

Tile is not a smartgwt class. Within the onMouseOver function, you get a canvas = getTarget(). From this point on, Its not clear from the api calls that canvas provides on how I would even get the attributes associated with the canvas. (assuming when i associated an attribute to the record when getTile()) was called.

I then tried to think of a way to create a mapping between the canvas the records for the tiles. I was thinking that I would create an initial mapping during the initialization of the TileGrid and tried to override the addTile function. However, that function isn't being called during the initial creation of the TileGrid, so I'm completely lost on how to approach this problem.

I've also looked at other suggested methods such as suggested in this http://forums.smartclient.com/showpost.php?p=48543&postcount=16. However, this is leveraging off the browser processing of the "title" tag. This won't work if I actually want to change the Tile Record information.

Any advice appreciated,
Thanks,
Derek

[darewreck]

This is an example of the code I tested with, if you wanted more a visual look at what I kind of tried out. Note I did take out things and added things when testing. So some of the stuff I mentioned in my earlier post may not match the code before.

                final Map<Canvas, Record> mapping = new HashMap<Canvas, Record>();
			 
		final TileGrid tileGrid = new TileGrid()
		{
			
			   @Override
			   public void addTile(Canvas tile) {
				   // TODO Auto-generated method stub
				   super.addTile(tile);
					SC.logWarn("addTile Called");
			   }
			   @Override 
                          protected String getTileHTML(Record record) 
			   { 
				   //String selectedRecordName = record.getAttribute("iconSelected");
				   
				   String tileHTML = super.getTileHTML(record); 
				  // TileRecord record = iconRecords.get(selectedIconName);
					
				   String name = record.getAttribute("name"); 
				   record.setAttribute("Selected", true);
				   return "<div title=\"" + name + "\">" + tileHTML + "<div/>"; 
                           } 
			    	 
			   @Override
			   public Canvas getTile(Record record) {
				   // TODO Auto-generated method stub
				   Canvas tile_canvas = super.getTile(record);
				   
				   if(tile_canvas != null)
				   {
					   mapping.put(tile_canvas, record);
				   }
				   SC.logWarn("getTile Called");
				   return tile_canvas;
			   }
			   
			   public Record getTile(Canvas canvas)
			   {
				   return mapping.get(canvas);
			   }
		};

[Isomorphic]

You never mentioned your version.. if you're on an older version, you'll see that the getTile() API lacks the text "This is an override point" in JavaDoc.

In that case, another approach is to find the Canvas instance you've been returned amongst the TileGrid's children. It's index will tell you what Record it's associated with.

[darewreck]

The version i'm using is SmartGWT 3.0

So I'm able to get the current canvas and loop through the getChildren() canvases to find the one returned by getTarget. When i find the canvas in the getChildren() list, I store the index. With that index, I find the record from the recordList return from calling the TileGrid.getDataAsRecordList().

The problem that i'm experiencing is that the record is off by 1. Meaning i'm getting a canvas index, and when i look at the RecordList its not the correct index.

This makes me wonder how do I garentee that the index is the same or even if the two List that return for Canvus or RecordList is the same size. Is there cases where one List will contain more or list.

Is the sytleName for each canvase Tile always set to "simpleTileOver". I notice that in the dubbugger:

Here is the code:

			public void onMouseOver(MouseOverEvent event) {
				// TODO Auto-generated method stub
				Canvas tile_canvas = (Canvas)EventHandler.getTarget();
				
				Canvas [] tileCanvases = tileGrid.getChildren();
				for (int i = 0; i < tileCanvases.length; i++)
				{
					Canvas tile = tileCanvases[i];
					if(tile.getID().equals(tile_canvas.getID()))
					{
						RecordList recordList = tileGrid.getDataAsRecordList();
						String json = JSON.encode(recordList.get(i).getJsObj());
						
						SC.logWarn(json);
					}
				}
			}

Thanks,
Any advice Appreciated
D