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="font:SmallBoldSystemFont"
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
