Forum Discussion

melev's avatar
melev
Channel Surfer
3 years ago
Solved

PosterGrid with fixed number of items

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?

Roku Developer Program
  • sjb64's avatar
    sjb64
    3 years ago

    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.

3 Replies

  • sjb64's avatar
    sjb64
    Roku Guru
    3 years ago

    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's avatar
      melev
      Channel Surfer
      3 years ago

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

      • melev's avatar
        melev
        Channel Surfer
        3 years ago

        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>