6 Replies Latest reply on Aug 30, 2006 8:10 AM by KomputerMan.com

    Components and setting values

    KomputerMan.com Level 1
      I am including two components into my Flex application. I.E. my main app is called Main.mxml and in it I embed SecurityTypes.mxml and SecTypeList.mxml. Inside SecTypeList.mxml I have a data grid and a button. Inside SecurityTypes.mxml I have a few form fields and a button.

      All I want to do is click the button inside SecTypeList.mxml and have the label of the button inside SecurityTypes.mxml change and I want to set the visible property to true.

      Here is the code used to create the button inside SecTypeList.mxml:
      <mx:Button id="MyButton" label="test" click="addButtonClick()"/>

      Here is the function inside SecTypeList.mxml that the button is calling:
      private function addButtonClick():void
      {
      SecurityTypes.AddSecButton.text="Add Security Role" ;
      SecurityTypes.AddSecButton.visible="true" ;
      }

      Here is the code used to create the button inside the component called SecurityTypes.mxml:
      <mx:Button visible="false" id="AddSecButton" />

      When I compile my application I get this error:
      Access of possibly undefined property AddSecButton through a reference with static type Class.

      I know I am missing something pretty simple and basic but what is it???

      Thanks in advance for the help!!!

      Have an Ordinary Day...
      KomputerMan ~|:-)

        • 1. Re: Components and setting values
          peterent Level 2
          Inside SecTypeList.mxml add this metadata:
          <mx:Metadata>
          [Event("myclick")]
          </mx:Metadata>

          in addButtonClick just do: dispatchEvent( new Event("myclick") );

          In your Main app, do:

          <SecTypeList myclick="securityTypes.updateIt()" />

          In SecTypeList add:

          public function updateIt() : void {
          AddSecButton.text = "Add Security Role";
          AddSecButton.visible = true; // no quotes
          }

          That seemed complex, yes, but when you need to make it more generic: ie, have SecTypeList supply the text and visiblity flag, you can invent your own custom Event and pass that data along with the event.
          • 2. Re: Components and setting values
            KomputerMan.com Level 1
            Thanks for the help. I understand the part about the custom event as I am passing variables around various components. But I still have a bit of a problem. My code now looks like this...

            Inside SecurityTypes.mxml:

            <mx:Script>
            <![CDATA[
            public function updateIt() : void
            {
            AddSecButton.visible = true;
            AddSecButton.label = "Add Security Role";
            }
            ]]>
            </mx:Script>

            <mx:Button visible="false" id="AddSecButton" />



            Inside my SecTypeList.mxml I now have:
            <mx:Metadata>
            [Event("myclick")] // Why don't I need a type here???
            </mx:Metadata>

            <mx:Script>
            <![CDATA[
            private function addButtonClick():void
            {
            dispatchEvent(new Event("myclick"));
            }
            ]]>
            </mx:Script>

            <mx:Button id="MyButton" label="test" click="addButtonClick()"/>



            And last but not least I have this in my main.mxml file...

            <comp:SecTypeList id="secTypeID"
            secTypeList="{allSecRoles}" width="100%" height="100%"
            secTypeSelected="secTypeSelHandler(event)"
            myclick="SecurityTypes.updateIt()" />

            Problem is I am still getting a compiler error that states:
            Call to a possibly undefined method updateIt through a reference with static type Class.

            Any deas on what will be causing this error. Thanks again for the help!!!

            KomputerMan ~|:-) (Feeling more like KomputerBoy today!!! :) )
            • 3. Re: Components and setting values
              peterent Level 2
              <comp:SecTypeList id="secTypeID"
              secTypeList="{allSecRoles}" width="100%" height="100%"
              secTypeSelected="secTypeSelHandler(event)"
              myclick=" SecurityTypes.updateIt()" />

              Do you have:

              <comps:SecurityTypes id=" SecurityTypes" ... > ???

              More likely:

              <comps:SecurityTypes id=" secTypes" ... > or something similar. So...

              <comp:SecTypeList id="secTypeID"
              secTypeList="{allSecRoles}" width="100%" height="100%"
              secTypeSelected="secTypeSelHandler(event)"
              myclick=" secTypes.updateIt()" />
              • 4. Re: Components and setting values
                KomputerMan.com Level 1
                Yesterday morning I felt like KomputerMan, last night I felt like KomputerBoy, now I feel like KomputerBaby!!! :)

                To make life easy I created a new Flex project with one main mxml template(Flex_Testing.mxml) and two mxml components (buttonTest.mxml and TestForm.mxml). Still can't get the click event in component 1 to do anything in component 2. Here are my three templates. Where am I being stupid???

                Flex_Testing.mxml:
                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute"
                xmlns:comp="components.*">

                <comp:TestForm id="myFunction" visible="false" />
                <mx:Canvas label="Test Button" id="SecTab" backgroundColor="#F5F5F5">
                <mx:HDividedBox horizontalAlign="center" top="10" left="10" right="10" bottom="10">
                <mx:Panel id="ButtonPanel" title="Button Form">
                <comp:ButtonTest id="ButtonTestID" myclick="myFunction.updateIt()" />
                </mx:Panel>

                <mx:Panel id="FormPanel" title="Form Form">
                <comp:TestForm id="FormTestID" />
                </mx:Panel>
                </mx:HDividedBox>
                </mx:Canvas>
                </mx:Application>


                ButtonTest.mxml:
                <?xml version="1.0" encoding="utf-8"?>
                <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
                <mx:Metadata>
                [Event("myclick")]
                </mx:Metadata>

                <mx:Script>
                <![CDATA[
                private function addButtonClick():void
                {
                dispatchEvent(new Event("myclick"));
                }
                ]]>
                </mx:Script>

                <mx:Button id="testButton" label="Click Me" click="addButtonClick()"/>
                </mx:VBox>

                TestForm.mxml:
                <?xml version="1.0" encoding="utf-8"?>
                <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml" width="400" height="300">
                <mx:Script>
                <![CDATA[
                public function updateIt():void
                {
                Button2.visible=true;
                Button2.label="Button was clicked";
                }
                ]]>
                </mx:Script>

                <mx:Label text="Box 1:" />
                <mx:TextInput text="Input Box 1" id="Input_1" />
                <mx:Button visible="false" id="Button2" />

                <mx:Button id="testButton1" label="Click Me 2" click="updateIt()"/>
                </mx:VBox>
                • 5. Re: Components and setting values
                  peterent Level 2
                  You had me stumped for a little bit, so don't feel bad when you see what the problem is. I've done stuff like this, too.

                  See: <comp:TestForm id="myFunction" visible="false" />
                  in Flex_Testing? Notice 2 things about it: it is invisible and behind the SecTab canvas.

                  Now see: <comp:TestForm id="FormTestID" />
                  that's the visible one.

                  So when you picked the button in ButtonText, it called the updateIt() method on the invisible myFunction TestForm. If you change the click handler to:
                  <comp:ButtonTest id="ButtonTestID" myclick=" FormTestID.updateIt()" />

                  it works.
                  • 6. Re: Components and setting values
                    KomputerMan.com Level 1
                    Thanks Peter... After I saw what I did I kicked myself in the shins. I should have seen that I was already calling the 2nd component and all I had to do was reference it by its ID. Onward and upward to bigger and better things now!!!

                    Having a better Ordinary Day now...
                    KomputerMan ~|:-)