Use your left/right keys to browse tutorials
Prototype iPhone apps with Javascript and HTML

Prototype iPhone apps with Javascript and HTML

1 Star2 Stars3 Stars4 Stars5 Stars
Posted on January 23, 2013

Ratchet is a great way of prototyping iPhone apps and has a whole host of functionality. It also takes advantage of Push.js which when connecting your pages allows you to create a prototype that feels like a real app when you save it to your phone. Push.js basically loads in the pages and animates between them much like the animation effects on native IOS apps. You’ll need to deploy the code on a server to get push working. You can download and check out Ratchet here.

Getting Started

Ratchet is not a complicated framework only for advanced developers. You can get up and running with it in minutes. It requires zero knowledge of any iOS programming and really only the tiniest bit of JavaScript.

1. All fixed bars (.bar-title, .bar-tab, .bar-header-secondary, .bar-footer) should always be the first thing in the of the page. This is really important!

2. Anything that’s not a .bar- should be put in a div with the class “content”. Put this div after the bars in the tag. The .content div is what actually scrolls in a Ratchet prototype.

3. They’re included in the template.html page included in the download, but make sure they stay in the page. They are important to Ratchet working just right.

The Title Bar

The header is the container element for the title.

</pre>
<header class="bar-title">
<h1 class="title">Papermashup</h1>
</header>
<pre>

Adding A Popover

Popovers are designed to only fire from the title bar. Set the value of the title href to the id of a popover as shown below:

<!-- The Header Title Bar --></pre>
<header class="bar-title"><a href="#myPopover">
</a>
<h1 class="title">Title</h1>
<a href="#myPopover">
 </a></header>
<pre>
<!-- The Popover --></pre>
<div class="popover" id="myPopover"><header class="popover-header"><a class="button" href="#">
 Left
 </a>
<h3 class="title">Popover title</h3>
 <a class="button" href="#">
 Right
 </a></header>
<ul class="list">
	<li>Item1</li>
	<li>Item2</li>
	<li>Item3</li>
	<li>Item4</li>
</ul>
</div>
<pre>

Slider

The slider can be used for any type of content but it works great with images.

</pre>
<div class="slider">
<ul>
	<li><img alt="" src="img/slide1.jpg" />
 <span class="slide-text">← Slide me</span></li>
	<li><img alt="" src="img/slide2.jpg" /></li>
	<li><img alt="" src="img/slide3.jpg" /></li>
</ul>
</div>
<pre>

Linking Pages with Push.js

No working iPhone app prototype would be any good without the standard iPhone page transition. Fortunately the Push.js file takes care of this for you when you link pages together. You can even set up different transitions: without writing any JavaScript for example:


<a href="page-one.html" data-transition="fade">One</a>
<a href="page-two.html" data-transition="slide-in">Two</a>

The Conclusion

Ratchet is an amazing tool to put together prototypes. It’s effortless to get started with and i’d recommend it to anyone wanting to build an iPhone app demo. We’ve just touched the surface of what Ratchet can bo but it’s truly awesome.



More tutorials from Papermashup