7 Replies Latest reply on Nov 30, 2009 1:57 PM by Rob M Love

    <s:itemRenderer> and custom component

    Rob M Love

      Hopefully someone can help. I'm trying to use a custom component is an item renderer and the custom component has its own states. I have not found any good instruction on how to implement. To give a brief description my custom component displays a simple label until the user hovers over it then shows an edit button where if the user clicks the edit button the label then becomes a text input and the edit button becomes a save button.

       

      My attempts at this have all failed, can someone please point me in the right direction?

       

      Many thanks,

      Rob

        • 1. Re: <s:itemRenderer> and custom component
          mewk Level 3

          here you go

           

          ---------------- Main.mxml ------------------------

          <?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"
                   minWidth="1024" minHeight="768"
                   initialize="init()">
            
            <fx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
                
                [Bindable] private var myAC:ArrayCollection = new ArrayCollection();
                
                private function init():void {
                  for (var i:int = 0; i < 10; i++ ) {
                    var o:Object = new Object();
                    o.myText = "some text " + i;
                    myAC.addItem(o);
                  }
                }
              ]]>
            </fx:Script>
            
            <s:List width="180" height="500" horizontalCenter="0" verticalCenter="0"
                dataProvider="{myAC}">
              <s:layout><s:VerticalLayout gap="20" horizontalAlign="center" /></s:layout>
              <s:itemRenderer>
                <fx:Component>
                  <s:ItemRenderer width="100" height="60"
                          currentState="normal">
                    <fx:Script>
                      <![CDATA[
                        import mx.controls.Alert;
                      ]]>
                    </fx:Script>
                    <s:states>
                      <s:State name="normal"/>
                      <s:State name="editing"/>
                      <s:State name="saving"/>
                    </s:states>
                    
                    <s:TextInput id="myTI" y="10" left="10" right="10"
                           text="hello" color="black"
                           rollOver.normal="currentState='editing'"
                           editable.normal="false" editable.editing="false" editable.saving="true"/>
                    <s:Button id="myButton" y="40" left="10" includeIn="editing,saving" 
                          label.editing="Edit" label.saving="Save"
                          click.editing="currentState='saving'" 
                          click.saving="Alert.show(myTI.text + ' was saved.')"/>
                  </s:ItemRenderer>
                </fx:Component>
              </s:itemRenderer>
            </s:List>
          </s:Application>
          

           

          --------------- Main.mxml ----------------------------

          <?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"
                   minWidth="1024" minHeight="768"
                   initialize="init()">
            
            <fx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
                
                [Bindable] private var myAC:ArrayCollection = new ArrayCollection();
                
                private function init():void {
                  for (var i:int = 0; i < 10; i++ ) {
                    var o:Object = new Object();
                    o.myText = "some text " + i;
                    myAC.addItem(o);
                  }
                }
              ]]>
            </fx:Script>
            
            <s:List width="180" height="500" horizontalCenter="0" verticalCenter="0"
                dataProvider="{myAC}"
                itemRenderer="itemRenderers.MyItemRenderer">
              <s:layout><s:VerticalLayout gap="20" horizontalAlign="center" /></s:layout>
            </s:List>
          </s:Application>
          

           

          ---------------- itemRenderers/MyItemRenderer ---------------------------

          <?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"
                   minWidth="1024" minHeight="768"
                   initialize="init()">
            
            <fx:Script>
              <![CDATA[
                import mx.collections.ArrayCollection;
                
                [Bindable] private var myAC:ArrayCollection = new ArrayCollection();
                
                private function init():void {
                  for (var i:int = 0; i < 10; i++ ) {
                    var o:Object = new Object();
                    o.myText = "some text " + i;
                    myAC.addItem(o);
                  }
                }
              ]]>
            </fx:Script>
            
            <s:List width="180" height="500" horizontalCenter="0" verticalCenter="0"
                dataProvider="{myAC}"
                itemRenderer="itemRenderers.MyItemRenderer">
              <s:layout><s:VerticalLayout gap="20" horizontalAlign="center" /></s:layout>
            </s:List>
          </s:Application>
          

           

          There are two applications here, one uses an inline itemerenderer and the other an external itemrenderer class. Both are a little buggy -- clicking the edit button doesn't always work, kinda strange!

           

          - e

          1 person found this helpful
          • 2. Re: <s:itemRenderer> and custom component
            Shongrunden Adobe Employee

            If you want to add custom states to a List or DataGroup you might want read this:

            http://forums.adobe.com/message/2082895

            1 person found this helpful
            • 3. Re: <s:itemRenderer> and custom component
              mewk Level 3

              Thanks Shongrunden,

               

              that was a useful post. Adding

               

              override protected function getCurrentRendererState():String {
                return currentState;
              }
              

               

              to the itemrenderer script blocks seems to work.

               

              - e

              • 4. Re: <s:itemRenderer> and custom component
                mewk Level 3

                ok, but LOL, again useVirtualLayout gives an inconsistent experience. Do I need to be more clever with my override??

                 

                - e

                • 5. Re: <s:itemRenderer> and custom component
                  Rob M Love Level 1

                  Thank you I really appreciate the example, do you by chance have an example for using a skinable container as the item renderer with custom states?

                   

                  I have read the other post about overriding the get state function but I do not quite understand how it is used.

                  • 6. Re: <s:itemRenderer> and custom component
                    mewk Level 3

                    I'm not sure I know what you are asking. <s:ItemRenderer /> is not skinnable but as Deepa said,

                    Though a Spark item renderer is not a skinnable component (it does not derive from SkinnableComponent) it very much acts like one - honoring all of the visual and state contracts that a skinnable component honors

                    so simply use ItemRenderer as you would a skinnable component.

                     

                    BTW, itemRenderer is simply a Group with some extra functionality, if it helps, just think of ItemRenderer as you would Group

                     

                    - e

                     

                     

                    ok, and if you're still stuck, just send in your "skinable container" and we'll get it itemrenderer ready.

                    • 7. Re: <s:itemRenderer> and custom component
                      Rob M Love Level 1

                      Okay the light has gone off! thanks guys I finally get it.

                      I was trying to make it more than was and as usual over thinking it.

                       

                      Thanks again,

                      Rob