5 Replies Latest reply on May 5, 2009 10:46 AM by _Natasha_

    iconFunction with ByteArray as Image Source?

    Miggl Level 1

      Hi Guys and Gals,

       

      How can I convert my ByteArray image string into a CLASS object that I can return in a custom iconFunction?

       

      Here's what I have:

       

      private function showListIcon(item:Object):Class
      {
           var result          :Class          = new Class();
           var decoder          :Base64Decoder     = new Base64Decoder();
           
           if (item.hasOwnProperty("photo"))
           {
                decoder.decode(item.photo);
           }
           else if (item.hasOwnProperty("logo"))
           {
                decoder.decode(item.logo);
           }
           result = decoder.??????????; //(was using decoder.toByteArray() here in other functionality)
           
           return result;
      }
      

       

      Thanks!

      -Mike

        • 1. Re: iconFunction with ByteArray as Image Source?
          _Natasha_ Level 4

          Hi Mike,

          may be the correct way for resolve your problem is to override decorator for your component to render ByteArray instead of Class?

          • 2. Re: iconFunction with ByteArray as Image Source?
            Miggl Level 1

            Hi Natasha,

             

            Thanks for this idea. I am using a custom ItemRenderer on a List. I want to show a custom list icon using my iconFunction method. Do you have an example of overriding the decorator? I haven't done that yet (a whole lotta learning going on here).

             

            Thanks!

            • 3. Re: iconFunction with ByteArray as Image Source?
              _Natasha_ Level 4

              Hi,

              this can be implemented in your custom itemRenderer. You cannt' use iconFunction because the class is experceted as a return value, so it will be null.

               

              In you itemRenderer you showld create a bitmap to show icon (in override protected function createChildren():void)

              private var _myIcon:Bitmap;

              override protected function createChildren():void

              {

              super.createChildren();

              _myIcon = new Bitmap();

              addChild(_myIcon);

              }

              in set data(value:Object) function you need to change data for bitmap

              override public function set data(value:Object):void

              {

              super.data = value;

              ...
              var bitmapData = new BitmapData();
              bitmapData.setPixels(new Rectangle(0, 0, ICON_WIDTH, ICON_HEIGHT), decoder.toByteArray());
              _myIcon.bitmapData = bitmapData;
              }
              In updateDispalyList you should set position of Bitmap (x and y properties) and change visibility if needed.
              override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
              {
              ...
              _myIcon.x = 0; // will be the first
              _myIcon.y = 0;
              // other components showld be shifted to _myIcon.width
              ...
              }

              • 4. Re: iconFunction with ByteArray as Image Source?
                Miggl Level 1

                Hi Natasha,

                 

                Thanks for your help on this. Right now your solution is a bit over my head as I don't understand all the details. I did manage to find a solution: I created a method called imageFunction which returns either a Class object or a ByteArray, depending on what is used:

                private function showListImage(item:Object):*
                {
                     var decoder     :Base64Decoder     = new Base64Decoder();
                     var result     :*;
                     [Embed(source="com/brassworks/assets/user.png")]
                     var userIcon     :Class;
                     [Embed(source="com/brassworks/assets/vendor.png")]
                     var vendorIcon     :Class;
                     [Embed(source="com/brassworks/assets/group.png")]
                     var groupIcon     :Class;
                     [Embed(source="com/brassworks/assets/role.png")]
                     var roleIcon     :Class;
                     [Embed(source="com/brassworks/assets/duty.png")]
                     var dutyIcon     :Class;
                     [Embed(source="com/brassworks/assets/location.png")]
                     var locationIcon:Class;
                     [Embed(source="com/brassworks/assets/resource.png")]
                     var resourceIcon:Class;
                
                        if (item.hasOwnProperty("photo"))
                     {
                          if (item.photo.toString().length > 0)
                          {
                               decoder.decode(item.photo);
                               result = decoder.toByteArray();
                          }
                          else
                          {
                               result = userIcon;
                          }
                     }
                     else if (item.hasOwnProperty("logo"))
                     {
                          decoder.decode(item.logo);
                          result = decoder.toByteArray();
                     }
                     else if ((item.hasOwnProperty("name")) 
                          && (item.hasOwnProperty("company_id")))
                     {
                          result = groupIcon;
                     }
                     else if ((item.hasOwnProperty("name"))
                          && (!item.hasOwnProperty("company_id")))
                     {
                          result = roleIcon;
                     }
                
                     return result;
                }
                

                 

                Please let me know if there would be improvements you would make to this; I hope I'm not doing something horribly aggrevious here.

                • 5. Re: iconFunction with ByteArray as Image Source?
                  _Natasha_ Level 4

                  Hi,

                  your function is ok.

                  But using both Classes for embeded images and byteArrays will complicate itemRenderer - you need to show or hide default icon and canvas for rendering byteArrays.

                   

                  You can ask questions if you don't understand the idea. I think you should read a part about custom itemRenderers in developer docs.

                  http://livedocs.adobe.com/flex/3/html/cellrenderer_1.html