So we thought, we can improve this. Let's make it better. Okay, to make this demonstration, I built the demo site where we are, basically it works as any other desktop application, but we are going to add on top of it the functionality for the spatial navigation.
So let's go to the site. It looks something like this. You can see that there are only 5 buttons or 510 buttons. Each of them takes you to the same page, but it renders randomly a new gift or a new prize, and then it has also a link to go back to the previous page, and again, and it renders something random. So it works with the mouse, obviously, as you can see, but it doesn't listen to the TV control event. So let's do that. Let's add the functionality to do this. But first, I just want to guide you through the code that is running these demo sites, so you have a very clear idea like how this works.
First, as we are as this React conference, we're using React app, and it's the index that you usually get after running the Create React application where we are rendering our app component. The app component looks like this. It has a router configuration using the library React router, where we only have two different paths. The first one is the welcome page, the one that you see as soon as you load the app, and the surprise page, that is the one that you are taken to after you click in one of the question boxes. If we go to those two views, it's, again, something very similar. We have our React component. For the first component, the welcome page, we have an empty array of 10 locations where we used it just to render the same component over and over for 10 times. No, that is the question box component. And on the other side, the surprise view page, we have hard-coded the path of the different prices, the image, excuse me, of the different prices. We pick one randomly, and then we just render that image, along with a link to go back to the previous page. Finally, what we call the link element, is, again, something very simple. We have a React component for rendering the question box, that is just using a link from the React router library that is just wrapping a question box that basically you're rendering. On the other side, it's exactly the same, instead of... The only difference is that instead of rendering the question box, we are obviously rendering the children, which is just a text component. Cool.
So, what are the heuristics for rendering this... Sorry, not for rendering, for building the navigation library. You can do it in many ways, but the method that we decided to do is this. First, we raise all the navigational nodes, meaning all the nodes that the user can interact with the TV control on the app.
Comments