Multicards: Bundles and Paginating
Sometimes you have more data that you can fit onto a single card, like a collection of photos. Sometimes you have many distinct cards that you want to group together, like commonly tagged items on a blogroll.
A bundle is a collection of cards. It visually distinguishes itself from single cards with a small page curl (a small inverted white triangle) in the upper-right corner of the first card, called the cover card—see the following figure.
Figure 16. Cover-card chat bundle
You can paginate or flip through a bundle by tapping on the cover card to expand it, then swiping through each card. The Mirror API provides two ways to support multicards (cards with multiple screens): You can either thread multiple timeline items or paginate one timeline item.
Threading Bundles
The heavyweight method of bundling is to thread cards. In this case, you create separate cards, all of which share a bundleId. This is a good choice if you can’t create all off the cards at once, if you want to make every card its own item, if you have an unbounded number of cards, or if you want to set text rather than HTML. Threading is so named because it’s similar to an email thread, as opposed to paging, with is more akin to a single item with many pages.
In a threaded group of items, one can have isBundleCover set to true. If no cover item is set with isBundleCover, the most recently added timeline item will serve as a de facto cover.
Let’s say you want Lunch Roulette to present a user with a main cuisine choice, but if the user doesn’t like it, you want an alternate ready.
| chapter-4/src/test/book/glass/LunchRoulette.java | |
| | // Generate a unique Lunch Roulette bundle id |
| | String bundleId = "lunchRoulette" + UUID.randomUUID(); |
| | |
| | // First Cuisine Option |
| | TimelineItem timelineItem1 = new TimelineItem() |
| | .setHtml( renderRandomCuisine( ctx ) ) |
| | .setBundleId( bundleId ) |
| | .setIsBundleCover( true ); |
| | timeline.insert( timelineItem1 ).execute(); |
| | |
| | // Alternate Cuisine Option |
| | TimelineItem timelineItem2 = new TimelineItem() |
| | .setHtml( renderRandomCuisine( ctx ) ) |
| | .setBundleId( bundleId ); |
| | timeline.insert( timelineItem2 ).execute(); |
This will create two timeline items. The first choice is in front. Every successive alternate choice with the same bundleId will be folded under the cover card. You can see them side-by-side in the following figure.
Figure 17. The cover card and an alternate choice
Paginating
There’s another case where multiple cards can appear for a single timeline item. If you set text that spans more than one page, Glass will split the item into multiple pages, and the text break will end with an ellipsis. It isn’t a bundle—it doesn’t display a page curl in the corner. You read all of the text by tapping the card, which will open a menu with a Read More option. The option looks like Figure 18, Paginating with Read More.
Figure 18. Paginating with Read More
Then, you’ll be able to scroll from card to card just like in bundles. We’ll revisit Read More and how to make a more nuanced use of this action via HTML in Chapter 7, Designing for Glass.
You might ask what benefit a threaded bundle has over paginating. A general guideline is that if the cards are immediately known, part of a complete thought, or expected to be fixed, then use paginating. If the cards will grow in an unbounded way or are otherwise unique items, thread them.
We’re about to discuss how to add menus to timeline items. Another benefit of bundling is that you can include a set of menus for each card, rather than the one menu that paginating allows.