13 Replies Latest reply on May 9, 2009 6:08 AM by Gregory Lafrance

    TileList - increase distance between itemRenderer elements

    BregoXX
      sorry for my English, i`m from Belarus
      But i have a question
      How to increase distance between itemRenderer elements in TileList?
        • 1. Re: TileList - increase distance between itemRenderer elements
          Gregory Lafrance Level 6

          To increase the distance between each item in the TileList (each instance of the itemRenderer), use the horizontalGap style property (or vertical distance for other containers, use verticalGap).

           

          <mx:TileList horizontalGap="30"/>

           

          or in ActionScript

           

          myTL.setStyle("horizontalGap", 30);

           

          For individual controls WITHIN your item renderer, once again, use the horizontalGap and verticalGap for the containers in the renderer, or the paddingLeft, paddingRight, paddingTop, paddingBottom styles for individual controls in the renderer as necessary.

           

          If this answers your question, please mark it as such.

          • 2. Re: TileList - increase distance between itemRenderer elements
            Michael Borbor Level 4

            Verify the control's styles to see if it has paddingTop, 

            paddingBottom. If it does then you can use them to do what you want.

             

            Sincerely,

             

            Michael

             

            El 08/05/2009, a las 8:47, BregoXX <forums@adobe.com> escribió:

             

            >

            sorry for my English, i`m from Belarus

            But i have a question

            How to increase distance between itemRenderer elements in TileList?

            >

            • 3. Re: TileList - increase distance between itemRenderer elements
              BregoXX Level 1

              Verify the control's styles to see if it has paddingTop, 

              paddingBottom. If it does then you can use them to do what you want.

               

              Sincerely,

               

              Michael

              I need to increase horizontal distance.

               

              To increase the distance between each item in the TileList (each instance of the itemRenderer), use the horizontalGap style property (or vertical distance for other containers, use verticalGap).

               

              <mx:TileList horizontalGap="30"/>

               

              or in ActionScript

               

              myTL.setStyle("horizontalGap", 30);

              TileList don`t have such property/style as verticalGap and horizontalGap

              • 4. Re: TileList - increase distance between itemRenderer elements
                Michael Borbor Level 4

                Could you post how you declare your TileList?

                 

                Sincerely,

                 

                Michael

                 

                El 08/05/2009, a las 9:07, BregoXX <forums@adobe.com> escribió:

                 

                >

                >> Verify the control's styles to see if it has paddingTop,

                >> paddingBottom. If it does then you can use them to do what you want.

                >>

                >> Sincerely,

                >>

                >> Michael

                I need to increase horizontal distance.

                >

                >> To increase the distance between each item in the TileList (each 

                >> instance of the itemRenderer), use the horizontalGap style property 

                >> (or vertical distance for other containers, use verticalGap).

                >>

                >> <mx:TileList horizontalGap="30"/>

                >>

                >> or in ActionScript

                >>

                >> myTL.setStyle("horizontalGap", 30);

                TileList don`t have such property/style as verticalGap and 

                horizontalGap

                >

                • 5. Re: TileList - increase distance between itemRenderer elements
                  Gregory Lafrance Level 6

                  Then ensure the renderer is wrapped in a container like HBox or VBox and then use paddingLeft or paddingRight.

                  • 6. Re: TileList - increase distance between itemRenderer elements
                    BregoXX Level 1

                    <mx:TileList

                    id = "documentList" height = "100%" columnCount="3"

                    minHeight="

                    40"

                    width = "

                    100%"

                    borderStyle="

                    none"

                    verticalScrollPolicy="

                    on"

                    selectable = "

                    false"

                    doubleClickEnabled = "

                    false"

                    itemClick = "showDocumentVersion(event)"

                    dataProvider = "

                    {documentVesions}"

                    itemRenderer = "

                    de.dts.isy3suite.plugin.bcspecificpage.documentlist.DocumentVersionItemRender">

                     

                     

                     

                    </mx:TileList>

                    • 7. Re: TileList - increase distance between itemRenderer elements
                      Gregory Lafrance Level 6

                      We need to see the code for your renderer. If you do not have control over it, wrap it in an HBox.

                      • 8. Re: TileList - increase distance between itemRenderer elements
                        BregoXX Level 1
                        <?xml version = "1.0" encoding = "utf-8"?>
                        <mx:VBox xmlns:mx = "http://www.adobe.com/2006/mxml"
                                 borderColor="red"
                                 borderStyle="solid"
                                 width = "100"
                                 height = "200"
                                 horizontalAlign = "left"
                                 verticalGap="0"
                                 horizontalScrollPolicy = "off"
                                 verticalScrollPolicy = "off">
                            <mx:Script>
                                <![CDATA[
                             
                        [Bindable]
                                    public var preparingFunction:PluginConfigurationFunction = FunctionManager.instance.getFunctionByName("Preparing") as PluginConfigurationFunction;
                                    public function getScale(documentVersion:DocumentVersion):Number
                                    {
                                        var spread:Spread = documentVersion.spreads.getItemAt(0) as Spread;
                                        var cf:Number = getCoefficient(100, 60, spread.width, spread.height);
                                        return cf;
                                    }
                                    public function getCoefficient(parentWidth:Number, parentHeight:Number, childWidth:Number, childHeight:Number):Number
                                    {
                                        var k1:Number = parentWidth / childWidth;
                                        var k2:Number = parentHeight / childHeight;
                                        return (k2 < k1) ? k2 : k1;
                                    }
                                    private function onCreationComplete():void
                                    {
                                        preview.source = PreviewManager.getDocumentVersionPreviewUrl(data.identity, 1 /*getScale(data as DocumentVersion)*/ , preparingFunction.pluginConfigurationIdentity);
                                    }
                                    private function checkBox_clickHadler(event:MouseEvent):void
                                    {
                                        event.stopPropagation();
                                    }
                                ]]>
                            </mx:Script>
                         <mx:Image id = "preview"
                          width = "100%"
                          height = "100%"
                          useHandCursor = "true"
                          buttonMode = "true"
                          mouseChildren = "false"
                          creationComplete = "onCreationComplete()"/>
                        
                            <mx:Label text = "Layout-Nr.: {data.articleNumber}"
                          styleName="bcDocumentVersionItemRendererStyle"
                          useHandCursor = "true"
                          buttonMode = "true"
                          mouseChildren = "false"
                          paddingLeft = "10"/>
                            <mx:CheckBox label = "Standard Layout"
                             styleName="bcDocumentVersionItemRendererStyle"
                             rollOverEffect="null"
                                paddingLeft = "10"
                                click = "checkBox_clickHadler(event)"/>
                            <mx:Label text = "{data.masterDocument.name}"
                                styleName="bcDocumentVersionItemRendererStyle"
                                useHandCursor = "true"
                                buttonMode = "true"
                                mouseChildren = "false"
                                paddingLeft = "10"/>
                            <mx:Label text = "{data.masterDocument.description}"
                          styleName="bcDocumentVersionItemRendererStyle"
                          fontWeight="normal"        
                               useHandCursor = "true"
                               buttonMode = "true"
                               mouseChildren = "false"
                               paddingLeft = "10"/>
                        </mx:VBox>
                        

                        i attach image

                        From above is old project on JavaScript

                        From below is new project on Flex

                        And i must to do view similar.

                        • 10. Re: TileList - increase distance between itemRenderer elements
                          BregoXX Level 1

                          It is necessary to be engaged in language studying, because that does not suffice knowledge for high-grade dialogue.

                          In each row i have 3 itemRender

                          First itemRender is placed correctly, but second not correctly and third more uncorrectly then second in comparison with the old project.

                          And if i use paddingLeft in itemRenderer so wrong would be placed first itemRenderer

                          • 11. Re: TileList - increase distance between itemRenderer elements
                            Gregory Lafrance Level 6

                            I'm not understanding what you are trying to say. What is wrong with the second, what is wrong with the third? Need a more detailed description of what is wrong, using terms we all can clearly understand, like x pixels to the right, x pixels too far to the right, etc. Maybe upload screen shots.

                             

                            Also, maybe post simplified yet 'complete' code that exhibits the problem.

                            • 12. Re: TileList - increase distance between itemRenderer elements
                              BregoXX Level 1

                              Greg Lafrance wrote:

                               

                              I'm not understanding what you are trying to say. What is wrong with the second, what is wrong with the third? Need a more detailed description of what is wrong, using terms we all can clearly understand, like x pixels to the right, x pixels too far to the right, etc. Maybe upload screen shots.

                               

                              Also, maybe post simplified yet 'complete' code that exhibits the problem.

                              I attach screen shot in 8 message

                              • 13. Re: TileList - increase distance between itemRenderer elements
                                Gregory Lafrance Level 6

                                What do you desire that is different from the samples in this code:

                                 

                                ---------------------- data.xml --------------------------

                                <?xml version="1.0" encoding="utf-8"?>
                                <photos>
                                    <photo>
                                        <image>images/black30_30.JPG</image>
                                        <caption>Black Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/blue30_30.JPG</image>
                                        <caption>Blue Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/brown30_30.JPG</image>
                                        <caption>Brown Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/gray30_30.JPG</image>
                                        <caption>Gray Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/green30_30.JPG</image>
                                        <caption>Green Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/Olive30_30.JPG</image>
                                        <caption>olive Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/red30_30.JPG</image>
                                        <caption>Red Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/teal30_30.JPG</image>
                                        <caption>Teal Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/white30_30.JPG</image>
                                        <caption>White Square</caption>
                                    </photo>
                                    <photo>
                                        <image>images/yellow30_30.JPG</image>
                                        <caption>Yellow Square</caption>
                                    </photo>
                                </photos>

                                 

                                -------------- MainApp.mxml ------------------------

                                <?xml version="1.0"?>
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
                                  creationComplete="photosRequest.send();">
                                  <mx:Script>
                                    <![CDATA[
                                      import mx.rpc.events.ResultEvent;
                                      import mx.collections.XMLListCollection;
                                     
                                      [Bindable] private var xlc:XMLListCollection;
                                     
                                      private function photosHandler(evt:ResultEvent):void{
                                        xlc = new XMLListCollection(evt.result..photo); 
                                      }
                                    ]]>
                                  </mx:Script>
                                  <mx:HTTPService id="photosRequest" url="data.xml" result="photosHandler(event)"
                                    resultFormat="e4x"/>
                                  <mx:HBox width="100%">
                                    <mx:TileList dataProvider="{xlc}" rowHeight="100"
                                      columnWidth="100">
                                      <mx:itemRenderer>
                                        <mx:Component>
                                          <mx:VBox horizontalAlign="center" verticalAlign="middle"
                                            backgroundColor="0xCC4455" borderStyle="solid"
                                            borderThickness="2">
                                            <mx:Image source="{data.image}"/>
                                            <mx:Text text="{data.caption}"/>
                                          </mx:VBox>
                                        </mx:Component>
                                      </mx:itemRenderer>
                                    </mx:TileList>
                                    <mx:TileList dataProvider="{xlc}" rowHeight="100"
                                      columnWidth="130">
                                      <mx:itemRenderer>
                                        <mx:Component>
                                          <mx:VBox horizontalAlign="center" verticalAlign="middle"
                                            backgroundColor="0xCC4455" borderStyle="solid"
                                            borderThickness="2" paddingLeft="20" paddingRight="20">
                                            <mx:Image source="{data.image}"/>
                                            <mx:Text text="{data.caption}"/>
                                          </mx:VBox>
                                        </mx:Component>
                                      </mx:itemRenderer>
                                    </mx:TileList>
                                  </mx:HBox>
                                  <mx:HBox width="100%">
                                    <mx:TileList dataProvider="{xlc}" rowHeight="100"
                                      columnWidth="150">
                                      <mx:itemRenderer>
                                        <mx:Component>
                                          <mx:VBox horizontalAlign="center" verticalAlign="middle"
                                            backgroundColor="0xCC4455" borderStyle="solid"
                                            borderThickness="2" paddingLeft="30" paddingRight="30">
                                            <mx:Image source="{data.image}"/>
                                            <mx:Text text="{data.caption}"/>
                                          </mx:VBox>
                                        </mx:Component>
                                      </mx:itemRenderer>
                                    </mx:TileList>
                                    <mx:TileList dataProvider="{xlc}" rowHeight="100"
                                      columnWidth="170">
                                      <mx:itemRenderer>
                                        <mx:Component>
                                          <mx:VBox horizontalAlign="center" verticalAlign="middle"
                                            backgroundColor="0xCC4455" borderStyle="solid"
                                            borderThickness="2" paddingLeft="40" paddingRight="40">
                                            <mx:Image source="{data.image}"/>
                                            <mx:Text text="{data.caption}"/>
                                          </mx:VBox>
                                        </mx:Component>
                                      </mx:itemRenderer>
                                    </mx:TileList>
                                  </mx:HBox>
                                </mx:Application>