0 Replies Latest reply on Jun 8, 2011 10:32 PM by GapingWound

    Adding clickable images to datagrid

    GapingWound Level 1

      Howdy folks,

      I'm currently using Flex 3.6 to create kinetic scrollable lists for a touchscreen jukebox (Song lists, genre lists, playlist etc). These lists are basically datagrids, with TextEvent.LINK listeners that call ExternalInterface to pass an ID back to the main jukebox app, which will then perform whatever function.

      Now, these datagrid-based lists work perfectly well, until I wanted to start listing videos with thumbnails. I can get the thumbnail to display just fine, but need it to also be clickable, and pass back whatever row ID is associated with it to the ExternalInterface call.

       

      Here's how I generate a row with 2 text fields fields:

       

      arow = new GridRow();

       

      // add the track number cell

      arrOfCellObj[cellNum] = new GridItem();

      arrOfCellObj[cellNum].setStyle("color","0xFF0000");

      arrOfCellObj[cellNum].setStyle("fontSize","25");

      txt = new Text();

      txt.addEventListener(TextEvent.LINK, playSong);

      txt.id = "cell_"+cellNum;

      txt.htmlText = "<a href='event:"+cells[0]+"'>"+cells[1]+"</a>";

      txt.width = 100;

      arrOfCellObj[cellNum].addChild(txt);

      arow.addChild(arrOfCellObj[cellNum]);

      cellNum++;

       

      // add the song cell

      arrOfCellObj[cellNum] = new GridItem();

      arrOfCellObj[cellNum].setStyle("color","0xe99305");

      arrOfCellObj[cellNum].setStyle("fontSize","25");

      txt = new Text();

      txt.addEventListener(TextEvent.LINK, playSong);

      txt.id = "cell_"+cellNum;

      txt.htmlText = "<a href='event:"+cells[0]+"'>"+cells[2]+"</a>";

      txt.width = 600;

      arrOfCellObj[cellNum].addChild(txt);

      arow.addChild(arrOfCellObj[cellNum]);

      cellNum++;

       

      myGrid.addChild(arow);

      In the above example, cells[0] is a song ID, cells[1] is the track number, and cells[2] is the song name. playSong is the function that wraps the ExternalInterface call.
      I need to do the same thing as above, but with the first griditem as an Image. I can get the image to display in the griditem just fine, but have NO IDEA how to make it call playSong and pass cells[0] along properly.
      For reference, here's how I'm adding the image:
      // add the image cell
      arrOfCellObj[cellNum] = new GridItem();
      img = new Image();
      img.addEventListener(TextEvent.LINK, showAlbum);
      img.id = "cell_"+cellNum;
      img.source = cells[3];
      img.width = 120;
      img.height = 90;
      arrOfCellObj[cellNum].addChild(img);
      arow.addChild(arrOfCellObj[cellNum]);
      cellNum++;
      Interestingly, the TextEvent.LINK event listener doesn't throw any sort of error at compile time, but it also does nothing.
      How do I get an image to call the playSong function on click and pass the cells[0] to it? Even better would be a way to make the whole row a clickable element (Since this is being used in a touchscreen environment).
      Thanks for looking.
      Keith