Ratchet’s Push.Js – Prototyping Mobile Apps with Multiple Screens

Syed Fazle Rahman
Tweet

Ratchet is a framework for building mobile applications and prototypes quickly using simple HTML, CSS and JS components. In my last post, Ratchet – Prototyping Mobile Apps Easily, we looked at steps for getting started with Ratchet framework.

We also looked at how to place important components like Title bar, Table views, Chevrons, Toggles and Ratchicons on a single screen.

In this article, we will learn how to create multiple screens in a single applications and load them using Ratchet’s push.js script.

What is push.js?

push.js is a section of JavaScript code that comes pre-loaded in Ratchet’s default JS file ratchet.js. There’s no external downloadable file needed. It connects various HTML pages in a Ratchet app through AJAX.

There are two big advantages of using AJAX powered push.js in a mobile app prototype: quicker interactivity with the server and it gives a feeling of a single page application.

Developers can use Ratchet to create mobile applications and then use softwares like PhoneGap to convert them to iOS and Android apps. Hence, push.js can help developers quickly fetch data from the servers and display them on the screen.

The App

In this article, we are going to create a news feed application known as “SitePoint’s World News“.

I know it doesn’t exist but it would be good if SitePoint considered it. ;)

Here’s a list of features which this app is going to have.

  1. The homescreen will host a list of news items.
  2. Each news item will be linked to another screen to display the news article.
  3. The ability to get back to the homescreen with a back button on the title bar.
  4. Each news items can have a settings screen.
  5. A sharing popover to share news items.

Apart from just checking out the usage of push.js, we will also try out some cool features it has. Of all the features listed above, push.js will be used only in feature number 2, i.e. the loading a different page. It may look a simple and small usage of push.js, but it is necessary to understand what it does.

For the first feature, we will be using Ratchet’s Table view with chevrons component. We will list various dummy news items with a related image. The 3rd feature is about adding a left arrow to the application’s top bar icon with a link to the homescreen.

We will be creating a modal component for the settings screen. This screen will have a table view with toggles components to represent each setting item.

The last feature, a sharing option, will be achieved using Ratchet’s popover component.

Let’s get started

Download Ratchet from its official website, goratchet.com. Extract its content into a working folder and create a new file called index.html in it. Or download the final code from github. This page is going to be the first screen of our application.

Next, we need to put Ratchet’s recommended HTML markup inside this HTML page. In case you don’t remember the important meta tags and the basic structure of a Ratchet HTML page, you can always find them here.

The index.html page should now contain the following markup:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>SitePoint’s World News</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.css" rel="stylesheet">

    <!-- Include the compiled Ratchet JS -->
    <script src="js/ratchet.js"></script>
  </head>
  <body>

  <header class="bar bar-nav">
    <h1 class="title">SitePoint’s World News</h1>
  </header>

  <div class="content">

  </div>
  </body>
</html>

I have changed the page’s title to SitePoint’s World News and have removed all the content that was inside the .content div in the basic template.

As discussed in my previous article on Ratchet, every Ratchet page should have two important components: the top bar and the contents section.

The top bar should be a <header> element with classes: .bar and .bar-nav whereas the contents section should have a class .content.

Refer to my previous article for steps to run a Ratchet application. There are various options available.

Our goal is to fill the contents section with some dummy news content. I have shamelessly picked up some news items from the Google News page to give a realistic feeling to the app.

To create a list of news items, we will be using “Table view with chevrons” HTML component of Ratchet. So let’s go ahead and place the following markup inside the .content div.

<div class="card">
    <ul class="table-view">
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Nintendo apologises for lack of virtual equality
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            New Surface Pro reportedly debuting alongside Surface mini
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
      Microsoft share price: Software giant announces Office Mix
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Snapchat Settles FTC Charges That It Misled Users About Disappearing Photo ...
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Apple Loop: Beats and Earbuds, Nokia's Imaging Brains And US Legal ...
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Fed court overturns Oracle v. Google Java API copyright decision
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Say goodbye to Facebook's Poke and Camera
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Ford recalls Escape, C-Max and more vehicles to fix safety issues
        </a>
      </li>
      <li class="table-view-cell">
        <a class="navigate-right" href="#">
            Chrysler recalls 780000 minivans over window switch
        </a>
      </li>
    </ul>
  </div>

The table view is a <ul> element with .table-view class. Each <li> element in a table view should have a class .table-view-cell. Here, I have used an <a> element with class .navigate-right for each news item. The class .navigate-right outputs a right arrow at the right side of each .table-view-cell element.

Our screen till now should like this:

App preview

It’s almost ready. We need to place an image item beside each item. This image item has to be placed inside each <a> element to represent the corresponding news image. Here’s the mark up for the image:

<img class="media-object pull-left" src="images/img1.jpeg">

The image should have class media-object to identify it as a Ratchet media component. I have used the class .pull-left to make the image left aligned with respect to the news headline. Go ahead and place the image tag inside each item in your markup. We should get a screen that looks like below.

