Hooray!

Now, this page is a Steroids-style resource. It is generated from two files by the Steroids NPM:

app/views/steroidsTutorial/index.html

is wrapped inside

app/views/layouts/steroidsTutorial.html

The result is a single HTML file, which you can find at

dist/views/steroidsTutorial/index.html

When you run $ steroids connect (or press enter to update), layouts are applied in the above fashion to all applicable HTML files in the app/views/ folder.

After this, the www/ and app/ folders are combined into the dist/ folder. The contents of the dist/ folder are then pushed to connected devices.

Tabs

You also enabled tabs by uncommenting those lines in config/application.coffee.

The Welcome tab now shows our previous www/index.html document, and the Internet tab shows Google's front page.

Localhost

In addition, this page is served from http://localhost (instead of via the file:// protocol), which is part of our secret sauce. You can still use the file:// protocol (that allows e.g. easy cross-domain AJAX) by just specifying the file without the http://localhost/ prefix (we've done this for the Welcome tab).

One instant benefit of localhost is that if you look at the app/views/layouts/steroidsTutorial.html file, you'll notice that we don't have to use explicit relative paths. We can always use /stylesheets/applcation.css instead of ../../stylesheets/application.css. The same applies for images and other assets.

We can also tell that you are currently viewing this document on an Android device. How do we know?

Instead of relying on JavaScript to detect the user agent, there are two nearly-identical versions of the app/views/steroidsTutorial/index.html file: a regular one and index.android.html. When serving your app from localhost, Steroids automatically serves the correct file based on your platform.

Excercise 1

Modify the index.html file. As you can see, changes there do not affect your app on Android devices.

Exercise 2

Note how this page sets the native navigation bar title to "PhoneGap on Steroids". Find out how this is done by looking at this document's source (at app/views/steroidsTutorial/index.html).

Then

Now, let's dig deeper by opening an another document: