Collection view structure
Using collection views in Skylight
CollectionViewRecipe.zip
3KB
Binary
Collection View Recipe Application Bundle
The root view of the recipe consists of a card that opens the
collectionView. The root view is always created with a list structure, so we use a second view in this recipe to see how the collection view structure works.The
collectionViewitself is bound to the array of items in skylight.application.data.collectionCards. Each of these items specifies a type, along with other possible values used by the cards when performing the data binding. The card id selector for the view is set to type in the view's properties panel, which means that each item in the collectionCards array will map to a card in the view whose id matches the type value of the item.The
collectionView consists of one card for each type. The types of the items in the collectionCards array used by this recipe are:text: The card with this id also binds to the value of thetextproperty of the item, as well as possibly thefontSizeproperty of the item. For the latter, it defaults tosmall.text-with-icon: The card with this id also binds to the value of thetextproperty of the item.image-user: This card has an image of a user.image-check: This card has an image of a check mark.
While this recipe uses an array from application data as the source of items for the collection view, other sources could be used including session and local data.
For more information about collection view structures as well as when to use a list view structure vs a collection view structure, see View Structures.
Last modified 2yr ago