3 Replies Latest reply on Aug 31, 2009 12:56 PM by Umal Kumar

    TileList rollover issues


      So I'm new to flex and I might be completely missing something here but the rollover effect on my tilelist just isn't working. Basically when I move my mouse over the TileList the last viewable item is always highlighted, not the item the mouse is over. I'm using data pulled down from Salesforce to populate the tilelist but that shouldn't have anything to do with the display issue, right?. Am I incorrectly using the titlelist component?


      [My application code]

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:salesforce="http://www.salesforce.com/" layout="absolute"  applicationComplete="init()">
          <salesforce:Connection id="force" serverUrl="https://test.salesforce.com/services/Soap/u/16.0"/>
                  import com.salesforce.objects.SObject;
                  import com.salesforce.objects.Base64;
                  import mx.collections.ArrayCollection;
                  import com.salesforce.AsyncResponder;
                  import com.salesforce.objects.LoginRequest;
                  import com.salesforce.results.LoginResult;
                  import com.salesforce.results.QueryResult;
                  private var employees:ArrayCollection;
                  // Initalize
                  private function init():void {
                  private function login():void {
                      var lr:LoginRequest = new LoginRequest();
                      lr.username = "get your own";
                      lr.password = "not telling";
                      lr.callback = new AsyncResponder(loginResponder);
                  // Salesforce login callback
                  private function loginResponder(result:LoginResult):void{
                      if (result.sessionId != null){
                          force.query("Select btydev__Picture_Id__c, Department__c, FirstName, LastName, Title, Phone, Email, Hire_Date__c From Contact Where Account.Name = 'A.W. Hastings'",
                              new AsyncResponder(getAllEmps_queryResponder));
                  // Salesforce query all employees callback
                  private function getAllEmps_queryResponder(result:QueryResult):void {
                      employees = result.records;
                      // get an array of attachment ids to pass to the retrieve call
                      var attachmentIds:Array = new Array();
                      for (var i:int = 0; i < employees.length; i++) {
                          if (employees[i].btydev__Picture_Id__c != null) {
                      force.retrieve("Id, Body","Attachment", attachmentIds, new AsyncResponder(getAllEmpsPhotos_responder));


                  private function getAllEmpsPhotos_responder(result:Array):void {
                      for (var i:int = 0; i < result.length; i++) {
                          if (result[i] != null) {
                              var sObj:SObject = result[i];
                              for (var j:int = 0; j < employees.length; j++) {
                                  if (employees[j].btydev__Picture_Id__c == sObj.Id) {
                                      if (sObj.Body != null){
                                          employees[j].btydev__Picture__c = Base64.decode(sObj.Body);


              <mx:TileList id="empList" dataProvider="{employees}" width="100%" height="100%" selectable="true" maxColumns="3" itemRenderer="myComponent" >


      [My component code]

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Panel title="{data.FirstName} {data.LastName} | {data.Title}" width="320" paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2">
              <mx:Label text="{data.Department__c}" fontWeight="bold"/>
                  <mx:Image source="{data.btydev__Picture__c}" width="75" height="75" horizontalAlign="center" />
                  <mx:VRule height="60"/>
                      <mx:Label text="{data.Phone}"/>
                      <mx:LinkButton label="{data.Email}"/>                    
                      <mx:Label text="Employee since {data.Hire_Date__c}"/>

        • 1. Re: TileList rollover issues
          Barna Biro Level 3



          I don't have the time to read all that but I can point you into a direction: from what I understand, in essence you want to disable the default behavior of the TileList when rolling over and item or something. This should be done by calling preventDefault(); from the rollOver handler ( or itemRollOver and so on ). By calling preventDefault, you should be preventing default behavior and you can then call your own focusing method ( or whatever you might want to call/do ) to get the desired behavior.


          Hope it helps,

          Barna Biro

          • 2. Re: TileList rollover issues
            tim__c Level 1

            Thanks Barna for the info but I'm not looking to replace the default behavior, unless the default behavior is to always highlight the last viewable item in the list. Is it not the default behavior for the rollover to highlight the item the mouse is over? Maybe that's my problem, I don't understand the default behavior of the flex controls.

            • 3. Re: TileList rollover issues
              Umal Kumar Adobe Employee

              What i understand from the issue of yours is the item rollOver color must change on mouseRollOver and the selected Item must not be selected anymore?


              The rollOver Color and the selection color are two different properties. So when you see the design view of the TileList you can see the selectionColor and the RollOver Color as two different properties and whatever you set there will work. please let me know if i am not clear in understanding the problem of yours.