Navigation concept in Roku

Question

I am facing some issue in screen navigation in Roku Brightscript. Please, anyone, help me how I can manage 5-6 screen in my Roku project. I want to navigate from 1 to 2 screen and also want to back from that screen. This is some major issue I have for the last 6 month. I am not able to do it. Some help from your side helps me to understand.

Currently, I have tried by following below procedure

1-if I want to go to 2 screens then I will do below part

   m.top.AppendChild(m.secondscreen)
   m.secondscreen.setFocus(true)
   m.secondscreen.visible="true"

2- when I click back then in a second-screen back key I will return it false So that it comes to 1st screen back and here I will just do this

   m.secondscreen.setFocus(false)
   m.secondscreen.visible="false"
   return true

Here it will come to the 1st screen. So like this, I will go to all pages. But I know this is not the exact process in Roku. So I have faced many difficulties by doing this.and I am not able to move from 5 screens to 1 screen by following the above procedure So anyone let me understand with some example if you have.it will be grateful to you

score 4 · Answer 1 · answered Jun 13 '19 at 22:19

4

I assume your m.secondscreen is a "roSGScreen" component and if so, you are correct that you are incorrect. A Roku scenegraph application should only have one "roSGScreen" created ever.

The concept of "screen" is confusing, because you can create many components that could be thought of as "screens" when they're actually just views. Your one and only scene should control the active views (subcomponents, not roSGScreens) and can attach / detach or show / hide the subcomponents as needed based on user action.

Technically speaking, I'm pretty certain that you want to manage 5 views, not 5 screens.

I suggest spending some time with the example application from the SDK docs tutorial to learn about this more.

answered Jun 13 '19 at 22:19

Joe T

2,300
1
19
31

Are you saying there is no built-in good way (or no best practice) to transition between scenes? In many other dev sdks we push/pop view controllers, navigation to/back from pages etc. Is there no such notion? Should we think of a scene as a one-thing and only manipulate the views inside of that one? – Jonny Jun 24 '19 at 08:07
2

@Jonny Your last statement is correct. As Joe T mentioned, the best practice is having a `Scene` component where you manage screens/pages/views (whatever you want to call them), with your own navigation logic. These views would usually extend the `Group` component and have their own components structure. – juliomalves Jun 24 '19 at 23:48

Roger Ramirez · Answer 2 · 2019-07-31T15:34:33.213

3

I have used the view stack component provided by Roku on some published channels.

I encourage you to use it, it will make easier the screen handling.

Please see Github Sample Docs.

Probably at first, the setup could be painful but definitely, it's more scalable as your applications keep growing.

To show a screen, you call it like this:

viewOne = CreateObject("roSGNode", "customScreen")
m.top.ComponentController.CallFunc("show", {
  view: viewOne
})

To close your screen manually, you just need to change a property "close" to true.

viewOne.close = true

You can keep calling the show method and it will append all those views on the stack.

You also gain some functionality by letting the component controller handle your screen stack:

