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: 
nedu
Newbie

Accessing and Modifying a Child node from a Parent node

Hi I am trying to extend the ZoomRow sample channel. In essence I am adding a rectangle to each row item with a set color and I am trying to update the color when the item is in focus.

 

Here is the child component. I added a detailsTest field with an alias to the rectangle color.

<?xml version="1.0" encoding="utf-8" ?> 

<component name="SimpleGridItem" extends="Group">

<interface>
  <field id="width" type="float" alias="itemPoster.width" />
  <field id="height" type="float" alias="itemPoster.height" /> 
  <field id="detailsTest" type="float" alias="details.color" /> 
  <field id="itemContent" type="node" onChange="itemContentChanged"/> 
</interface>

<script type="text/brightscript" >
<![CDATA[
    function itemContentChanged()
	m.itemPoster.uri = m.top.itemContent.HDPOSTERURL
    end function

    function init()
        m.itemPoster  = m.top.findNode("itemPoster")
    end function
]]>
</script>

<children>
<Poster id="itemPoster" />
<Rectangle 
  id="details"
  width="575"
  height="80"
  color="0x373B3E"
>
  <LayoutGroup
    vertAlignment="center"
    horizAlignment="center"
    translation="[80, 40]"
  >
    <Label
      id="title"
      text="lets go"
      width="364" 
      horizAlign="center"
      wrap="true"
      lineSpacing="-2" 
    />
  </LayoutGroup>
</Rectangle>
</children>

</component>

 

Here is the parent component. I am updating the rectangle color in the focusChanged and rowItemFocusedChanged methods. I am getting an invalid expression in the rowItemFocusedChanged method. I am also not seeing any change on screen for the focusChanged method and was wondering what I am doing wrong. Any help will be greatly appreciated.

<?xml version="1.0" encoding="utf-8" ?> 

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

<script type="text/brightscript" >
<![CDATA[

    function init()
        print "in ZoomRowListTestScene init()"
        
        m.zoomRowList = m.top.findNode("theZoomRowList")

        m.zoomRowList.translation = [193, 110]

        m.zoomRowList.observeField("scrollingStatus", "scrollingStatusChanged")
        m.zoomRowList.observeField("rowItemFocused", "rowItemFocusedChanged")
        m.zoomRowList.observeField("rowFocused", "rowFocusedChanged")

        m.scrollingStatusLabel = m.top.findNode("scrollingStatusLabel")
        m.rowItemFocusedLabel = m.top.findNode("rowItemFocusedLabel")
        m.rowFocusedLabel = m.top.findNode("rowFocusedLabel")

        m.top.visible = true

        m.top.observeField("focusedChild", "focusChanged")

        m.readerTask = createObject("roSGNode", "RowListContentTask")
        m.readerTask.observeField("content", "gotContent")
        m.readerTask.control = "RUN"

        m.zoomRowList.visible = false
        m.zoomRowList.setFocus(true)
    end function

    function gotContent()
        if m.readerTask.content=invalid
            print "invalid readerTask.content"
        else
            m.zoomRowList.content = m.readerTask.content
	    m.zoomRowList.visible = true
        end if
    end function

    function focusChanged()
        if m.top.isInFocusChain()
	    if not m.zoomRowList.hasFocus()
                m.zoomRowList.setFocus(true)
                m.zoomRowList.detailsTest.color = "0x0xE55539"
            end if
        end if
    end function

    function rowFocused()
'        print "grid row "; m.zoomRowList.rowFocused; " focused"
    end function

    function rowSelected()
'        print "grid row "; m.zoomRowList.rowSelected; " selected"
    end function
    
    function updateCurrFocusRow()
        m.currFocusRowLabel.text = "currFocusRow: " + m.zoomRowList.currFocusRow.toStr()
    end function

    function scrollingStatusChanged()
        m.scrollingStatusLabel.text = "scrollingStatus is: " + m.zoomRowList.scrollingStatus.toStr()
    end function

    function rowItemFocusedChanged()
        m.rowItemFocusedLabel.text = "rowItemFocused is: " + m.zoomRowList.rowItemFocused[0].toStr() + " " + m.zoomRowList.rowItemFocused[1].toStr()
        m.zoomRowList.detailsTest.color = "0x0xE55539"
    end function

    function rowFocusedChanged()
        m.rowFocusedLabel.text = "rowFocused is: " + m.zoomRowList.rowFocused.toStr()
    end function

'    function onKeyEvent(key as string, press as boolean) as boolean
'    end function
]]>
</script>

<children>
<ZoomRowList 
    id="theZoomRowList"
    itemComponentName="SimpleGridItem"
/>
<Label id="scrollingStatusLabel" text="scrollingStatus: false" translation="[100,20]"/>
<Label id="rowItemFocusedLabel" text="rowItemFocused: 0, 0" translation="[500,20]" />
<Label id="rowFocusedLabel" text="rowFocused: 0" translation="[900, 20]"/>
</children>

</component>

 

Screenshot of the app

zoomrowlist.jpeg

 

 

0 Kudos
1 REPLY 1

Re: Accessing and Modifying a Child node from a Parent node

I figured there are other people who might conceivably incline toward the possibility to stay away from specific advancements or sign them like moreover as youtube or on facebook.

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.