comunicating between flex components

[shakazulu89]

hey
im having trouble understand how i am supposed to pass date from my main application to a component
what i am trying to do is:
i have a gallery of pictures and i want that whenever one is clicked a pop up appears showing an enlarged version of the image.
that are 36 or so images in all, so using if statements and creating a seperate window for each image is too cumbersome..

so what i want is to have just one titlewindow component (the one that will show the enlarged image) and pass in the source of the image that is clicked to be enlarged..

so like this:
user clicks the image-> function recognizes which image was clicked-> takes the source of that image and passes it to the image component in the titlewindow

i hope i explained this well enough to be understood :)

thanks for the help
ask me anything else you need to know

[drkstr]

Just create a public var in your TitleWindow and assign a value to it after creation.

var window:ImageWindow = ImageWindow( PopUpManager.createPopUp( this, ImageWindow, true));
window.imageSource = 'images/photo.png';

Best Regards,
~Aaron

[shakazulu89]

i sort of get what youre saying but can you be a little more descriptive.. that code you wrote there goes in the titleWindow init function?
once i have that variable how do i pass into it the source of the picture that was clicked?
thanks

[drkstr]

that code you wrote there goes in the titleWindow init function?
I'm not sure what you are referring to as the init function, but that is the code you would use to create and display your popup window. How you pass the image source to that function depends on how your photo gallery is set up. Here is a little bit more code that deminstrated the process.


private function showImageWindow( imageSource:String ): void {
var window:ImageWindow = ImageWindow( PopUpManager.createPopUp( this, ImageWindow, true));
window.imageSource = imageSource;
}

<mx:Image source="images/photo.png" click="showImageWindow( Image(event.target).source );" />

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" >

<mx:Script>
<![CDATA[

[Bindable]
public var imageSource:String;

]]>
</mx:Script>

<mx:Image source="{imageSource}" />

</mx:TitleWindow >


Best Regards,
~Aaron

[shakazulu89]

<mx:Image source="images/photo.png" click="showImageWindow( Image(event.target).source );" />

what does the Image that i have underlines refer to?

[drkstr]

This is called strong typing. What it does is allow you to dynamically reference a component that had some sort of interaction. In your case, a mouse click.

An event needs a way to point to the dispatcher of the event. The problem is that many different types of components need to dispatch this same type of event, so the 'target' property is typed as an Object which means it can be pretty much anything.

When you do this:

Image(event.target)

You're saying that target is not an Object, it's an Image. This allows you to reference properties at compile time that are unique to the Image component (IE. the source property).

Make sense?


Best Regards,
~Aaron

[shakazulu89]

This is called strong typing. What it does is allow you to dynamically reference a component that had some sort of interaction. In your case, a mouse click.

An event needs a way to point to the dispatcher of the event. The problem is that many different types of components need to dispatch this same type of event, so the 'target' property is typed as an Object which means it can be pretty much anything.

When you do this:

Image(event.target)

You're saying that target is not an Object, it's an Image. This allows you to reference properties at compile time that are unique to the Image component (IE. the source property).

Make sense?


Best Regards,
~Aaron

yes i see what youre saying
though when i try to run the app i get:
1118: Implicit coercion of a value with static type Object to a possibly unrelated type string.

in this line:
<mx:Image id="partPicture" click="enlargeImage(Image(event.target).source);" source="assets/salatit_basic.jpg" buttonMode="true" useHandCursor="true" x="10" y="10"/>

im guessing the problem is that its expecting a string because imageSource is declared as a string.

what am i missing here?

you can go to salatit.co.il and navigate to the third tab. so you can see what im trying to do here.
right now i just replaced "Image(event.target).source" with just one of the pictures i have so itll work..
but, again, i want that window to show whatever picture the user has clicked.
you can scroll across the different items and it will show different pictures

the language is Hebrew by the way :)

thanks for all your help

[drkstr]

My apologies. Image.source is actually an Object, not a string. So it would need to be typed as String:

<mx:Image source="images/photo.png" click="showImageWindow( String(Image(event.target).source) );" />

But in my opinion, this is actually not a very good way to make a dynamic list. I think it would be much better to use a data driven approach.

<mx:TileList id="idPhotoList" height="250" width="300"
maxColumns="2" rowHeight="90" columnWidth="90" change="showImageWindow(idPhotoList.selectedItem.source);">
<mx:dataProvider>
<mx:Array>
<mx:Object source="taco.png" />
<mx:Object source="taco.png" />
<mx:Object source="taco.png" />
<mx:Object source="taco.png" />
</mx:Array>
</mx:dataProvider>
<mx:itemRenderer>
<mx:Component>
<mx:Image width="80" height="80" source="{data.source}" />
</mx:Component>
</mx:itemRenderer>
</mx:TileList>


Best Regards,
~Aaron

[shakazulu89]

thanks for the help
yea i see thats another way to do it but i got it to work by writing instead of
<mx:Image source="images/photo.png" click="showImageWindow( Image(event.target).source );" />

i wrote this
<mx:Image source="images/photo.png" click="showImageWindow( (event.currentTarget).source );" />

that made it work

much appreciated your help.. my first application still learning all the tricks