14 Replies Latest reply on Nov 23, 2009 5:12 AM by mewk

    <s:SkinnableContainer 12% height  problem

    nikos101 Level 2

      Hi friends, yet again I come to the greatest forum

       

      In this code the 12% height in    <s:SkinnableContainer  skinClass="skins.Row"  height="12%"> seems to be interpreted as 100%

       

         <s:List id="list" width="100%" color="0x0050AA" dataProvider="{ratesResult}" height="100%" change="this.selectedItem=List(event.target).selectedItem">
              <s:itemRenderer >
                  <fx:Component  id="fixingItem">
                     
                      <s:SkinnableContainer  skinClass="skins.Row"  height="12%">
                         
                     
                      <s:HGroup  >
                         
                          <mx:Image height="10%" source="{outerDocument.imgCls}">
                             
                          </mx:Image>
                         
                          <s:Label text="{this.data.buyRate}" width="50%">
                             
                          </s:Label>
                      </s:HGroup>
                      </s:SkinnableContainer>
                  </fx:Component>
              </s:itemRenderer>
          </s:List>

       

       

       

      Also the code below gets a warning "Data binding will not be able to detect assignments to "data"."

       

                <s:Label text="{this.data.buyRate}" width="50%">

        • 1. Re: <s:SkinnableContainer 12% height  problem
          nikos101 Level 2

          Basically I want each child of the list to be 12% of the height of the list

          • 2. Re: <s:SkinnableContainer 12% height  problem
            nikos101 Level 2

            I tried this too but it didn't work

             

            <s:SkinnableContainer  skinClass="skins.Row"  height="{this.parent.height/8}">

            • 3. Re: <s:SkinnableContainer 12% height  problem
              nikos101 Level 2

              This works:

               

                  <s:List id="list" width="100%"  color="0x0050AA" dataProvider="{ratesResult}" height="100%" change="this.selectedItem=List(event.target).selectedItem">
                      <s:itemRenderer >
                          <fx:Component   id="fixingItem">
                             
                              <s:SkinnableContainer  skinClass="skins.Row"  >
                                 
                             
                              <s:HGroup verticalAlign="middle" height="{this.parent.height/8}">
                                 
                                  <mx:Image height="80%" source="{outerDocument.imgCls}">
                                     
                                  </mx:Image>
                                 
                                  <s:Label text="{this.data.buyRate}" width="50%">
                                     
                                  </s:Label>
                              </s:HGroup>
                              </s:SkinnableContainer>
                          </fx:Component>
                      </s:itemRenderer>
                  </s:List>

              • 4. Re: <s:SkinnableContainer 12% height  problem
                David_F57 Level 5

                Hi,

                 

                Are you still having problems with the label text - as I would have thought this would also bind to outerdocument.

                 

                David.

                • 5. Re: <s:SkinnableContainer 12% height  problem
                  nikos101 Level 2

                  Unfortunately yes


                  • 6. Re: <s:SkinnableContainer 12% height  problem
                    nikos101 Level 2

                    In this code the line does not update the size of the image when the parent window is resized, only the monent the application is run

                     

                          <s:HGroup verticalAlign="middle" height="{this.parent.height/8}" >

                     

                     

                     

                        <s:List id="list" width="100%"  color="0x0050AA" dataProvider="{ratesResult}" height="100%" change="this.selectedItem=List(event.target).selectedItem">
                            <s:itemRenderer >
                                <fx:Component   id="fixingItem">
                                   
                                    <s:SkinnableContainer  skinClass="skins.Row"  >

                     

                                        <fx:Script>
                                            <![CDATA[
                                                protected function image1_clickHandler(event:MouseEvent):void
                                                {
                                                    // TODO Auto-generated method stub
                                                }
                                            ]]>
                                        </fx:Script>

                     

                                       
                                   
                                    <s:HGroup verticalAlign="middle" height="{this.parent.height/8}" >
                                       
                                        <!--<mx:Image height="80%" source="{this.data.image}" click="image1_clickHandler(event)">
                                        -->   
                                        <mx:Image height="80%" source="{outerDocument.Europe}" click="image1_clickHandler(event)">
                                       
                                        </mx:Image>
                                       
                                        <s:Label text="{this.data.buyRate}" width="50%">
                                           
                                        </s:Label>
                                    </s:HGroup>
                                    </s:SkinnableContainer>
                                </fx:Component>
                            </s:itemRenderer>
                        </s:List>

                    • 7. Re: <s:SkinnableContainer 12% height  problem
                      nikos101 Level 2

                      On the binding problem, in debug view I could not find the data variable anywhere when I paused my application somewhere in the itemrenderer

                       

                      <s:Label text="{this.data.buyRate}" width="50%">
                                              <s:creationComplete>//Debug here_______________________________
                                                  <![CDATA[
                                                     
                                                  ]]>
                                              </s:creationComplete>
                                             
                                          </s:Label>

                      • 8. Re: <s:SkinnableContainer 12% height  problem
                        nikos101 Level 2

                        Ok I managed to get round my hight problems by doing this:

                         

                        <s:List id="list" width="100%"  color="0x0050AA" dataProvider="{ratesResult}" height="100%" change="this.selectedItem=List(event.target).selectedItem">
                                <s:itemRenderer >
                                   
                                    <fx:Component   id="fixingItem">
                                       
                                       
                                        <s:SkinnableContainer  skinClass="skins.Row"  height="{outerDocument.list.height/8}">

                         

                         

                        the parent.height just doesn't work

                         

                        The binding stuff is still giving me grief :{(

                        • 9. Re: <s:SkinnableContainer 12% height  problem
                          mewk Level 3

                          to use an item renderer correctly you need to use <s:ItemRenderer> (notice capital i), which is a component that extends spark.components.Group but also has the methods to properly pass data from the dataProvider, etc.

                           

                          should be

                            <s:itemRenderer>
                                <fx:Component>
                                  <s:ItemRenderer>
                                    <s:SkinnableContainer height="12%" skinClass="skins.Row">
                                      <s:HGroup>
                                        <mx:Image height="10%" source="{outerDocument.imgCls}" />
                                        <s:Label text="{this.data.buyRate}" width="50%" />
                                      </s:HGroup>
                                    </s:SkinnableContainer>
                                  </s:ItemRenderer>
                                </fx:Component>
                              </s:itemRenderer>
                          

                           

                          - e

                          • 10. Re: <s:SkinnableContainer 12% height  problem
                            nikos101 Level 2

                            opps marked correct to soon

                             

                            That causes errors  when using Capital i

                             

                            Multiple initializers for property 'dataProvider'. (note: 'dataProvider' is the default property of
                            'spark.components.List').

                            • 11. Re: <s:SkinnableContainer 12% height  problem
                              mewk Level 3

                              you sure this isn't working?? it works fine in my test case. Note there is both an <s:itemRenderer> AND <s:ItemRenderer>

                               

                              <?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] public var ratesResult:ArrayCollection = new ArrayCollection();
                                    [Bindable] public var selectedItem:*;
                                    [Bindable] [Embed(source="assets/fall_leaf2.jpg")] public var imgCls:Class;
                                    
                                    private function init():void {
                                      for (var i:int=40; i<50; i++) {
                                        var o:Object = new Object();
                                        o.buyRate = i;
                                        ratesResult.addItem(o);
                                      }
                                    }
                                  ]]>
                                </fx:Script>
                                
                                <s:List id="list" width="100%" height="100%" color="0x0050AA"
                                    dataProvider="{ratesResult}"
                                    change="this.selectedItem=List(event.target).selectedItem">
                                  <s:itemRenderer>
                                    <fx:Component id="fixingItem">
                                      <s:ItemRenderer>
                                        <s:SkinnableContainer height="12%"> <!--skinClass="skins.Row"-->
                                          <s:HGroup>
                                            <mx:Image height="10%" source="{outerDocument.imgCls}" />
                                            <s:Label text="{this.data.buyRate}" width="50%" />
                                          </s:HGroup>
                                        </s:SkinnableContainer>
                                      </s:ItemRenderer>
                                    </fx:Component>
                                  </s:itemRenderer>
                                </s:List>
                              </s:Application>
                              

                              • 12. Re: <s:SkinnableContainer 12% height  problem
                                nikos101 Level 2

                                Opps I didn't notice the inner one the code now has no errors or warnings:

                                 

                                    <s:List id="list" width="100%"  color="0x0050AA" dataProvider="{ratesResult}" height="100%" change="this.selectedItem=List(event.target).selectedItem">
                                       
                                        <s:itemRenderer >
                                           
                                            <fx:Component   id="fixingItem">
                                                <s:ItemRenderer height="{outerDocument.list.height/8}" width="100%">
                                                   
                                                   
                                                   
                                                    <s:SkinnableContainer  skinClass="skins.Row"  width="100%" height="100%" >
                                                        <s:creationComplete>
                                                            <![CDATA[
                                                            var i:int = this.parent.height;
                                                           
                                                            ]]>
                                                        </s:creationComplete>
                                                       
                                                        <s:HGroup verticalAlign="middle"  height="100%">
                                                            <mx:Image height="80%" source="{this.data.image}" />
                                                           
                                                            <s:Label text="{this.data.buyRate}" width="50%">
                                                               
                                                            </s:Label>
                                                        </s:HGroup>
                                                    </s:SkinnableContainer>
                                                </s:ItemRenderer>
                                            </fx:Component>
                                        </s:itemRenderer>
                                    </s:List>

                                 

                                The inner     <s:ItemRenderer tag makes things a bit confusing

                                • 13. Re: <s:SkinnableContainer 12% height  problem
                                  mewk Level 3

                                  itemRenderer is a property of <s:List>

                                  ItemRenderer is an actual UIComponent which get instantiated x number of times by some factory method.

                                   

                                  the lowercase itemRenderer parallels the following situation:

                                   

                                  <s:List dataProvider="{myArrayCollection}" />
                                  

                                  or writing

                                  <s:List>
                                    <s:dataProvider>
                                      <s:ArrayCollection id="myAC" />
                                    </s:dataProvider>
                                  <s:List/> 
                                  

                                  (in this case you don't really need to have <s:dataprovider>, but only because dataprovider is the default property of List...)

                                   

                                  generally, lowercase mxml indicates a property of the parent while uppercase indicates a separate class.

                                   

                                  - e

                                  1 person found this helpful
                                  • 14. Re: <s:SkinnableContainer 12% height  problem
                                    nikos101 Level 2

                                    makes sense thanks