The way I would do it is to have a click event listener in the custom component that would dispatch a custom bubbling event that the application can listen for and handle. Modified example follows:
Application: <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; layout="vertical" verticalAlign="top" horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" xmlns:components = "*" initialize="onInit()"> <mx:Script> <![CDATA[ import mx.controls.Alert; [Bindable] private var dp:Array = [ {text: "First", image: "helmet"}, {text: "Second", image: "helmet"}, {text: "Third", image: "helmet"}, {text: "Fourth", image: "helmet"}, {text: "Fifth", image: "helmet"} ]; private function onInit():void { addEventListener(MyCustomEvent.WHAT_YOU_WANT_TO_USE_AS_AN_EVENT_CONSTANT\ , MyCustomEventHndler); } private function MyCustomEventHndler(event:MyCustomEvent):void { // Do what you need to here event.stopImmediatePropagation(); Alert.show(event.currentItem.text); } ]]> </mx:Script> <mx:HBox> <mx:Repeater id="myImages" dataProvider="{dp}"> <components:MyImageComponent theItem="{myImages.currentItem}"/> </mx:Repeater> </mx:HBox> </mx:Application> MyCustomComponent.mxml <?xml version="1.0" encoding="utf-8"?> <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; horizontalAlign="center" width="200" height="200" creationComplete="onCreationComplete()"> <mx:Script> <![CDATA[ public var theItem:Object; [Bindable] private var imageLocation:String; private function onCreationComplete():void { thisText.text = theItem.text; thisImage.source = "images/" + theItem.image + ".png"; } private function handleClick(event:MouseEvent):void { event.stopImmediatePropagation(); dispatchEvent(new MyCustomEvent(MyCustomEvent.WHAT_YOU_WANT_TO_USE_AS_AN_EVENT_CONSTANT, theItem)); } ]]> </mx:Script> <mx:Image id="thisImage" rollOverEffect="{glowImage}" rollOutEffect="{unglowImage}" autoLoad="true" click="handleClick(event)"/> <mx:Text id="thisText" fontSize="24" click="handleClick(event)"/> <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0x22A050"/> <mx:Glow id="unglowImage" duration="1000" alphaFrom="0.3" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0x3380DD"/> </mx:VBox> MyCustomEvent.as package { import flash.events.Event; public class MyCustomEvent extends Event { public static const WHAT_YOU_WANT_TO_USE_AS_AN_EVENT_CONSTANT:String = "blahblah"; private var _currentItem:Object; public function MyCustomEvent(type:String, currentItem:Object, bubbles:Boolean=true, cancelable:Boolean=true) { super(type, bubbles, cancelable); _currentItem = currentItem; } public override function clone():Event { return new MyCustomEvent(type, _currentItem, bubbles, cancelable); } public function get currentItem():Object {return _currentItem;} public function set currentItem(currentItem:Object):void {_currentItem = currentItem;} } } HTH Steve --- In [email protected], "James" <garymoorcroft_...@...> wrote: > > Basically what I mean is I previously had a combo box populated by an array collection that contained the property categoryid and a tilelist populated by an array collection that also contained the property category id. So therefore when a user selected an item in the tilelist only the items that had a categoryid which matched the category id of that selected item were shown within the tilelist. Is this possible to implement into this new example? > > --- In [email protected], "valdhor" valdhorlists@ wrote: > > > > I also looked at TourDeFlex to get some ideas. > > > > Here is a small example that I created that shows how to create a custom > > component as well as do the Glow effect on an image. (I got the image > > from downloading the file inside TourDeFlex under Glow): > > > > Application: > > <?xml version="1.0" encoding="utf-8"?> > > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"; > > layout="vertical" verticalAlign="top" > > horizontalAlign="center" > > backgroundGradientColors="[0x000000,0x323232]" paddingTop="0" > > xmlns:components = "*"> > > <mx:Script> > > <![CDATA[ > > [Bindable] private var dp:Array = [ > > {text: "First", image: "helmet"}, > > {text: "Second", image: "helmet"}, > > {text: "Third", image: "helmet"}, > > {text: "Fourth", image: "helmet"}, > > {text: "Fifth", image: "helmet"} > > ]; > > ]]> > > </mx:Script> > > <mx:HBox> > > <mx:Repeater id="myImages" dataProvider="{dp}"> > > <components:MyImageComponent > > theItem="{myImages.currentItem}"/> > > </mx:Repeater> > > </mx:HBox> > > </mx:Application> > > > > MyImageComponent.mxml > > <?xml version="1.0" encoding="utf-8"?> > > <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml"; > > horizontalAlign="center" width="200" height="200" > > creationComplete="onCreationComplete()"> > > <mx:Script> > > <![CDATA[ > > public var theItem:Object; > > [Bindable] private var imageLocation:String; > > > > private function onCreationComplete():void > > { > > thisText.text = theItem.text; > > thisImage.source = "images/" + theItem.image + ".png"; > > } > > ]]> > > </mx:Script> > > <mx:Image id="thisImage" rollOverEffect="{glowImage}" > > rollOutEffect="{unglowImage}" > > autoLoad="true"/> > > <mx:Text id="thisText" fontSize="24"/> > > <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" > > alphaTo="0.3" blurXFrom="0.0" > > blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0x22A050"/> > > <mx:Glow id="unglowImage" duration="1000" alphaFrom="0.3" > > alphaTo="1.0" blurXFrom="50.0" > > blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0x3380DD"/> > > </mx:VBox> > > > > > > BTW. I only found one png image so I used it repeatedly. Also, I have > > only one size. You should make multiple sizes and place them in the > > images folder. You should also set the width and height inside the > > custom component depending on the size you want (I have them hard coded > > in my example). Then you would pass a size to the custom component by > > exposing a public variable and use a switch statement to select the > > correct size. > > > > HTH > > > > > > > > > > Steve > > > > > > > > --- In [email protected], "valdhor" <valdhorlists@> wrote: > > > > > > OK, I did some googling and this looks like exactly what you are > > after... > > > > > > http://flexaired.blogspot.com/2008/07/sample-image-tile-list.html > > > > > > --- In [email protected], "James" garymoorcroft_ict@ wrote: > > > > > > > > Yes but it's the glow effect that I require. when each item is > > hovered over it needs to glow rather than just having the blue themed > > square. Have you got any idea how to do this? > > > > > > > > --- In [email protected], "dannyvenier" <dannyvenier@> > > wrote: > > > > > > > > > > Why not use a tileList or if spark, a List with tile layout. You > > can use a custom itemrenderer which can re-render when additional > > buttons are added and in rendering, can determine the optimum size based > > on running an algorithm on your dataprovider. There are all sorts of > > edge conditions to worry about (what if the total text width exceeds > > that of your container etc., etc.., but those have to be dealt with in > > any case, and I imagine you need a custom renderer anyway, to build your > > list items. > > > > > > > > > > > > > > > > > > > > --- In [email protected], "James" <garymoorcroft_ict@> > > wrote: > > > > > > > > > > > > I'm lost as to what component to use for navigation within my > > application. Across the top of my app I want something which > > horizontally displays a list of categories which the user can click to > > select. This is fine if I use a tilelist but I also want to allow my > > client to add and remove categories and for the width of the component > > to adjust so that new categories fit in but it seems impossible to apply > > <fit to content> to a tilelist the way you can to a hbox which obviously > > means scrollbars will appear and if you switch the scroll policy off > > this simply means any added categories won't be visible if they are past > > the set width. > > > > > > > > > > > > If a hbox had a selecteditem property that would be perfect. Is > > there any such way of getting a component to work like this? > > > > > > > > > > > > > > > > > > > > >
