Roku Developer Program

Developers and content creators—a complete solution for growing an audience directly.
cancel
Showing results for 
Search instead for 
Did you mean: 
hugetv
Level 7

Helps insert content into RowList content

How can I have it load its item into each category by selecting it
<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->
<!-- node that renders Grid Screen, handles bookmark buttons, and handles start of video playback -->

<component name="GridScreen" extends="Group">
<interface>
<!-- Row item selection handler -->
<field id="rowItemSelected" type="intarray" alwaysnotify="true" alias="RowList.rowItemSelected"/>

<!-- Row item focused handler -->
<field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>

<!-- Interface to focused item (Content Node) -->
<field id="focusedContent"  type="node"/>
</interface>
<script type="text/brightscript" >
<![CDATA[
Function Init()
Print"[GridScreen] Init"

m.rowList=m.top.findNode("RowList")
m.description=m.top.findNode("Description")
m.background=m.top.findNode("Background")

m.top.observeField("visible","onVisibleChange")
m.top.observeField("focusedChild","OnFocusedChildChange")

End Function

'handler of focused item in RowList
Sub OnItemFocused()
itemFocused=m.top.itemFocused


If itemFocused.Count()=2
focusedContent=m.top.content.getChild(itemFocused[0]).getChild(itemFocused[1])
If focusedContent<>invalid
m.top.focusedContent=focusedContent
m.description.content=focusedContent
m.background.uri=focusedContent.hdBackgroundImageUrl
End If
End If
End Sub

'set proper focus to RowList in case if return from Details Screen
Sub onVisibleChange()
If m.top.visible=TRUE
m.rowList.setFocus(TRUE)
End If
End Sub

'set proper focus to RowList in case if return from Details Screen
Sub OnFocusedChildChange()
If m.top.isInFocusChain() And Not m.rowList.hasFocus()
m.rowList.setFocus(TRUE)
End If
End Sub

]]>
</script>

<children>
<FadingBackground
id="Background"
width="1280"
height="720"
color="0xAAAAAA"
ShadeOpacity="0.8"/>

<Poster
   id="Background"
  translation="[0,0]"
uri="pkg:/images/Background/Fondo.jpg"
width="1280"
height="720" />

<Rectangle
translation="[0,0]"
width="1280"
height="720"
color="0x000000"
opacity="0.8"
/>

<RowList
id="RowList"
focusBitmapUri="pkg:/images/focus_grid.9.png"
translation="[-60,372]"
itemSize="[1327,218]"
numRows="2"
itemSpacing="[13,0]"
focusXOffset="[147]"
rowFocusAnimationStyle="fixedFocusWrap"
rowItemSize="[[262,147]]"
rowItemSpacing="[[16.5,3]]"
showRowLabel="true"
showRowCounter="true"
rowLabelOffset="[[147,20]]"
>
      <ContentNode id="menucontent" role="content">

        <ContentNode
 id="0"
          title="INSERT CONTENT HERE" />
        <ContentNode
 id="1"
          title="INSERT CONTENT HERE" />
        <ContentNode
 id="2"
          title="INSERT CONTENT HERE" />
        <ContentNode
 id="3"
          title="INSERT CONTENT HERE" />
      </ContentNode>
</RowList>

<Poster
translation="[0,650]"
uri="pkg:/images/BG_dark_down.png"
width="2000"
height="95" />

<Description
id="Description"
translation="[106,119]"
itemSpacings="[7,17]"/>

</children>
</component>


How can I insert each ContentNode when selecting
This content -> http://www.sdktestinglab.com/homeoptionslistcontent.xml
Our system http://www.rokumanager.com
0 Kudos
5 Replies
24i
Level 7

Re: Helps insert content into RowList content

I don't really understand the question.
Do you want to read that .xml file and place the categories in the rowlist as title?
Is the .xml inside the project or do you want to read in from an external source? 
0 Kudos
hugetv
Level 7

Re: Helps insert content into RowList content

GridScreen.xml
<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->

<!-- node that renders Grid Screen
    handles bookmark buttons
    handles start of video playback
 -->
