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: 
Nethram
Level 7

Roku scene graph layout management

Hi,
I'm new to roku .I want to build a subscription process that includes 5 different layouts. Now i have all the 5 components in the scene created from the 'main.brs' and switching pages using interface . But it is not working as expected. What is the suggested way of building such a layout ?
Please help me solve this.
0 Kudos
8 Replies
squirreltown
Level 9

Re: Roku scene graph layout management

You need to be much more specific if you want any kind of answer.
Kinetics Screensavers
0 Kudos
Nethram
Level 7

Re: Roku scene graph layout management

App has a  subscription process with 5 phases starts from  home page .Every layout has positive and negative buttons.

1)I want to switch the layouts according to the button presses.
2)After the subscription process need to return to homepage.
3)To allow back button navigation in between the subscription process.
4)Home page contains two other buttons except subscription button.


Now i'm using interfaces to mange the layouts as follows.

1) Created scene "Homepage" from "main.brs"
2) Home page contains 3 buttons and 5 components for the 5 different subscription phases.
3) "Hompage.xml" has 5 interface fields of type string to communicate between 5 components.
4) When user press subscription button  app now shows the first component and set focus.
5) When user press negative or positive button  
    -Write a value to the interface field.
    -Home page gets the value.
    -Shows the next component and set focus.
6)When user press back button shows previous component.But failed to write to interface field.

Am i using wrong way to build this ?

What is the preferred way of building and managing this kind of layout ? 
0 Kudos
rymawby
Level 7

Re: Roku scene graph layout management

Hi Nethram,

Can you post some sample code I can take a look at?
---
Blogging Roku stuff at http://rymawby.com
---
0 Kudos
Nethram
Level 7

Re: Roku scene graph layout management

Hi,
Can you suggest the suitable method of building this kind of layout ? 
0 Kudos
squirreltown
Level 9

Re: Roku scene graph layout management

"Nethram" wrote:

6)When user press back button shows previous component.But failed to write to interface field.

Am i using wrong way to build this ?

Better, but put yourself in the reader's shoes. No one can tell what code you wrote here can they?
Kinetics Screensavers
0 Kudos
Nethram
Level 7

Re: Roku scene graph layout management

Thank you for your help and sorry about the confusion.
I have described above the requirements of the app and  how i built the lay out . I just want to know the suggested way building this kind of layout.

Can i put all the components in scene ?
Or have to create, append and remove roSG nodes as needed ?
Or is there a better solution ?
0 Kudos
tim_beynart
Level 7

Re: Roku scene graph layout management

In the spirit of providing as little information as possible, here's one answer:

Home Scene with XML children like this:

  • Screen 1

  • Screen 2

  • Screen 3

  • Screen 4

  • Screen 5

Logic in Home Scene to show/hide different screens according to button clicks.
0 Kudos
Nethram
Level 7

Re: Roku scene graph layout management

Thank you for your suggestion but I'm already using the way you suggested . Here is my code.

home.xml

<interface>
<field id="showContent" type="node" alias="shows.gridContent" />
<field id="subscriptionStep1" type="string" alias="step1.action" onChange="subscriptionStep1event" />
<field id="subscriptionStep2" type="string" alias="step2.action" onChange="subscriptionStep2event" />
</interface>
<children>
<Rectangle 
id = "firstpage" 
width="1280" 
height="720"
visible="true"
color="0x000000FF"
>
</<Rectangle >
    <shows
            id="shows"
            visible="false"
            translation="[0,0]" />
<Button
id = "trial"
text = "START YOUR FREE TRIAL NOW "
showFocusFootprint = "true"
translation = "[120,450]"
focusedTextColor="0x800000FF"
textColor="0xFFFFFFFF"
minWidth = "240" />

<step1
id="step1"
visible="false"
translation="[0,0]" />

<step2
id="step2"
visible="false"
translation="[0,0]" />


home.brs


sub init()

m.firstpage = m.top.findNode("firstpage")
m.step1 = m.top.findNode("step1")
m.step2 = m.top.findNode("step2")
m.trial.ObserveField("buttonSelected", "startsignup") 
end sub


function startsignup()

m.step1.visible=true
m.step1.setFocus(true)

end function


function subscriptionStep1event()

currentval = m.top.subscriptionStep1
? "transition";currentval
if currentval = "accept"
m.step2.visible=true
m.step1.visible=true
m.step2.setFocus(true)
end if
if  currentval = "cancel"
m.firstpage.visible= true
end if

end function



step1.xml

<component name="step1" extends="Group" initialFocus="submit" >

<!-- main handler -->
<script type="text/brightscript" uri="pkg:/components/screens/step1/step1.brs" />
<interface>
<field id="action" type="string" />
</interface>
<children>
<Group>
<ButtonGroup id="submit" 
layoutDirection = "horiz"
translation = "[ 500,600]"
/>


step1.brs

m.buttongroup = m.top.findNode("submit")
m.buttongroup.buttons = [ "DECLINE", "ACCEPT" ]
m.buttongroup.ObserveField("buttonSelected","submit")

function submit()
if  m.buttongroup.buttonSelected = 1 then
m.top.action="accept"
else
m.top.action="cancel"
end if
end function

 I'm not sure it is the best way.I have read the roku scene graph documentation but still confused. 
 Can you suggest a better method ? 
0 Kudos