### Brightscript Scene Show Function

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/1_Setup+and+HelloWorld/Readme.md

Overrides the show() function in MainScene.brs to print 'Hello World!' to the console.

```brightscript
sub show(args as Object)
    print "Hello World!"
end sub
```

--------------------------------

### Development Environment Setup

Source: https://github.com/rokudev/samples/blob/master/getting started/NewDeveloperOnboardingSample-master/SampleRSGChannel/docs/Readme.txt

Information on setting up the development environment for Roku channels, covering necessary tools and procedures for building and testing applications.

```APIDOC
Development Environment Overview:
  https://sdkdocs.roku.com/display/sdkdoc/Development+Environment+Overview
```

--------------------------------

### XML Scene Definition

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/1_Setup+and+HelloWorld/Readme.md

Defines the MainScene component in XML, extending BaseScene and importing the associated Brightscript file.

```xml
<?xml version="1.0" encoding="UTF-8"?>
    <component name="MainScene" extends="BaseScene" />
    <!-- importing main handler -->
    <script type="text/brightscript" uri="pkg:/components/MainScene.brs" />
</component>
```

--------------------------------

### Brightscript Entry Scene Name

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/1_Setup+and+HelloWorld/Readme.md

Overrides the GetSceneName() function in Main.brs to provide the name of the entry scene for SGDEX.

```brightscript
function GetSceneName() as String
    return "MainScene"
end function
```

--------------------------------

### SGDEX Installation Guide

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/README.md

Instructions for installing and integrating SGDEX components into a Roku channel. This includes copying specific folders and files and updating the channel manifest.

```brs
Project: /rokudev/samples

## Installation

Follow these steps to prepare your channel to use SGDEX components:

* Copy the `extentions/SGDEX` folder into your channel so that the path to the folder is `pkg:/components/SGDEX`. _This path is required for certain graphic elements to work correctly._
* Copy `library/SGDEX.brs` into your channel so that the path to the file is `pkg:/source/SGDEX.brs`
* Add this line to your manifest: `bs_libs_required=roku_ads_lib`

You are now ready to use SGDEX components in your channel!
```

--------------------------------

### RokuSignUp Component Usage Example

Source: https://github.com/rokudev/samples/blob/master/roku pay/ChannelStore_SignupFlow/docs/Readme.txt

Illustrates the basic setup and usage of the RokuSignUp component, including how to initialize it and handle the 'isSubscribed' event to manage user subscription status.

```brs
m.rokuSignUp = myScene.CreateChild("RokuSignUp")
' Observe the isSubscribed field to handle the result of the sign-up flow
m.rokuSignUp.ObserveField("isSubscribed", "On_rokuSignUp_isSubscribed")

' To trigger the sign-up flow, set the 'show' attribute to true
' m.rokuSignUp.show = true

' Handler function for the isSubscribed field
Sub On_rokuSignUp_isSubscribed()
    if m.rokuSignUp.isSubscribed then
        print "User is subscribed."
        ' Allow access to restricted content or show subscribed state
    else
        print "User is not subscribed."
        ' Disallow access or show unsubscribed state
    end if
End Sub
```

--------------------------------

### Roku Channel Manifest Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SDK-Development-Guide-master/project-setup.md

Example of a basic Roku channel manifest file, including required fields like title, version, and artwork.

```brightscript
title=VideoExample
major_version=1
minor_version=0
build_version=1

mm_icon_focus_hd=pkg:/images/channel-poster.png
splash_screen_fhd=pkg:/images/channel-splash.png
```

--------------------------------

### Audio Node Basic Playback

Source: https://github.com/rokudev/samples/blob/master/media/AudioExample/README.md

Demonstrates the basic setup and playback of an MP3 audio file using the Roku Audio node. It shows how to create an Audio node, assign content with a URL, append it to the scene, and start playback.

```xml
<component name = "AudioExample" extends = "Scene" > 
  <script type = "text/brightscript" >
    <![CDATA[
    sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"
      audio = createObject("roSGNode", "Audio")
      audiocontent = createObject("RoSGNode", "ContentNode")
      audiocontent.url = "http://www.sdktestinglab.com/Tutorial/sounds/audionode.mp3"
      audio.content = audiocontent
      m.top.appendChild(audio)
      audio.control = "play"
      m.top.setFocus(true)
    end sub
    ]]>
  </script>
</component>
```