<component name="GridScreen" extends="Group" initialFocus="RowList">
    <interface>
        <!-- Grid Content Node -->
        <field id="content" type="node" alias="RowList.content" onChange="onContentChange"/>

        <!-- Row item selection handler -->
        <field id="rowItemSelected" type="intarray" alwaysnotify="true" alias="RowList.rowItemSelected"/>

        <!-- Row item focused handler -->
        <field id="itemFocused" type="intarray" alias="RowList.rowItemFocused" onChange="OnItemFocused"/>

        <!-- Interface to focused item (Content Node) -->
        <field id="focusedContent"  type="node"/>
    </interface>

    <!-- main handler -->
    <script type="text/brightscript" uri="pkg:/components/GridScreen/GridScreen.brs" />


    <children>
        <FadingBackground
            id="Background"
            width="1280"
            height="720"
            color="0x151515"
            ShadeOpacity="0.8" />

        <!-- Custom fonts -->
        <Label>
            <Font id="RowListFont" role="font" uri="pkg:/fonts/Roboto-Regular.ttf" size="18"/>
        </Label>

        <RowList
            id="RowList"
            itemComponentName="GridScreenItem"
            focusBitmapUri="pkg:/images/focus_grid_light.9.png"
            translation="[-60, 410]"
            itemSize="[1327, 218]"
            numRows="2"
            itemSpacing="[0,0]"
            focusXOffset="[147]"
            rowFocusAnimationStyle="fixedFocusWrap"
            rowItemSize="[[262, 147]]"
            rowItemSpacing="[[16, 3]]"
            showRowLabel="true"
            showRowCounter="true"
            rowLabelOffset="[[147, 20]]"
            rowLabelFont="dictionary:RowListFont"
            rowLabelColor="0xf5f5f5" />
        <!-- Overhang logo -->
        <Group id="Overhang">
            <Poster
                id="PosterOverhang"
                translation="[100, 30]"
                uri="pkg:/images/overhangLogo.png"
                width="184"
                height="100" />

            <Label
                id="OptionsLabel"
                translation="[726, 58]"
                width="400"
                horizAlign="right"
                text="Options"
                color="0xf5f5f5">
                <Font role="font" uri="pkg:/fonts/Roboto-Regular.ttf" size="21" />
            </Label>

            <Poster
                id="OptionsIcon"
                blendColor="#ffffff"
                enableColorBlending="false"
                translation="[1139, 53]"
                width="24"
                height="24"
                uri="pkg:/images/options.png" />
        </Group>

        <Poster
            id="BackgroundDown"
            translation="[0, 650]"
            width="2000"
            height="95" />

        <Description
            id="Description"
            translation="[106, 140]"
            itemSpacings="[7,17]" />
    </children>
</component>




GridScreen.brs
' ********** Copyright 2016 Roku Corp.  All Rights Reserved. **********
 ' inits grid Screen
 ' creates all children
 ' sets all observers
Function Init()
    ? "[GridScreen] Init"

    m.rowList       =   m.top.findNode("RowList")
    m.description   =   m.top.findNode("Description")
    m.background    =   m.top.findNode("Background")

    m.top.observeField("visible", "onVisibleChange")
    m.top.observeField("focusedChild", "OnFocusedChildChange")

    ' Set theme
    m.rowList.focusBitmapUri = "pkg:/images/focus_grid_light.9.png"
    m.rowList.rowLabelColor = "#f5f5f5"

    m.optionsLabel = m.top.findNode("OptionsLabel")
    m.optionsLabel.color = "#f5f5f5"

    m.optionsIcon = m.top.findNode("OptionsIcon")
    m.optionsIcon.blendColor = "#ffffff"
End Function

' handler of focused item in RowList
Sub OnItemFocused()
    itemFocused = m.top.itemFocused
    ' item focused should be an intarray with row and col of focused element in RowList
    If itemFocused.Count() = 2 then
        focusedContent          = m.top.content.getChild(itemFocused[0]).getChild(itemFocused[1])
        if focusedContent <> invalid then
            m.top.focusedContent    = focusedContent
            m.description.content   = focusedContent
            m.background.uri        = focusedContent.hdBackgroundImageUrl
        end if
    end if
End Sub

' set proper focus to RowList in case if return from Details Screen
Sub onVisibleChange()
    if m.top.visible = true then
        m.rowList.setFocus(true)
    end if
End Sub

' set proper focus to RowList in case if return from Details Screen
Sub OnFocusedChildChange()
    if m.top.isInFocusChain() and not m.rowList.hasFocus() then
        m.rowList.setFocus(true)
    end if
End Sub



HomeScene.brs
'********** Copyright 2016 Roku Corp.  All Rights Reserved. **********
'inits grid screen
'creates all children
'sets all observers
Function Init()
Print "[[size=85][font=monospace]HomeScene[/font][/size]] Init"

'GridScreen node with RowList
m.GridScreen=m.top.findNode("GridScreen")
m.GridScreen.Visible=FALSE

'Create main labellist menu
m.MainMenu=m.top.findNode("MainMenuSettings")
m.MainMenu.SetFocus(TRUE)

End Function

Function Moviescontentdownloaded()
m.MainMenu.Visible=FALSE
m.loadingIndicator.control="stop"
m.loadingIndicator.opacity=0
m.parsegrid.unobservefield("content")
m.GridScreen.content=m.parsegrid.content
m.GridScreen.visible="TRUE"
m.GridScreen.SetFocus(TRUE)
End Function

Function MainMenuSelectionMade() 'interface for the main menu screen
'Print m.MainMenu.getChild(1).itemselected.toStr()

'first option is Movies Grid
If m.MainMenu.getChild(1).itemSelected=0
m.loadingIndicator.SetFocus(TRUE)
m.loadingIndicator.control="start"
m.loadingindicator.opacity=1
m.ParseGrid.uri=m.top.serverUrl + "movies.php?tipo=1"
m.ParseGrid.FunctionName="GetDataMovies"
m.parsegrid.observefield("content","Moviescontentdownloaded")
m.ParseGrid.control="RUN"

End If

End Function



HomeScene.xml

