<?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>

' ********** 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

'********** 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

<?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>

"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. 

itemComponentName = "menucontent"

I think you have add that line in your rowlist