• Overview
  • Transcript

3.1 Lay Out the App

A good layout is the key to any application UI, and our app is no exception. In this lesson, I’ll show you how to use a WinJS control to provide the layout of our app.

Related Links

3.1 Lay Out the App

Well, this is a lesson where we finally start writing our application. It's going to be a feed reader, and it is of course going to be simple, but it is going to be a fully functional application. And we're going to start by adding a winJS control called a split view. Now as I've mentioned before WinJS is JavaScript library that the folks at Microsoft have written to make our lives easier when it comes to writing universal applications. But it's not just for universal applications, you can also use it on the web if you want to. And if I was going to compare WinJS with any other type of library, it would probably be with jQuery UI because WinJS gives us a lot of UI functionality. But it goes well beyond just widgets it gives us fully functional UI paradigms, really. It's the same type of controls that you will find if you were writing an universal app with C Sharp and XAML, except the only difference is that is implemented using HTMLC assess in JavaScript. So let's start by creating a new project, let's just call it feed reader. And we are going to update our WIN JS because the version that we get with our template is version four. And version 4.4 has been officially released. So, we want the latest version because it has a lot of differences from just ordinary 4.0. So, we can start by just right clicking on WinJS and deleting it and that's going to delete everything that we have as far as WinJS. We have just essentially neutered our application, it's not going to run right now because it uses WinJS. Now, I need to point out that WinJS is nothing more than a tool. And it's an optional tool because at the end of the day, we are writing a web application. It's just running within the show of a Windows 10 application. So if we wanted to use jQuery, jQuery UI, Angular, any other JavaScript library we can. WinJS gives us a lot of stuff, but of course so do other JavaScript libraries. So just that you're aware, you don't have to use WinJS if you don't want to but we are in this course and we want to get the latest version. Now we can do that in a variety of different ways, we could go to the WinJS site and download it. There it is, somewhere here, 4.0 released, that's actually old. All right, lets actually go back to this WinJS tutorial and yeah, if we click on download WinJS then the version is 4.4 and you could do that if you wanted to. But, instead, we're going to use NuGet which is a package manager for Microsoft Technologies. If you write ASP.net or just normal dot net applications, then you could use NuGet to bring in components that your application might need, then the same is true for Windows 10 applications with html, css, and JavaScript. So, if you go to the tools menu and the NuGet Package manager, you can open up the consul, or you can go to manage NuGet Packages for solution. And that will take you to the UI version, but the console is going to be simple enough. You want to type a command called install-package and then WinJS, and that is going to go out. Get the latest version of WinJS, and if we go to our solution explorer, we now have WinJS. We also have a new file called packages.config, and this is just a listing of all the packages that we have. Now, if we didn't delete WinJS before, it would've prompted us if we wanted to overwrite the existing files and of course, we would want to say yes. But we might also be left with some legacy code and we definitely don't want that. So it's just safer to delete WinJS and then download it all over again. Now, the control that we are going to add to our default HTML file is called a split view. And what is a split view? So, let's go back to the browser. If we go to the playground here on the WinJS site. Then we can see what, exactly, a SplitView is. If you choose SplitView, then we can see that it's a split view. On the left-hand side, we have navigation and the side bar extends whenever you click on the toggle button there. And then there are some commands that we could click on, there to do whatever it is that we wanted to do. So, that is what we are going to be adding. So let's go back to our HTML and we are going to start by getting rid of this content that goes here and we're going to have a div element that has an ID of app. Now the reason why I'm doing this is just so that we can contain everything inside of this div element the ID doesn't matter. And in fact, the div element doesn't matter but I want to be contained within the development so that's what I'm doing. Now, we went to add in our split view control and we can do that in one or two ways. We can do it declaratively or we can do it programmatically, if we do it programmatically then we have to do that through JavaScript. We have to create the control which is very easy. We just call it constructor and then we have to add that to app but it's a lot easier if we do it declaratively. So that's what we're going to do. So we're going to have another div element and let's give that a class of splitView. Now, I don't have a class of splitView yet but you can see that inellisense is prompting us with quite a few classes here. And these are all part of WinJS, they all begin with win dash and then whatever it is but splitView is just going to be for my purposes. And then we want to say that this div element is actually a splitView control. We do that with a special attribute called data-win-control and then we set that to WinJS .UI.SplitView and this is what says that this div emulet is a split view. So whenever our application runs, it's going to go through all of our markup, it's going to find all of these controls that we have declared with data-win-control. And then it's going to create that SplitView for this div element. The next thing we need is the header of our sidebar. So that's going to include the toggle button, the hamburger menu, as well as the text that we want at the top of the sidebar. So we are going to create a div element, let's give this a class of header. Now once again, this is a class for my purposes, we aren't using WinJS classes here and then we want our toggle button. Now the toggle button is actually another control and it is a button. So we're going to use a button element and since this is a control and we want it to be styled like we would expect it to look within the style of the Windows 10 application. We're going to use the WinJS class of win- splitviewpanetoggle and that is also the name of the control. So lets have data win control and then this is a WinJS.UI.SplitViewPaneToggle. Now whenever you declare a control, you can also declare any options or rather, properties of that control. So behind the scenes, this is creating an object that is a SplitViewPaneToggle object and that object has properties that we want to set. And since we are doing everything declaratively, then we also want to set those options declaratively as well. So we do that with another attribute called data win options and then the value is going to look like an object literal. So we have a pair of curly braces, and then we want the properties that we want to assign. Now we want to associate this SplitViewPaneToggle with the splitView and that is what we are going to do with this options. It has a property called splitView, and we basically want to say that this splitView for this SplitViewPaneToggle is this element here. So to do that, we want to use a function called select, this is a lot like jQuery's dollar function in that it is going to select and element based upon whatever CSS selector we use. So in the case, we want to select the element that has a class of splitView, which is this div element. And it is going to associate this SplitView with this SplitViewPaneToggle and that's all that we need to do for that button element. So then, we just need the text and the text is a lot easier because it's just normal HTML. So let's give this a class of title, this is once again, one of my own classes and then we're going to use an h3 element. And then, in here we're going to use one of WinJSs classes and that is win-h3. Just so that it is styled within the style of a Windows 10 application and then for the text, let's just have feed reader. So if we were to run this, we're going to see the sidebar, kind of, but it's not going to look like it should. We just see it here, and then if we click on the toggle button, it just kinda goes away and we can't get it back. This is actually fixed with some CSS. So let's go to our, CSS folder, let's open up default.css. The first thing we want to do is set app to be a height of 100%. That way everything that is inside of app is going to fill in the height of the application window. Now, there's a variety of CSS rules that I'm going to add here. So I'm just going to copy and paste but basically, it's setting up the style so that our split view looks like the split view that we see here in the demo. In fact, I lifted all of that style, so if you wanted to you can go to that demo. You can copy all the CSS, paste it into your CSS, and you will be good to go. So if we run this again, then we are going to see that we now have our side bar that fills the height of the window. If we click on it, then we see that it actually opens up, and we see the title of our sidebar. The next thing that we need to add to our SplitView are the commands. They are these little icons and if you expand the sidebar then you can see the description of those commands. So we're going to have two, we're going to have home and then we are going to have settings. Home is going to list the news and then settings are going to be where our applications settings are. So let's go back, now this is not in the header. This is in another div element that is a sibling to the header. We're going to give it a class of nav commands and there are two div elements, and these are going to be WinJS controls. So data-win-control and WinJS.UI.SplitViewCommand. Now this is one of the reasons why we needed to update to WinJS 4.4, because split view command was not available in WinJS 4.0. I think this was new in 4.2, so in order to use SplitViewCommand, we needed to update. So, we have our control. There are some options that we can go ahead and set, so let's do that with data, win-options, and the first is called label. This is the text or the description of this command. So this is going to be our Home, so that's what that is going to be. Now we can also define the icon. Now there are several built-in icons that we can use and if we look at the documentation, I believe we want appbar icon or something along those lines. Let's do a search for that and let's see. Yes, it' looks like that is right there. It is an enum, which In JavaScript, we don't really have an enum, but, in other languages, we do. And you can see a list, of all that is available and these are built in, so you can pick whatever of these app bar icons that you want. In our case, we're going to use Home for our home command, so we're just going to specify home there. And then we can also say what we want to happen whenever we click on it, but we aren't going to do that in this lesson. We're going to wait until probably the next one. So we have our first command. We can basically just copy this and paste it and this second one is going to be for our settings. But in this case, let's just call it subscriptions because that's really the only settings that we are going to have and the icon is called settings. Now, we could add some IDs here, so that we could access these programatically, but I don't think we will need to do this. So we're just going to leave these as is, of course we can always come back in and add IDs if we need to. So we have our split view, we have the commands. The only other thing that we need is the content area, because the split view, essentially splits the page into two parts. We have the sidebar and then we have the content. So the content is still inside of the splitView control but it is the last element here. So where going to add another to our nav commands, and to our header. And we're going to give this a class of content, text and we can go ahead and set some content here. So that, we can have an h2 element and we can say something like, this is SplitView Content, and then we can actually have some content, which really isn't going to be very useful, but this is content. Okay, so let's run this. Let's see what it looks like and everything should work okay, at least as far as the UI is concerned but apparently not. The commands are outside of the app bar, they should be listed here and you know why? That is because we need to actually group the header and the nav commands together. So let's do that with just a simple div element that's going to wrap those and that should fix that and then the rest is the content. So if we run that again, there we go, that's what we needed to do was to group them together. Now of course whenever you click on these commands nothing is going to happen because we haven't programmed that. But in the next lesson, we are going to add some navigation to our application. Now we can just use normal hyperlinks but that's not really what we want to do and I will show you why in the next lesson.

Back to the top