The App's second screen

Now it is time to create another HTML page which will be used to display a complete news article. Create another file in the same working folder called article.html.

We will put the same basic HTML template from Ratchet in this page. So, the markup article.html should be:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Post's Title</title>

    <!-- Sets initial viewport load and disables zooming  -->
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">

    <!-- Makes your prototype chrome-less once bookmarked to your phone's home screen -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="mobile-web-app-capable" content="yes">

    <!-- Include the compiled Ratchet CSS -->
    <link href="css/ratchet.css" rel="stylesheet">

    <!-- Include the compiled Ratchet JS -->
    <script src="js/ratchet.js"></script>
  </head>
  <body>

  <header class="bar bar-nav">
    <a class="icon icon-left-nav pull-left" href="index.html"></a>
    <h1 class="title">Post's Title</h1>
  </header>

  <div class="content">
  </div>
  </body>
</html>

Everything looks the same, except an additional link in the <header> element. I have used Ratchet’s Ratchicons to create a left icon inside the top bar. This icon is generated using the classes .icon and .icon-left-nav. An additional class .pull-left is used to place the icon to the left most side of the top bar. Since, this icon is a link element, let’s put index.html as its target. Hence, whenever this is clicked it will take us back to the homescreen.

Let’s put some content inside the .content div to represent the article.

<div class="content-padded">
  <img class="media-object" src="images/img1.jpeg">
  <h1>Nintendo apologises for lack of virtual equality</h1>
  <p><i>‎5 hours ago by Syed Fazle Rahman</i></p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore. Lorem ipsum dolor sit amet.</p>

The class .content-padded is used to create some padding between the screen and the content. I have placed an image representing the news item, the title of the news item using <h1> tag and some dummy text using multiple <p> tags to represent the news content.

The article.html should look like below.

App's article page

Now that we have 2 pages ready, let’s link them. This is where we will actually use push.js functionality.

Open index.html again. We will change the href attribute value of the first news item to article.html. By default, all the links in Ratchet applications are push.js powered links. This means they will fetched using AJAX.

Ratchet looks for .bar and .content divs in both the current page and the newly fetched page. It then updates those divs in the old page with the contents of the new page. Hence, anything placed outside .bar and .content divs in the newly fetched page, will be ignored.

In our case, it will update the top header bar and the .content div of the index.html page with the contents of corresponding components of article.html page. Hence, we will see an updated top bar and the news article instead of a list of news items.

Go ahead and click on the first news item in the homescreen, you will see the news article being loaded. Click the back button on the top bar, it should take you back to the homescreen.

Let’s add some transitions while changing the screen through push.js. The transitions are applied to the application by adding a custom attribute called data-transition to the link <a> elements. This attributes takes three different values: fade, slide-in, or slide-out. Let’s add a slide-in effect to the first news item in the homescreen as shown below:

<a class="navigate-right" href="two.html" data-transition="slide-in">
  <img class="media-object pull-left" src="images/img1.jpeg">
    Nintendo apologises for lack of virtual equality
</a>

Also add a slide-out effect to the back button in the article.html page.

<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>

Go ahead and run your application again. You should see a slide-in effect while fetching a new page and a slide-out effect while returning back. These effects may look slightly different as per the theme included in the Ratchet application. An iOS platform transition is applied when using the iOS theme and Android platform transition is applied in the Android theme.

That’s it. Our application is almost ready with the basic features. There’s still 2 more features that needs to be achieved: the sharing options and the settings screen on the news article. Since these options will be available only on the second screen, we will create them inside article.html.

The sharing option is a popover that appears from the top bar with long list of social network options. We will be using Ratchet’s popover component to create it. Let’s reopen article.html. The markup for a popover component goes like this:

<div id="popover" class="popover">
<header class="bar bar-nav">
  <h1 class="title">Share this</h1>
</header>
<ul class="table-view">
  <li class="table-view-cell">Facebook</li>
  <li class="table-view-cell">WhatsApp</li>
  <li class="table-view-cell">Google+</li>
  <li class="table-view-cell">Tweet</li>
  <li class="table-view-cell">Pinterest</li>
  <li class="table-view-cell">Reddit</li>
  <li class="table-view-cell">Pocket</li>
  <li class="table-view-cell">Email</li>
</ul>

Each popover should have a header and a body portion. The header is used to give a title to the popover. Just like application’s top bar, this header should also have the classes: .bar and .bar-nav. Next, we will use Ratchet’s table-view component to list out the set of sharing networks. Here comes the biggest question! Where should I place this popover’s markup?

As stated above, since article.html will be fetched using push.js only the contents present inside top bar and .content div will be pulled. Hence, the above popover markup should be placed just above </div> of .content div.

Popovers are one of the hidden components of Ratchet. This means, they will be visible only when triggered. Hence, we need a handler which will trigger the popover.

