Valdhor I've implemented the code from the last example you gave me and
visually I have it working perfectly now, converting to color/grayscale,
glowing/unglowing everything. I only have one problem with it which is I'm
totally unsure as to how to get it to simulate the selecteditem click in the
app itsef. You see previously I used a combobox as my category navigation/links
filterer which had the index 0 set as the default selected item and as the user
clicked each combobox item it filtered the links data within my links tilelist.
How can I implement the selected item property into the repeater so that as the
user clicks on each item it is set as the selected item the way it would be in
a combobox/tilelist?
You see the problem is I have a filter function which gets applied to my links
tilelist array collection dataprovider which was previously (when I used the
combobox) set to:-
if(category.categoryid ==
categorySelectorDropdown.selectedItem.categoryid) {
return true;
}
else{
return false;
}
}
So as you can see without being able to have a selected item property I can't
use this filter function effectively :-( Sorry to be a pain but it's just that
I remember you mentioned you used a repeater which simulated a tilelist
selecteditem click and I was wondering how this could be done with my code so
the repeater we have acted in this way?
--- In [email protected], "valdhor" <valdhorli...@...> 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?
> > > > >
> > > >
> > >
> >
>
