12 Replies Latest reply on Apr 22, 2009 8:16 PM by Flex harUI

    Composite labelField attribute?

    Miggl Level 1

      I would like to specify a composite labelField attribute (on a List control for example). The following works brilliantly, displaying a single field:

       

      <mx:List
           id="l_selected"
           dataProvider="{this._rightItems}"
           labelField="first_name"
           height="100%"
           width="100%"
      />
      

       

      Unfortunately, when I try the following, it failes:

      <mx:List
           id="l_selected"
           dataProvider="{this._rightItems}"
           labelField="first_name last_name"
           height="100%"
           width="100%"
      />
      
        • 1. Re: Composite labelField attribute?
          Gregory Lafrance Level 6

          Use labelFunction and concatenate as desired in the function.

          1 person found this helpful
          • 2. Re: Composite labelField attribute?
            Miggl Level 1

            I have been playing around with that, since my original post, but have yet been unsuccessful (see the following).

             

            Let me add a twist to the problem:

             

            I have a custom composite component. I would like to set the labelFunction dynamically outside of the component, allowing the consumer to define their own functions.

             

            My initial approach was to create a getter and setter for the function, but I have not been able to make that work.

            <mx:Script>
            <![CDATA[
                 private function showUserName(user:UserVO):String
                 {
                      return user.first_name + " " + user.last_name;
                 }
            ]]>
            </mx:Script>
            
            <myComponent
                 id="customComponent"
                 labelFunction="{showUserName}"
            />
            

             

            Then within the component, I have declared the following:

            <mx:Script>
            <![CDATA[
                 [Bindable]
                 private var _labelFunction     :Function;
                           
                 public function get labelFunction():Function
                 {
                      return this._labelFunction;
                 }
                 
                 public function set labelFunction(value:Function):void
                 {
                      this._labelFunction = value;
                 }
            ]]>
            </mx:Script>
            
            <mx:List
                 id="l_available"
                 labelFunction="{this._labelFunction}"
                 height="100%"
                 width="100%"
            />
            
            • 3. Re: Composite labelField attribute?
              Flex harUI Adobe Employee

               

               

              Alex Harui

              Flex SDK Developer

              Adobe Systems Inc.

              Blog: http://blogs.adobe.com/aharui

              • 4. Re: Composite labelField attribute?
                Miggl Level 1

                Not sure I understand how a reference to your blog helps my situation. Please be a bit more specific if you actually have a solution, etc.

                • 5. Re: Composite labelField attribute?
                  -Hob Level 1

                  Currently your private var is marked [Bindable].  Try moving the [Bindable] tag to your public getter/setter and binding to that instead:

                   

                  <mx:Script>
                  <![CDATA[
                       
                       private var _labelFunction     :Function;
                       [Bindable]          
                       public function get labelFunction():Function
                       {
                            return this._labelFunction;
                       }
                       
                       public function set labelFunction(value:Function):void
                       {
                            this._labelFunction = value;
                       }
                  ]]>
                  </mx:Script>
                  
                  <mx:List
                       id="l_available"
                       labelFunction="{this.labelFunction}"
                       height="100%"
                       width="100%"
                  />
                  
                  
                  • 6. Re: Composite labelField attribute?
                    Flex harUI Adobe Employee

                    The "consumer" shouldn't need to use binding at all.

                     

                     

                     

                    -Hob's code will be more efficient, but it should have worked either way.

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

                    Blog: http://blogs.adobe.com/aharui

                    1 person found this helpful
                    • 7. Re: Composite labelField attribute?
                      Miggl Level 1

                      Thanks Hob and Alex,

                       

                      I still haven't been able to get your solution to work. So I thought I'd go back to basics and start from within the component by defining the labelFunction within the component.

                       

                      Unfortunately that doesn't seem to work either. Check out the following:

                           <mx:Script>
                                <![CDATA[
                                     private function showUserName(item:Object):String
                                     {
                                          //Alert.show("Test");
                                          //var user:UserVO = item as UserVO;
                                          //
                                          return "test";
                                     }
                                ]]>
                           </mx:Script>
                           <mx:List
                                id="l_available"
                                labelFunction="showUserName"
                                height="100%"
                                width="100%"
                           />
                      

                       

                      I don't know why this won't run. Even if I just put an alert in the showUsername function, it never seems to get called.

                      • 8. Re: Composite labelField attribute?
                        Miggl Level 1

                        So, I have been able to get my local function working within the component. (I was applying it to the incorrect component within my custom component, so I wasn't seeing the results. Duh! )

                        Now I'll see if I can get it working by passing in the function as you guys described above.

                         

                        Thanks!

                        -Mike

                        • 9. Re: Composite labelField attribute?
                          Miggl Level 1

                          After a bit of struggling, I was finally able to get it to work. Here's what I ended up with:

                           

                          Consuming App:

                               <mx:Script>
                                    <![CDATA[
                                         private var _showUserName     :Function                = function(item:Object):String
                                         {
                                              return item.first_name + " " + item.last_name;
                                         }
                                    ]]>
                               </mx:Script>
                               <composite:myCustomControl
                                    labelFunction="{_showUserName}"
                                    paddingTop="5"
                                    paddingRight="5"
                                    paddingBottom="5"
                                    paddingLeft="5"
                               />
                          
                          

                           

                          And then in the custom composite control:

                               <mx:Script>
                                    <![CDATA[
                                         [Bindable]
                                         private var _labelFunction     :Function;
                          
                                                  [Bindable]
                                         public function get labelFunction():Function
                                         {
                                              return this._labelFunction;
                                         }
                                         
                                         private function set labelFunction(value:Function):void
                                         {
                                              this._labelFunction = value;
                                         }
                                    ]]>
                               </mx:Script>
                               <mx:List
                                    labelFunction="{this._labelFunction()}"
                                    height="100%"
                                    width="100%"
                               />
                          
                          

                           

                          I choose not to use the getter method within the object, just because I would consider using a accessor method from within a class bad practice (personal feeling). I'll open another thread to discuss this, as I would be interested to see what is considered best practice in AS3.

                           

                          Thanks!

                          • 10. Re: Composite labelField attribute?
                            Flex harUI Adobe Employee

                            Well, I'm glad you got it working, but I don't think it should have taken all of that.

                             

                            Alex Harui

                            Flex SDK Developer

                            Adobe Systems Inc.

                            Blog: http://blogs.adobe.com/aharui

                            • 11. Re: Composite labelField attribute?
                              Miggl Level 1

                              What would you have in mind? I'd be eager to see a sleeker way of accomplishing this (not at all saying it can't be done, I just don't know, since I'm still new at FLEX).

                               

                              Thanks!

                              • 12. Re: Composite labelField attribute?
                                Flex harUI Adobe Employee

                                In theory:

                                Consuming App:  (No {} around labelFunction assignment

                                     <mx:Script>

                                          <![CDATA[

                                             & nbsp; private var _showUserName     :Function              & nbsp; = function(item:Object):String

                                             & nbsp; {

                                             & nbsp;      return item.first_name + " " + item.last_name;

                                             & nbsp; }

                                          ]]>

                                     </mx:Script>

                                     <composite:myCustomControl

                                          labelFunction="_sh owUserName" 

                                          paddingTop="5"

                                          paddingRight="5"

                                          paddingBottom="5"

                                          paddingLeft="5"

                                     />

                                 

                                 

                                 

                                And then in the custom composite control: (A single var and appropriate changes to labelFunction assignment

                                     <mx:Script>

                                          <![CDATA[

                                             & nbsp;

                                             & nbsp; public var labelFunction     :Function;

                                          ]]>

                                     </mx:Script>

                                     <mx:List

                                          labelFunction="{this.labelFunction}"

                                          height="100%"

                                          width="100%"

                                     />

                                 

                                Alex Harui

                                Flex SDK Developer

                                Adobe Systems Inc.

                                Blog: http://blogs.adobe.com/aharui