Methods of using a wrap descriptor to display a sequence of cards on a display device
A variety of data structures, components, runtime viewers and methods are described for defining, delivering and rendering wrapped packages of cards in a manner particularly well suited, but not limited to, display on mobile devices. Each card may selectively include media content, a palette of application functionality and/or supporting e-commerce related services. A wrap descriptor, composed of a plurality of card descriptors defines the structure, layout and content of a set of cards that constitute the wrap. The wrap descriptor may take the form of a JSON data object. A runtime viewer that executes on the rendering computing device may be used to transform the wrap descriptor into a runtime instance of the wrap that includes the content and functionality defined by the descriptor. In some implementations, the runtime viewer creates an object graph, which may then be converted to an object model suitable for rendering on the consuming device.
1. A method performed by a computing device of displaying cards on the computing device, the method comprising:
receiving a wrap descriptor of a package of cards by a computing device, the package of cards including at least three cards, each card defining card layout information and card content, the wrap descriptor identifying one or more locations to obtain the package of cards;
receiving a runtime viewer, the runtime viewer including code that, when executed by a processor of the computing device, controls display of each card in the package of cards and controls transition between one card to an adjacent card in the package of cards, the transition being based on a navigation trigger event selectable from at least a horizontal swipe in a horizontal direction and a vertical swipe in a vertical direction, at least one card including a link to a non-adjacent card in the package of cards, the runtime viewer including code that, when executed by the processor, controls transition to the non-adjacent card when the link is activated;
generating an object graph from the wrap descriptor by the computing device, the object graph defining a mapping of the cards in the package of cards;
generating a document object model from the object graph by the computing device, the document object model including a browser-readable instance of each card in the package of cards;
displaying, using the runtime viewer, a first card in the package of cards on a display of the computing device based on the document object model;
receiving a particular navigation trigger event;
transitioning, using the runtime viewer, to display an adjacent second card in the package of cards based on the document object model, in response to the particular navigation trigger event;
receiving an activation event of the link; and
transitioning, using the runtime viewer, to display the non-adjacent card in response to the activation event.
2. The method of claim 1 wherein the runtime viewer performs said generating the object graph.
3. The method of claim 2 wherein the wrap descriptor of the package of cards includes the runtime viewer.
4. The method of claim 2 wherein the runtime viewer performs said generating the document object model.
5. The method of claim 2 wherein the wrap descriptor of the package of cards identifies a location of the runtime viewer.
6. The method of claim 1 wherein the wrap descriptor of the package of cards includes descriptor metadata, card descriptors, and a global component descriptor.
7. The method of claim 6 wherein the global component descriptor includes information associated with navigational behavior for cards.
8. The method of claim 6 wherein the global component descriptor includes information associated with a media widget for cards.
9. The method of claim 1 , wherein at least one card includes a different link to a different card in a different package of cards, and wherein the runtime viewer includes code that, when executed by the processor, controls transition to the different card when the different link is activated.
10. A method performed by a computing device of displaying cards on the computing device, the method comprising:
receiving a wrap descriptor of a package of cards by a computing device, the package of cards including at least three cards, each card defining card layout information and card content, the wrap descriptor identifying one or more locations to obtain the package of cards;
generating an object graph from the wrap descriptor by a runtime viewer on the computing device, the object graph defining a mapping of the cards in the package of cards, the runtime viewer including code that, when executed by a processor of the computing device, controls display of each card in the package of cards and controls transition between one card to an adjacent card in the package of cards, the transition being based on a navigation trigger event selectable from at least a horizontal swipe in a horizontal direction and a vertical swipe in a vertical direction, at least one card including a link to a non-adjacent card in the package of cards, the runtime viewer including code that, when executed by the processor, controls transition to the non-adjacent card when the link is activated;
generating a document object model from the object graph by the runtime viewer, the document object model including a browser-readable instance of each card in the package of cards;
displaying, using the runtime viewer, a first card in the package of cards on a display by the runtime viewer based on the document object model;
receiving a particular navigation trigger event;
transitioning, using the runtime viewer, to display an adjacent second card in the package of cards based on the document object model, in response to the particular navigation trigger event;
receiving an activation event of the link; and
transitioning, using the runtime viewer, to display the non-adjacent card in response to the activation event.
11. The method of claim 10 further comprising the computing device requesting the wrap descriptor of the package of cards from a server.
12. The method of claim 10 further comprising the computing device receiving an html shim from the server and loading the html shim into a web browser.
13. The method of claim 12 further comprising the web browser requesting the runtime viewer from the server based on the html shim.
14. The method of claim 12 further comprising the runtime viewer requesting the package of cards from a server.
15. The method of claim 10 wherein the wrap descriptor of the package of cards includes descriptor metadata, card descriptors, and a global component descriptor.
16. The method of claim 15 wherein the global component descriptor includes information associated with navigational behavior for cards.
17. The method of claim 15 wherein the global component descriptor includes information associated with a media widget for cards.
18. The method of claim 10 further comprising creating a list of the cards of the package of cards in a sequence order from the wrap descriptor by the runtime viewer.
19. The method of claim 18 further comprising providing navigation tools by the runtime viewer based on the sequence order.
20. The method of claim 10 , wherein at least one card includes a different link to a different card in a different package of cards, and wherein the runtime viewer includes code that, when executed by the processor, controls transition to the different card when the different link is activated.