Retrieve specific index from arraycollection

Question

I can't seem to work this out. I want to display a list that starts with a specific position in an arraycollection, without changing the array. The goal is to have a set of full screen images that the user can swipe through (like in an ebook), and for the chapter index i want to start with a specific indexnumber in the arraycollection.

Is there a simple way to tell the Itemrenderer to start at a specific indexnumber in the arraycollection.

My code that starts at index 0:

<s:List id="pagedList"
        width="100%" height="100%"
        verticalScrollPolicy="off" horizontalScrollPolicy="on"
        pageScrollingEnabled="true">

    <s:layout>
        <s:TileLayout orientation="rows" requestedRowCount="1" 
                      columnWidth="{pagedList.width}" rowHeight="{pagedList.height}" 
                      verticalGap="0" horizontalGap="0"/>
    </s:layout>
    <s:ArrayCollection id="contentData">
        <s:Image source="assets/cover.jpg"/>
        <s:Image source="assets/introduction.jpg"/>
        <s:Image source="assets/H1/40_days.jpg"/>
    </s:ArrayCollection>
    <s:itemRenderer>
        <fx:Component>
            <s:ItemRenderer>
                <s:Group>
                    <s:Image source="{data.source}" horizontalAlign="center"/>
                </s:Group>
            </s:ItemRenderer>
        </fx:Component>
    </s:itemRenderer>  
</s:List>

score 1 · Answer 1 · answered Apr 09 '13 at 11:04

AFAIK there is no way to do this. You'll have to sort the dataprovider so that it matches the order in which you want to display the items.

If you don't want to modify the original collection, you can create a ListCollectionView, pass in the original collection to the constructor and add a sort to the ListCollectionView. You can then assign the collection view as the dataprovider of your list.

score 1 · Answer 2 · answered Apr 09 '13 at 15:09

1

It all starts with your data. The data itself will need to contain info about a chapter offset. Typically you will store a collection of the offset seek points.

For example:

Pages:     1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
Chapters:  1     2       3   4        5

A chapter object will hold a reference to which page to start from and its total length. A set of seek buttons will iterate through a chapter collection, telling your list to start from the appropriate offset (ie chapter 2, starts on index 4 and is 4 items long).

Your page objects can either be a single image, or a collection of images per page. In either case, what you're really building from a data point of view is a hierarchical collection.

answered Apr 09 '13 at 15:09

Mike Petty

949
6
6

Thanks for your insight, but my problem is that I can't seem to set the index. I've tried it with selectedIndex but when I run the app it just seems to ignore it. Can you point me in the right direction (pherhaps with some sample code)? – user1482027 Apr 11 '13 at 12:52
selectedIndex will work, but it's not binding in the way you think it should be. It only will take care of selection not if the index is within the actual viewport. For that, you will need to use ensureIndexIsVisible(index:int):void – Mike Petty Apr 11 '13 at 15:57

score 0 · Answer 3 · answered Apr 09 '13 at 12:20

0

if your goal is to show a particular image first why not set the selectedIndex for the List itself. I mean give u'r dataobjects in the dataprovider some id and pass on the index to the list. hope this help, let me know if this is not what is intended

answered Apr 09 '13 at 12:20

Krishnam G

1
1

If i'm not mistaken, your method will still give the particular image automaticly an index of 0, so if a button sends someone to the last page of the book, al the other pages will come after that. – user1482027 Apr 09 '13 at 13:34
I'm beginning to think yoyr method is the right one, but I can't seem to get it to work. Can you point me to some sample code? That would be greatly appreciated. – user1482027 Apr 11 '13 at 12:38

score 0 · Answer 4 · answered Apr 10 '13 at 20:22

Might the ensureIndexIsVisible method on the Spark List work?

Note: You may need to click the "Products" checkbox at the top of the following html page to actually see this method.

http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/spark/components/List.html#ensureIndexIsVisible()

Retrieve specific index from arraycollection

4 Answers4