Explore the sample Fourth Coffee and see how the app adapts to working on an Xbox One device.
- [Instructor] In this movie, I'm looking at the same application, the same source code but this time running on the Xbox One. To start the application, there's a couple ways you can do it. Since I ran it recently on the Xbox, you can see it here in the big tile here on the screen. If you don't see it here, of course you would go to My games & apps press the A button, find the app here in the list of apps. Go over here to Apps, then find the app. In this case, it's the Fourth Coffee app, and press the A button.
Talking about the window size, on the Xbox, there is no minimize or restore down button. You can change the size by pressing the Xbox button on the controller. All this is when you're switching to different apps but you'll notice it's just putting it in this smaller window on the screen so that I can move up and down and look at my other games or other apps on the Xbox and then when I'm ready to switch back I can move up here and press the A button to bring the focus back to this app.
Now let's start looking at some of the other differences. The navigation menu, remember we're running on a TV. It's big, it's wide, we're sitting across the room. In this case, you'll notice that over here the menu is over here. Now I'm moving my mouse on the dev mode application so that's how you can see that. There's no mouse running on the Xbox. I'm using this to point out the parts of the UI. Here you can see the menu items and they're always onscreen unlike the version on the phone and the desktop they don't slide over to the side and then pop out when you select a menu item.
They're always visible. You would choose these by using your control stick. I can move over here, move up and down til I find the travel section, then press the A button. Then I move the stick over to the middle of the screen and here I'm looking at the UI on the main page. To scroll up and down you would use the navigation stick to scroll up and down. Here you see that there's a drastically different look for the UI. Again, assuming you're sitting across the room on your couch we have a really big circular icon.
We have a small bit of text here with a date and time and we have a big headline. We have a little bit of text. Rather than having multiple columns here, we have everything in a subsection of the screen and then the likes are down here. I move up and down using my control stick. You'll also notice that the background is changing as I move up and down so I'm getting a larger image in the background that matches what's in the circular icon.
When I find the one that I want, I press the A button. That takes me to the detail page. To navigate back, the convention on the Xbox is usually to press the B button to go back. Let's see if that works. I press the B button. That takes me back to the main page. To scroll up and down on this detail page I'll do the same thing that I did on the main page which is to use the control stick and you'll see the same animations appear here that appear in the other two implementations. The UI here for the related stories looks very similar to the one that was on the desktop application.
Then you'll see that I also have here I have the movie section or the video right here. Let's see, there's a focus rectangle that's moving around too. That's another thing that's more prevalent you'll see on the Xbox is there's a white rectangle around this section and when I move up to the video you see I have a black rectangle there and as I move to this screen some of these items have selection rectangles some of them don't. That's to tell you when you've got focus. This tells me that I've got focus on the video and now I need to press the play button.
That would be the A button on the controller. Here you see for a few seconds there was a UI that popped up overlaid on top of the video that shows the play button and that tells me that if I press the A button I can pause it and then I can press the A button again to continue. To close the app you press the Xbox button in the center of your controller. That puts it back in this smaller window. Then you press the menu button on the controller pick quit, press the A button and now the application is closed and the UI that you see on the screen is the splash screen and you can see the name of the application here.
What we've seen over the last three videos is we've taken the same application used the same source code have the basic application structure exactly the same and then we just tweak it somewhat to get the best possible experience for each device.
- Setting up the development environment
- Installing Visual Studio
- Creating a Dev Center account
- Installing and activating Developer Mode on Xbox One
- Pairing Visual Studio with the Xbox
- Mirroring Xbox One content to a PC
- Exploring a UWP app on a PC, mobile device, and Xbox One
- Creating a basic UWP app