10 Replies Latest reply on Mar 15, 2010 8:32 PM by David_F57

    Tile Layout Help!!

    Luis Pedro Ferreira Level 1

      Hi all!!

       

      I'm trying to use a DataGroup with some CustomComponents in it. The DataProvider is an ArrayCollection loaded from a RemoteService (PHP).

      The CustomComponent's are added to the DataGroup by AS using addElement().

      Now with all the components in place, making kind of a grid of boxes, i want to move one particular CustomComponent to X=0 and Y=0 of the DataGroup.

       

      So, for example, we have:

       

      [ 0 ] [ 1 ] [ 2 ] [ 3 ] [ 4 ]

      [ 5 ] [ 6 ] [ 7 ] [ 8 ] [ 9 ]

       

      Now, if i click on the component [ 3 ], how can i move it to DataGroup.X=0 and DataGroup.Y=0 knowing that its layout is set to TileLayout?

      And i know that's possible change its size of a particular DataGroup itemRender without messing with the others.

       

      ...once i saw a movie with a bunch of buttons doing that demo (simple adjustments with layouts) with Flex 3 and Flex 4, but now i can't find it

        • 1. Re: Tile Layout Help!!
          David_F57 Level 5

          Hi,

           

          Do you need to use datagroup ?, tiled lists already have the ability to move objects around in the list. With datagroup you can swap elements around but I think you need to write all the associated logic.

           

           

          David.

          1 person found this helpful
          • 2. Re: Tile Layout Help!!
            Shongrunden Adobe Employee

            I'm not sure how you are using addElement() since that method doesn't exist on DataGroup.  Can you elaborate on that?

             

            When you want to move something that is taking part in a layout you should use postLayoutTransformOffsets, for example this will set the renderer to the 0,0 position of the DataGroup when it is clicked on:

             

            <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                           xmlns:s="library://ns.adobe.com/flex/spark">
            
                <s:DataGroup id="dataGroup" width="150" height="150">
                    <s:itemRenderer>
                        <fx:Component>
                            <s:ItemRenderer click="moveRenderer()">
                                <fx:Script>
                                    <![CDATA[
                                        private function moveRenderer():void {
                                            postLayout.x = -x;
                                            postLayout.y = -y;
                                        }
                                    ]]>
                                </fx:Script>
                                <s:postLayoutTransformOffsets>
                                    <s:TransformOffsets id="postLayout" />
                                </s:postLayoutTransformOffsets>
                                <s:Rect width="44" height="44">
                                    <s:fill><s:SolidColor color="red" /></s:fill>
                                </s:Rect>
                                <s:Label verticalCenter="0" horizontalCenter="0" text="{data}" />
                            </s:ItemRenderer>
                        </fx:Component>
                    </s:itemRenderer>
                    <s:layout>
                        <s:TileLayout />
                    </s:layout>
                    <s:dataProvider>
                        <s:ArrayList>
                            <fx:String>1</fx:String>
                            <fx:String>2</fx:String>
                            <fx:String>3</fx:String>
                            <fx:String>4</fx:String>
                            <fx:String>5</fx:String>
                            <fx:String>6</fx:String>
                            <fx:String>7</fx:String>
                            <fx:String>8</fx:String>
                            <fx:String>9</fx:String>
                        </s:ArrayList>
                    </s:dataProvider>
                </s:DataGroup>
                
            </s:Application>
            
            
            1 person found this helpful
            • 3. Re: Tile Layout Help!!
              Luis Pedro Ferreira Level 1

              Hi Shongrunden, i haven't tried your sugestion, but answering your question, i'm adding the components into the datagroup like this:

               

              var newComponent:MyComponent = new MyComponent;

              myDataGroup.addElement(newComponent);

               

              If it's wrong, i can tell you that it gives me what i'm expecting on the screen but i'm happy to accept your comments and sugestions.

              Thanks

              • 4. Re: Tile Layout Help!!
                Shongrunden Adobe Employee

                Is "myDataGroup" actually a Group?

                 

                This code sample gives a compile error that addElement() doesn't exist:

                 

                <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
                               xmlns:s="library://ns.adobe.com/flex/spark">
                    
                    <fx:Declarations>
                        <fx:Component className="CustomComponent">
                            <s:Group>
                                <s:Label text="custom" />
                            </s:Group>
                        </fx:Component>
                    </fx:Declarations>
                    
                    <s:Button label="add" click="dataGroup.addElement(new CustomComponent())" />
                    
                    <s:DataGroup id="dataGroup" />
                    
                </s:Application>
                
                
                • 5. Re: Tile Layout Help!!
                  Luis Pedro Ferreira Level 1

                  You're absolutely right. I'm using a group with a tile layout and adding elements to that group.

                  I still have to try your 1st example....i will post something back here to let you know.

                  I will need more help later to remove and add elements to that group rearranging the remaining ones

                  • 6. Re: Tile Layout Help!!
                    David_F57 Level 5

                    Hi,

                     

                    When you are dealing with data its always best to use the appropriate container, the problem I see with datagroup is that its more about 'static' layout rather than dynamic, it doesn't give you direct access to the dataprovider and that is where you should do the layout manipulation(my opinion). I put together a small example of manipulating a datagroup through the itemrenderer. There is probably better ways of doing this but I like it when I can have minimal code with maximum result.

                     

                    This app can delete the object or move it - first pos/left/right

                     

                    http://gumbo.flashhub.net/tilegroup/  source enabled.

                     

                     

                    Just some more to think about

                     

                     

                    David.

                    • 7. Re: Tile Layout Help!!
                      Shongrunden Adobe Employee

                      Hi David,

                       

                      In case you didn't know, after beta2 we added an itemIndex property to ItemRenderer so if you are using a recent build you can use that property instead of myParent.dataProvider.getItemIndex(data) to simplify things a little more.

                       

                      You're right, using the appropriate container is important because how you should approach changing elements/renderers in a Group/DataGroup is different.  If you want to contain visual elements then use a Group where you have direct access to those elements and are free to make changes on them directly.  If you have data items then use a DataGroup and if you want to make changes to a specific renderer then you should modify the data for that item and make sure your renderer is setup to react to that change.

                      • 8. Re: Tile Layout Help!!
                        David_F57 Level 5

                        Hi Shongrunden,

                         

                        So many changes, so little time

                         

                        I totally missed that addition to the renderer(i'm on pre-release so i'm usually reasonably up todate with the sdk), makes so much more sense to have direct access to the provider index. At the moment I find it more effective to remove an item then add it to the required position this takes care of a lot of issues I have had with in the past with objects disappearing from the 'list'. From the code I put up do you think that this is an approriate way to address item re-ordering.

                         

                        David.

                        • 9. Re: Tile Layout Help!!
                          Shongrunden Adobe Employee

                          Your approach looks good to me.  Group has swapElements() and swapElementsAt() to make life easier, but DataGroup's dataProvider (typed as IList) doesn't provide equivalent methods so you will have to remove then add like you suggested.

                           

                          It can also be tempting to use the setItemAt() method to change the index of an item, but I recommend shying away from that method unless you really understand what it does and want that behavior.  This bug is old, but sort of explains the issues: http://bugs.adobe.com/jira/browse/SDK-17909.

                           

                          The way you remove then add the item to the dataProvider to do a swap or change of index is the recommended approach.

                           

                          Note that there is a bug in your ">" button.  When first loading the app try clicking on the ">" of "Chips" and nothing will happen.

                          • 10. Re: Tile Layout Help!!
                            David_F57 Level 5

                            Hi,

                             

                            Yeah, I blame my mother for that bug, 2 decades of being pressured into touch typing only led to increased typo's, I subtracted 2 instead of 1 when testing for last item in the list. Moral is don't let your super fast typist mother see you use a keyboard, just brings back memories of catholic school education and nun's with knuckle breaking rulers.

                             

                            David