Forum Discussion

Nethram's avatar
Nethram
Visitor
8 years ago

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.

8 Replies

  • 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 ? 
  • rymawby's avatar
    rymawby
    Binge Watcher
    Hi Nethram,

    Can you post some sample code I can take a look at?
  • Hi,
    Can you suggest the suitable method of building this kind of layout ? 
  • "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?
  • 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 ?
  • 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.
  • 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 ?