6 Replies Latest reply on Feb 4, 2010 5:38 AM by el_kolo

    TileList - gaps between items

    el_kolo

      I have no idea whats wrong with my project because I cant set gaps between buttons in my TileList... Some one can help?

       

      <mx:TileList dataProvider="{TileListdp}"
             itemRollOver="TileListSend(event)"
             itemRollOut="TileListSendBreak(event)">
           <mx:itemRenderer>
               <mx:Component>
                   <mx:Button verticalGap="10" horizontalGap='10'/>
               </mx:Component>
           </mx:itemRenderer>

      </mx:TileList>

      Is this correct? Because it doesn't work...

        • 1. Re: TileList - gaps between items
          ShardulSingh Level 3

          Pls try something like this......Hope this will help you.

           

          <?xml version="1.0"?>
          <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
              <mx:Script>
                  <![CDATA[
                      import mx.collections.ArrayCollection;
                      
                       [Bindable]
                       private var acDataProvider : ArrayCollection = new ArrayCollection([
                       {label : 'Btn1'},
                       {label : "Btn2"},
                       {label : "Btn4"},
                       {label : "Btn4"}]
                       );
                  ]]>
              </mx:Script>
             <mx:Panel title="TileList Demo" height="100%" width="100%">
                  <mx:TileList height="100%" width="300" maxColumns="2" dataProvider="{acDataProvider}">
                            <mx:itemRenderer>
                               <mx:Component>
                                  <mx:VBox horizontalAlign="center" verticalAlign="middle" paddingTop="15" paddingBottom="15" paddingLeft="15" paddingRight="15">
                                      <mx:Button width="100" height="50" label="{data.label}"/>   
                                  </mx:VBox>
                               </mx:Component>
                           </mx:itemRenderer>
                  </mx:TileList>
              </mx:Panel>
          </mx:Application>

           

           

           

          with Regards,

          Shardul Singh Bartwal

          • 2. Re: TileList - gaps between items
            el_kolo Level 1

            Thank U!!! It's working great!

            • 3. Re: TileList - gaps between items
              el_kolo Level 1

              I've tried to do the same for VBOX with images a their labels and It doesnt work... I dont uderstand positioning objects in TileList;/

              • 4. Re: TileList - gaps between items
                ShardulSingh Level 3

                Hi,

                It should not be problem at ur end for images,may be some height and width you are giving will be hardcoded and not sufficient.

                Pls check the below.Hope this will help you.

                 

                <?xml version="1.0"?>
                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="100%" height="100%">
                    <mx:Script>
                        <![CDATA[
                            import mx.collections.ArrayCollection;
                           
                             [Bindable]
                             private var acDataProvider : ArrayCollection = new ArrayCollection([
                             {label : 'Image1',imgPath:"assets/img1.jpg"},
                             {label : "Image2",imgPath:"assets/img2.jpg"},
                             {label : "Image3",imgPath:"assets/img3.jpg"},
                             {label : "Image4",imgPath:"assets/img4.jpg"},
                             {label : 'Image5',imgPath:"assets/img5.jpg"},
                             {label : "Image6",imgPath:"assets/img6.jpg"},
                             {label : "Image7",imgPath:"assets/img7.jpg"},
                             {label : "Image8",imgPath:"assets/img8.jpg"}
                             ]
                             );
                        ]]>
                    </mx:Script>
                   <mx:Panel title="TileList Demo" height="100%" width="100%">
                        <mx:TileList height="100%" dataProvider="{acDataProvider}" borderStyle="solid" borderColor="0xAAAAAA">
                                  <mx:itemRenderer>
                                     <mx:Component>
                                        <mx:Canvas width="200" height="150" left="10" right="10" top="10" bottom="10">
                                            <mx:VBox width="100%" height="100%" horizontalAlign="center" verticalAlign="middle"
                                                borderStyle="solid" cornerRadius="5" backgroundColor="0xcccccc"
                                                left="10" right="10" top="10" bottom="10"
                                                paddingLeft="10" paddingRight="10" paddingTop="10" paddingBottom="10">
                                                <mx:Image width="100%" height="80%" maintainAspectRatio="false" source="{data.imgPath}"/>
                                                <mx:Label width="100%" height="20%" text="{data.label}"/>  
                                            </mx:VBox>
                                        </mx:Canvas>
                                     </mx:Component>
                                 </mx:itemRenderer>
                        </mx:TileList>
                    </mx:Panel>
                </mx:Application>

                 

                 

                 

                 

                 

                with Regards,

                Shardul Singh Bartwal

                1 person found this helpful
                • 5. Re: TileList - gaps between items
                  el_kolo Level 1

                  Great! It is working. Thank u very much for your help!

                  • 6. Re: TileList - gaps between items
                    el_kolo Level 1

                    ekhm... could you help me last time?

                    I want to change this your last code to 3 column Tile List, width 700 height 400. In Panel (TIleList) I want to see only 1 row and scroll to see other rows.

                    I tried to change canvas size but I receive extra scroll on the right...

                     

                    tileList.JPG

                    EDIT: Ok i have right size now but scroll bar behave strange... It doesn't scroll row by row, but only from top to bottom...