• Overview
  • Transcript

3.6 Pass Data and Final Touches

Sometimes you need to pass data from one page to another. In this lesson, I'll show you how easy that is to do. I'll also show you how to test the mobile version of the app in the mobile emulator.

3.6 Pass Data and Final Touches

The only thing that our application needs is the ability to display the entire article. Because right now we just have a list of titles, and when we click on these titles, nothing happens. We could navigate to another page, and then display that article. Now admittedly, that's not a very good design, as far as the application is concerned because most reader type of applications have multiple panes. On the left hand side would be the list of all the articles and then on the right hand side would be the body of that article that way you dont have to navigate to any other another page. However by navigating to another page that gives me the opportunity to teach you how to pass data from one page to another. So, we are going to take that route, even though it's not the best, as far as application design is concerned, but you learn how to pass data. So, we are going to start, by adding a new page, to our pages folder. We're going to call it article, so let's create a folder called article and then we will create two files. The first will be the HTML file. So article HTML and then we will create the JavaScript file and we will call that article.js. Now let's go ahead and let's add a reference to that java script file so that I don't forget to do that because I would otherwise, and since we're here let's just go ahead and modify the mark up. All we're going to do is display the body of the page. So, we just need a container element so we can set the inner HTML. So let's have div give this an id of content or, no let's say article content and that's it. We will retrieve this elements so that we can then set its inner HTML. Now, let's open up one of the JavaScript files for our other pages. It doesn't matter if it's news or subscriptions. I just want to copy the code so that we can paste it into our article,js so that we have the boilerplate of setting up the page control. Now just like the other pages where we added a property for this particular page we can go ahead do that for article as well. That way we only have to set it once whenever we create our navigator control. And we don't have to worry about it anywhere else. So let's go ahead and do that. Let's open up default.html and let's also open up the navigator.js file inside of our main js folder. And after the subscriptions property, let's set this.article = options.article and I'm going to put my initials after that. Now yes, we should be using source control and all of that stuff, but I also put my initials inside of files that aren't mine. Like for example this navigator control is by Microsoft, so I want to make sure that I know where I have changed things so that if I open up the file I know exactly where those things are, I don't have to look at difs or anything like that. So now we need to add the default value for articles, so we're going to scroll on down, we'll set it to an empty string and once again I will add my initials there. And that's all we need to do in that file so let's go ahead and close, well no, let's leave this open for now. Let's go to default HTML. Let's go down to where we declare our page control navigator, and we are just going to add that other property article, and the URL is /pages/article/article.html. So, we have that done, we can go back to our articlejs file and we can change this from .home to .article so we have that. Now, in order to pass data from one page to another that destination page has to be able to receive data. And the way that we do that is just through parameters. Now, I left navigator,js open for a reason. If we look at the constructor for PageControlNavigator, we have two parameters. We have the element of the control, then we have the options. And if we copy these parameters, we can paste them into the parameter list for the ready method on our page control because this is exactly what we would need. There is going to be an element that is going to be passed to the ready method. There is also the options. So whenever we pass data from one page to another is going to end up as this options and we're going to pass in an article object. If we open up the syndication file, we have that class called article. Well, we have a title property and we have a body property. And all we are going to use is the body property. So, inside of article, we can go ahead and we can retrieve that element. Let's see, it's article-content, and we can set innerHTML = options.body. And we're done with this file so we can close article JS, we can go ahead and close article HTML and we won't need syndication and we won't need navigator anymore. So we're done with the article page but now we need to modify our news control so that whenever we click on one of these items within the list view it's going to pass data to the article page. Now, this is going to be somewhat similar to the split view commands that we used in default HTML. If you'll remember, we declared an event handler for the invoked event on these commands. Now the only difference here is that the invoked event is for the list view itself. It's not for the individual items within the list view. So whenever we click on an item in the list view, the list view is going to fire the invoked event and then we can get some information about the item that we clicked on. So we could do this in one of two ways. We could set that event listener declaratively like we did the inside of default.html or we could do it programmatically. Now, since we are here in the JavaScript file, and since we have a reference to the listView control let's just do that here. We've done it declaratively, you might as well do it programatically so that you can see how that is done as well. So I'm going to take this statement where we get the listView control. I'm going to just place it outside because we need it both inside of the getFeedAsync handler, and we also need it to set the even listener. So here we say listView.addEventListener. Now notice that I am setting this on the listView control itself and we have that winControl. So this is not on the element it's on the winControl. So listview.addEventListener, we want to listen for the iteminvoked event and then we have our handler function. So that's whenever the item is clicked we can get the index of that item within the list. So we say var index equals, we use our event object that was passed to the handler. This has a property called detail, which has another property called itemIndex that gives us our index. But that's really all that we can get. We can't get the actual item itself. So we're going to have to retain a reference to the articles that we get from our syndication component. So we can add a property to this object. Let's say, _articles, and we will initialize that as an empty array. And then inside of the getFeedAsync handler we will say well, first of all we need to reference to this object don't we? So far that equals this and so inside of here we can say that._articles = feed.articles. That way we have the articles here and we can access them inside of our Iteminvoked EventListener. So we will get the article itself, and we will say that._articles, we wanted to add that given index, and then we simply navigate to our article page. So, we'll say nav.navigate and we want to navigate to Application.navigator.article and then this is where we pass the data to that control. We simply pass in the article object and whatever we pass here is going to be the options in that destination page. So we should be able to run this. Let's fire it up and let's click on one of the items. Hopefully that will take us to the article page and it does. So we can go back, let's click on something else, last week on channel nine, this is going to be a longer article. So we can see that, there it is. Now, the styling is a little off. We can see that the text is hidden by the scroll bar. And of course If we don't move the mouse then the scroll bar goes away but we want some padding here so that we can see that text all of the time. So let's go to our article HTML file, we could add in a whole new CSS file but let's just do things with an inline style attribute. I know that that's really a no no but in this case that's going to be fine. Let's add padding, the top is going to be 5 pixels, let's do something drastic on the right hand side, 20 pixels, bottom will be 5, left will be 5. So, let's run this again, that should give us enough on that right hand side so we always see the text and let's open up that one, the last week. And as we scroll on yeah, we can see all of the text now none of it gets in the way of the scroll bar, rather that's vice versa. And yeah, that ought to work fine. Now, one other thing, we have this title, this SplitView Content. Yeah, well that's useless in our case. Let's change this so that this could be title of whatever is displayed here. So we can add a method to our default JavaScript file so that we can set that value. So we need our default.html which we have open, let's also open up the default.js file inside the main js folder. And we can add this to our default page namespace since we already have that. And we can say set title that's going to be a function that has a value and we just need to set that title. So inside of default HTML let's find where we have that heading element. There it is h2, so let's go ahead and style this as well. We'll use win js's styling for h2, let's also give this an id of, well let's just say page-title. That way we can set the value, we won't have anything there to begin with, and we will just retrieve that element. So document.getElementById, and we will innerHTML = value. Now ideally we would have a reference to this element so that we aren't always retrieving it, but for the sake of simplicity we're going to take this route. So every time we navigate to another page we can just set the title. So the first is really the news page. Whenever we are seeing our list we really want the title of that feed. So inside of the ready we can say default page, or rather we can't do that there. We need to do this whenever we retrieve our feed. So we'll say default page set title and then that will be the title of the feed. Let's copy that, let's go to the article.js file and the title there is going to be the title of the article itself. So we will say DefaultPage, set title, but in this case it's going to be options.title. So that's two pages, we just need the subscriptions page. So lets go to subscriptions.js and really anywhere inside of here. We just want to set the title to either subscriptions or settings. Since this is really a settings page, we'll do settings. So now let's run this. We should have our title change according to whatever it is that we see. We have the title of the feed, and we have the items within the feed. If we click on one of these, Last Week on Channel 9, then the title changes to that, that's perfect. If we go to our Settings, or our subscriptions page. We have Settings, if we go back home we have the name of the feed. So, we have our app. It's not pretty, but it works. The only thing that we need to do now is actually tests to see how it looks inside of a mobile emulator. So let's stop running this, and let's choose something, it doesn't matter which one of these that we want. Let's go with a six inch, because I like big phones. I used not to, but after I had a large phone, I loved it. Now this uses Hyper V so in order to run your application in an emulator, your computer has to Hyper V. So it needs to have all the hardware stuff needed, which most of today's hardware does support virtualization because it is become such an important thing. But if you try to run it and it doesn't work, then it could be that your computer can't handle running a virtualized environment, or there are some other settings. If you don't have the Hyper V feature already installed, it will automatically install it for you. So That's really not that big of a deal and it could take a while to run the application. This fired up rather quickly and then it's going to copy over the files needed to run our application and then we will see that sometime soon we can see that the deploy started. And we see some action over here in the bottom right hand, that means that stuff is still going on. And we can also see the output registering the application to run. And here we go. This is an emulator for Windows Phone 10 or rather Windows 10 for phone. And this is a virtual machine. This is the actual operating system. So, all we really need is a feed and I'm going to type that in http, and that's really small but this ought to work. Channel9.msdn.com/feeds/rss and we're going to save. And whenever we go home then we are going to see our list of feeds, there we go. If we click on any one of these, it's going to take us to our article page. And it looks exactly like it does on the PC. And we can also play with some of these settings. We can rotate left and see what it looks like in rotated mode. And there's a few other things as well, and if you want to play with the operating system, you can do that as well. Let's rotate this back, and that really wasn't what I wanted, there we go. We can click on the start button, that will take us back to the home screen. And this is the operating system, you can play around with it if you want. So you've done it. You've written a Windows 10 universal application using HTML, CSS and JavaScript. I mean, of course, there's a lot of other things that we can do but that's where your imagination comes into play. Dream up whatever application you want to write, write it and it'll run on any Windows 10 device.

Back to the top