--------------------------------

### Scenegraph XML Structure

Source: https://github.com/rokudev/samples/blob/master/getting started/NewDeveloperOnboardingSample-master/SampleRSGChannel/docs/Readme.txt

Guide to understanding and utilizing Scenegraph XML for defining the user interface and layout of Roku applications, including node hierarchies and properties.

```APIDOC
SceneGraph XML Overview:
  https://sdkdocs.roku.com/display/sdkdoc/SceneGraph+XML+Overview
```

--------------------------------

### EntitlementHandler Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

Provides an example of implementing the EntitlementHandler, specifically the ConfigureEntitlements method, to define product codes and trial information for Roku Billing.

```brightscript
' [In <component name="HandlerEntitlement" extends="EntitlementHandler"> in channel]
sub ConfigureEntitlements(config as Object)
    config.products = [
        '{code: "PROD1", hasTrial: false}
        {code: "PROD2", hasTrial: false}
    ]
end sub
```

--------------------------------

### RokuAuthScreen Initialization

Source: https://github.com/rokudev/samples/blob/master/roku pay/ChannelStore_SignupFlow/docs/components/RokuSignUp/RokuAuthScreen.brs.html

Handles the initial setup and default property assignments for the RokuAuthScreen component.

```brightscript
init()

  Component initialization, setting default properties
```

--------------------------------

### Initialize GridView and Set Attributes

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/3_Grid/README.md

Creates a GridView object and sets its style and poster shape. This is the initial setup for displaying content in a grid format.

```brightscript
m.grid = CreateObject("roSGNode", "GridView")

m.grid.setFields({
    style: "standard"
    posterShape: "16x9"
})
```

--------------------------------

### Roku SceneGraph Component Examples

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphTutorial/README.md

This section outlines the subdirectories containing XML component files for various Roku SceneGraph examples. Each subdirectory focuses on a specific aspect of SceneGraph development, such as renderable nodes, z-order, animations, events, typography, control nodes, lists, grids, widgets, layout groups, sliding panels, and media playback.

```xml
<component name="renderablenodes" extends="Group">
  <children>
    <!-- XML component files for Renderable Node Markup -->
  </children>
</component>
```

```xml
<component name="zorderparentchild" extends="Group">
  <children>
    <!-- XML component files for Z-Order/Parent-Child Markup -->
  </children>
</component>
```

```xml
<component name="animations" extends="Group">
  <children>
    <!-- XML component files for Animation Markup -->
  </children>
</component>
```

```xml
<component name="eventsobservers" extends="Group">
  <children>
    <!-- XML component files for Events and Observers Markup -->
  </children>
</component>
```

```xml
<component name="typography" extends="Group">
  <children>
    <!-- XML component files for Typography Markup -->
  </children>
</component>
```

```xml
<component name="controlnodes" extends="Group">
  <children>
    <!-- XML component files for Control Nodes Markup -->
  </children>
</component>
```

```xml
<component name="listsandgrids" extends="Group">
  <children>
    <!-- XML component files for Lists and Grids Markup -->
  </children>
</component>
```

```xml
<component name="widgets" extends="Group">
  <children>
    <!-- XML component files for Widgets Markup -->
  </children>
</component>
```

```xml
<component name="layoutgroups" extends="Group">
  <children>
    <!-- XML component files for Layout/Groups Markup -->
  </children>
</component>
```

```xml
<component name="slidingpanels" extends="Group">
  <children>
    <!-- XML component files for Sliding Panels Markup -->
  </children>
</component>
```

```xml
<component name="mediaplayback" extends="Group">
  <children>
    <!-- XML component files for Media Playback Markup -->
  </children>
</component>
```

--------------------------------

### Using VideoView Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

Demonstrates how to create and configure a VideoView component in Roku development. It shows setting content, jump index, and control, and then displaying the VideoView.

```ro
video = CreateObject("roSGNode", "VideoView")

video.content = content
video.jumpToItem = index
video.control = "play"

m.top.ComponentController.callFunc("show", {
    view: video
    })

'User can observe video.endcardItemSelected to handle endcard selection
'video.currentIndex or video.currentItem fields can be used to track what was the last video after a video is closed.
```

--------------------------------

### SimpleContentHandler Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

