Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 65 Next »

Finally, let's put all the examples we've seen previously in the tutorial together, to create a typical Scene Graph application. As with every application, this application has a purpose. And the purpose of this application is to present all the various node classes and design/development principles for Roku Scene Graph, to let you quickly select node classes and design ideas for your application.

Example Application:

Tutorial Application Overview

Looking at, you'll note that the package components directory consists of the following directories and XML component files:


XML Component Files

  • tutorialpanelsetscene.xml
    The scene component for the application, extended from the OverhangPanelSetScene node class
  • contentreader.xml
    A generic Task node for reading Content Meta-Data for application content items from server XML files
  • categorieslistpanel.xml
    A medium-size ListPanel node that lists the example categories
  • categoryinfopanel.xml
    A medium-size Panel node that provides a description of each example category focused in the categories list panel
  • examplesgridpanel.xml
    A full-size GridPanel node that provides a grid of example posters for user selection of each example 

Note that if you've gone through the Scene Graph XML Tutorial from beginning to here, there is very little contained in that you haven't seen before. What this application does is pull together all the various Scene Graph nodes, components, designs, and development principles into a single application. So to complete the tutorial, we only need to describe certain aspects of the scene component file, tutorialpanelsetscene.xml, and how it pulls together the entire application, along with the associated server XML files.

Tutorial Application Scene Component Description

Looking at tutorialpanelsetscene.xml, you'll see that there is no <children> element XML markup to define Scene Graph nodes and components. Rather, tutorialpanelsetscene.xml is used only to create, manipulate, and remove components in the application scene graph, which are defined in the all the other XML component files in the application components directory.

Initial Content Meta-Data Reading

In fact, a large part of tutorialpanelsetscene.xml just creates and manipulates the same panel set described in OverhangPanelSetScene Markup. The big difference is not the panels or their sliding behavior, but in the greater amount of Content Meta-Data supplied by the server XML files supplied for the application, and allowing users to select a specific example item to view from the grids created by the examplesgridpanel.xml file containing the content meta-data for each item.

To start the application, the init() function runs a typical Task node content reader to get the initial content meta-data for the application:

m.readContentTask = createObject("roSGNode", "ContentReader")
m.readContentTask.observeField("content", "setcategories")
m.readContentTask.contenturi = ""
m.readContentTask.control = "RUN"

We're using the generic server XML file content reader Task node defined in contentreader.xml. If you have any questions about how this works, you could review Task Markup in this tutorial. In this case, once the ContentNode node containing the content meta-data is complete, it triggers the setcategories() callback function:

sub setcategories()
  m.categoriespanel ="CategoriesListPanel")
  m.categoriespanel.list.content = m.readContentTask.content

  m.categoryinfopanel ="CategoryInfoPanel")

  m.categoriespanel.list.observeField("itemFocused", "showcategoryinfo")
  m.categoryinfopanel.observeField("focusedChild", "slideexamplesgridpanel")

end sub

Dynamic Content Meta-Data Reading

The setcategories() callback function creates the categories list panel and category description panel defined in the categorieslistpanel.xml and categoryinfopanel.xml files, and adds them to the panel set. When the ContentNode node created by the m.readContentTask object is assigned to the content field of the categories list panel object m.categoriespanel.list, the entire application is now set up to dynamically download additional content meta-data as needed by user actions.

To do this, we set up two field observers in the setcategories() function, one that observes the itemFocused field of the categories panel LabelList node, and the other to observe the focusedChild field of the category description panel. The first observer triggers a callback function that sends a category description to an <interface> field of the category description panel object m.categoryinfopanel, the second controls the sliding of the panels in the panel set if the user selects a category, or presses the Right, Left, or Back remote control keys while focus is on a particular panel.


  • No labels