Hi Steve. That's so excellent mate. I simply added in your code and then the only thing I needed to do was add in a variable to my main app called categoryid and set it to a default of 1. I then replaced the line:-
Alert.show(event.currentItem.categoryid); with:- categoryid=event.currentItem.categoryid; and it works just like that. I've bound the categoryid var in my main app to a label component and it changes to the correspoding categoryid of each item that is clicked so it shows it works. Now I can simply edit my filter function which filters my links tilelist in the main app so that it uses my new category id var as the filter paramater and I think I'll be set :-) Is that how you'd do it? Thanks so much for this. I'd probably be using a crappy tilelist as the navigation if it weren't for you. You're a lifesaver. I'm from Liverpool in England (like the beatles). I suppose I've said the word "mate" before and that made you wonder :-) I'm currently studying flex on my web development masters degree course at uni and want to go into making ecommerce websites using php/mysql/flex. I have no experience in web dev before this course and only have a degree in I.T. so I got thrown in the deep end really and had to teach myself how to swim but I'm addicted to it now and am constantly trying to perfect things which I think is my problem. :-) --- In [email protected], "valdhor" <valdhorli...@...> wrote: > > 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" <valdhorlists@> 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? > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > >
