locked
Back Buttons

    Question

  • So in my Windows 8 HTML/JS app, I have a part where it goes to an html page that I made that is in the app (html/info/itemsEgg.html) and I want to make some sort of way to get back to the main part of the application. No matter what I try (links directly to default.html, links to splitPage.html, JavaScript go back -1 (also tried -2) functions) it will not without it crashing the app or going to a blank white page. How do I get back without closing and relaunching the app?
    Thursday, April 26, 2012 7:54 PM

Answers

  • data.js describes the contents for the ListView control and its items, and the placeholder data is also used to populate the groupDetail and itemDetail pages. What we refer to the "pages" in the app itself are the html, css, and js files named with groupedItems, groupDetails, and itemDetails, and these are what get navigated to through WinJS.Navigation methods. You can see this in the handlers assigned to events like itemInvoked, e.g. clicking on an item in the list that's shown on the groupedItems navigates to itemDetails. (For docs on the Grid App template itself, see http://msdn.microsoft.com/en-us/library/windows/apps/hh758331.aspx)

    The model that's set up with the Grid App template is that there is only one actual loaded page so far as the HTML/CSS rendering engine is concerned: default.html. The other "pages" (defined with WinJS.UI.Pages, see http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx). So trying to navigate using things like <a href> doesn't work as you might expect.

    Anyway, what I think you're running into here is that you're trying to use arbitrary HTML for item data that ultimately gets data-bound into one of the ListView item templates. For example, anything you enter for the groupDescription variable in data.js ends up being data-bound to an innerHTML attribute on an h4 tag (see the groupDetail HTML div with id "headerTemplate"; similarly, an item description gets data-bound to an h4's textContent attribute in the "itemtemplate" div.

    So in cases like the latter, a textContent attribute will not display things like iframes, hyperlinks, buttons, and other HTML elements--you may see the text, but not the elements themselves. For innerHTML attributes, you can get more in terms of elements, but some things will be stripped out. See http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx.

    In cases like these, you really should be splitting out key parts of the data you want to display into more specific item properties in the sampleItems array, then modify the item and header templates on the various HTML pages to data-bind specifically to those properties. For example, if you want iframes, then put an iframe in the template and data bind the src attribute to some property of the data items, e.g. a property called "frameURL".

    Bottom line is that the text variables in data.js are going through various other layers and mechanisms before they finally reach the point of being rendered, and were not intended to host arbitrary HTML as if they were HTML pages.

    Tuesday, May 22, 2012 1:26 PM

All replies

  • A couple of questions:

    • What template did you use, if any, to create the app?
    • When you say "goes to" a page, how are you doing the navigation?
    • If you run in VS, what kind of exceptions are you seeing?

    Generally speaking, Metro style apps don't use <a href> to navigate, but rather use the WinJS.UI.Pages and PageControlNavigator mechanisms to switch between pages, though technically it's just one page (default.html) that's swapping out parts of the DOM with contents from other pages (like splitPage.html).

    If you have splitPage.html, then I assume you used the Split App template. That will have included a file navigator.js, which is the PageControlNavigator control that's typically instantiated within default.html. You then use WinJS.Navigation.navigate(page, options) to go to another page (see the itemInvoked method in itemsPage.js for an example). That's how the Split App template is navigating from the list of items to splitPage.html. What's happening is that the PageControlNavigator (in navigator.js) is listening for the WinJS.Navigation.navigated event, on which it loads the contents of splitPage.html into the DOM using WinJS.UI.Pages.render.

    So technically speaking, you're always in default.html. itemsPage.html is loaded into that page's DOM first, and it's swapped out when splitPage.html is loaded. To go to any page from anywhere else, all you need to do is WinJS.Navigation.navigate. You won't actually navigate directly to default.html, but rather back to "/html/itemsPage.html", that is WinJS.Navigation.navigate('/html/itemsPage.html');

    What's probably happening if you try to navigate using <a href> is that your script context gets blown away, so all your variables disappear. That's probably why you're seeing a crash. Keeping everything within the context of default.html using page controls is done to preserve that context and not have blank screens flash during transitions.

    .Kraig

    Thursday, April 26, 2012 8:56 PM
  • So how would I do this in the data.js where you are limited in the code you can do? I can't do onClick="WinJS.Navigation.navigate('/html/itemsPage.html')" because it will not show that data at all because of the onClick. How do I integrate this into my code?
    Thursday, May 3, 2012 7:44 PM
  • I'm not following you--what element's click handler are you assigning? What limitations are you referring to?

    Thursday, May 3, 2012 9:58 PM
  • I am referring to entering html into data.js for the template parts. You know, into the content part of a section. It will not work with certain tags and certain attributes. 
    Sunday, May 6, 2012 3:28 PM
  • Can you give me an example of what you're trying to do and what isn't working? Specifics will really help here.
    Sunday, May 6, 2012 4:03 PM
  • data.js is a file that comes with the template. It is where you put the information for the content and descriptions in. It by default has a set up you use where you specify the name, description, and content of the different parts. You can either make a variable for it to refer to or just simply put it next to content in quotation marks. When I specify the content for one of the pages, I type in stuff like "<p>Blah de blah<br>More blahs<br>Ya ya da</p>" and it works but when I type stuff like "Blah de blah blah<br><iframe href=\"http://www.microsoft.com\"></iframe><br>Blahs" it will not work and the content will go to default. I narrowed down the problem to be that it somehow does not like certain tabs and attributes. I do not know why but it just is like that. I have had to make a lot of compromises so far. If you still do not know what I am talking about it is probably easier to show you. Is there a way you would prefer to do that? Unless you figured out what I am talking about in which case we should not have to.
    Tuesday, May 22, 2012 12:32 PM
  • data.js describes the contents for the ListView control and its items, and the placeholder data is also used to populate the groupDetail and itemDetail pages. What we refer to the "pages" in the app itself are the html, css, and js files named with groupedItems, groupDetails, and itemDetails, and these are what get navigated to through WinJS.Navigation methods. You can see this in the handlers assigned to events like itemInvoked, e.g. clicking on an item in the list that's shown on the groupedItems navigates to itemDetails. (For docs on the Grid App template itself, see http://msdn.microsoft.com/en-us/library/windows/apps/hh758331.aspx)

    The model that's set up with the Grid App template is that there is only one actual loaded page so far as the HTML/CSS rendering engine is concerned: default.html. The other "pages" (defined with WinJS.UI.Pages, see http://msdn.microsoft.com/en-us/library/windows/apps/hh452768.aspx). So trying to navigate using things like <a href> doesn't work as you might expect.

    Anyway, what I think you're running into here is that you're trying to use arbitrary HTML for item data that ultimately gets data-bound into one of the ListView item templates. For example, anything you enter for the groupDescription variable in data.js ends up being data-bound to an innerHTML attribute on an h4 tag (see the groupDetail HTML div with id "headerTemplate"; similarly, an item description gets data-bound to an h4's textContent attribute in the "itemtemplate" div.

    So in cases like the latter, a textContent attribute will not display things like iframes, hyperlinks, buttons, and other HTML elements--you may see the text, but not the elements themselves. For innerHTML attributes, you can get more in terms of elements, but some things will be stripped out. See http://msdn.microsoft.com/en-us/library/windows/apps/hh465388.aspx.

    In cases like these, you really should be splitting out key parts of the data you want to display into more specific item properties in the sampleItems array, then modify the item and header templates on the various HTML pages to data-bind specifically to those properties. For example, if you want iframes, then put an iframe in the template and data bind the src attribute to some property of the data items, e.g. a property called "frameURL".

    Bottom line is that the text variables in data.js are going through various other layers and mechanisms before they finally reach the point of being rendered, and were not intended to host arbitrary HTML as if they were HTML pages.

    Tuesday, May 22, 2012 1:26 PM
  • That is actually extreamly helpful, thanks. So my plan is to inner html the stuff when activated, but the question is the activation. How can I get it to activate the function when you click on the correct left side option on the correct page?
    Wednesday, May 23, 2012 3:00 PM
  • Sorry, I'm not following this at all. What's being activated--a page or an item? What do you mean by "left side option"? And what functions are you talking about? I suspect you're referring to the left side of the Split App template? (We've been talking about the Grid template, so I want to make sure).
    Wednesday, May 23, 2012 5:43 PM
  • I meant that a JS function was being activated, and by left side option I mean on the split page how there are different navigation options on the left, and by function I mean that same JS function again.
    Thursday, May 24, 2012 10:26 AM
  • If you look in split.js in the ready method, you'll see it wires up the selectionchanged event for the left-side list:

    listView.onselectionchanged = this.selectionChanged.bind(this);

    The handler function (a little farther down in the code) then does the navigation on the right side (calling WinJS.Navigation.navigate). You can do anything you want in that handler as well. Alternately, you can assign a handler to the listview's itemInvoked property, which should also be triggered in this case: the list's tapBehavior is set to toggleSelect in split.html, so itemInvoked will be fired. In actuality, itemInvoked is the more proper event to use here, because if you had a multi-select listview, selectionChanged would be fired anytime you added or removed items from the selection, which is a different semantic than invocation.

    Tuesday, May 29, 2012 9:52 PM