generator-steroids/generators/tutorial/steroids/templates/index.html

A Yeoman generator for Steroids

<div class="content-padded">

<h1>Hooray!</h1>

<p>Now, this page is a Steroids-style <em>resource</em>. It is generated from two files by the Steroids NPM: <br>
  <br>
  <strong><small>app/views/steroidsTutorial/index.html</small></strong><br>
  <br>
  is wrapped inside<br>
  <br>
  <strong><small>app/views/layouts/steroidsTutorial.html</small></strong><br>
  <br>
  The result is a single HTML file, which you can find at<br>
  <br>
  <strong><small>dist/views/steroidsTutorial/index.html</small></strong><br>
</p>

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

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

<h2>Tabs</h2>

<p>You also enabled tabs by uncommenting those lines in <strong>config/application.coffee</strong>.</p>

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

<h2>Localhost</h2>

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

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

<p>We can also tell that you are currently viewing this document on an <em>iOS device</em>. How do we know?</p>

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

<h2>Excercise 1</h2>

<p>Modify the <strong>index.android.html</strong> file. As you can see, changes there do not affect your app on iOS devices.

<h2>Exercise 2</h2>

<p>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 <strong><small>app/views/steroidsTutorial/index.html</small></strong>).</p>


<h2>Then</h2>

<p>Now, let's dig deeper by opening an another document:</p>


</div>

<div class="topcoat-list__container">
  <ul class="topcoat-list">
    <li id="opener" class="topcoat-list__item">
      To the next document!
      <span class="chevron"/>
    </li>
  </ul>
</div>

<script>
  // EXCERCISE 1:
  // You found it!  To inline JavaScript here is suboptimal and only used in this tutorial.
  // The Steroids.js API documentation is at http://docs.appgyver.com

  steroids.view.navigationBar.show("PhoneGap on Steroids")

  // In the next part of this tutorial we learn how to do this properly with external JavaScript files

  $("#opener").hammer().on("tap", function() {
    var otherView = new steroids.views.WebView("/views/steroidsTutorial/show.html");
    steroids.layers.push(otherView);
  });

</script>