<?xml version="1.0" encoding="utf-8" ?>
<!--********** Copyright 2016 Roku Corp.  All Rights Reserved. **********-->
<!-- main node which handles home screen children -->

<component name="HomeScene" extends="Scene">

<interface>
<!-- Content for RowList in GridScreen on Home Scene -->
<field id="gridContent" type="node" alias="GridScreen.content" onChange="OnChangeContent" />

<!-- Row item selection handler -->
<field id="rowItemSelected" type="intarray" alwaysNotify="true" alias="GridScreen.rowItemSelected"/>
<field id="rowItemSelectedSeries" type="intarray" alwaysNotify="true" alias="SeriesScreen.rowItemSelected"/>
<field id="rowItemSelectedSeason" type="intarray" alwaysNotify="true" alias="SeasonScreen.rowItemSelected"/>

<!-- Main menu item selection handler -->
<field id="itemSelected" type="integer" alias="MainMenuSettings.itemSelected" onChange="MainMenuSelectionMade"/>
<field id="selectedCategories" type="string" alwaysNotify="true" />

<!-- Main menu close handler -->
<field id="close" type="bool"/>

</interface>

<!-- main handler -->
<script type="text/brightscript" uri="pkg:/components/HomeScene/HomeScene.brs" />

<children>
        <HomeSceneTask
            id="HomeSceneTask"/>

<!-- Overhang logo -->
<Poster
   id="Background"
  translation="[0,70]"
uri="pkg:/images/Background/HomeScene.jpg"
width="1280"
height="650" />

<Overhang
   id="Overhang"
showClock="true"
clockColor="0xffffff"
showOptions="true"
optionsText="Search"
optionsColor="0xffffff"
logoUri="pkg:/images/iptvLogo.png"
backgroundUri="pkg:/images/header.png"/>

<Poster
id="MainMenuBackground"
width="600"
height="300"
uri="pkg:/images/BG_dark_down.png"
translation="[340,210]">
<Label
color="#F0F0F0"
font="font:MediumBoldSystemFont"
horizAlign="center"
text="Menu Principal:"
translation="[20,20]"
width="200" />
<LabelList
id="MainMenuSettings"
focusRow = "0"
numRows="4"
                sectionDividerHeight = "48.0"
                sectionDividerFont = "font:MediumBoldSystemFont"
                sectionDividerTextColor = "#F0F0F0"
vertFocusAnimationStyle="floatingFocus"
translation="[75,80]"
itemSize="[450,48]"
color="#F0F0F0"
focusedColor="#F00000">
<ContentNode id="Labels" role="content">
<ContentNode id="0" title="Movies" />
<ContentNode id="1" title="Infantil" />
<ContentNode id="2" title="Documental" />
</ContentNode>
</LabelList>
</Poster>

<LoadingIndicator
id="loadingIndicator"
imageUri="pkg:/components/LoadingIndicator/loader.png"
clockwise="TRUE"
spinInterval="2"
fadeInterval="0.5"
spacing="20"
imageWidth="100"
text="Loading..."
width="1280"
height="720"
centered="FALSE"
translation="[0,0]"
textPadding="10"
font="fontSmiley FrustratedmallBoldSystemFont"
backgroundColor="0x551A8B"
backgroundOpacity="0"/>

<GridScreen
id="GridScreen"
visible="FALSE"
translation="[0,0]" />

<DetailsScreen
id="DetailsScreen"
visible="FALSE"/>

<!-- Include Download Data Functions -->
<ParseGrid id="ParseGrid"/>

</children>
</component>


My problem is that I want to be able to load the individual categories so I can get the section open much faster I'm working with json
Our system http://www.rokumanager.com
0 Kudos
hugetv
Level 7

Re: Helps insert content into RowList content

Some idea of being able to insert each node that is already
Our system http://www.rokumanager.com
0 Kudos
24i
Level 7

Re: Helps insert content into RowList content

So if I understand correctly you don't want to wait for the parseGrid to have downloaded ALL the content and then apply it to the Gridscreen, but you want to dynamically apply it to the Gridscreen whenever something is ready from the parseGrid. Correct?

I think you should let the parseGrid set the content field every time a category is ready. I take it that "Moviescontentdownloaded" is called as it observes the content field of parseGrid?
Then you should stay observing this field and add everything the "Moviescontentdownloaded" receives to a contentNode that is locally in the HomeScene. Then set the m.GridScreen.content to this local contentNode instead of the content that m.parseGrid returns. 
0 Kudos
hugetv
Level 7

Re: Helps insert content into RowList content

"24i" wrote:
So if I understand correctly you don't want to wait for the parseGrid to have downloaded ALL the content and then apply it to the Gridscreen, but you want to dynamically apply it to the Gridscreen whenever something is ready from the parseGrid. Correct?

I think you should let the parseGrid set the content field every time a category is ready. I take it that "Moviescontentdownloaded" is called as it observes the content field of parseGrid?
Then you should stay observing this field and add everything the "Moviescontentdownloaded" receives to a contentNode that is locally in the HomeScene. Then set the m.GridScreen.content to this local contentNode instead of the content that m.parseGrid returns. 

I did not understand very well my friend
Our system http://www.rokumanager.com
0 Kudos