7 Replies Latest reply on Feb 1, 2010 9:08 AM by RosieGp

    Flex link to internal mxml component

    RosieGp Level 1

      I have text.mxml component. that is showing me the following:
      <mx:DataGrid id="dgShowHistory" width="100%">
         <mx:columns>
          <mx:DataGridColumn headerText="ID"/>
          <mx:DataGridColumn headerText="Case Number"/>
          <mx:DataGridColumn headerText="Group Number"/>
          <mx:DataGridColumn headerText="Case Name"/>
          <mx:DataGridColumn headerText="Status"/>
         </mx:columns>
        </mx:DataGrid>

      Now the in the Case Number column I want to add a link to SearchCaseNumber.mxml...
      So lets say the Case Number has the following:
      Case Number
      1234
      1235
      1236
      I want these to be highlighted as link and when I click on these It takes me to the SearchCaseNumber.mxml put the 1234 automatically in search and if possible populate all the fields based on this.

      In SearchCaseNumber.mxml
      <mx:TextInput id="CaseSearch" width="81"/>

        • 1. Re: Flex link to internal mxml component
          msakrejda Level 4

          The quick-and-dirty way is to add a listener directly for the itemClick event to text.mxml itself (since it will bubble events from the grid) wherever you use it, and handle that click by filling in the appropriate case in SearchCaseNumber.mxml.

           

          A more robust, more modular way to do that would be for your text.mxml to listen to itemClick events on the grid, and in that listener dispatch a custom event encapsulating more structured information about the case clicked on. E.g., you can dispatch something like a CaseClickEvent, a custom event that extends Event and adds the fields caseNumber, groupNumber, caseName, and status (or even just attaches a Case object, if you have Case objects in your model).

          • 2. Re: Flex link to internal mxml component
            RosieGp Level 1

            I was trying to implement what you mentioned but I’m not an expert in the coding yet. Can you help me with the code and how it looks like?

            Here is my code… text.mxml

            <?xml version="1.0" encoding="utf-8"?>

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

                                    layout="vertical"

                                    width="1000"

                                    height="800"

                                    titleStyleName="popWindowTitle"

                                    horizontalScrollPolicy="off">

                                   

            <mx:Script>

               <![CDATA[

                  import mx.formatters.DateFormatter;

                  import mx.managers.PopUpManager;

                  import mx.containers.TitleWindow;

                  import mx.controls.Text;

                  import mx.controls.ComboBox;

                  import mx.core.Application;

                  import mx.utils.ArrayUtil;

                 import mx.controls.Alert;

                  import mx.collections.ArrayCollection;

                  import mx.rpc.events.ResultEvent;

                  import mx.rpc.events.FaultEvent;

                  import mx.controls.dataGridClasses.DataGridColumn;

                  import com.component.coverage;

                  [Bindable]

                  private var CaseNumber:ArrayCollection = new ArrayCollection();

                       

                  private function handle_recordCaseNumber(event:ResultEvent):void

                        {

                        CaseNumber = event.result as ArrayCollection;

                }   

                ]]>

            </mx:Script>

                             

                        <mx:RemoteObject id="CaseNumberCreate"

                                     destination="ColdFusion"

                                     source="Text.cfc.CaseNumber"

                                     showBusyCursor="true">

                        <mx:method name="getCaseNumber"

                                      result="handle_recordCaseNumber(event)"

                                       fault="Alert.show(event.fault.message)"/>                     

                        </mx:RemoteObject>

             

                                   

                                   

            <mx:DataGrid x="800" y="650" id="CaseNumberGrid" dataProvider="{CaseNumber}"  creationComplete="{CaseNumberCreate.getCaseNumber()}"

            height="639"

            width="823">     

               <mx:columns>

                  <mx:DataGridColumn headerText="ID" dataField="ID"/>

                  <mx:DataGridColumn headerText="Case Number" dataField="Case_Number"/>

                  <mx:DataGridColumn headerText="Group Number" dataField="Group_Number"/>  

                  <mx:DataGridColumn headerText="Case Name" dataField="Case_Name"/>

                  <mx:DataGridColumn headerText="Status" dataField="Status"/>

               </mx:columns>

            </mx:DataGrid>   

            </mx:TitleWindow>

             

            My SearchCaseNumber.mxml looks like the following:

             

            <mx:Label text="Enter Case Number Here:" fontWeight="normal" textAlign="center"/>

            <mx:TextInput id="CaseSearch" width="81" fontFamily="Arial"/>

            <mx:Button label="Search" click="findCase()"/>

            private function findCase():void

                              {

                              if (CaseSearch.text == "")

                              {

                              Alert.show("Enter the Case Number", "Error");

                              }

                              else

                              {

                              roCreate.returnCaseInfo(CaseSearchSearch.text);

                              roCreate.returnGroupInfo(CaseSearch.text);

                              }

                              }

            Please let me know if you can help me… Thanks…

            • 3. Re: Flex link to internal mxml component
              msakrejda Level 4

              Sorry, wrong question. Hang on.

              • 4. Re: Flex link to internal mxml component
                RosieGp Level 1

                I'm sorry does this mean can't help... I didn't understand...

                • 5. Re: Flex link to internal mxml component
                  msakrejda Level 4

                  Listen for the click event from the grid:

                   

                  <mx:DataGrid ... itemClick="handleClick(event)"  .../>

                   

                  Find the proper case info and dispatch a new (domain-specific) event from text.mxml:

                   

                  private function handleClick(e:ListeEvent):void {

                      var caseEvent:DynamicEvent = new DynamicEvent('caseClick');

                      caseEvent.case = CaseNumbers[e.rowIndex];

                      dispatchEvent(caseEvent);

                  }

                   

                  Outside of text.mxml, listen for this event, and update SearchCaseNumber as needed. You'll need to expose a property in SearchCaseNumber and bind your text input to it:

                   

                  [Bindable] public var caseNumber:Number;

                   

                  <mx:TextInput id="CaseSearch" value="{caseNumber}"/>

                  1 person found this helpful
                  • 6. Re: Flex link to internal mxml component
                    msakrejda Level 4

                    And eventually, you'll probably want to write a real CaseEvent instead of using  DynamicEvent.

                    • 7. Re: Flex link to internal mxml component
                      RosieGp Level 1

                      Can I email you at some address... i want to ask something.