10 Replies Latest reply on Jul 5, 2010 7:54 AM by Sebastien V.

    Flex Application and Component Talking to each other ?

    djh88ukwb Level 1

      Hello all.

       

      I have built out quite a large project in flex and want to try to condense it down a bit by taking some code out and putting it in individual components.  That I can then call in.  Not only to reduce the code line count, but to also make it easier to make improvements, and should others get involved with the project they can be allocated a component rather than the whole code.  I feel it makes sense to try and work it this way.

       

      I should note that im using Flash Builder 4.

       

      In order to try this I have been working on an example.

       

      What I was hoping to do is pass variables and values from a component to the main app, is this possible ?

       

      This is what I have been trying although I get errors, because the main code cant see the text field in the component.

       

      Main file code

      <?xml version="1.0" encoding="utf-8"?>
      <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
                     xmlns:s="library://ns.adobe.com/flex/spark"
                     xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" width="737" height="470" xmlns:ns1="*">
          <s:states>
              <s:State name="one"/>
              <s:State name="two"/>
          </s:states>
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
         
          <fx:Script>
              <![CDATA[
                 
                  private function btn_submit():void
                  {
                      if (txt_user.text = 'hello')
                      {
                          currentState = 'two';
                      }
                      else
                      {
                          currentState = 'one';
                      }
                  }
                 
              ]]>
          </fx:Script>
         
          <s:Label x="10" y="10" text="Test Log In from Component" width="717" textAlign="center" fontWeight="bold" fontSize="18"/>
          <ns1:Loginform x="190" y="71">
          </ns1:Loginform>
      </s:Application>

       

      Component Code

      <?xml version="1.0" encoding="utf-8"?>
      <s:Group xmlns:fx="http://ns.adobe.com/mxml/2009"
               xmlns:s="library://ns.adobe.com/flex/spark"
               xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
          <fx:Declarations>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
          </fx:Declarations>
          <s:TextInput x="53" y="62" width="298" id="txt_user"/>
          <s:Button x="281" y="92" label="Button" click="btn_submit()"/>
      </s:Group>

       

      I'm not sure if what I want to do (pass data from a component to the main application and back) is possible.

       

      If anyone could elaborate on this I would be thankful !

        • 1. Re: Flex Application and Component Talking to each other ?
          Sebastien V. Level 3

          You need to use events to do so.

           

          Let me explain. Your main application can be aware of the component exposed methods, variables and events, but the component should not be aware of the main application's behaviour. This allows you to re-use your component in any application if needed, and to make the component or the application evolve without having to modify the other entity (application or component).

           

          For your example, the component should define a custom event, something like submitLogin. Once you declared it in the component you can use it in your application just like any other Flex event:

           

          <ns1:Loginform
               x="190" y="71"
               submitLogin="btn_submit()"
               />
          

           

          For the other way (application -> component) you should use public methods to perform the actions required.

           

          Hope this helps.

          1 person found this helpful
          • 2. Re: Flex Application and Component Talking to each other ?
            djh88ukwb Level 1

            Thank you for the answer, I think I understand a bit more now, in how to do it and the logic behind it.

             

            One problem I face thou, i want to bring in a component that is goind to record a web camera.  I have the component built out.

             

            The component has a text field "publishName"  and the value of this is the filename of the video saved.

             

            Now i want to be able to pass a value from my main application into this text field,  is this at all possible ?

            • 3. Re: Flex Application and Component Talking to each other ?
              Sebastien V. Level 3

              If the "publishName" property of the component is writable, then yes.

               

              Two solutions:

               

              - First if you use always the same fileName:

              <ns45:RecorderComponent
                   fileName="theFileNameYouWantHere"
                   />
              

               

               

              - Then if you want to change it you can always use:

              <ns45:RecorderComponent
                   id="myRecorder"
                   />
              

              And then in Script code:

              myRecorder.fileName = "myFileNameOrWhateverStringHere";
              

               

              If the property is not writable because it has no setter, you will need to provide one (that is if you can modify the component code).

              • 4. Re: Flex Application and Component Talking to each other ?
                djh88ukwb Level 1

                Thank you for your kind help

                 

                The component i have will allow me to edit the code, i have all the source code, i have already edited alot of it.

                 

                How do i know if the component is writeable or not ?

                 

                I will be using a variable to determine the file name so that should be easy.

                 

                When you mentioned

                <ns45:RecorderComponent
                     fileName="theFileNameYouWantHere"
                     />

                 

                If my component is called <local:AVChat>  the textfield is called "publishName" and my variable is "loadedID"

                 

                would i use the following code

                 

                <local:AVChat publishName="{loadedID}"/>

                 

                Again thanks for your help

                • 5. Re: Flex Application and Component Talking to each other ?
                  Sebastien V. Level 3

                  Speaking about the component being writable makes no sense.

                  A property can be writable or not. If the property is public you will be able to read from it and write in it from anywhere, so it is writable.

                  But in AS3 you can also use getter and setter to define properties. For example:

                   

                  private var _bool:Boolean;
                  
                  public function get bool():Boolean {
                       return bool;
                  }
                  
                  public function set bool( value:Boolean ):void {
                       _bool = bool;
                  }
                  

                   

                  You would not know the difference when using the component because between a public var bool:Boolean and the example above the behaviour is exactly the same.

                  But when using a getter you can make the property read-only by not implementing the setter, or setting it as private. So in the example above, if the second method is removed, that makes the bool property read-only.

                   

                  And yes, the code you posted seems right given the names you are using.

                  • 6. Re: Flex Application and Component Talking to each other ?
                    djh88ukwb Level 1

                    Hello, right i see sorry, my mis understanding !

                     

                    Ok i have added the code as you suggested, but get an error back.

                     

                    I added this

                     

                        <local:AVChat x="50" y="200" id="app" visible="false" publishName="test">
                        </local:AVChat>

                     

                    PublishName is deffinetly the name of the text field.

                     

                    But  i get this error.

                     

                    Initializer for 'publishName' : values of type mx:controls.TextInput cannot be  represented in text

                     

                    Any ideas why i seem to be getting this ?

                    • 7. Re: Flex Application and Component Talking to each other ?
                      Sebastien V. Level 3

                      Either you have a TextInput named "test" in your main application, or publishName in the AVChat component is a TextInput and not a String.

                      • 8. Re: Flex Application and Component Talking to each other ?
                        djh88ukwb Level 1

                        Hello,

                         

                        Yes my publishName is a text input

                         

                        <mx:TextInput text="" id="publishName" visible="true" width="158"  y="165" x="10"/>

                         

                        I thought this was what you meant sorry.  I miss interpreted it sorry.

                         

                        Is it still possible to send data to this ?

                        • 9. Re: Flex Application and Component Talking to each other ?
                          djh88ukwb Level 1

                          Actually no worries i have worked it out,  i created a string variable in my component and passed the variable from my main app into that and then passed that thru the textfield !

                           

                          Thanks for all the help

                          • 10. Re: Flex Application and Component Talking to each other ?
                            Sebastien V. Level 3

                            You can still send a Sting into the text property of the TextInput...

                            But if the name is given by the main application I don't see the point of having a TextInput in the component.