19 Replies Latest reply on Oct 13, 2010 4:13 PM by rtalton

    Dirty Dirty Hack?

    Seglespaan

      Hi,

       

      first off I know this isn't anything but a complete hack, but hey

       

      what I have is a tile list that gets populated from an array collection. This array collection gets populated when the user add's and removes stuff from the stage.

       

      What I'm using the tile list for is similar to the layers palette in photoshop.

       

      Problem is, if the user adds 1,2,3 to the stage in that order, 1 is on the bottom, 3 is on the top. However in the tile list 1 is on the top and three is on the bottom.

       

      Other than being in the wrong order it works perfectly, when I drag an item in the tile list it changes its layer position on the stage. similarly if I change layer on stage it updates the tile list. All be it in reverse order to what I'm looking for.

       

      So here comes the hack,

       

      if I give the tile list a scaleY of -1 it flips it vertically and behaves exatly as I want (with the tiles upside down)

       

      what I'm looking for now is a way to flip the image and label within the item renderer vertically also, but applying the same scaleY moves the image and label outwith the tile and only the edge is visible.

       

      I can't seem to find a way to change the positioning of the label or image, but if I could just nudge them about 30 pixels upwards I could go to bed happy

       

      any ideas?

       

      Cheers

       

      Tim

        • 1. Re: Dirty Dirty Hack?
          Devtron Level 3

          You got a screenshot of this dirty dirty hack in action?


          • 2. Re: Dirty Dirty Hack?
            Seglespaan Level 1

            Sure, here it is with just the tilelist's scaleY = -1

             

            1.JPG

             

            And here it is with the image of the item renderer also set to scaleY = -1

             

            2.JPG

             

            Like I say other than the item renderer being upside down it does everything I need,

             

            Tim

            • 3. Re: Dirty Dirty Hack?
              Devtron Level 3

              ok, so basically you need to reverse the order of the list?

               

              do you ever have more than 3 or 4 items in the list?

              • 4. Re: Dirty Dirty Hack?
                Seglespaan Level 1

                Yeah, its an unknown amount as the user essentially creates it by adding and removing things from the stage, I'd say it won't normally go above 20 though!

                • 5. Re: Dirty Dirty Hack?
                  Devtron Level 3

                  what about something like this?

                   

                  yourArrayCollection.source.reverse();

                   

                  ".source" references to the collection's underlying array object, which you can reverse.

                   

                  Would that do it? I dont quite understand turning the images upside down, sorry...??

                  • 6. Re: Dirty Dirty Hack?
                    Seglespaan Level 1

                    I've tried using

                     

                    dataprovider ="{myArrayCollection.source.reverse()}" but for some reason the tiles don't show at all then

                    • 7. Re: Dirty Dirty Hack?
                      Devtron Level 3

                      Seglespaan wrote:

                       

                      I've tried using

                       

                      dataprovider ="{myArrayCollection.source.reverse()}" but for some reason the tiles don't show at all then

                      ^ my guess would be that you cant bind in that fashion maybe? You may have to handle the reverse in the Script code somewhere? Im not sure...

                      • 8. Re: Dirty Dirty Hack?
                        Seglespaan Level 1

                        The following gets the tiles to display,

                         

                        var test:Array = new array();

                        test = myArrayCollection.source.reverse();

                         

                        if i then use test as my dataprovider for my list, the tiles show in the order i want, but then changing the order of the list items no longer affects the initial array collection order.

                         

                        do u know how I could then bind the test array to the initial array collection so that when test changed the initial array collection changed too?

                        • 9. Re: Dirty Dirty Hack?
                          Devtron Level 3

                          Ok, well I think you need to mark your arrayCollection as bindable.

                           

                          [Bindable]

                          private var myArrayCollection:ArrayCollection = new ArrayCollection();

                           

                          ^ this way, any changes are "bound" to it. You can reverse it, and since you reference it as "bindable", all changes are persisted to all controls bound to that ArrayCollection. You could have several UI controls (TileList, DataGrid, etc) bound to one ArrayCollection. When a change happens, all UI controls receive that change.

                           

                          Your dataprovider should be set to "{myArrayCollection}" only.

                           

                          try adding a button (for testing purposes) that performs the array "reverse". Keep the reverse logic seperate from your binding statement or MXML markup.

                          • 10. Re: Dirty Dirty Hack?
                            Seglespaan Level 1

                            See what I'll be doing is this tho,

                             

                            [Bindable]

                            myAc = new arraycollection();

                             

                             

                            myACrev = new array();

                             

                             

                            function onMyAcChanged (collection event){

                                 myAcRev = myAc.source.revers();

                            }

                             

                             

                            <tile list

                                 dataprovider={myAcRev}>

                            </ tile list>

                             

                             

                            So when I add or remove items to my array collection the array updates and as its bound to the tile list the tile list updates, what I need now is

                             

                            when I drag and drop an item in the tile list the myAcRev array's order should also change, how can I mirror this change back into myAc array collection

                             

                            Cheers

                             

                            Tim

                            • 11. Re: Dirty Dirty Hack?
                              Devtron Level 3

                              maybe try marking it as Bindable too?


                              • 12. Re: Dirty Dirty Hack?
                                rtalton Level 4

                                what I have is a tile list that gets populated from an array collection. This array collection gets populated when the user add's and removes stuff from the stage.

                                 

                                 

                                1) What type of component on the stage is holding the "stuff"?

                                2) Is this a drag & drop technique? If not, how are you adding the data to the ArrayCollection for the TileList?

                                 

                                By default, adding anything to the AC adds it to the last position in the AC.

                                • 13. Re: Dirty Dirty Hack?
                                  Seglespaan Level 1

                                  1) What type of component on the stage is holding the "stuff"?

                                   

                                  The container is a canvas,

                                   

                                   

                                  2) Is this a drag & drop technique? If not, how are you adding the data to the ArrayCollection for the TileList?

                                   

                                   

                                  No its not drag and drop, the user clicks a button either to ad text or image,

                                   

                                  based on this I create a new instance of say a TextModel,

                                  then I use dataModel.addItem(myTextModel);

                                  after adding it to the array collection I listen for the change to the collection and then use canvas.addChild(TextView);

                                  • 14. Re: Dirty Dirty Hack?
                                    rtalton Level 4

                                    1) The TielList is behaving as expected, right?

                                    2) On the Canvas...how are you arranging the added items when calling canvas.addChild()? From what I understand, the Canvas is the issue, but since the position of its children is not determined by the AC, how are you positioning the newly added children? I'm not getting the connection between the AC and the Canvas.

                                    • 15. Re: Dirty Dirty Hack?
                                      Seglespaan Level 1

                                      I'm using the AC as my data model, using a controller to make changes to the data model and then listening for these changes before updating my view.

                                       

                                      When i add a child to the canvas I always want it to appear above the other children and am adding it accordingly, so the order of the children on the canvas is the reverse order of my AC,

                                       

                                      how can I change the the default behavior of the AC so that when I add to it it adds to index 0?

                                      • 16. Re: Dirty Dirty Hack?
                                        rtalton Level 4

                                        You can do AC.addItemAt(0) to add to the top of the AC (0 is the index number where you want it added), but if I understand you correctly, this will affect the TileList, making its items appear in reverse order of what you intend.

                                        • 17. Re: Dirty Dirty Hack?
                                          Seglespaan Level 1

                                          hmmm. for some reason no matter what order i add to the AC in it still displays in tile list the same way

                                           

                                          AC.addItemAt(0)

                                           

                                          or

                                           

                                          AC.addItemAt(AC.length)

                                          • 18. Re: Dirty Dirty Hack?
                                            Seglespaan Level 1

                                            I lied, adding them at 0 does order them in tile list the correct way, but now when I drag a tile it's not changing the order on the canvas? 

                                            • 19. Re: Dirty Dirty Hack?
                                              rtalton Level 4

                                              Since you are manually setting the x/y positions of objects on the Canvas, you will need to manually re-order them if you make a change to the TileList's order. The Canvas does not have a DataProvider, so you need to do the re-ordering; the Canvas cannot 'know' the order of the AC's items.