OnsenUI | Working With UI Patterns

Written by on April 9, 2015

OnsenUI | Working With UI Patterns

In my previous article, we discussed OnsenUI page anatomy and what it takes to build a multi-page application. Usually, this is not enough, mobile applications require more than a bunch of simple pages. Because of that it’s important to consider UI patterns before start implementation. Onsen UI currently supports four commonly used UI patterns.

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 3rd tutorial out of 12 total.”]

[/spoiler]

Introduction

UI patterns are complex page structures covering one or more pages at the same time. They are usually used to provide a better page usability. Don’t mistake them for page patterns.

OnsenUI provides these UI patterns:

  1. Navigation pattern
  2. Sliding menu pattern
  3. Tab bar pattern
  4. Split view pattern

Navigation pattern

Navigation pattern is the most commonly used pattern if you want to have a parent-child relationship between pages, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails. I already showed you one implementation in the second tutorial. Without it framework can’t display more than one page, handle page navigation or remember navigation history. You can use it to link to a child page from a button or a list item.

Demo

Embeded working example:
OnsenUI Navigation pattern

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="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/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 title="Navigator" var="myNavigator">
    <ons-page>

	    <ons-toolbar>
        <div class="center">Toolbars</div>
        <div class="right">
          <ons-toolbar-button>
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em">
          </ons-toolbar-button>
        </div>
      </ons-toolbar>

      <ons-list>
        <ons-list-header>Toolbar divider</ons-list-header>
        <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page1.html', { animation : 'slide' } )">
          Page 1
        </ons-list-item>
        <ons-list-item modifier="chevron" onclick="myNavigator.pushPage('page2.html', { animation : 'slide' } )">
          Page 2
        </ons-list-item>
      </ons-list>
    </ons-page>
  </ons-navigator>

  <ons-template id="page1.html">
    <ons-page>
      <ons-toolbar>
        <div class="left" style="line-height: 44px">
          <ons-back-button>Back</ons-back-button>
        </div>
        <div class="center">Page 1</div>
        <div class="right" style="line-height: 44px">
          Right
        </div>
      </ons-toolbar>

      <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
          Slide back
        </ons-button>
      </div>
    </ons-page>
  </ons-template>
          
  <ons-template id="page2.html">
    <ons-page>
      <ons-toolbar>
	      <div class="left"><ons-back-button>Back</ons-back-button></div>
	      <div class="center">Page 2</div>
	      <div class="right" style="padding-right: 6px"><input type="search" class="search-input" placeholder="Search" style="margin-top: 6px;"></div>
      </ons-toolbar>

      <div style="text-align: center">
        <br />
        <ons-button modifier="light" onclick="myNavigator.popPage()">
          Slide back
        </ons-button>
      </div>
    </ons-page>
  </ons-template>

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

  });
});

Sliding menu pattern

Sliding menu pattern is also referred to as a Menu pattern. It is useful if your application needs to have many pages at the same level. directive is used for this pattern, swipe support is included.

Demo

Embeded working example:
OnsenUI Sliding menu pattern

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="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsenui.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/onsen-css-components.css" />
  <link rel="stylesheet" href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.2.2/build/css/topcoat-mobile-onsen-ios7.css" />
  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-controller="MainController">

  <ons-sliding-menu main-page="first.html" menu-page="menu.html" side="left" max-slide-distance="250px" var="menu">
  </ons-sliding-menu>

  <ons-template id="first.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button ng-click="menu.toggleMenu()">
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">First Page</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Content goes here.</p>
    </ons-page>
  </ons-template>


  <ons-template id="second.html">
    <ons-page>
      <ons-toolbar>
        <div class="left">
          <ons-toolbar-button onclick="menu.toggleMenu()">
            <ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em;"></ons-icon>
          </ons-toolbar-button>
        </div>
        <div class="center">Second Page</div>
      </ons-toolbar>

      <p style="text-align: center; color: #999; padding-top: 100px;">Content goes here.</p>
    </ons-page>
  </ons-template>

  <ons-template id="menu.html">
    <ons-list>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('first.html', {closeMenu: true})">
        First Page
      </ons-list-item>
      <ons-list-item modifier="chevron" onclick="menu.setMainPage('second.html', {closeMenu: true})">
        Second page
      </ons-list-item>
    </ons-list>
  </ons-template>

</body>

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

  });
});

Continue Reading

Categories

Leave a Reply