The following example shows the basic structures of an app sidebar. You activate an app sidebar by focusing on a bookmark in the dock and pressing the OK key on the remote control. When you first enter the sidebar the first page of the app shows you representative and featured application content. By pressing the DOWN ARROW on the remote control, you can navigate to the featured content section of the sidebar. If the app developer has not provided featured content interactions, you can navigate to the app's menus.
This section of the document introduces the sidebar user interface and its components:
The sidebar is the primary view of an app. All implementations of apps must display a sidebar. If you take no action while the sidebar is displayed, it will slide off the screen after a short time period.
The following sidebar user interface states are described below:
The sidebar is displayed over pass-thru video. Pressing the BLUE key will toggle the UI to viewport mode for pass-thru video. Pressing the RED key will close the running app and display fullscreen pass-thru video.
Pressing the BLUE key while the sidebar is displayed has toggled the UI to viewport mode for pass-thru video. Pressing the BLUE key again will display the sidebar overlaid pass-thru video.
You can design the app to display its own sidebar over streaming video or the consumer can open the sidebar of an unrelated app while watching another app's streaming video. Pressing the RED key will close the sidebar. Pressing the RED key again will close the video and display fullscreen pass-thru video.
Pressing the BLUE key while the sidebar is displayed has toggled the UI to viewport mode for streaming video. Pressing the BLUE key again will display the sidebar overlaid streaming video.
When you first launch the sidebar the most prevalent section of the user interface is a graphical treatment for featured content for the app. This featured content area is a large area in the sidebar that contains compelling visual elements which set your expectations for the types of data the app contains and can provide accelerated access to those pages. For a simple app, this first section may be a static splash screen. The app developer designs the preview area to represent the broader functionality of the app—for example:
The section menu is the primary navigation of the app user interface. The primary content areas are laid out in the section menu to best display and navigate the application content. Content can include textual, graphical, and media layouts. The following is an example of the NFL app's section menu to display upcoming games schedules and statistics:
The global toolbar is the four buttons located at the bottom of each sidebar. These buttons are also mirrored on the remote control as four color-coded keys: Close (RED key), Settings (GREEN key), Edit Bookmark (YELLOW key), and Viewport (BLUE key). The order and color of these keys are subject to change. Device partners can configure button order using Yahoo! Services. The colors always map to the same functions, but their order changes to match the order on the device's remote control. When implementing the fullscreen view, the GREEN, YELLOW, and BLUE color-coded keys are now available for app control. It is recommended that the BLUE key be used to resize the video where applicable.
The Close button removes graphics on the screen.
The Settings button on the global toolbar launches the settings section of the current app. Typically app settings allow you to set app-specific preferences.
The Edit Bookmark button on the global toolbar will generate a bookmark to provide a shortcut to the current sidebar page. The only way to add a bookmark is through the sidebar's global toolbar. App developers can enable the Edit Bookmark button for app content that is suited for display as a bookmark. For example, an NFL app may enable the Edit Bookmark button for each team's page. The title of the bookmark is determined by the app developer. If the bookmark is already in your dock it will not be added a second time. The Edit Bookmark button is deactivated when no bookmark for the app content is available.
The Viewport button toggles the user interface between viewport and overlay mode when the dock or sidebar is displayed.