Place an sharing icon beside the title of the article in <header> component of article.html. This icon will be our handler to trigger the sharing popover. The markup for the top bar of article.html should now be:

<header class="bar bar-nav">
<a class="icon icon-left-nav pull-left" href="index.html" data-transition="slide-out"></a>
<h1 class="title">Nintendo apologises <a class="icon icon-share" href="#popover"></a></h1>

The href attribute of the handler should contain the ID of the target popover. Here the value is #popover. The sharing icon is a Ratchicon which is made displayed using the classes icon and icon-share. Let’s go and check it working in our application. It should look like below.

Sharing pop-up

Amazing! Isn’t it? We didn’t have to write a single line of CSS and JS for that popover. Kudos to the Ratchet team.

It’s time to create a settings screen. This screen will be a Ratchet modal. Just like popovers, modals are also invisible by default. They have to be triggered in order to make them visible. Let’s create a floating bottom bar in the article.html screen. We will place a settings icon in it which will be the handler to trigger the modal screen.

To create a floating bar, add the following markup just below the markup of the popovers.

<div class="bar bar-standard bar-footer">
<a class="icon icon-gear pull-right" href="#myModalexample"></a>

Floating bars are visible by default. I have placed a gear icon to represent the settings button. Its’ href attribute contains the ID of the modal component which will create soon. The article.html screen will now look like this:

Adding an image to our article page

The markup for a modal component is as follows:

<div id="myModalexample" class="modal">
<header class="bar bar-nav">
  <a class="icon icon-close pull-right" href="#myModalexample"></a>
  <h1 class="title">Settings</h1>
</header>

<div class="content">
  <ul class="table-view">
  <li class="table-view-cell">
    Don't show such articles
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Lorem Ipsum Setting 1
    <div class="toggle active">
      <div class="toggle-handle"></div>
    </div>
  </li>
  <li class="table-view-cell">
    Lorem Ipsum Setting 2
    <div class="toggle">
      <div class="toggle-handle"></div>
    </div>
  </li>
</ul>
</div>

Just like a popover component, a modal also has a header area and a .content area. The heading area is used to give a title to the modal. In the contents area, I have used “Table view with toggles” component of Ratchet. Hence, the user can toggle a particular settings item as per his requirements.

The modal screen looks like below:

Settings pop up

The markup for modal component should also be placed inside the .content div of article.html page.

Preventing push.js

If you want some links in your application should not use push.js, you can use data-ignore custom attribute with value as push in such link elements.

Eg:

<a href="http://www.sitepoint.com" data-ignore="push">SitePoint<a>

The above link will redirect you from the app to the target URL.

Conclusion

Finally we have a basic news feed application using Ratchet. It has the features that are normally found in most native applications. We were able to create a high fidelity application just by using HTML, CSS and JS technologies. If this prototype is integrated using frameworks like PhoneGap, it can become a fully fledged hybrid application and be used with iOS and Android devices as a native application.

Hopefully, you have enjoyed creating this dummy application as much as I did. I am looking forward to empowering such applications using AngularJS, ExpressJS and MongoDB and make it a fully functional application. If you have any queries related to this topic, you can tweet me directly using my twitter handle (@fazlerocks) or leave a comment below. I will be glad to answer them.

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.i-visionblog.com s.shivasurya

    nice article!

  • Bruno Seixas

    Thanks for the article. I manage to done it all without any trouble.
    Looking forward for the article where we integrate the app with MongoDB.

    Ps. The Chrome Emulation is really great. I wasnt aware of it :)

  • Bruno Seixas

    I have a question. Is there any problem having a nav “bar bar-tab” inside a div “bar bar-standard bar-footer”? I ask this because while browsing in a mobile device, or Chrome Emulator, sometimes the render is done wrong (ex: the footer is not displayed).

  • PankajK

    How to load dynamic pages, I don’t want to load pages using ajax but want to create pages on the fly and load, Please explain how to do that.

    • helloworlder

      Not too sure what you mean, because loading pages with ajax qualifies as dynamic in every sense I can think of. Have you looked at AMD loaders and templating? Another method is to use an AMD loader to get the templates you want just before you need it.

      • PankajK

        I am having sqlite database tables on phone, I want to create list by using these db records and show list, I checked your js file but it doesn’t have any option to do this, I’ll check AMD and templating.

  • http://www.prideparrot.com/ Vijaya Anand

    I want to use Ratchet only for UI. How can I completely ignore push functionality at application level?

    • helloworlder

      That’s a really good question, and there has been some talk of de-coupling push’s animations from its behaviour on the GitHub project.

  • http://79px.com 源泉

    It is too hard to learn..

    • helloworlder

      Really? I know a few frameworks out there that I think are hard. But this one is probably the simplest I’ve seen :) Give it another go :)

  • helloworlder

    Thanks for the tutorial. But why are you including the and tags as well as all the file includes all over again on the article.html page? Isn’t that defeating the purpose of push? In any app, those includes should only happen once.