8 Replies Latest reply on Sep 28, 2009 4:24 PM by sebestenyb

    spark ButtonBar itemRenderer

    sebestenyb

      Hi

       

      The name of this property suggests that I can pass a component to it, implementing IItemRenderer, and the bar will render the data with this - even custom - component. But it doesn't seem to work. Do I miss something here? The ButtonBar still shows ButtonBarButton instances.

       

           
                
           
           
                
                     
                          
                          
                          
                     
                
           
      
      // ------------------------------ MyItemRenderer
      
          
              
          
          
      
      
        • 1. Re: spark ButtonBar itemRenderer
          sebestenyb Level 1

          <?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/halo"

          xmlns:local="*">

          <s:layout>

          <s:VerticalLayout />

          </s:layout>

          <s:ButtonBar id="myButtonBar" itemRenderer="MyItemRenderer">

          <s:dataProvider>

          <mx:ArrayCollection>

          <fx:Object label="Label 01" data="Data 01" />

          <fx:Object label="Label 01" data="Data 01" />

          <fx:Object label="Label 01" data="Data 01" />

          </mx:ArrayCollection>

          </s:dataProvider>

          </s:ButtonBar>

          </s:Application>

          <?xml version="1.0" encoding="utf-8"?>
          <s:ItemRenderer
              xmlns:mx="library://ns.adobe.com/flex/halo"
              xmlns:s="library://ns.adobe.com/flex/spark">
              <s:states>
                  <s:State name="normal" />
              </s:states>
              <s:SimpleText id="labelElement"/>
          </s:ItemRenderer>

          • 2. Re: spark ButtonBar itemRenderer
            Flex harUI Adobe Employee

            Yeah, that's a bug.  We should hide that property from the doc.  Please file one if there isn't one already.  ButtonBar uses middleButton (and optional firstButton and lastButton) instead.

             

            Alex Harui

            Flex SDK Developer

            Adobe Systems Inc.

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

            • 3. Re: spark ButtonBar itemRenderer
              sebestenyb Level 1

              So I may define my custom component and pass as a middleButton to the ButtonBar? My ButtonBar still renders the default ButtonBarButtons.

               

              <?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/halo"

              xmlns:local="*">

              <s:layout>

              <s:VerticalLayout />

              </s:layout>

              <s:ButtonBar id="myButtonBar" middleButton="MyItemRenderer">

              <s:dataProvider>

              <mx:ArrayCollection>

              <fx:Object label="Label 01" data="Data 01" />

              <fx:Object label="Label 01" data="Data 01" />

              <fx:Object label="Label 01" data="Data 01" />

              </mx:ArrayCollection>

              </s:dataProvider>

              </s:ButtonBar>

              </s:Application>

               

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

              <s:ItemRenderer

              xmlns:fx="http://ns.adobe.com/mxml/2009"

              xmlns:s="library://ns.adobe.com/flex/spark"

              xmlns:mx="library://ns.adobe.com/flex/halo">

              <s:layout>

              <s:BasicLayout/>

              </s:layout>

              <s:states>

                      <s:State name="up" />

              </s:states>

                  <s:SimpleText id="labelElement" />

              </s:ItemRenderer>

              • 4. Re: spark ButtonBar itemRenderer
                sebestenyb Level 1

                Maybe I draft my target.

                 

                I'd like to create  ButtonBar with relatively complex dataProvider behind it, and I'd like to make the Buttons in the bar to reflect with multiple icons and text the changes in my dataProvider. So the Button's label goes after the 'label' property in my dataProvider, the icons go after for other properties. And they should be bound to the data changes.

                 

                What's the simpliest way to achieve that with the spark structure?

                 

                Thank you

                • 5. Re: spark ButtonBar itemRenderer
                  Peter deHaan Level 4

                  @sebestenyb,

                   

                  Take a look at http://blog.flexexamples.com/2009/07/28/displaying-icons-in-a-spark-buttonbar-control-in-f lex-4/. I think it shows how you can create a custom skin on the Spark ButtonBar control which specifies a custom skin for the ButtonBarButton middleButton.

                   

                  Peter

                  • 6. Re: spark ButtonBar itemRenderer
                    Flex harUI Adobe Employee

                    Hmm.  Something isn't working quite right.  Please file a bug.  For now you can supply the renderer in a custom skin.  See the ButtonBarSkin for an example.

                     

                    Alex Harui

                    Flex SDK Developer

                    Adobe Systems Inc.

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

                    • 7. Re: spark ButtonBar itemRenderer
                      sebestenyb Level 1

                      Yes, I aw that example, just I do not really like the idea it extracts the data.

                      I mean in the view, when a part of the skin finish it's render, it reach back to the class behind, and pull out the data.

                       

                      I though there must be a more sophisticated and simple solution

                       

                      If I check the framework, where the labelText property attached, I see that the model pushes the data down to the skin.

                       

                      I tried that too, but met with a few problem too. I mean I found it a bit funny:

                       

                      override public function set labelText( value:String ):void

                      {

                           if( super.data )

                           {

                                super.labelText = super.data.label

                           }

                      }

                       

                      but the real problem is that I couldn't figure out, how to add my icon's bitmap as a skinpart to be available from the codebehind.

                       

                      I tried to define like

                      [SkinPart(required="false")]

                      public var iconElement:BitmapImage;

                       

                      but if I do this, the labelElement simply disappears.

                       

                      So I guess I go for the example you attached, even if I do not really like. But at least it works.

                      Thank you.

                      • 8. Re: spark ButtonBar itemRenderer
                        sebestenyb Level 1

                        Yeah, I think this can be an issue too.

                         

                        I extend the ButtonBarButton, and add a new [SkinPart] metadata, and the ButtonBarButton's own skinparts are disappeared.

                         

                        If I overwrite the partAdded method to see what parts are added, only the new one appears in my traces.

                         

                        I guess the expected result would be to have both the ancestor and the extender class' skin parts.

                         

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

                        <s:Skin

                        xmlns:fx="http://ns.adobe.com/mxml/2009"

                        xmlns:s="library://ns.adobe.com/flex/spark"

                        xmlns:mx="library://ns.adobe.com/flex/halo"

                        xmlns:local="*">

                            <fx:Metadata> [HostComponent("spark.components.ButtonBar")] </fx:Metadata>

                            <s:states>

                            <s:State name="normal" />

                            <s:State name="disabled" />

                            </s:states>

                            <fx:Declarations>

                        <fx:Component id="middleButton" >

                        <local:MyButtonBarButton skinClass="MyButtonBarButtonSkin" />

                        </fx:Component>

                        </fx:Declarations>

                        <s:DataGroup id="dataGroup" width="100%" height="100%">

                            <s:layout>

                            <s:ButtonBarHorizontalLayout gap="-1"/>

                            </s:layout>

                            </s:DataGroup>

                        </s:Skin>

                         

                        package

                        {

                        import spark.components.ButtonBarButton;

                        import spark.primitives.BitmapImage;

                         

                        public class MyButtonBarButton extends ButtonBarButton

                        {

                        public function MyButtonBarButton()

                        {

                        super();

                        }

                         

                        [SkinPart(required="false")]

                        public var iconElement:BitmapImage;

                         

                        override public function set data( value:Object ):void

                        {

                        super.data = value

                        if( value )

                        {

                        iconElement.source = value.icon

                        }

                        }

                         

                        override protected function partAdded(partName:String, instance:Object):void

                        {

                             super.partAdded(partName, instance);

                             trace( " - partAdded() :: " + partName )

                        }

                        }

                        }