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: 

How to replace a child Panel in PanelSet

I am trying to create a PanelSet with multiple panels (3 in total) where 3rd panel is replaced with a new panel when something in 2nd panel changes. Something similar to the behavior mentioned in the PanelSet docs in the Child Management section. Quoting the docs
If any panel contains a list or grid, the typical usage is that when the list or grid panel is on the left, each list/grid item creates a different panel on the right. Typically, the list or grid itemFocused and itemUnfocused fiitemUnfocused[/font][/color]itemFocused [/font][/color]field changes, it will create a new panel for the newly focused list or grid item, and call replaceChild() to cause the old panel to be replaced by the new one.

The problem is in the last line, according to which replaceChild() should replace the child with new panel, but it does not, instead new panel is appended to the panelSet and old panel keeps displaying on the screen.

Here is my method that displays 3rd panel when something changes in the 2nd panel.
sub showSubSettingsDetailPanel()
if not m.top.panelSet.isGoingBack
selectedSubSetting = m.subSettingsPanel.list.content.getChild(m.subSettingsPanel.list.itemFocused).title

m.oldPanel = m.panel

if selectedSubSetting = "Subtitles"
? "In Subtitles Detail Panel"
m.panel = CreateObject("roSGNode", "subtitlesdetailpanel")
m.panel.value = true
[size=85][font=Helvetica Neue, Helvetica, Arial, sans-serif] [/font][/size]
else if selectedSubSetting = "News Feed"
? "In NewsFeed Detail Panel"
m.panel = CreateObject("roSGNode", "newsfeeddetailpanel")
m.panel.selectedId = 1
end if

if m.oldPanel <> invalid
lastPanelIndex = m.top.panelSet.getChildCount() - 1
m.oldPanel.visible = false
m.top.panelSet.replaceChild(m.panel, 4)
else
m.top.panelSet.appendChild(m.panel)
end if
else
m.subSettingsPanel.setFocus(true)
m.panel = invalid
m.oldPanel = invalid
end if
end sub

Am I doing something wrong? If yes, then what is the correct way to replace the child panels in a panel set?
0 Kudos
2 Replies
heitorburger
Level 7

Re: How to replace a child Panel in PanelSet

I am also currently struggling with this.  Smiley Sad

In my case, I want to replace the Panel I have on the right-hand side when I select a different item on my left-hand side Panel. Removing some code, but this is what I was trying:

function showPanelInfo()
    if m.listpanel.list.itemFocused = 0
        m.panelset.replaceChild(m.options1Panel, 3)
    else
        m.panelset.replaceChild(m.options2Panel, 3)
    end if
end function

Function init()
    m.panelset = createObject("roSGNode", "PanelSet")

   ' Left-hand side panel with two items list
    m.optionListPanel = m.panelset.createChild("OptionListPanel")
   
   ' Right-hand side panels with different lists for each item on left-hand side panel
    m.options1Panel = m.panelset.createChild("Options1Panel")
    m.options2Panel = createObject("roSGNode", "Options2Panel")
    
    m.optionListPanel.observeField("itemFocused", "showPanelInfo")
...
end function
0 Kudos
heitorburger
Level 7

Re: How to replace a child Panel in PanelSet

I finally got this to work thanks to a Stack Overflow user's help: http://stackoverflow.com/a/42413418/1144141

For GridPanels or ListPanels, you can:


  • Make sure that the list createNextPanelOnItemFocus is true (it's set to true by default)

  • createNextPanelIndex field[/font][/color]

  • In your observer callback, create your next panel and set it to your_list.nextPanel field[/font][/color]

Some sample code:

function showPanelInfo()
    if m.listpanel.list.itemFocused = 0
        m.panelset.nextPanel = m.options1Panel
    else
        m.panelset.nextPanel = m.options2Panel
    end if
end function

Function init()
    m.panelset = createObject("roSGNode", "PanelSet")

    ' Left-hand side panel with two items list
    m.optionListPanel = m.panelset.createChild("OptionListPanel")
    
    ' Right-hand side panels with different lists for each item on left-hand side panel
    m.options1Panel = m.panelset.createChild("Options1Panel")
    m.options2Panel = createObject("roSGNode", "Options2Panel")
    
    m.optionListPanel.list.observeField("createNextPanelIndex", "showPanelInfo")
...
end function
0 Kudos