Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
melev
Level 8

PosterGrid with fixed number of items

Jump to solution

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?

0 Kudos
1 Solution

Accepted Solutions
sjb64
Level 10

Re: PosterGrid with fixed number of items

Jump to 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.

View solution in original post

3 REPLIES 3
sjb64
Level 10

Re: PosterGrid with fixed number of items

Jump to 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
Level 8

Re: PosterGrid with fixed number of items

Jump to solution

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

0 Kudos
melev
Level 8

Re: PosterGrid with fixed number of items

Jump to solution

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>

0 Kudos