Creating an Episodes Screen

About this lesson

This lesson explains how to build an Episodes Screen that organizes television series into seasons and episodes. The left side of the screen displays the seasons; the right side of the screen lists the episodes in the selected season. Each episode typically includes a thumbnail, title, description, and release date. When an episode is selected, its Details Screen opens and the content can then be launched into playback. This enables viewers to quickly browse through different episodes in a series to find the one they want to watch.

This lesson shows how to use new components such as the MarkupList and further layer components to create more complex UIs. It shows how to parse the content feed to populate an episode screen with sequentially numbered seasons and the episodes that belong in those seasons. In addition, it explains how to create buttons for the different seasons in a series, and how to set the focus on an episode when a season is selected and switch the focus between the grid, episode, and video screens.

Resources

Item	Description
Episodes Screen sample app	Download and review the code used in this lesson to create an episodes screen.
Sideloading Roku apps	Sideload and test the Episodes Screen app created in this lesson.

Handing application events

Event loops

OnKeyEvent()

ifSGNodeChildren interface