• currentView - Links to the view that is currently shown by ViewStack (This view represents the view that is shown by ViewStack.

• allowCloseChannelOnLastView - If true, the channel closes when the back button is pressed or if the previous view set the view's close field to true

• allowCloseLastViewOnBack - If true, the current view is closed, and the user can open another view through the new view's wasClosed callback

Notice that If another view without using ViewStack is shown, it wouldn't be reflected on the stack or could be accessed by the current view reference)

===============UPDATE==========

With the sample code of the original question (assuming you made the setup of the viewstack):

' To show the second screen
m.top.ComponentController.CallFunc("show", {
      view: m.secondView
})

' to show another view on top.
m.thirdView = CreateObject("roSGNode", "thirdView")
m.top.ComponentController.CallFunc("show", {
      view: m.thirdView
})
' to close third screen and go back to second screen
m.thirdView.close = true

edited Jul 31 '19 at 15:34

answered Jul 25 '19 at 22:50

Roger Ramirez

176
7

you perform any example on this? – Nikunj Chaklasiya Jul 26 '19 at 04:52
@NikunjChaklasiya, a good place to start is with the hello world app [link](https://github.com/rokudev/SceneGraphDeveloperExtensions/tree/master/samples/1_Setup+and+HelloWorld), with that you'll have the setup ready. On your MainScene.brs, override the "show" method to display your first screen as pointed on the response. `screenOne = CreateObject("roSGNode", "customScreen") m.top.ComponentController.CallFunc("show", { view: screenOne })` – Roger Ramirez Jul 26 '19 at 15:27
Thank you for your reply But still, I'm Confused. – Nikunj Chaklasiya Jul 29 '19 at 06:15
No worries, can you be more specific about why are you confused? @NikunjChaklasiya – Roger Ramirez Jul 29 '19 at 15:42
I think you know the first file always create with roSGScreen then second for roSGNode so here the show function write is a First screen code or second screen code. – Nikunj Chaklasiya Jul 30 '19 at 03:55
here the custom screen creates a second screen so show function writes for second screen code or first screen code every time confusion over here. – Nikunj Chaklasiya Jul 30 '19 at 05:04
@NikunjChaklasiya just updated my response, hopefully, it's clear now. – Roger Ramirez Jul 30 '19 at 21:51
As others pointed out, usually apps have one scene and within that scene you have the logics for the views. https://developer.roku.com/en-gb/docs/references/scenegraph/scenegraph-nodes.md – Roger Ramirez Jul 30 '19 at 22:03
Thank you I Cleard now. here my first screen code write in main.brs `screen = CreateObject("roSGScreen") m.port = CreateObject("roMessagePort") ' m.st = CreateObject("roSystemTime") screen.setMessagePort(m.port) scene = screen.CreateScene("WisePanel") ` – Nikunj Chaklasiya Jul 31 '19 at 10:33
here second screen code second .brs file write `screenOne = CreateObject("roSGNode", "customScreen") m.top.ComponentController.CallFunc("show", { view: screenOne })` It is correct? – Nikunj Chaklasiya Jul 31 '19 at 10:34
Awesome! so If you followed the GitHub project, your wisePanel scene must extend from "BaseScene" right? on your WisePanel.brs there should be a function called "show", in that function you should be able the call the "show" function from the componentController. – Roger Ramirez Jul 31 '19 at 15:55
Hey, bro sry But Still It's Not Working. I'm trying to https://stackoverflow.com/questions/57374718/how-to-access-another-file-label-using-a-brightscript this thing. – Nikunj Chaklasiya Aug 07 '19 at 07:37
I try to open another scene but every time gave the show function error like this `Interface not a member of BrightScript Component (runtime error &hf3)` – Nikunj Chaklasiya Aug 07 '19 at 07:39

Nikunj Chaklasiya · Answer 3 · 2019-06-13T09:00:59.353

0

Add one thing in your code :

m.secondscreen.close = true return true

Roku navigation first close screen is required. After the first screen is closed then the second screen will open. it's definitely work.

edited Jun 13 '19 at 09:00

answered Jun 13 '19 at 08:54

Nikunj Chaklasiya

620
7
26

Ya but my process is wrong of doing this thing. could you please elaborate on how I should handle back. how you handle this – Bishal Seth Jun 13 '19 at 09:17
But if i switch from 5th screen to 2nd screen then how i can do this. – Bishal Seth Jun 13 '19 at 09:28
Here if i append that screen then it will through errors – Bishal Seth Jun 13 '19 at 09:28
Roku support back button automatic. But its handle custom. first close 1st screen after that open 2nd screen. first write `m.firstscreen.setFocus(true) m.firstscreen.visible="true" m.firstscreen.close="true" m.secondscreen.setFocus(true) m.secondscreen.visible="true" i hope this is helpful. – Nikunj Chaklasiya Jun 13 '19 at 09:29
it's every back key press you require open screen is closed. after that open next screen. check it in your code – Nikunj Chaklasiya Jun 13 '19 at 09:31
First you create a global variable in main.brs m.global = screen.getGlobalNode() like these – Nikunj Chaklasiya Jun 14 '19 at 07:09
Now you use the XML id is use m.global .screenfirst and onchange write the screen function name – Nikunj Chaklasiya Jun 14 '19 at 07:11
here field write in both the xml screenfirst and screensecond – Nikunj Chaklasiya Jun 14 '19 at 07:12
and call to the firstscreen in a button event – Nikunj Chaklasiya Jun 14 '19 at 07:12
hey please send me the code by upload in your drive.its easy for me also – Bishal Seth Jun 14 '19 at 07:13
these code for button click event manage gschoppe in a github in following link : – Nikunj Chaklasiya Jun 14 '19 at 07:22
There is nothing which i want here – Bishal Seth Jun 14 '19 at 09:40
sry, bro its some time to write code. it's for 3 to 4 days. Now it's not available. – Nikunj Chaklasiya Jun 14 '19 at 10:17
ohk lets party. which way you apply. – Nikunj Chaklasiya Jun 25 '19 at 05:33
I got the same issue on this. I created a one Login screen and navigate to my home screen but it does not find out. please help me out. – Nikunj Chaklasiya Jun 25 '19 at 09:28
hii Bishal plz you add the answer for this question for knowledge purpose. – Nikunj Chaklasiya Jul 04 '19 at 06:46

score 0 · Answer 4 · answered Jul 24 '19 at 10:21

0

I thought another way to navigate. simply add all widget or component add in a single group and apply Hide/show concept in ROKU. Its work for me to change the screen. ROKU doesn't provide any specific navigation.

answered Jul 24 '19 at 10:21

Nikunj Chaklasiya

620
7
26

Navigation concept in Roku

4 Answers4