An example demonstrating the usage of SimpleContentHandler, showing how to define the component in XML and implement the GetContent function in BrightScript to set content fields.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<component name="SimpleContentHandler" extends="ContentHandler" >
<script type="text/brightscript" uri="pkg:/components/content/SimpleContentHandler.brs" />
</component>
```

```brightscript
sub GetContent()
    m.top.content.SetFields({
        title: "Hello World"
    })
end sub
```

--------------------------------

### Using BaseScene Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

Demonstrates how to use the BaseScene component in Roku development. It includes an XML component definition and a BrightScript snippet for handling scene logic.

```XML
<?xml version="1.0" encoding="UTF-8"?>
<component name="MainScene" extends="BaseScene" >
<script type="text/brightscript" uri="pkg:/components/MainScene.brs" />
</component>
```

```BrightScript
sub Show(args)
    homeGrid = CreateObject("roSGNode", "GridView")
    homeGrid.content = GetContentNodeForHome() 'implemented by user
    homeGrid.ObserveField("rowItemSelected","OnGridItemSelected")
'this will trigger job to show the view
    m.top.ComponentController.callFunc("show", {
        view: homeGrid
    })
end sub
```

--------------------------------

### Roku Channel Manifest Example

Source: https://github.com/rokudev/samples/blob/master/certification/trickplay-samples-master/README.md

An example of a Roku channel manifest file (manifest). This file defines the channel's properties, including its name, version, and components. It's essential for deploying a Roku channel.

```XML
"pkg" = "your.channel.package"
"title" = "My Trick Play Channel"
"version" = "1.0.0"
"major_version" = "1"
"minor_version" = "0"
"build_version" = "0"

"mm_icon_focus_hd" = "icons/icon_hd.png"
"icon_focus_hd" = "icons/icon_focus_hd.png"
"icon_overlay" = "icons/icon_overlay.png"

"ui_resolutions" = "hd320w"

"ifest" = "manifest"

"component_library_version" = "3.0"

"debug_wireless_enabled" = "true"
"debug_host" = "192.168.1.100"
"debug_port" = "8085"

"channel_translation" = "true"

"supported_locales" = "en_US,fr_CA,es_MX"
```

--------------------------------

### Channel Manifest Configuration

Source: https://github.com/rokudev/samples/blob/master/getting started/NewDeveloperOnboardingSample-master/SampleRSGChannel/docs/Readme.txt

Details the structure and purpose of the Roku Channel Manifest, which is essential for configuring a Roku channel, including its metadata and entry points.

```APIDOC
Channel Manifest:
  https://sdkdocs.roku.com/display/sdkdoc/Roku+Channel+Manifest
