User interfaces can be created using standard HTML elements or controls such as headings, buttons, and input fields. We'll learn how to use classes from the WinJS library to apply a consistent look and feel to our user interface as we build out a simple page.
- [Voiceover] We are going to start building an application, and I have an idea for one. I have the attention span of a caffeinated squirrel and the memory to match, so I often forget my hotel room number when I'm traveling. I'm going to make a very simple application that'll allow me to add a new room, see all the rooms that I've stayed, save that data to my roaming data so that I can access it from any of my devices that I might be using this application on, and then I'll go one step further and I'll do a reverse geocodes look up so that I can see an actual friendly name or address of where I'm staying at.
Along the way, we're going to leverage win JS to help build this entire application, using the controls and the animation, even some of the utilities. Let's create a UI for the application. We will have three pages for this application eventually, but for now we're just going to start with one. We're going to do the homepage, and we're just going to use the default html to start. We're going to add two buttons. One is going to be an Add a New Room button and the other ones is going to be a See All the Rooms button.
Time to build the UI. Let's click default html. I'm going to delete this initial paragraph right here, we don't need it. We're going to replace everything in here. And I'm going to create a container, so I'm going to use a div, going to give it an ID of homepage, and that's going to contain all of the UI for homepage. I'm just kind of making it nice and contained within there. And so what I want to do here is I'm going to use an h4 and I'm going to title this, this is the homepage, because I'm lacking creativity, and then I'm going to go and create a button.
I'm going to give it an ID of addbutton, and it's going to be add a room. And for my next button, I'm going to give it an ID of allbutton. So addbutton and allbutton. And it's going to be See All Your Rooms. Let's preview this to see what happens. Now you'll start to see the UI being rendered, and this is from the default html page. We have two of these buttons, and we have that h4 being rendered.
Now take a good look at what this looks like. Let's see if we can make this more in line with win JS look and feel. win JS has controls, but it also has classes that you can leverage to make it consistent in terms of an interface across the board. A button isn't a very complex control. Therefore, all we need to do is style it so it actually fits in with the rest of the controls. We can add a class, and all of the conventions for win JS classes.
Start off with win, and then typically take on the name of the item. So if we're looking at this, win dash button would give us styling for a basic button. Let's take a look at this and see what this looks like. Now you'll see that, that button is a little bit bigger, it's a little more accountable for touch. The font is bigger, so it's definitely taking on that different styling. Let's apply that class to the next element as well.
So win button, and we can do the same for the h4. H4 is a simple element, but we can give it the wind dot, and you'll start to see all the options showing up. We're going to say h4. Now we can preview this, and we should see a noticeable difference. That is how you can leverage win JS classes to style very, very basic controls that you're using that are not win JS-specific controls.
Watch to gain an understanding of the Universal Windows Platform and the application life cycle. Learn to create adaptive layouts with WinJS controls. Discover how to store and share data, capture a variety of input, and explore the unified Microsoft-specific APIs: Windows Core and Geolocation. Stacey Mulcahy, a Windows evangelist, provides developers with everything they need to start building Universal Windows apps and break into cross-device development.
- Setting up your development environment
- Coding in WinJS
- Creating page objects
- Animating page transitions
- Implementing responsive design principles and UI patterns
- Working with layout controls
- Using APIs: Windows Core and Geolocation
- Saving and reading data