19 Replies Latest reply on Dec 11, 2009 7:54 AM by forsythes

    How do I refer to an item in a component?

    Jerry62712 Level 1

      I have five components consisting of the five forms in my application.  I put them in src/Forms/xxx.mxml with xxx as the form names.  I also have several action script files that refer to the items in those components.  But not successfully.

       

      How do I refer to TextInput (id=fred) in file DischargeTracking.mxml in a script?

        • 1. Re: How do I refer to an item in a component?
          SHevenal776

          You'll need to utilize public variables within your components.  If

          you are trying to refer the text property of a textInput component,

          initialize a public String variable  within in your component like so:

           

          public variable fredValue:string = fred.text;

           

          You can then access properties associated with that public variable

          from the parent App or any other component like so:

           

          private var localVariable:string;

          localVariable  =  Application.application.fredValue;

           

          This making sense?

           

          Let me know,

          -Nap

          • 2. Re: How do I refer to an item in a component?
            Jerry62712 Level 1

            Currently I have (in Utility.as):

            private function dtResetForm():void
            {
                CURRENTCENSUS.text="";
                CONTACTNAME.text="";
            ...

             

            And in DischargeTracking.mxml:

                        <mx:FormItem id="dtFirstName"
                            label="First Name"
                            x="5" y="5"
                            indicatorGap="5"
                            labelStyleName="labelRight"
                            labelWidth="130">
                            <mx:TextInput id="FIRSTNAME"
                                text=""
                                width="140"
                                maxChars="50"
                                tabIndex="11"/>
                        </mx:FormItem>

             

            So I should have a script in each component with all the text values (public var FirstNameText) that is bound to the text fields?

             

            DischargeTracking.mxml:

            <script>

            [Binding] public FirstNameText = FIRSTNAME.text;

             

            and in the script file:

            FirstNameText = ""; // to blank it out or

            FirstNameText = XMLRecord.FIRSTNAME;

            • 3. Re: How do I refer to an item in a component?
              SHevenal776 Level 1

              Correct.

               

              And to access each of these bound text values from outside of the component use:

               

              Application.application.boundString1.text= "";

              Application.application boundString2.text= "";

               

              Also, make sure that when declaring a variable for each bound string

              to include: 

               

              on the line directly above each bound string variable declaration.

               

              This should do the trick.

               

              Let me know how it goes.

              -Nap

              • 4. Re: How do I refer to an item in a component?
                Jerry62712 Level 1

                [never mind - you can't have the script after the xml, it has to be after the canvas]

                 

                Didn't go well.  This code won't allow me to switch to Design view:

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Script>
                    <![CDATA[
                        [Bindable] public var fFIRSTNAME:String = fFirstName.text;
                        [Bindable] public var fLASTNAME:String = fLastName.text;
                        [Bindable] public var WEEK1:String = Week1.text;
                        [Bindable] public var MEETONETIME:String = MeetOneTime.text;
                        [Bindable] public var WEEK2:String = Week2.text;
                        [Bindable] public var MONTHLY:String = Monthly.text;
                        [Bindable] public var WEEK3:String = Week3.text;
                        [Bindable] public var fRECEIVINGBTSREP:String = fReceivingBTSRep.text;
                        [Bindable] public var WEEK4:String = Week4.text;
                    ]]>
                </mx:Script>

                 

                <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                    width="780">
                ...

                 

                If I comment out the entire script, it works.  If I comment out all the lines in the script, it doesn't work.

                • 5. Re: How do I refer to an item in a component?
                  forsythes

                  Hi, I'm having an incredibly similar problem and can't get it worked out. Can you help? Thanks!


                  Main.mxml

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:custom="components.*">
                      <mx:Script>
                          <![CDATA[
                             [Bindable]
                             private var localMealType:Object;
                             localMealType = Application.application.mealType.text;  
                          ]]>
                      </mx:Script>
                      ...
                                      <mx:Form x="10" y="10">
                                          ...
                                          <mx:FormItem label="Meal Type">
                                              <custom:CB_MealType />
                                          </mx:FormItem>

                                          ...

                                      </mx:Form>
                                  ...
                                  <mx:TextArea id="meals" text="{localMealType.text}"/>
                       ...
                  </mx:Application>

                   

                  components/CB_MealType.mxml

                   

                  <?xml version="1.0" encoding="utf-8"?>
                  <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
                      <mx:Script>
                          <![CDATA[
                             // This event handler adds and deletes items from mealType.
                             [Bindable]
                             public var mealType:String;
                             private function modifyCart():void
                             {
                                  mealType.text = "";
                             
                                  if(brCB.selected == true) {             
                                      mealType.text += "Breakfast" + '\n' ;
                                  }                   
                                  if(luCB.selected == true) {
                                      mealType.text +="Lunch" + '\n';
                                  }               
                                  if(diCB.selected == true) {
                                      mealType.text +="Dinner" + '\n';
                                  }
                                }  
                          ]]>
                      </mx:Script>
                      <mx:CheckBox id="brCB" label="Breakfast" click="modifyCart()"/>                            
                      <mx:CheckBox id="luCB" label="Lunch" click="modifyCart()"/>   
                      <mx:CheckBox id="diCB" label="Dinner" click="modifyCart()"/>                           

                  </mx:VBox>

                  • 6. Re: How do I refer to an item in a component?
                    SHevenal776 Level 1

                    Copy in your code for the parent app and/or script and I'll take a closer look

                    • 7. Re: How do I refer to an item in a component?
                      SHevenal776 Level 1

                      It does indeed seem similar, could you elaborate a bit on the intent of your code.  The "mealType" textinput that you're referencing within CB_MealType.mxml, where is it instantiated?  Main.mxml or CB_MealType.mxml?  And what variable, in particular are you having trouble changing.

                       

                      Let me know

                      -Nap

                      • 8. Re: How do I refer to an item in a component?
                        SHevenal776 Level 1

                        Also, try including this bit in your Main.mxml script section:

                         

                        import mx.core.Application;

                         

                        This may very well be the answer to your question, so give it a try first.

                        • 9. Re: How do I refer to an item in a component?
                          Jerry62712 Level 1

                          Now for the next question.  How do I refer to a button in a component?

                           

                          I have buttons that are either activated or disabled depending on what the user does.  For example, I have a button on the search form that is initally set to inactive.  Once the user clicks something in a datagrid on a form in that component, I want to make it active.

                          • 10. Re: How do I refer to an item in a component?
                            forsythes Level 1

                            Here's the code in the files. The mealType variable is a public bindable variable in the custom component CB_MealType.mxml. I have (I think) 2 problems.

                            1 - I don't know if mealType.text is actually being updated since I can't see it.

                            2 - I can't see it. It should appear in the "meals" TextArea of Main.mxml.

                             

                            Main.mxml

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:custom="components.*">
                                <mx:Script>
                                    <![CDATA[
                                       [Bindable]
                                       private var localMealType:Object;
                                       localMealType = Application.application.mealType.text;  

                                    ]]>
                                </mx:Script>
                                <mx:HDividedBox x="10" y="10" width="763">
                                    <mx:VDividedBox x="-11" y="250" height="100%" width="303">
                                        <mx:Accordion width="332" height="200">
                                            <mx:Canvas label="General Information" width="100%" height="100%">
                                                <mx:Form x="10" y="10">

                                                    <mx:FormItem label="Meal Type">
                                                        <custom:CB_MealType />
                                                    </mx:FormItem>
                                                </mx:Form>
                                            </mx:Canvas>
                                        </mx:Accordion>
                                    </mx:VDividedBox>
                                    <mx:Panel width="278" height="406" layout="absolute">
                                        <mx:VBox x="10" y="10" height="346">
                                            <mx:Label text="Meal Type"/>
                                            <mx:TextArea id="meals" text="{localMealType.text}"/>
                                        </mx:VBox>
                                    </mx:Panel>
                                </mx:HDividedBox>
                            </mx:Application>

                             

                            CB_MealType.mxml

                            <?xml version="1.0" encoding="utf-8"?>
                            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
                                <mx:Script>
                                    <![CDATA[
                                       // This event handler adds and deletes items from mealType.
                                       [Bindable]
                                       public var mealType:Object;

                                       private function modifyCart():void
                                       {
                                            mealType.text = "";
                                       
                                            if(brCB.selected == true) {             
                                               mealType.text += "Breakfast" + '\n' ;
                                            }                   
                                            if(luCB.selected == true) {
                                                mealType.text +="Lunch" + '\n';
                                            }               
                                            if(diCB.selected == true) {
                                                mealType.text +="Dinner" + '\n';
                                            }

                             

                                          }  
                                    ]]>
                                </mx:Script>


                                <mx:CheckBox id="brCB" label="Breakfast" click="modifyCart()"/>                           
                                <mx:CheckBox id="luCB" label="Lunch" click="modifyCart()"/>   
                                <mx:CheckBox id="diCB" label="Dinner" click="modifyCart()"/>              
                              
                            </mx:VBox>

                            • 11. Re: How do I refer to an item in a component?
                              forsythes Level 1

                              I tried adding import mx.core.Application; to my Main.mxml file, but it didn't work.


                              • 12. Re: How do I refer to an item in a component?
                                SHevenal776 Level 1

                                set the local meal types variable in your Main.mxml to a string rather than an object.  Any effect?

                                • 13. Re: How do I refer to an item in a component?
                                  Jerry62712 Level 1

                                  When I try to use the component with the script block to make public variables bound to the form items, I get a null error.  How do I get around this?

                                  • 14. Re: How do I refer to an item in a component?
                                    forsythes Level 1

                                    I end up with "1120: Access of undefined property localMealType." I've tried it as both an Object and as a String. You're getting a null error? Can you post your whole code Jerry? I'm wondering how much of what we are trying to do is the same. Maybe I can get a different perspective from looking at your code and we can figure this out together?

                                    • 15. Re: How do I refer to an item in a component?
                                      paul.williams Level 4

                                      Child controls of a component are not created as soon as the component is created. There is a process of child creation that can be spread over several frames. Once the children of a component have been created the component will dispatch an "initialize" event. Then when the children have been fully laid-out and drawn the component will dispatch a "creationComplete" event. Here's a more complete description:

                                       

                                      http://www.switchonthecode.com/tutorials/flex-snippet-tutorial-application-creation-life-c ycle-events

                                       

                                      To avoid null-reference errors you should perform your component initialization in handlers for the "initialize" or "creationComplete" events.

                                       

                                      Forsythes: The line "Application.application.mealType.text" won't work because your Application has no property called 'mealType'. You have declared a mealType property of type Object in your custom control, but you haven't assigned anything to it. So mealType.text will generate an error. The only control in your app that has a text property is called 'meals'. Can you describe what you are trying to achieve?

                                      • 16. Re: How do I refer to an item in a component?
                                        Jerry62712 Level 1

                                        OK.  Here is the latest main mxml setting up the component:

                                        <mx:states>
                                           <mx:State name="DischargeTracking">
                                                <mx:AddChild position="lastChild">
                                                    <ns1:DischargeTracking
                                                        FIRSTNAME = ""
                                        ...

                                        Here is the component:

                                        <?xml version="1.0" encoding="utf-8"?>
                                        <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
                                            borderStyle="outset" borderThickness="2" width="780">
                                        <mx:Script>
                                            <![CDATA[
                                                [Bindable] public var FIRSTNAME:String;
                                        ...
                                            ]]>
                                        </mx:Script>

                                         

                                            <mx:Form id="dtForm"
                                                horizontalCenter="0" >

                                        ...

                                                   <mx:FormItem id="dt_FirstName"

                                                        label="First Name"
                                                        x="5" y="5"
                                                        indicatorGap="5"
                                                        labelStyleName="labelRight"
                                                        labelWidth="130">
                                                        <mx:TextInput id="FirstName"
                                                            text="{FIRSTNAME}"
                                                            width="140"
                                                            maxChars="50"
                                                            tabIndex="11"/>
                                                    </mx:FormItem>

                                         

                                        I'm trying to populate the FirstName with data from an item called XMLRecord in a script:

                                        private function populateDT():void
                                        {
                                        ...
                                            Application.application.CONTACTNAME.text = XMLRecord.CONTACTNAME;

                                         

                                        I got rid of the null object by the binding above.  The new error is:

                                        (whoops, network connection is down now can't get error)

                                        • 17. Re: How do I refer to an item in a component?
                                          forsythes Level 1

                                          Basically, I want people to be able to use checkboxes in the CB_MealType component to check if a recipe they enter is for Breakfast, Lunch, Dinner or any combination thereof. I would like their checked choices to automatically appear in a panel to the right of the form which will be a preview of what the finished recipe will look like.

                                           

                                          I tried calling that text control mealType, thinking that mealType.text would show up as the text for that control, but that didn't work either. I started by attempting to follow this example: http://livedocs.adobe.com/flex/3/html/help.html?content=ascomponents_4.html and building off of that, but I have many of these custom checkbox groups that I would like to include, so I didn't want to leave them all in the main.mxml file.

                                          • 18. Re: How do I refer to an item in a component?
                                            paul.williams Level 4

                                            Ok, change mealType to a String and expose it as a bindable public property on your custom component. Then bind to it from your main application as follows:

                                             

                                            Main Application:


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

                                            <mx:TextArea
                                              id="mealTypeSummary"
                                              text="{ mealTypeSelector.mealType }"
                                              height="100"/>
                                             
                                            <local:MealType
                                              id="mealTypeSelector"/>

                                            </mx:Application>


                                            Custom Component:


                                            <?xml version="1.0" encoding="utf-8"?>
                                            <mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
                                                <mx:Script>
                                                    <![CDATA[
                                                       // This event handler adds and deletes items from mealType.
                                                       [Bindable]
                                                       public var mealType : String;
                                                      
                                                       private function modifyCart():void
                                                       {
                                                            mealType = "";
                                                       
                                                            if(brCB.selected == true) {             
                                                               mealType += "Breakfast" + '\n' ;
                                                            }                   
                                                            if(luCB.selected == true) {
                                                                mealType +="Lunch" + '\n';
                                                            }               
                                                            if(diCB.selected == true) {
                                                                mealType +="Dinner" + '\n';
                                                            }
                                                          }  
                                                    ]]>
                                                </mx:Script>


                                                <mx:CheckBox id="brCB" label="Breakfast" click="modifyCart()"/>                           
                                                <mx:CheckBox id="luCB" label="Lunch" click="modifyCart()"/>   
                                                <mx:CheckBox id="diCB" label="Dinner" click="modifyCart()"/>              
                                              
                                            </mx:VBox>

                                            • 19. Re: How do I refer to an item in a component?
                                              forsythes Level 1

                                              HA! You rock! Thank you so much! Learning how to correctly do that was key to several projects that I'd like to do. Thank you!

                                              Here's that part of my finished code for anyone else who is trying to do something similar.

                                               

                                              src/Main.mxml

                                               

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

                                              <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:custom="components.*">

                                              <mx:HDividedBox x="10" y="10" width="763">

                                              <mx:Accordion width="332" height="200">

                                              <mx:Canvas label="General Information" width="100%" height="100%">

                                              <mx:Form x="10" y="10">

                                              <mx:FormItem label="Meal Type">

                                              <custom:CB_MealType id="mealTypeSelector"/>

                                              </mx:FormItem>

                                              </mx:Form>

                                              </mx:Canvas>

                                              </mx:Accordion>

                                              <mx:Panel width="278" height="406" layout="absolute">

                                              <mx:VBox x="10" y="10" height="346">

                                              <mx:Label text="Meal Type"/>

                                              <mx:TextArea id="mealTypeSummary" text="{ mealTypeSelector.mealType }" height="100"/>

                                              </mx:VBox>

                                              </mx:Panel>

                                              </mx:HDividedBox>

                                              </mx:Application>

                                               

                                              src/components/CB_MealType.mxml

                                               

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

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

                                                  <mx:Script>

                                                      <![CDATA[

                                                         // This event handler adds and deletes items from the special diet list.

                                               

                                                         Bindable

                                                   public var mealType:String;

                                               

                                                         private function modifyCart():void

                                                         {

                                                              mealType = "";

                                               

                                                                    if(brCB.selected == true) {     

                                                                    mealType += "Breakfast" + '\n' ;

                                                           }

                                                           if(luCB.selected == true) {

                                                                    mealType +="Lunch" + '\n';

                                                           }             

                                                           if(diCB.selected == true) {

                                                                    mealType +="Dinner" + '\n';

                                                           }

                                                         }

                                                      ]]>

                                                  </mx:Script>

                                               

                                                  <mx:VBox>

                                              <mx:CheckBox id="brCB" label="Breakfast" click="modifyCart()"/>

                                              <mx:CheckBox id="luCB" label="Lunch" click="modifyCart()"/>

                                              <mx:CheckBox id="diCB" label="Dinner" click="modifyCart()"/>

                                                  </mx:VBox>

                                               

                                              </mx:HBox