Ooops. That should have been MyImageComponent.mxml instead of MyCustomComponent.mxml.
BTW, where are you from? I am an ex pat Kiwi now living in the states. --- In [email protected], "valdhor" <valdhorli...@...> wrote: > > 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_ict@> > 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? > > > > > > > > > > > > > > > > > > > > > > > > > > > >