```

--------------------------------

### Set Up Content Node and Handler Configuration

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/3_Grid/README.md

Creates a ContentNode and configures it to use a specific GridHandler for fetching and managing content. This links the data source to the GridView.

```brightscript
content = CreateObject("roSGNode", "ContentNode")
content.addfields({
    HandlerConfigGrid: {
        name: "GridHandler"
    }
})
```

--------------------------------

### Animation Control with BrightScript

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationV2DExample/README.md

BrightScript code to find the Animation node, set its repeat property to true, and start the animation by setting the control field to 'start'.

```brightscript
m.vector2danimation = m.top.FindNode("exampleVector2DAnimation")
m.vector2danimation.repeat = true
m.vector2danimation.control = "start"
```

--------------------------------

### Set up ContentNode and HandlerConfigGrid

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/2_Basic+Channel/README.md

Shows how to create a ContentNode and configure it with a HandlerConfigGrid, specifying the name of the root handler. This prepares the ContentNode to fetch and parse content data.

```Brightscript
content = CreateObject("roSGNode", "ContentNode")
content.addfields({
    HandlerConfigGrid: {
        name: "RootHandler"
    }
})
```

--------------------------------

### DetailView Content Handler Configuration

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/2-Contenthandlers_Guide.md

Example of a Content Handler Config (CHConfig) for a DetailView, specifying the 'SimpleContentGetter' component to handle content loading.

```brightscript
myContentNode.AddFields({
  HandlerConfigDetails: {
    name: "SimpleContentGetter"
  }
}
```

--------------------------------

### BrightScript: Complete init() Function with Task Observation

Source: https://github.com/rokudev/samples/blob/master/getting started/SDK-Development-Guide-master/scenegraph-ui.md

Combines node initialization, focus setting, task node execution, and content change observation within the init() function. This provides a comprehensive setup for the HomeScene.

```brightscript
Sub init()
    m.RowList = m.top.findNode("RowList")
    m.Title = m.top.findNode("Title")
    m.Description = m.top.findNode("Description")
    m.Poster = m.top.findNode("Poster")
    m.RowList.setFocus(true)
    m.LoadTask = CreateObject("roSGNode", "FeedParser") 'Create XML Parsing task node
    m.LoadTask.control = "RUN" 'Run the task node
    m.LoadTask.observeField("content","rowListContentChanged")
End Sub
```

--------------------------------

### Vector 2D Animation Scene Setup

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationV2DExample/README.md

Sets up the scene with a parent Rectangle to define animation boundaries and an Animation node containing the Vector2DFieldInterpolator. The parent Rectangle is made invisible.

```xml
<children>
 
  <Rectangle
    id = "exampleRectangle"
    width = "900"
    height = "330"
    color = "0x10101000" >
 
    <Rectangle
      id = "movingRectangle"
      width = "720"
      height = "240"
      color = "0x1010EBFF" />
 
  </Rectangle>
 
  <Animation
    id = "exampleVector2DAnimation"
    duration = "5"
    easeFunction = "linear" >
 
    <Vector2DFieldInterpolator
      key = "[ 0.0, 0.5, 1.0 ]"
      keyValue = "[ [0.0,0.0], [180.0,90.0], [0.0,0.0] ]"
      fieldToInterp = "movingRectangle.translation" />
 
  </Animation>
 
</children>
```

--------------------------------

### Tutorial Application Scene Component

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphTutorial/README.md

The `tutorialpanelsetscene.xml` file serves as the main entry point for the tutorial application. It orchestrates the creation, manipulation, and removal of SceneGraph components defined in other XML files within the `components` directory. Unlike typical scene files, it does not contain explicit `<children>` elements for defining SceneGraph nodes.

```xml
<component name="tutorialpanelsetscene" extends="Scene">
  <!-- This file orchestrates components defined elsewhere. -->
  <!-- No direct <children> elements for SceneGraph nodes here. -->
</component>
```

--------------------------------

### BrightScript Video Playback Example

Source: https://github.com/rokudev/samples/blob/master/media/VideoExample/README.md

This BrightScript code snippet demonstrates how to initialize and play a video using the Video node in a Roku application. It creates a ContentNode, sets essential meta-data like title, stream format, and URL, and then assigns it to the Video node to start playback.

```brightscript
sub init()
      videocontent = createObject("RoSGNode", "ContentNode")
      videocontent.title = "Example Video"
      videocontent.streamformat = "mp4"
      videocontent.url = "http://roku.cpl.delvenetworks.com/.../rr_123_segment_1_072715.mp4"
 
      video = m.top.findNode("exampleVideo")
      video.content = videocontent
      video.setFocus(true)
      video.control = "play"
    end sub
```

--------------------------------

### Main Thread Setup for SceneGraph Application

Source: https://github.com/rokudev/samples/blob/master/getting started/SDK-Development-Guide-master/scenegraph-ui.md

Sets up the main thread for a SceneGraph application. It creates a roSGScreen object, a message port, associates the message port with the screen, creates the HomeScene, and shows the screen. It also includes a loop to listen for screen events, such as the screen being closed.

```brightscript
sub Main()
    screen = CreateObject("roSGScreen") 'Create Screen object
    m.port = CreateObject("roMessagePort") 'Create Message port
    screen.setMessagePort(m.port) 'Set message port to listen to screen

    scene = screen.CreateScene("HomeScene") 'Create HomeScene
    screen.show()

    while(true) 'Listens to see if screen is closed
        msg = wait(0, m.port)
        msgType = type(msg)
        if msgType = "roSGScreenEvent"
            if msg.isScreenClosed() then return
        end if
    end while
end sub
```

--------------------------------

### Roku Video Content Meta-Data Example

Source: https://github.com/rokudev/samples/blob/master/media/VideoListExample/README.md

An example of Content Meta-Data for a video list in Roku applications. It defines attributes like title, description, poster URL, stream format, and the video URL for each item.

```xml
<Content >
  <item 
    title = "Puppies and Kittens" 
    description = "So Cute!" 
    hdposterurl = "http://s2.content.video.llnw.net/lovs/images-prod/.../ZLh.540x304.jpeg" 
    streamformat  =  "mp4" 
    url = "http://roku.cpl.delvenetworks.com/media/.../rr_123_segment_1_072715.mp4" />
  ...
```

--------------------------------

### Rectangle Node Definition

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationV2DExample/README.md

Defines a basic Rectangle node with an ID, width, height, and color. This is a foundational element used in the animation example.

```xml
<Rectangle 
  id = "movingRectangle" 
  width = "720" 
  height = "240" 
  color = "0x1010EBFF" />
```

--------------------------------

### Show Keyboard Dialog Example

Source: https://github.com/rokudev/samples/blob/master/ux components/dialogs/KeyboardDialogExample/README.md

Demonstrates how to create and configure a KeyboardDialog node, setting its background and title. This function is typically called to display the dialog for user input.

```roSGNode
sub showdialog()
  keyboarddialog = createObject("roSGNode", "KeyboardDialog")
  keyboarddialog.backgroundUri = "pkg:/images/rsgde_dlg_bg_hd.9.png"
  keyboarddialog.title = "Example Keyboard Dialog"
  m.top.dialog = keyboarddialog
end sub
```

--------------------------------

### Initializing and Displaying the Details View

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/2_Basic+Channel/README.md

Creates a DetailsView node, sets up observers for content and button selections, configures the view's content and index, and displays the view.

```brightscript
function ShowDetailsView(content, index, isContentList = true) as Object
    details = CreateObject("roSGNode", "DetailsView")
    details.ObserveField("content", "OnDetailsContentSet")
    details.ObserveField("buttonSelected", "OnButtonSelected")

    details.content = content
    details.jumpToItem = index
    details.isContentList = isContentList

    m.top.ComponentController.callFunc({
        view: details
    })
    return details
end function
```

--------------------------------

### RunUserInterface Function in main.brs

Source: https://github.com/rokudev/samples/blob/master/roku pay/ChannelStore_SignupFlow/docs/source/main.brs.html

Initializes the Home scene for the RokuSignupFlow sample. This function is responsible for setting up the user interface and managing the interaction between the RokuSignUp component and the API mockup within the Main thread.

```brs
Sub RunUserInterface()
    ' Home scene initialization
    ' Interaction between RokuSignUp component and API mockup in the Main thread
End Sub
```

--------------------------------

### Audio Content Meta-Data Example

Source: https://github.com/rokudev/samples/blob/master/media/AudioListExample/README.md

Example of XML content meta-data used to define audio items, including title, stream format, and URL for playback.

```XML
<Content >
  <item 
    title = "Main Menu" 
    streamformat = "mp3" 
    url = "http://www.sdktestinglab.com/Tutorial/sounds/mainmenu.mp3" />
  ...
```

--------------------------------

### RAFHandler Description and Example

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

Explains the RAFHandler component, which is the SGDEX wrapper for the Roku Ad Framework (RAF). It details the required ConfigureRAF method for ad integration and provides an example of its implementation.

```APIDOC
RAFHandler:
  Extends: Task
  Description: The RAFHandler component is the SGDEX wrapper for the Roku Ad Framework (RAF). The developer extends this component in the channel and implements ConfigureRAF(adIface as Object). They can further implement any desired configuration supported by RAF in ConfigRAF().
```

```brightscript
sub ConfigureRAF(adIface)
    ' Detailed RAF docs: https://sdkdocs.roku.com/display/RokuAdvertisingFramework/Integrating+the+Roku+Advertising+Framework
    adIface.SetAdUrl("http://www.some.ad.url.com")
    adIface.SetContentGenre("General Variety")
    adIface.SetContentLength(1200) ' in seconds
    ' Nielsen specific data
    adIface.EnableNielsenDAR(true)
    adIface.SetNielsenProgramId("CBAA")
    adIface.SetNielsenGenre("GV")
    adIface.SetNielsenAppId("P123QWE-1A2B-1234-5678-C7D654348321")
end sub
```

--------------------------------

### Initialize and Configure GridView

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/samples/2_Basic+Channel/README.md

Demonstrates how to create a GridView object, set its style and poster shape, and attach it to the component controller for display. This is a fundamental step in building the visual layout of the channel.

```Brightscript
m.grid = CreateObject("roSGNode", "GridView")
m.grid.setFields({
    style: "standard"
    posterShape: "16x9"
})
```

--------------------------------

### Starting SequentialAnimation in init()

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationSequentialExample/README.md

Shows the BrightScript code snippet for initializing and controlling a SequentialAnimation node. It finds the node by ID, sets its repeat property, and starts the animation sequence.

```BRIGHTSCRIPT
m.examplesequentialanimation = m.top.findNode("exampleSequentialAnimation")
m.examplesequentialanimation.repeat = true
m.examplesequentialanimation.control = "start"
```

--------------------------------

### PosterGrid Example Component

Source: https://github.com/rokudev/samples/blob/master/ux components/lists and grids/PosterGridExample/README.md

This snippet shows a complete BrightScript component that utilizes the PosterGrid node. It initializes the grid, sets its properties, and loads content from a remote URL.

```brightscript
sub init()
  m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"

  m.top.setFocus(true)

  m.postergrid = m.top.findNode("examplePosterGrid")

  m.postergrid.translation = [ 130, 160 ]

  m.readPosterGridTask = createObject("roSGNode", "ContentReader")
  m.readPosterGridTask.contenturi = "http://www.sdktestinglab.com/Tutorial/content/rendergridps.xml"
  m.readPosterGridTask.observeField("content", "showpostergrid")
  m.readPosterGridTask.control = "RUN"
end sub

sub showpostergrid()
  m.postergrid.content = m.readPosterGridTask.content
end sub
```

--------------------------------

### SequentialAnimation Example

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationSequentialExample/README.md

Demonstrates the structure of a SequentialAnimation node, containing multiple Animation nodes with Vector2DFieldInterpolator to animate rectangle translations in sequence. This example showcases how to group and control a series of animations.

```XML
<children>
 
  <Group id = "animatedRectangles" >
 
    <Rectangle
      id = "lowestRectangle"
      width = "180"
      height = "60"
      color = "0xEB1010FF" />
 
    <Rectangle
      id = "middleRectangle"
      width = "360"
      height = "120"
      color = "0x10EB10FF" />
 
    <Rectangle
      id = "highestRectangle"
      translation = "[ 180.0, 90.0 ]"
      width = "720"
      height = "240"
      color = "0x1010EBFF" />
 
    <SequentialAnimation id = "exampleSequentialAnimation" >
 
      <Animation
        duration = "3"
        easeFunction = "linear" >
 
        <Vector2DFieldInterpolator
          key = "[ 0.0, 1.0 ]"
          keyValue = "[ [0.0,0.0], [180.0,90.0] ]"
          fieldToInterp = "highestRectangle.translation" />
 
      </Animation>
 
      <Animation
        duration = "3"
        easeFunction = "linear" >
 
        <Vector2DFieldInterpolator
          key = "[ 0.0, 1.0 ]"
          keyValue = "[ [0.0,0.0], [60.0,30.0] ]"
          fieldToInterp = "middleRectangle.translation" />
 
      </Animation>
 
      <Animation
        duration = "3"
        easeFunction = "linear" >
 
        <Vector2DFieldInterpolator
          key = "[ 0.0, 1.0 ]"
          keyValue = "[ [60.0,30.0], [0.0,0.0] ]"
          fieldToInterp = "middleRectangle.translation" />
 
      </Animation>
 
      <Animation
        duration = "3"
        easeFunction = "linear" >
 
        <Vector2DFieldInterpolator
          key = "[ 0.0, 1.0 ]"
          keyValue = "[ [180.0,90.0], [0.0,0.0] ]"
          fieldToInterp = "highestRectangle.translation" />
 
      </Animation>
 
    </SequentialAnimation>
 
  </Group>
 
</children>
```

--------------------------------

### RokuSignUp Component Initialization and Configuration

Source: https://github.com/rokudev/samples/blob/master/roku pay/ChannelStore_SignupFlow/docs/components/RokuSignUp/RokuSignUp.html

Demonstrates how to initialize the RokuSignUp component and configure its various properties, including authorization settings, splash screen, login/signup buttons, dialog button styles, password validation, and custom dialog messages.

```brs
m.rokuSignUp = m.top.CreateChild("RokuSignUp")

' use channel-specific API for authorization (this will enable login/signup selection screen)
m.rokuSignUp.isAuthNeeded = true

' customize splash poster
m.rokuSignUp.posterSplash.uri = "pkg:/images/splash.jpg"

' customize login flow selection button
m.rokuSignUp.buttonLoginFlow.SetFields({
focusBitmapUri : "pkg:/images/button_on.9.png"
focusedIconUri : "pkg:/images/login.png"
iconUri : "pkg:/images/login.png"
})

' customize signup flow selection button
m.rokuSignUp.buttonSignupFlow.SetFields({
focusBitmapUri : "pkg:/images/button_on.9.png"
focusedIconUri : "pkg:/images/signup.png"
iconUri : "pkg:/images/signup.png"
})

' set button background for all dialogs
m.rokuSignUp.dialogsButtonConfig = {
focusBitmapUri : "pkg:/images/button_on.9.png"
}

' accept only passwords containing at least 6 characters
m.rokuSignup.regexPassword = ".{6,}"
m.rokuSignUp.dialogLoginErrPassword.message = "Please enter password containing at least 6 characters"
m.rokuSignUp.dialogSignupErrPassword.message = "Please use password containing at least 6 characters for new account"

' set custom text for Roku Billing subscription checking progress dialog
m.rokuSignUp.pdialogCheckSubs.title = "Please wait, checking subscriptions..."
```

--------------------------------

### LabelList Customization

Source: https://github.com/rokudev/samples/blob/master/ux components/lists and grids/LabelListFocusStyleExample/README.md

Sets custom fields for LabelList to control text alignment, focus animation, feedback display, and focused color. This example modifies the visual presentation and interaction of list items when they are in focus.

```roksl
<LabelList 
  id = "exampleLabelList" 
  vertFocusAnimationStyle = "floatingFocus" 
  drawFocusFeedback = "false" 
  focusedColor = "0xEBEB10FF" 
  textHorizAlign = "right" >
  ...
</LabelList>
```

--------------------------------

### ColorFieldInterpolator Animation Example

Source: https://github.com/rokudev/samples/blob/master/ux components/animation/AnimationColorExample/README.md

This snippet shows an Animation node with a ColorFieldInterpolator. The interpolator animates the 'color' field of a target node ('exampleRectangle.color') through specified keyframes and their corresponding color values over the animation's duration.

```XML
<Animation 
  id = "exampleColorAnimation" 
  duration = "5" 
  easeFunction = "linear" >

  <ColorFieldInterpolator 
    key = "[ 0.0, 0.5, 1.0 ]" 
    keyValue = "[ 0x1010EBFF, 0x10101FFF, 0x1010EBFF ]" 
    fieldToInterp = "exampleRectangle.color" />

</Animation>
```

--------------------------------

### CategoryListView Configuration Examples

Source: https://github.com/rokudev/samples/blob/master/getting started/SceneGraphDeveloperExtensions-master/documentation/1-components.md

Demonstrates different ways to configure a CategoryListView component, including static content, dynamic content loading via handlers, and handling of 'hasMore' scenarios.

```roSGScript
CategoryList = CreateObject("roSGNode", "CategoryListView")
    CategoryList.posterShape = "square"
 
content = CreateObject("roSGNode", "ContentNode")
    content.update(root)
 
CategoryList.content = content
 
'Triggers a job to show the view
m.top.ComponentController.CallFunc("show", {
    view: CategoryList
 })

```

--------------------------------

### GridPanel Node Configuration

Source: https://github.com/rokudev/samples/blob/master/ux components/sliding panels/GridPanelExample/README.md

Example configuration for a GridPanel node, demonstrating how to extend the GridPanel class, set initial focus, and manage panel properties. It includes BrightScript code for initializing panel settings and fetching grid content.

```XML
<component name = "GridPanelExample" extends = "GridPanel" initialFocus = "examplePosterGrid" >
 
  <script type = "text/brightscript" >
 
    <![CDATA[
 
    sub init()
      m.top.panelSize = "full"
      m.top.isFullScreen = true
      m.top.leftPosition = 130
      m.top.focusable = true
      m.top.hasNextPanel = false
      m.top.createNextPanelOnItemFocus = false
 
      m.top.grid = m.top.findNode("examplePosterGrid")
 
      m.readPosterGridTask = createObject("roSGNode", "ContentReader")
      m.readPosterGridTask.contenturi = "http://www.sdktestinglab.com/Tutorial/content/rendergridps.xml"
      m.readPosterGridTask.observeField("content", "showpostergrid")
      m.readPosterGridTask.control = "RUN"
    end sub
 
    sub showpostergrid()
      m.top.grid.content = m.readPosterGridTask.content
    end sub
 
    ]]>
 
  </script>
 
  <children >
 
    <PosterGrid
      id = "examplePosterGrid"
      basePosterSize = "[ 512, 288 ]"
      caption1NumLines = "1"
      numColumns = "2"
      numRows = "2"
      itemSpacing = "[ 20, 20 ]" />
 
  </children>
 
</component>
```

--------------------------------

### BusySpinner Node Example

Source: https://github.com/rokudev/samples/blob/master/ux components/widgets/BusySpinnerExample/README.md

This example demonstrates how to use the BusySpinner node in Roku SceneGraph. It includes the XML structure for the component and the BrightScript code to initialize and manage the spinner's visibility and position based on an image's load status.

```xml
<component name = "BusySpinnerExample" extends = "Scene" >
 
  <script type = "text/brightscript" >
 
    <![CDATA[
 
    sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"
 
      m.busyspinner = m.top.findNode("exampleBusySpinner")
      m.busyspinner.poster.observeField("loadStatus", "showspinner")
      m.busyspinner.poster.uri = "pkg:/images/busyspinner.png"
 
      m.top.setFocus(true)
    end sub
 
 
    sub showspinner()
      if(m.busyspinner.poster.loadStatus = "ready")
        centerx = (1280 - m.busyspinner.poster.bitmapWidth) / 2
        centery = (720 - m.busyspinner.poster.bitmapWidth) / 2
        m.busyspinner.translation = [ centerx, centery ]
 
        m.busyspinner.visible = true
      end if
    end sub
 
    ]]>
 
  </script>
 
  <children >
 
    <BusySpinner
      id = "exampleBusySpinner"
      visible = "false" />
 
  </children>

</component>
```

--------------------------------

### Timer Node Example

Source: https://github.com/rokudev/samples/blob/master/ux components/control/TimerExample/README.md

This example demonstrates the usage of the Timer node in Roku SDK. It sets up a Timer to fire every 2 seconds, triggering a callback function to change the text displayed on the screen. The code includes BrightScript for logic and XML for component structure.

```xml
<component name = "TimerExample" extends = "Scene" >
 
  <script type = "text/brightscript" >
 
    <![CDATA[
 
    sub init()
      m.top.backgroundURI = "pkg:/images/rsgde_bg_hd.jpg"
 
      m.defaulttext = "Wait for it, wait for it..."
      m.alternatetext = "Timer fired!!!"
      m.label = m.top.FindNode("exampleLabel")
      m.label.text = m.defaulttext
      m.textchange = false
 
      examplerect = m.label.boundingRect()
      centerx = (1280 - examplerect.width) / 2
      centery = (720 - examplerect.height) / 2
      m.label.translation = [ centerx, centery ]
 
      timer = m.top.findNode("exampleTimer")
      timer.ObserveField("fire", "changetext")
      timer.control = "start"
 
      m.top.setFocus(true)
    end sub
 
    sub changetext()
      if (m.textchange = false) then
        m.label.text = m.alternatetext
        m.textchange = true
      else
        m.label.text = m.defaulttext
        m.textchange = false
      end if
    end sub
 
    ]]>
 
  </script>
 
  <children>
 
    <Label
      id = "exampleLabel"
      width = "480"
      height = "60"
      horizAlign = "center"
      vertAlign = "center" />
 
    <Timer
      id = "exampleTimer"
      repeat = "true"
      duration = "2" />
 
  </children>
 
</component>
```

--------------------------------

### Roku Scenegraph API Reference

Source: https://github.com/rokudev/samples/blob/master/getting started/NewDeveloperOnboardingSample-master/SampleRSGChannel/docs/Readme.txt

Provides an overview of the Roku Scenegraph API, including references to core components like Scene, Renderable Node Markup, and specific UI elements such as Rectangle, Label, and Poster.

```APIDOC
SceneGraph API Reference:
  https://sdkdocs.roku.com/display/sdkdoc/SceneGraph+API+Reference

Scene:
  https://sdkdocs.roku.com/display/sdkdoc/Scene

Renderable Node Markup:
  https://sdkdocs.roku.com/display/sdkdoc/Renderable+Node+Markup

UI Elements:
  Rectangle
  Label
  Poster
```