OnsenUI | An anatomy of a page

Written by on April 9, 2015

OnsenUI | An anatomy of a page

In my previous article, we discussed installation requirements for OnsenUI framework, but we didn’t have time to do anything with it. In this article, we’re going to talk about page anatomy while creating a small working example.

For those of you who don’t know, Onsen UI is similar to jQuery Mobile from the architecture point of view (it’s also much faster). This is important because you will need to make a big decision. Why? An Onsen UI app is actually an AngularJS app, but you can also use it with plain JavaScript. My tutorials will all use pure AngularJS approach. You will need to decide which way you want to go.

Note: If this tutorial was helpful, you need further clarification, something is not working or you have a request for another Ionic post? Furthermore, leave me a comment below if you don't like something about this blog, if something is bugging you, don't like how I'm doing stuff here. Feel free to comment below, subscribe to my blog, mail me to dragan.gaic@gmail.com. Thanks and have a nice day!

Table of Contents

[spoiler title=” Click here if you want to see other tutorials, this is the 2nd tutorial out of 12 total.”]

[/spoiler]

Preparations

Before we can go any further, we need to create our first project. This step depends on the first article so make sure you’ve done everything mentioned including section 2.3. If you did everything correctly
you should have a project/project folder.

Page architecture

This is the point where we need to plan carefully. What do we want to do? Are we going to create a single page application or a multipage one? Are we going to use single HTML file or several of them? I will name three available approaches and
you decide which one best suits your needs.

Single page

This approach is the easiest one. Our application will have only one available page, and we don’t need to worry about navigation.

Demo

Embeded working example:
OnsenUI single page example

HTML:
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/onsenui.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/1.2.0-beta/css/onsen-css-components.css" />
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-page>
    <ons-toolbar fixed-style>
      <div class="center">Title</div>
    </ons-toolbar>

    <p style="text-align: center">
      <ons-button modifier="light" ng-click="toggle()">Click Me!</ons-button>
    </p>
  </ons-page>

</body>
</html>
JavaScript:
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {
    $scope.toggle = function() {
        alert('This is a click event');
    };
  });
});

As you can see, our page content is held inside an ons-page directive. It’s a simple container that fits a content and as such should be used as a root component of each page. The content of a page component is scrollable. Inside we have one additional directive called ons-toolbar.

Multi page – single HTML architecture

Next approach is similar in nature to the first one. Main difference, it is used for two or more pages inside a single HTML file.

Every page (except the first one) is put into a single HTML fragment called ons-template. This is a good approach because templates will be cached for very fast loading, instead of having to fetch them from the network. I would advise you against it if you need to create a large application, it can get messy if everything is stored inside a single HTML file.

Demo

Embeded working example:
OnsenUI Multi page – single HTML architecture

HTML:
<!DOCTYPE html>
<html>

<head>
  <script src="https://code.angularjs.org/1.3.0/angular.js"></script>
  <script src="http://onsenui.io/OnsenUI/build/js/onsenui.js"></script>
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/onsenui.css" />
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/onsen/1.2.0-beta/css/onsen-css-components.css" />
  <link rel="stylesheet" href="http://onsenui.io/OnsenUI/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-navigator animation="slide" var="app.navi">
        <ons-page>
          <ons-toolbar>
            <div class="center">Main Page</div>
          </ons-toolbar>
      
          <p style="text-align: center">
            <ons-button modifier="light" ng-click="app.navi.pushPage('page.html');">Push</ons-button>
          </p>
        </ons-page>   
  </ons-navigator>    
  
  <ons-template id="page.html">
    <ons-page>
      <ons-toolbar>
        <div class="center">Second Page</div>
      </ons-toolbar>
  
      <p style="text-align: center">
        <ons-button modifier="light" ng-click="app.navi.popPage('index.html');">Pop</ons-button>
      </p>
    </ons-page>
  </ons-template>
  
</body>
</html>

JavaScript:
var module = ons.bootstrap('my-app', ['onsen']);
module.controller('MainController', function($scope) {
  ons.ready(function() {

  });
});

This approach uses one additional directive called ons-navigator. If you’ve a prior Angular experience (with angular-ui-router), ons-navigator is equivalent to ui-view.

As a user navigates throughout your app, OnsenUI can keep track of their navigation history. By knowing their history, transitions between views correctly enter and exit using the platform’s transition style. This is what ons-navigator is supposed to do. If you remove it, you will not be able to see any page at all.

There’s still one big difference. If you take a look at JavaScript section you’ll notice that something is missing. Unlike Angular and Ionic Framework, Onsen UI doesn’t require manually set routing, so forget ngRoute modul.

Continue Reading

Categories

1 thought on “OnsenUI | An anatomy of a page”

Leave a Reply