Understanding Chrome App navigation

Question

I am currently beginning to look at creating Chrome Apps and have followed a few of the basic tutorials now. I am happy with the basics so far except for one thing.

All the sample code and tutorials only seem to have one html file in the package, but what if I want to take a web app I have that uses more than one HTML page and turn it into a Chrome App?

How to I get the Chrome App to change from the index.html to another html page when I want to show some other html? I have tried using the standard html anchor tag along with the target set to _blank or _self, but it will only open a URL on the internet in a browser rather than changing the page in my application.

I am not from a web development background, so am I missing something basic to do this?

Answer 1

The simplest version of what Vincent Scheib said:

index.html

...
<div id="screen1" style="display:block">
...
</div>
<div id="screen2" style="display:none">
...
</div>

main.js

...
// A navigational event happens:
document.getElementById("screen1").style.display = "none";
document.getElementById("screen2").style.display = "block";
...

Answer 2

Packaged apps intentionally do not support navigation. Apps are not in a browser, there is no concept of forward, back, or reload. Applications which do require the concept of navigation, should use a user interface framework that supports that functionality. E.g. by manipulating the DOM, using CSS, or using iframes to animate and control visibility of components of your app.