Roku Developer Program

Join our online forum to talk to Roku developers and fellow channel creators. Ask questions, share tips with the community, and find helpful resources.
cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
melev
Channel Surfer

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
Roku Guru

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
Roku Guru

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
Channel Surfer

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
Channel Surfer

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
Need Assistance?
Welcome to the Roku Community! Feel free to search our Community for answers or post your question to get help.

Become a Roku Streaming Expert!

Share your expertise, help fellow streamers, and unlock exclusive rewards as part of the Roku Community. Learn more.