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: 
dreamer2057
Channel Surfer

Navigation. The Right Way

Hello! How right implement navigation?

I need

1) Custom Controls, which will be repeats in different part of application
2) Custom pages (for example videos, epg, settigns).
3) The animated behavior

Examples are too poor. If i right understand:

1) I should use components, described in xml/brs files, something like

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


2) How to implement different pages separately with some show/hide behaviour? Scenes?


scene = screen.CreateScene("GuideScene")
screen.show()


3) Again, i need to use components?


<LayoutGroup id = "menuBar" itemSpacings = "[85]" translation="[640,1000]" layoutDirection = "horiz" horizAlignment = "center" vertAlignment = "center" >
<Poster
id="testPoster"
uri="pkg:/images/mm_icons_guide.png"
width="0.0"
height="0.0"
translation="[0,0]"
opacity="1.0"/>
<Poster
id="testPoster4"
uri="pkg:/images/mm_icons_search.png"
width="0.0"
height="0.0"
translation="[0,0]"
opacity="0.2"/>
<Poster
id="testPoster5"
uri="pkg:/images/mm_icons_settings.png"
width="0.0"
height="0.0"
translation="[0,0]"
opacity="0.2"/>
</LayoutGroup>
<ParallelAnimation id = "ShowMenu" > <!--** ParallelAnimation id = "testParallelAnimation" repeat = "true" **-->
<Animation id = "testPosterAnimation" duration = "0.4" easeFunction = "linear" >
<Vector2DFieldInterpolator key= "[0, 1]" keyValue= "[ [640, 1000], [640, 620] ]" fieldToInterp="menuBar.translation" />
<FloatFieldInterpolator key= "[0, 1]" keyValue= "[ 0.2, 1]" fieldToInterp="menuBar.opacity" />
</Animation>
<Animation id = "testPosterBckgAnimation" duration = "0.4" easeFunction = "linear" >
<Vector2DFieldInterpolator key= "[0, 1]" keyValue= "[ [0, 870], [0, 490] ]" fieldToInterp="testPosterBckg.translation" />
<FloatFieldInterpolator key= "[0, 1]" keyValue= "[ 0.2, 1 ]" fieldToInterp="testPosterBckg.opacity" />
</Animation>
<Animation id = "testPosterSelectAnimation" duration = "0.4" easeFunction = "linear" >
<Vector2DFieldInterpolator key= "[0, 1]" keyValue= "[ [230, 910], [230, 530] ]" fieldToInterp="testPosterSelect.translation" />
<FloatFieldInterpolator key= "[0, 1]" keyValue= "[ 0.2, 1 ]" fieldToInterp="testPosterSelect.opacity" />
</Animation>
</ParallelAnimation>
Sincerely, Sergey Shoshin, software developer.
0 Kudos
1 REPLY 1
dreamer2057
Channel Surfer

Re: Navigation. The Right Way

The best navigation method in New Graph scene is manipulations of items in one main scene, as roku's says:


Engineering's Response:
So you can create the “illusion” of having multiple Scenes by selectively making the current “scene” invisible and replacing it (appending) another component, then “go back” when needed by removing/disappearing the component “scene” and making the original “scene” visible again (not unheard of for UI programming, in fact). Again, you probably want to use your Scene node as your “master control” node.


http://forums.roku.com/viewtopic.php?f=34&t=88621&start=90
Sincerely, Sergey Shoshin, software developer.
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.