Explore the sample Fourth Coffee app and how to get a copy from GitHub. Then see how the app adapts to working on a desktop computer.
- [Instructor] For the demonstration of responsive app design, in this chapter I'm using a sample application create by Microsoft. It's part of a suite of demo apps that showcase Universal Windows app development on Xbox One. Here is the GitHub repository, where you can get a copy of the solution files. You'll find a copy of these apps here in the apps folder. I encourage you to try them oa your leisure, there are some interesting concepts demonstrated in these samples. The demonstration I'm using in this chapter is the News app.
I've made a copy of the solution and added it to your exercise files. I found a few bugs in the Microsoft code, the most annoying was the bug that caused the phone app to close when navigating back to previous pages. This version here in the exercise files folder contains the bug fixes. I've also swapped out some of the assets in the project. I want to be clear and set your expectations, I'm not showing the code from this News project during this chapter, instead I am focusing on the UI design and how this app adapts to the different hardware.
I've already built and deployed the app to the different devices. I'll show you how to do this later. In this video, I'll look at how the app functions on desktop and laptop computers. I'll start by running the application. It's called Fourth Coffee. This is the main UI of the application. It's running on my desktop computer, which means that it's considered to be a Windows application. And you can see that by looking at the title bar of the window that's up here. So I've got a minimize and a restore down button and a close button here.
So if I chose the restore down, you'll see that it works as a window, and the UI in here responds to the size of the window. I'll make it as narrow as possible, you'll see that it shrinks down to this size and no smaller. What I want you to see is that the UI adapts to the screen size. If you take a look at this text here, you'll see that as I make the widow wider, the text gets wider up until a certain point, and then a second column is added, and then as it gets wider still, a third column appears.
In the upper left-hand corner is the standard hamburger icon which indicates there's a menu up here. You'll see that I get a focus rectangle when I move my mouse over this part of the UI. I can click here and you'll see an animated menu slide out from the side. This is using a split view control to make this happen. I want to point out that none of these links work. The idea is that you would open this up to see subsets of the news. For instance, if I want to look at the travel news, I'd click here and that should take me to the travel section of the app.
Microsoft hasn't implemented that, so nothing changes here in the main UI when you choose an item from this menu. It's just showcases how to have menus. And as we move to different implementations of this app running on different devices, you'll see how this menu changes. In the main window there's a scroll bar, which means I can scroll down and see all of the news articles. There's information about the news articles, the time it was posted, there's the thumbnail here, there's some information, comments, the number of likes for this.
And you'll see that there's a highlight bar that shows up as I move my mouse over each of the individual line items. When I click on one of these, you'll see that I moved to another page in the application. Now the next thing I want to point out is you'll notice in the upper left-hand corner, there is a blue button here with an arrow on it. This is the back button. So this is part of the adaptive design. One of the concepts that's built into Universal Windows application is the idea of navigation. You have a navigation stack, you moved forward through pages, items are added to the stack, you can then move backwards through the stack to revisit the previous pages.
So this button up here allows me to go back to the previous page. Let's click on it. When I returns to the previous page, you'll see that that button disappears. That's because I can't go back any further in this navigation stack, I'm at the first page. As I move to another article, let's say this last one down here, A road less traveled, you'll see that that back button appears again. This is the detail page. You'll notice that the image from the previous page appears here. Let's go back to the previous page, see that this picture of a road in the thumbnail appears when I travel over here to the detail page.
You'll also see there's a scroll bar on the side of the screen. Now it disappears occasionally, if I don't move my mouse it'll disappear. But if I move my mouse the scroll bar appears. And I can grab that scroll bar and scroll down, or I can just use my mouse wheel. Now as I move down the page, you'll see different items animate onto the screen. You'll see the text here animated onto the screen and so did this diamond shape in the background. Here you saw the text animate up into position. In this part of the screen you'll see that an arrow slides down from the top.
Also I'd like to point out on the bottom of the screen is a set of related stories. And what I want you to see here is that the items are set on the screen and they travel across the screen and when there's no more room, they move down to the next row. If I change the size of my window, you'll see that this UI is flexible enough to change the location of these icons and the text as I make the window narrower.
To close the application in a desktop app you click on this X button. Now let's take a look at this UI, but this time from the perspective of using it on a Windows phone. That's what I'll talk about in the next video.
- 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