10 Replies Latest reply on Aug 23, 2007 11:23 PM by P Steven

    Binding keyframe of custom componet to data

    P Steven Level 1
      I have created a custom mxml component that has 3 text fields and an embedded swf. The embedded swf has 20 key frames, each of which is a different icon.

      I display multiple copies of this custom component in a repeater using an ArrayCollection as the data provider.

      What I want to do is be able to display the relevant keyframe based on a field in my ArrayCollection that corresponds to the file type

      For example if the value of extensionType is "jpg" I want the embedded swf to display a keyframe with the label "jpg"

      Here is the code of my custom component

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="450" height="44" cornerRadius="15" borderStyle="none" backgroundColor="#ffffff" themeColor="#ff0000">

      <mx:Script>
      <![CDATA[
      [Bindable]
      public var fileNumberTxt:String ="1";
      [Bindable]
      public var fileNameTxt:String ="File Name";
      [Bindable]
      public var fileSizeTxt:String ="120k";

      ]]>
      </mx:Script>
      <mx:Text x="10" y="16" text="{fileNumberTxt}" />
      <mx:Text x="114" y="16" text="{fileNameTxt}" />
      <mx:SWFLoader x="60" y="2" width="40" height="40" source="@Embed('assets/icons.swf')" />
      <mx:Text x="314" y="16" text="{fileSizeTxt}" />

      </mx:Canvas>

      And here is my Array Collection

      <mx:ArrayCollection id="scfDummyData" >

      <mx:Object fileNumber="1" fileNameValue="project plan" fileSize="12k" extensionType="doc" />
      <mx:Object fileNumber="2" fileNameValue="essay" fileSize="122k" extensionType="doc" />
      <mx:Object fileNumber="3" fileNameValue="project" fileSize="18k" extensionType="jpg"/>

      </mx:ArrayCollection>

      I am using Zinc to allow the user to drop files from their system onto my application. When they do this, I update my ArrayCollection.

      I just can't figure out how to bind the label of the embedded swf to the extenstionType variable in the ArrayCollection.

      Any help much appreciated

      Thanks

      Paul


        • 1. Re: Binding keyframe of custom componet to data
          P Steven Level 1
          Can anyone identify what I am doing wrong below. Basically my ArrayCollection has a value for imagePath that relates to the symbol that needs to be displayed in a custom component.

          The code for the custom component is below the ArrayCollection code. I think I am really close to getting this sorted but just can’t quite figure it out.

          Currently it is always displaying the DOC symbol

          <mx:ArrayCollection id="scfDummyData" >

          <mx:Object fileNumber="1" fileNameValue="project plan" fileSize="12k" extensionType="doc" imagePath="JPG"/>
          <mx:Object fileNumber="2" fileNameValue="essay" fileSize="122k" extensionType="doc" imagePath="JPG" />
          <mx:Object fileNumber="3" fileNameValue="project" fileSize="18k" extensionType="jpg" imagePath="DOC" />

          </mx:ArrayCollection>


          <?xml version="1.0" encoding="utf-8"?>
          <mx:Canvas xmlns:mx=" http://www.adobe.com/2006/mxml" width="450" height="44" cornerRadius="15" borderStyle="none" backgroundColor="#ffffff" themeColor="#ff0000">

          <mx:Script>
          <![CDATA[

          [Bindable]
          [Embed('assets/icons.swf', symbol='icons2')]
          public var JPG:Class;

          [Bindable]
          [Embed('assets/icons.swf', symbol='icons3')]
          public var DOC:Class;


          [Bindable]
          public var fileNumberTxt:String ="1";
          [Bindable]
          public var fileNameTxt:String ="File Name";
          [Bindable]
          public var fileSizeTxt:String ="120k";
          [Bindable]
          public var imagePath:Class = DOC;

          ]]>
          </mx:Script>
          <mx:Text x="10" y="16" text="{fileNumberTxt}" />
          <mx:Text x="114" y="16" text="{fileNameTxt}" />
          <mx:SWFLoader x="60" y="2" width="40" height="40" source="{imagePath}" />
          <mx:Text x="314" y="16" text="{fileSizeTxt}" />

          </mx:Canvas>
          • 2. Re: Binding keyframe of custom componet to data
            ntsiii Level 3
            I have not yet tried binding from an app loaded by SWFLoader. I do not know the rules of binding between a loaded swf and its parent.

            So far I have just explicitly set values in the loaded swf directly, using the content property.

            Tracy
            • 3. Binding keyframe of custom componet to data
              P Steven Level 1
              Thanks for the reply Tracy

              I will be sure to let you know if I find out how. I am so close - as it is displaying the DOC type for each item in the repeater but this is because that is what is set as the default in the public var imagePath:Class = DOC;

              It just doesn't seem to be binding using the values in the array collection.

              If you can't do this - then I do not hold out much hope of me working it out:)



              • 4. Binding keyframe of custom componet to data
                Craig Grummitt Level 3
                the way you have written your code, you want your imagePath in the custom component to refer to a class(either DOC or JPG), but imagePath in the ArrayCollection refers to a string. without having the luxury of the entirety of your code in front of me to experiment with, i would experiment with one of the following two options next:

                1. make JPG and DOC static variables in the custom component(hmm i'm not sure if embedded assets can be made static?), and refer to them in the ArrayCollection in ImagePath eg. customComponent.JPG

                OR

                2. make imagePath in the custom component a String getter/setter, and within the setter set the SWFLoader source based on the string value that is passed.
                • 5. Re: Binding keyframe of custom componet to data
                  P Steven Level 1
                  Thanks Craig and apologies for delay in replying - I have been dealing with all the other problematic issues on this project.

                  I have tried your suggestions unfortunately with no success. The first solution failed as you suspected as it did not allow embedded assets to be static.

                  I tried the second solution but got error messages about duplicate setter function so probably I just did not write the code correctly.

                  If you can spare a few mins to amend my code above based on your suggestion about the string getter / setter then it would be much appreciated and I will be sure to buy you lots of Somerset Cider next time you are in the UK.

                  • 6. Re: Binding keyframe of custom componet to data
                    Craig Grummitt Level 3
                    i don't have flex on this computer so this is all out of my head so apologies for any errors etc.

                    i would replace:
                    <mx:SWFLoader x="60" y="2" width="40" height="40" source="{imagePath}" />
                    with:
                    <mx:SWFLoader id="icon" x="60" y="2" width="40" height="40"/>

                    and i would replace:
                    [Bindable]
                    public var imagePath:Class = DOC;

                    with:
                    public function set imagePath(value:String):void {
                    icon.source=this[value]; //if this line doesn't work then we can always resort to if else
                    }
                    • 7. Re: Binding keyframe of custom componet to data
                      P Steven Level 1
                      Hey Craig thanks for the swift reply

                      I just tried what you suggested and I am getting the following error

                      Attempting to initialize inherited property 'icon' of type 'Class' with value of incompatible type

                      It appears to be referring to this line

                      <mx:SWFLoader id="icon" x="60" y="2" width="40" height="40" click="onButtonClick()"/>
                      • 8. Re: Binding keyframe of custom componet to data
                        P Steven Level 1
                        Hey Craig! You star!!

                        I changed it from icon to icon2 and it works a treat. Perhaps icon is a reserved work.

                        I am well happy - thanks mate!!!
                        • 9. Re: Binding keyframe of custom componet to data
                          Craig Grummitt Level 3
                          i'm going to hold you to that Somerset Cider!
                          • 10. Re: Binding keyframe of custom componet to data
                            P Steven Level 1
                            You can have a barrel of the stuff for getting me through this! Thanks again!!