17 Replies Latest reply on Aug 7, 2007 8:21 AM by shawnyale

    component triggering and communication

    shawnyale Level 1
      I have recently been tasked with learning flex for our project and for the life of me, I cant seem to get my head around a couple things. I want to ask one question here regarding communication between components.

      Is it possible to call a function (if its public) from one component by another one if both components are in the same view?
        • 1. Re: component triggering and communication
          peterent Level 2
          I'm not certain what you mean by 'view' but if you have a reference to a component (or instance of a class) you can call its public functions.
          • 2. component triggering and communication
            shawnyale Level 1
            I have a component that is the page header, and a component for the body. Both of these are placed together inside a container, which Im calling the view. I have to put a button in the header that is supposed to cause the body to be printed. I tried to call the function in the body component script tag from the click event of the button, but it wouldnt work even though the function in the body was public. Basically, I want the print to accept the list object(Im printing a list) into the print function. But I have to call the function from the header button.

            Arrgh. Thanks for any help you can offfer Peter. If it isnt too much trouble, I am also having a problem printing the items of the list when the items are not visible on the page. I read that I am supposed to be able to print everything within a container, even when hidden due to the scrollbar and not showing on the page. Im trying to use FlexPrintJob, and the pj.addobject(lstEvents, scale thingy.showall) but its still not printing all of the items in the list.

            I really need some help. Thanks
            • 3. Re: component triggering and communication
              shawnyale Level 1
              BTW Im about 1 week into my Flex training and we are using Cairngorm mirco-architecture. I know thats backwards, but its just the current situation. Thanks
              • 4. Re: component triggering and communication
                peterent Level 2
                Do you have something like this?

                <mx:HBox>
                <mx:Button label="Print" click="body.print(list)" />
                </mx:HBox>
                ...
                <mx:List id="list" ... />
                ...
                <local:BodyTag id="body" ... >

                If BodyTag has a public function called print it will be called.

                Cairngorm and printing are very advanced topics. You can only print what you can see. If you want to print a list then you either have to resize it large enough to be completely visible or print, then scroll the list, print, scroll again, etc.

                You don't actually have to "see" the entire list, but it must be fully exposed on the display list. So once you've created the PrintJob, you can resize the list, call its validateNow() method so it redraws properly, use addPage(), then restore the list to its previous size.
                • 5. Re: component triggering and communication
                  shawnyale Level 1
                  Thanks for the reply Peter. I watched a video on this last night and can't wait to get started. I created a PrintDataGrid component and am going to try to pass the items from the list into it and use a while loop and the validNextPage property. My code looks something like this: 3 files

                  --- Print Data Grid Component---
                  <mx:PrintDataGrid id="PrintMeetings">
                  <mx:columns>
                  <mx:DataGridColumn dataField="meeting"/> // Not really sure which value to use here because the list contains an itemRenderer that inserts objects from a meetingItem class
                  </mx:columns>
                  </mx:PrintDataGrid>

                  --- Header Component ---
                  <mx:Button id="btnPrint" click="Print();" /> Trying to call the print function in the page comonent here. There is no print function in the header

                  --- Page Component ---
                  <mx:List id="lstMeetings" dataProvider="{CommunityModelLocator.getInstance().meetingList}" itemRenderer="view.meeting.MeetingListItem" />

                  I know Cairngorm is advanced, but I have been tasked with figuring it out because our projects are using it. Thank you for any help you can offer.
                  • 6. Re: component triggering and communication
                    shawnyale Level 1
                    This problem with the topic of this post is that my header and body are actually 2 different components.

                    I need the header to call the print function from a different component.

                    I added a reference to the body component, but I tried click="Print()" and it didnt work.
                    Do I need to do something like MeetingList.Print() or something?
                    • 7. component triggering and communication
                      shawnyale Level 1
                      ---MeetingList Component--- MeetingList.mxml
                      Has public Print() function

                      ---Header Component--- Header.mxml
                      Needs to call the Print() function from the MeetingList Component
                      • 8. Re: component triggering and communication
                        peterent Level 2
                        Either Header should dispatch an event which MeetingList can listen for or Header should be given a reference to MeetlingList.

                        <MeetingList id="mtglist" ... >
                        <Header meetingList="{mtglist}" ... >

                        where inside of Header you have: public var meetingList:MeetingList;

                        I personally like dispatching events because it makes the program easier to change, but it is less straightforward at first.
                        • 9. Re: component triggering and communication
                          shawnyale Level 1
                          I agree. Any references on how to dispatch an event? Our project uses a lot of event dispatching and I kinda know how to listen for the event, its just the creating event part that confuses me.

                          Thank you so much for your help
                          • 10. Re: component triggering and communication
                            peterent Level 2
                            If you don't need to pass any data, then just doing:

                            dispatchEvent( new Event("print") ); works. Otherwise you have to create a class that extends flash.events.Event and add your own properties. Then create an instance of that class and dispatch it.

                            The class which dispatches it (Header) should also declare event metadata to let the compiler know about the event:

                            [Event(name="print",type="your.event.class")]

                            Then you can do this:

                            <Header print="mtglist.print()" >
                            <MeetingList id="mtglist" ... />

                            Or call some local function which then calls the print method.
                            • 11. Re: component triggering and communication
                              shawnyale Level 1
                              Thats fantastic!!! THANK YOU THANK YOU!
                              • 12. Re: component triggering and communication
                                shawnyale Level 1
                                Last question, in my MeetingList init() should my eventlistener look like this?

                                addEventListener(print, Print);
                                • 13. component triggering and communication
                                  shawnyale Level 1
                                  I tried to just dispatch as you said but nothing is happening

                                  in header:
                                  private function Print(){
                                  dispatchEvent(new Event("print"));

                                  in MeeetingList.mxml:

                                  public init(){
                                  this.addEventListener("print", Print);
                                  }
                                  public function Print(){
                                  // Handle the print here
                                  }

                                  What am I doing wrong?
                                  • 14. Re: component triggering and communication
                                    peterent Level 2
                                    You actually mean:

                                    this.addEventListener( "print", Print );

                                    But you don't need to do anything more complex than what I wrote. What you have written implies that MeetingList will itself dispatch a print event and be handled by its own Print function. But it is Header that is dispatching the event and unless MeetingList has a reference to the instance of Header, it won't work.
                                    • 15. Re: component triggering and communication
                                      shawnyale Level 1
                                      I thought the MeetingList had to listen for any event called "print" and then fire its own Print() method?
                                      • 16. Re: component triggering and communication
                                        shawnyale Level 1
                                        sorry to be such a pain
                                        • 17. component triggering and communication
                                          shawnyale Level 1
                                          I like the dispatch event in the header component.

                                          This is ALL the code in my header that handles the button click:
                                          right below my imports I have:
                                          [Event(name="print",type="flash.events.Event")]

                                          My button click calls:
                                          public function Print(){ // This is the Print inside the Header that just should dispatch the event
                                          dispatchEvent(new Event("print"));
                                          }

                                          This is ALL the code in my MeetingList Component related to print:

                                          private function initapp(){
                                          this.addEventListener("print", Print); //Calling the Print that in the MeetingList here
                                          }

                                          private function Print(){ // Im not getting to this point
                                          //start the print job
                                          }