Roku Developer Program

[melev]

Hi:

    I'm new to Roku development, I'm trying to create a menu (Scene) with 4 images using a PosterGrid component.

   This is static content (images won't change) so I'm wondering if there's a way to achieve this? So far, I have only seen PosterGrid being used by fetching its content from a server (dynamic content) but my guess is that since the content is not changing it would be better to have it packaged with the application.

I tried the below, but it doesn't work (only a black screen is displayed):

<?xml version="1.0" encoding="utf-8" ?>
<component name="MainScreen" extends="Scene">
  <children>
    <PosterGrid id="testPosterGrid"
                        translation="[10,10]"
                        basePosterSize="[540,440]"
                        itemSpacing="[32,32]"
                        caption1NumLines="1"
                        caption2NumLines="1"
                        numColumns="2"
                        numRows="2">

      <Poster id="poster1"
                   uri="pkg:/images/image1.png"
                   x="0" y="0"/>
      <Poster id="poster2"
                    uri="pkg:/images/image2.png"
                    x="0" y="1"/>
      <Poster id="poster3"
                    uri="pkg:/images/image3.png"
                    x="1" y="0"/>
      <Poster id="poster4"
                   uri="pkg:/images/image4.png"
                   x="1" y="1"/>
    </PosterGrid>

  </children>
<!-- BrightScript Portion -->
<script type="text/brightscript" >
<![CDATA[
sub init()
m.top.setFocus(true)
end sub

]]>
</script>
<!-- End of BrightScript Portion -->
</component>

Any ideas on how to make this work?

[sjb64 · Accepted solution]

Create a primary content node for the poster grid, and then add the 4 manually created children content nodes to it, set the poster grids content to that primary content node.  

The content nodes don't really care where they data came from (online, local data, or hard coded).  They just need to be populated in the primary content node and it assigned to the poster grid.

[melev]

I was really stuck with this one, I did exactly what you mention, and it works like a charm. Thanks a lot!

[melev]

In case anyone wonders how the xml for the component looks like, it is something like this:

<?xml version="1.0" encoding="utf-8" ?>
<component name="MainScreen" extends="Scene" initialFocus="testPosterGrid">
<children>

<PosterGrid
id="testPosterGrid"
translation="[32,32]"
basePosterSize="[640,270]"
itemSpacing="[32,32]"
caption1NumLines="1"
numColumns="2"
numRows="2">

  <ContentNode role = "content" >
      <ContentNode hdgridposterurl="pkg:/images/image_1.png" focusable="true"/>
      <ContentNode hdgridposterurl="pkg:/images/image_2.png" focusable="true"/>
      <ContentNode hdgridposterurl="pkg:/images/image_3.png" focusable="true"/>
      <ContentNode hdgridposterurl="pkg:/images/image_4.png" focusable="true"/>
  </ContentNode>

</PosterGrid>

</children>
<!-- BrightScript Portion -->
<script type="text/brightscript" >
<![CDATA[
sub init()
    m.top.setFocus(true)
end sub

]]>
</script>
</component>