9 Replies Latest reply on Aug 30, 2006 8:04 PM by nyfeman

    Newbie Architecture Question

    nyfeman Level 1
      I'm trying to be a good Flex architect and put my script in external .as files using <mx:Script source="asFile.as"/> to reference the file. The problem is, I'm referencing various control elements from the .as file (e.g., a function to clear form inputs using something like: textInput.text = "";), however Flex Builder 2 shows errors (Access of undefined property textInput) for all of the referenced controls.

      What am I missing???

      Al
        • 1. Re: Newbie Architecture Question
          Renaun_Erickson Level 1
          Just to double check, you mxml file has a TextInput control with an id of "textInput" and you are reference it in the asFile.as in a function as "textInput.text = "asdf";" and you have errors?
          • 2. Newbie Architecture Question
            nyfeman Level 1
            Renaun --

            Yes. I originally created the script in a script block and all was working well. It was only once I moved it to the external file that the problem started.

            Ah, one other possible complication -- the text Inputs in question are in a component.

            Al
            • 3. Re: Newbie Architecture Question
              Renaun_Erickson Level 1
              If the TextInputs are in a different component in a different mxml file that is including the AS then you have scope issues and it the TextInputs will not be found.

              The best would be to break down the issue to the simplest code and send an example. Probably something simple,
              • 4. Newbie Architecture Question
                nyfeman Level 1
                You've probably got it with the scope issue. So what is the best practice in this situation?

                I've got a main document with a view stack, components (the contents of the different levels of the view stack) with forms and/or other controls and Action Script in a third file to make it all work.

                I guess the thing to do is NOT break the mxml into components and just have one mxml file and one AS file?

                AL
                • 5. Re: Newbie Architecture Question
                  ntsiii Level 3
                  No, multiple component architecture is best practice, and it does not matter whether they are mxml or as.

                  Thee are ways to reference anything in an app from anywhere else, some are more complicated than others, some are better practice than others.

                  Architect your app for maintainablilty and reusability, etc. We'll help you figure out how to do the inter component communication.

                  Tracy

                  • 6. Re: Newbie Architecture Question
                    nyfeman Level 1
                    Tracy --

                    Thanks so much for your reply. So how does one reference a control in a component from an external AS file?

                    This is a VERY simplified example -- here's the "everything in one pot" version that works:
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute">
                    <mx:Script>
                    <![CDATA[
                    public function clearInputs():void
                    {
                    firstName.text="";
                    lastName.text="";
                    }
                    public function enterNames():void
                    {
                    var fullName:String;
                    fullName = firstName.text + " " + lastName.text;
                    returnedName.text = fullName;
                    }
                    ]]>
                    </mx:Script>
                    <mx:LinkBar x="228" y="0" dataProvider="myViewStack"/>
                    <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" y="27">
                    <mx:Canvas id="search" label="Search" width="100%" height="100%">
                    <mx:Panel x="175" y="55" width="353" height="257" layout="absolute">
                    <mx:Form x="10" y="10" width="313" height="116">
                    <mx:FormItem label="First Name:">
                    <mx:TextInput id="firstName"/>
                    </mx:FormItem>
                    <mx:FormItem label="Last Name:">
                    <mx:TextInput id="lastName"/>
                    </mx:FormItem>
                    <mx:FormItem direction="horizontal">
                    <mx:Button label="Submit" id="btnSubmit" click="enterNames()"/>
                    <mx:Button label="Clear" id="btnClear" click="clearInputs()"/>
                    </mx:FormItem>
                    </mx:Form>
                    <mx:Label x="66" y="153" text="" textAlign="center" width="201" id="returnedName"/>
                    </mx:Panel>
                    </mx:Canvas>
                    <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" width="100%" height="100%" fontWeight="bold" label="Customer Info">
                    <mx:Label text="THIS PANEL IS BLANK FOR EXAMPLE PURPOSES." color="#000000"/>
                    </mx:Canvas>
                    </mx:ViewStack>
                    </mx:Application>

                    This is broken apart:
                    Main mxml document:

                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" xmlns:innards="innards.*">
                    <mx:Script source="guts.as">
                    </mx:Script>
                    <mx:LinkBar x="228" y="0" dataProvider="myViewStack"/>
                    <mx:ViewStack id="myViewStack" borderStyle="solid" width="100%" height="80%" y="27">
                    <innards:nameEntry/>
                    <mx:Canvas id="custInfo" backgroundColor="#CCFFFF" width="100%" height="100%" fontWeight="bold" label="Customer Info">
                    <mx:Label text="THIS PANEL IS BLANK FOR EXAMPLE PURPOSES." color="#000000"/>
                    </mx:Canvas>
                    </mx:ViewStack>
                    </mx:Application>

                    Component:
                    <?xml version="1.0" encoding="utf-8"?>
                    <mx:VBox xmlns:mx=" http://www.adobe.com/2006/mxml">
                    <mx:Canvas id="search" label="Search" width="100%" height="100%">
                    <mx:Panel x="175" y="55" width="353" height="257" layout="absolute">
                    <mx:Form x="10" y="10" width="313" height="116">
                    <mx:FormItem label="First Name:">
                    <mx:TextInput id="firstName"/>
                    </mx:FormItem>
                    <mx:FormItem label="Last Name:">
                    <mx:TextInput id="lastName"/>
                    </mx:FormItem>
                    <mx:FormItem direction="horizontal">
                    <mx:Button label="Submit" id="btnSubmit" click="enterNames()"/>
                    <mx:Button label="Clear" id="btnClear" click="clearInputs()"/>
                    </mx:FormItem>
                    </mx:Form>
                    <mx:Label x="66" y="153" text="" textAlign="center" width="201" id="returnedName"/>
                    </mx:Panel>
                    </mx:Canvas>
                    </mx:VBox>

                    ActionScript (Note, lines 4,5,10,11 have "Access of undefined property" errors in Flex Builder 2):
                    // ActionScript file
                    public function clearInputs():void
                    {
                    firstName.text="";
                    lastName.text="";
                    }
                    public function enterNames():void
                    {
                    var fullName:String;
                    fullName = firstName.text + " " + lastName.text;
                    returnedName.text = fullName;
                    }

                    • 7. Re: Newbie Architecture Question
                      ntsiii Level 3
                      First, can you access functions and variables in guts.as from main.mxml?

                      And can you access controls in main.mxml from guts.as?

                      You should. The source= syntax is a compile time operation the is exactly the same as having the script in a block directly in the main.mxml page.

                      Tracy
                      • 8. Re: Newbie Architecture Question
                        nyfeman Level 1
                        Tracy --

                        In the example above, if you back it up half a step and have all the mxml in one file (vs. having a component), it still works. So yes, you can access everything both ways from the main mxml document.

                        Al
                        • 9. Re: Newbie Architecture Question
                          nyfeman Level 1
                          OK -- figured it out. I split the AS into three files and called the pertinent AS file from each particular component.