Roku - Layout creation

Introduction

You will have come here from step 2 in this article. Roku - App setup and Creation

Although we haven’t yet built an app it is necessary to construct and assign an initial layout configuration to your app before building. This layout is not final - it can be modified as you wish at any stage after building the app.

Follow the steps below to configure a layout.

Prepare the layout

Select App Builder in your app family

This screen will launch. If you have no previously created layouts in your app family the list will be blank. 

Select Add Layout

Layout name: Give your layout any name

Target: Select Roku

Cell Style Framework: Select Cell Builder - this is important to be able to use Power Cell plugins within your layout. If the Cell Style Families option is selected you will not be able to add Power Cells at a later stage

Save your layout

UI Builder

A new layout will launch in UI Builder as follows

Screen Tab

• Screen view Roku Screens
  • Left panel
    • List of screens (blank at first setup)
      • Add new screens with Ad Screen button
  • Center panel
    • Over view of specific screen in view at any one time. Will show installed components on that screen
  • Right hand panel
    • Screen configuration settings

Cell Styles Tab

• Used for configuring Power Cells that are assigned to individual components across screens in the app
  • Roku - Simple Cell
  • Roku - Power Cell

Navigation Tab

• Used for configuring the Top Menu and assigning which screens menu items will launch
  • Roku - Top Menu

Basic layout requirements

To build a basic layout, assign it to an app and successfully build the layout will need

1. A Home screen

Make sure you on in the Screen tab in UI Builder and select Add Screen in the left panel

From the launched options select the General Content screen

This will become your home screen

In the Left UI Builder Panel select this screen.

In the Right UI Builder Panel you can name this to what you wish e.g. HOME SCREEN at the top by clicking the edit pen, entering your new name, enter then Save.

2. Add a Roku Video Player

Select Add Screen in the left panel

Select Video Player Roku and click Add Screen

 

3. Add a Top Menu item to point to your Home Screen

Follow menu instructions here Roku - Top Menu

4. Assign layout to app

Assign the layout in the field of your app General Settings as detailed in Step 3 of this page Roku - App setup and Creation

Your layout does not have yet have any content. 

Return to the app setup configuration page, step 3. Roku - App setup and Creation