9 Replies Latest reply on Dec 27, 2007 5:44 AM by hs_ted

    outerDocument equivalent?

    Ilikeprivacy
      I'm having some issues with learning Flex, my latest problem is getting a TileList to communicate with the objects in the main level of the application.

      A simplified structure is as follows:

      VideoDisplay
      TileList (with itemrenderer set to Thumbnail which is a .mxml places an image and description).

      After endless hours of searching I managed to find the outerDocument method of referencing the application containing a <mx:component> while having an inline item renderer, however I've been unable to find a way for this to work when it's an "external" (I'm not sure if that's the correct terminology) component.

      I've included snippets from files below, what I'm hoping to achieve is something along the lines of myVid.source='videos/VIDEO_ID/';myVid.play(); where VIDEO_ID comes from @id

      I'm well aware that I may be going about this the wrong way so I'd love to hear of a better way to do it.

      thanks :)




      Snippet from VideoApplication.mxml
      quote:

      <mx:Model id="results" source="videos.xml"/>
      <mx:Canvas x="28" y="54" width="388" height="293" id="videocanvas">
      <mx:VideoDisplay
      id="myVid"
      width="388" height="293"
      source="..."
      autoPlay="false"
      left="0" top="0"
      alpha="1"
      />
      </mx:Canvas>
      <mx:Canvas width="100%" height="100%" label="Popular Videos" id="popular">
      <mx:TileList dataProvider="{results.video}" itemRenderer="Thumbnail" id="popularvids" x="0" y="0" height="100%" width="100%" change="trace(popularvids.selectedIndex)">
      </mx:TileList>
      </mx:Canvas>



      Snippet from Thumbnail.mxml
      quote:

      <?xml version="1.0" ?>
      <mx:Canvas xmlns:mx="...">
      <mx:HBox width="190" click="trace('I want to load the appropriate video here')">
      <mx:Image
      id="image"
      width="45"
      height="33"
      source="{data.thumbnail}"
      buttonMode="true"
      useHandCursor="true"
      mouseChildren="false"/>
      <mx:Text
      id="texter"
      textAlign="left"
      width="100"
      height="33"
      selectable="false"
      truncateToFit="true"
      text="{data.name}"
      buttonMode="true"
      useHandCursor="true"
      mouseChildren="false"/>
      </mx:HBox>
      </mx:Canvas>


      Structure of videos.xml
      quote:

      <?xml version="1.0"?>
      <results>
      <video id="VIDEO_ID">
      <name>VIDEO TITLE</name>
      <thumbnail>THUMBNAIL URL</thumbnail>
      </video>
      </results>
        • 1. Re: outerDocument equivalent?
          peterent Level 2
          When you use an itemRenderer, the itemRenderer's data property is automatically set to be a record from the list's dataProvider. Which means data.@id would be what you'd want to use in your itemRenderer. Likewise, data.name would be VIDEO_TITLE and so on.
          • 2. Re: outerDocument equivalent?
            Ilikeprivacy Level 1
            Thanks Peterent, any suggestions on talking to myVid?
            • 3. Re: outerDocument equivalent?
              Ilikeprivacy Level 1
              Anyone that can help me?
              • 4. outerDocument equivalent?
                ben_marker
                I"m interested in the same thing... How do you make a call to a function in the "_root" of the application or even a relative version similar to " _parent" in flash from a custom item renderer?
                • 5. Re: outerDocument equivalent?
                  chris.huston.t10 Level 3
                  You can use parentDocument to talk to the parent of a given object. This works for nested components, so parentDocument.parentDocument would be the container that is two levels up.

                  In your case, I think you could use the following in your external component:

                  parentDocument.myVid.source = data.@id;
                  parentDocument.myVid.play();

                  Vygo
                  • 6. Re: outerDocument equivalent?
                    peterent Level 2
                    As a matter of good programming practice, we recommend that you don't use _root and you don't directly execute functions outside of the itemRenderer. What I'm not understanding however, is why the change event handler isn't doing what you want. Your TileList's change event handler function can reference myVid and set its source to the value of the item clicked (or you can use the itemClick event the same way).

                    But in general, you should use custom events. Let's say you want to click on a button inside of your itemRenderer and have something happen. Let's also say that each item in the dataProvider to the list contains a value you need to send when the button is picked.

                    The way to do this is to first create a custom event, a class derived from flash.events.Event. You can add a member for this value to be sent along.

                    class MyEvent extends Event {
                    public var value:Number;
                    public function MyEvent() {
                    super("myEvent",true);
                    }
                    }

                    Note: super("myEvent",true); - the true parameter means you are going to bubble the event (more on this below).

                    Now you want to make the Button in the itemRenderer send this event:

                    <mx:Button label="Send it">
                    <mx:click>
                    var newEvent:MyEvent = new MyEvent();
                    newEvent.value = data.value;
                    dispatchEvent(newEvent);
                    </mx:click>
                    </mx:Button>

                    At this point clicking a Button causes a an event, MyEvent, to be dispatched and will bubble up. This means that each component above the Button has a chance to act on it and if not, it continues to rise until it reaches the Application class.

                    Your TileList does not process the "myEvent" event. So you cannot do:

                    <mx:TileList myEvent="handleIt(event)" ... > you will get a compile time error. You'll have to add an event handler using ActionScript:

                    tileList.addEventListener( "myEvent", handleIt );

                    Now you can get that value from the event (event.value) which is of type MyEvent. So by using a custom event which bubbles, you can have an itemRenderer communicate with any component above it.
                    • 7. Re: outerDocument equivalent?
                      ntsiii Level 3
                      You can also do this without the custom Event class. If your renderer dispatches a bubbling Event named "myEvent", and your renderer has a public member "value", then in a handler for myEvent, you can access the value using target or currentTarget:
                      var sValue:String = event.target.value

                      Tracy
                      • 8. Re: outerDocument equivalent?
                        Ilikeprivacy Level 1
                        thanks for your help guys!
                        • 9. Re: outerDocument equivalent?
                          hs_ted Level 1
                          Peter Ent:

                          As someone who is trying to learn Flex, I find your posts invaluable. True, it often takes me a day or two to understand
                          them, but invaluable nonetheless. I don't know if it's your job to post here or if it's a labour of love sort of thing ... just wanted to say 'thanks'.