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: SceneGraphTutorial.zip
Tutorial Application Overview
SceneGraphTutorial.zip, you'll note that the package
components directory consists of the following directories and XML component files:
Contains the XML component files for the examples in Animation Markup
Contains the XML component files for the examples in Control Nodes Markup
Contains the XML component files for the examples in Events and Observers Markup
Contains the XML component files for the examples in Layout/Groups Markup
Contains the XML component files for the examples in Lists and Grids Markup
Contains the XML component files for the examples in Media Playback Markup
Contains the XML component files for the examples in Renderable Node Markup
Contains the XML component files for the examples in Sliding Panels Markup
Contains the XML component files for the examples in Typography Markup
Contains the XML component files for the examples in Widgets Markup
Contains the XML component files for the examples in Z-Order/Parent-Child Markup
XML Component Files
The scene component for the application, extended from the OverhangPanelSetScene node class
A generic Task node for reading Content Meta-Data for application content items from server XML files
A medium-size ListPanel node that lists the example categories
A medium-size Panel node that provides a description of each example category focused in the categories list panel
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
SceneGraphTutorial.zip 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
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
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.contenturi = "http://www.sdktestinglab.com/Tutorial/content/categoriescontent.xml"
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:
m.categoriespanel = m.top.panelSet.createChild("CategoriesListPanel")
m.categoriespanel.list.content = m.readContentTask.content
m.categoryinfopanel = m.top.panelSet.createChild("CategoryInfoPanel")
Dynamic Content Meta-Data Reading
setcategories() callback function creates the categories list panel and category description panel defined in the
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.