CODEWITHSUNDEEP
javascriptwindows-phone-8windows-runtimewindows-store-appswinjs
Query21
Query21

Reputation: 200

Navigating to another html in Windows store app

I am trying to find a way to navigate to another html in my app. I tried window.location and WinJS.Navigation.navigate but none works.

Upvotes: 1

Views: 810

Answers (2)

Kraig Brockschmidt - MSFT
Kraig Brockschmidt - MSFT

Reputation: 7024

Although you can get document.location and navigation to work (and note that it's document.location, not window.location), the recommended approach is to implement the app like a single-page web application, meaning that you "navigate" by dong DOM replacement inside default.html/index.html. That is, you're page context is always the default HTML page, so that you preserve the JavaScript context across "pages" and also keep the ability to navigate content in and out of the page smoothly. (document.location and links transition through a black screen and reset the JS context.)

There are various ways to go about DOM replacement, but the mechanism built into WinJS is called WinJS.UI.Pages. The best way to explore the mechanism is to create a new app project using the Navigation template. What this gives you is, briefly:

  • A main page, default.html, that is the single HTML page context. This declares a single div containing an Application.PageControlNavigator control, which is initialized with a reference to the "home" page.
  • A pages folder in which there's a home/home.html, .js, and .css (these will be split across shared folders in a universal app project, mind you).
  • A navigator.js file within the js folder, which is loaded from default.html by default. This is the piece of code that listens to WinJS.Navigation.navigate calls and uses the WinJS.UI.Pages mechanism to load and navigate to another page using DOM replacement (you actually stay within default.html). It specifically looks for the PageControlNavigator control inside default.html, and all the DOM replacement happens within that div.

In this model, home.html is your first page. To create additional pages, right click on the pages folder and select Add > New Item > JavaScript > Page Control. This will give you another set of HTML, CSS, and JS files for another WinJS "page", specifically with the JS containing a WinJS.UI.Pages.define call to set up the necessary object structure.

You can move these files around--just make sure the path to the HTML file in the project is exactly matched in the WinJS.UI.Pages.define call as well as in your navigate calls, or else the page won't load.

For more complete details, see Chapter 3 of my free ebook, Programming Windows Store Apps with HTML, CSS, and JavaScript, 2nd Edition, starting on page 136 in "Page Controls and Navigation."

Upvotes: 1

sebagomez
sebagomez

Reputation: 9609

WinJS.Navigation.navigate should do the trick.

Are you seeing an error or anything?

Upvotes: 0

Related Questions