Re: [flexcoders] Horizontal List - the Images don't appear - help?!

[Beau Scott]

Like most other "icon" attributes in flex, they're class references, not
string urls (see
http://livedocs.adobe.com/flex/3/langref/mx/controls/HorizontalList.html#includeExamplesSummary
)

You have two options:
1: Embed the images and reference their respective variables through binding
(like in the above example)
2: Create your own renderer for use within the HorizontalList, making use of
an mx:Image that has it's source set to the icon property of the objects in
the given dataProvider. and an mx:Label that's bound to the label property.

Some semi-working code: (you'll probabaly want to make it extend UIComponent
and handle measuring, positioning, etc. Look @ TileListItemRenderer for
guidance).

package
{
    import mx.containers.VBox;
    import mx.controls.Image;
    import mx.controls.Label;
    import mx.controls.listClasses.BaseListData;
    import mx.controls.listClasses.IDropInListItemRenderer;
    import mx.controls.listClasses.IListItemRenderer;
    import mx.controls.listClasses.ListData;
    import mx.core.IDataRenderer;
    import mx.core.IFactory;
    import mx.events.FlexEvent;

    public class URLHListRenderer extends VBox implements IFactory,
IDropInListItemRenderer, IDataRenderer, IListItemRenderer
    {
        private var uiImage:Image;
        private var uiLabel:Label;

        public function URLHListRenderer()
        {
            super();
        }

        override protected function createChildren():void
        {
            super.createChildren();
            uiImage = new Image();
            addChild(uiImage);

            uiLabel = new Label();
            uiLabel.styleName = this;
            addChild(uiLabel);
        }

        override protected function commitProperties():void
        {
            super.commitProperties();
            uiImage.source = data && (data.icon || data.source) ? (data.icon
|| data.source) : null;
            uiLabel.text = data ? data.label : null;
        }


        public function newInstance():*
        {
            var instance:URLHListRenderer = new URLHListRenderer();
            instance.styleName = this;
            instance.width = width;
            instance.height = height;
            return instance;
        }

        private var _listData:ListData;
        [Bindable("dataChange")]
        public function get listData():BaseListData
        {
            return null;
        }
        /**
         * @private
         */
        public function set listData(value:BaseListData):void
        {
            _listData = value as ListData;
            dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
            invalidateProperties();
        }

        override public function set data(value:Object):void
        {
            super.data = value;
            invalidateProperties();
        }
    }
}

<mx:HorizontalList width="100%" height="100%">
    <mx:itemRenderer>
        <local:URLHListRenderer width="200" height="200"/>
    </mx:itemRenderer>
    <mx:dataProvider>
        <mx:Array>
            <mx:Object label="Yahoo" icon="
http://l.yimg.com/a/i/ww/beta/y3.gif"/>
        </mx:Array>
    </mx:dataProvider>
</mx:HorizontalList>




Hope this helps,

Beau Scott






On Thu, Jul 23, 2009 at 8:55 AM, jamiebadman <jamie.bad...@db.com> wrote:

>
>
> Hi!
>
> I'm trying to display images in a Horizontal List. I receive the url's of
> the images via a webservice at run time - so can't embed the images. I've
> tried something like this:
>
> chartList.addItem({label:myLabel, icon:myImageURL});
>
> Where chartList is the dataprovider of the H-List... but this doesn't work
> - I see the labels but no images.
>
> The url's are definitely correct - I can paste one into a browser and view
> the image.
>
> Any ideas?
>
> Thanks,
>
> Jamie.
>
>  
>



-- 
Beau D. Scott
Software Engineer