CODEWITHSUNDEEP
javascriptmobileonsen-uitabnavigator
Carlos Correia
Carlos Correia

Reputation: 45

Onsen UI Pagination: navigator and tabbar

I am in doubt about mixing navigator and tabbar.

Explaining: the main page (Main page1) consists of two child pages (tab1 and tab2) that are accessed by tabbar, while the other pages (page2 and 3) are accessed through the navigator. The tab1 page is the first one actived.

Layout: the tab1 and tab2 pages have the same toolbar (on the top). The page2 and page3 has different toolbar with back-button and another button to redirect to mainpage tab1.

My code is this, but i don`t know if it is correct or the best approach:

<!doctype html>
<html lang="en" ng-app="app">
<head>
	<meta charset="utf-8">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="mobile-web-app-capable" content="yes">

	<link rel="stylesheet" href="lib/onsen/css/onsenui.css">  
	<link rel="stylesheet" href="lib/onsen/css/onsen-css-components.css"> 
	<link rel="stylesheet" href="styles/app.css"/>

	<style>

	    .item {
	      padding: 10px;
	      line-height: 1;
	    }
	</style>


	<script src="lib/onsen/js/angular/angular.js"></script>    
	<script src="lib/onsen/js/onsenui.js"></script>    

	<script>
	    angular.module('app', ['onsen']);
	
	    angular.module('app').controller('AppController', function($scope) {
	      // functions for AppController
	    });

	    angular.module('app').controller('Tab1Controller', function($scope) {
	      // functions for Tab1Controller
	    });


	    angular.module('app').controller('Tab2Controller', function($scope) {
	      // functions for Tab2Controller
	    });

	    angular.module('app').controller('Page2Controller', function($scope) {
	      // functions for Page2Controller
	    });

	    angular.module('app').controller('Page3Controller', function($scope) {
	      // functions for Page3Controller
	    });
	</script>

</head>

<body ng-app="app" ng-controller="AppController">

	<ons-navigator animation="slide" var="app.navi" >

		<ons-toolbar>
			<div class="left"><ons-toolbar-button ng-click="app.navi.pushPage('page3.html')">Go</ons-toolbar-button></div>
			<div class="center">App</div>
			<div class="right">
       			<ons-toolbar-button><ons-icon icon="fa ion-navicon" style="font-size: 32px; width: 1em"></ons-icon></ons-toolbar-button>
			</div>
		</ons-toolbar>

		<ons-tabbar position="top">
			<ons-tab page="tab1.html" label="Tab1" active="true"></ons-tab>
			<ons-tab page="tab2.html" label="Tab2"></ons-tab>
		</ons-tabbar>

	</ons-navigator>

	<ons-template id="tab1.html" >
		<ons-page ng-controller="Tab1Controller">
			<p>Content tab1</p>
		</ons-page>
	</ons-template>

	<ons-template id="tab2.html">
		<ons-scroller>
			<p>Content Tab2</p>
			<ons-list ng-controller="Tab2Controller">
				<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page2.html')">
					<p>Item {{item}}</p>
				</ons-list-item>
			</ons-list>
		<ons-scroller>
	</ons-template>

	<ons-template id="page2.html">
		<ons-page ng-controller="Page2Controller">
			<ons-toolbar>
				<div class="left">
					<ons-back-button></ons-back-button>
					<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
				</div>
				<div class="center">PAGE2</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-scroller>
				<p>Content PAGE2</p>
				<ons-list ng-controller="Tab2Controller">
					<ons-list-item modifier="chevron" class="item" ng-repeat="item in [1,2,3]" ng-click="app.navi.pushPage('page3.html')">
						<p>Item {{item}}</p>
					</ons-list-item>
				</ons-list>
			</ons-scroller>
		</ons-page>
	</ons-template>


	<ons-template id="page3.html">
		<ons-page ng-controller="Page3Controller">
			<ons-toolbar>
				<div class="left">
					<ons-back-button></ons-back-button>
					<ons-toolbar-button ng-click="app.navi.resetToPage('index.html')">HOME</ons-toolbar-button>
				</div>
				<div class="center">PAGE3</div>
				<div class="right">
	       			<ons-toolbar-button><ons-icon icon="ion-navicon" style="font-size: 32px; width: 1em"></ons-toolbar-button>
				</div>
			</ons-toolbar>
			<p style="text-align: center">
				<ons-button modifier="light" ng-click="app.navi.popPage('page1.html');">Pop</ons-button>
			</p>
			<p style="text-align: center">
				<ons-button modifier="light" ng-click="app.navi.pushPage('page2.html');">Page 2</ons-button>
			</p>
		</ons-page>
	</ons-template>

	<ons-template id="popover.html">
		  <ons-popover direction="up down" cancelable>
		    <div style="text-align: center; opacity: 0.5;">
		      <p>This is a popover!</p>
		      <p><small>Click the background to remove the popover.</small></p>
		    </div>
		  </ons-popover>
	</ons-template>

</body>

</html>

I hope that is util for someone else.

Upvotes: 3

Views: 2481

Answers (1)

Fran Dios
Fran Dios

Reputation: 3482

Since there is no specific question I will try to clarify about the navigation patterns you are using there.

<!-- Navigator as root element -->
<ons-navigator>
    <ons-page>
        <ons-tabbar>
            <ons-tab>...</ons-tab>
            <ons-tab>...</ons-tab>
        </ons-tabbar>
    </ons-page>
</ons-navigator>

You have an ons-navigator as the root of your app and then you have an ons-tabbar as a child. This means that when you try to navigate using the parent navigator, you will push another child (a page) over the current child (the tabbar), so you won't see the tabbar anymore (not even the toolbar unless you put a new one in every page) until you push it again or delete all its siblings over it. Also, all your pages will be stored in the same page-stack since you only have one navigator. This means that you cannot separate Tab1 and Tab2 workflows in two different branches: if you resetToPage in Tab1, Tab2 will be also reset.

This is completely fine if you are aware of it and is what you really want to do. It depends on what you need.

<!-- Tab Bar as root element -->
<ons-tabbar>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
    <ons-tab>
        <ons-navigator>...</ons-navigator>
    </ons-tab>
</ons-tabbar>

Another different approach, and perhaps more common, is to have the ons-tabbaras the root of the project and define one ons-navigator as a child of every ons-tab where you need further navigation. Like this your tabbar will always be visible since what you are changing with the navigators is not all the content but just the content of a specific ons-tab. Every tab will have its own workflow stored in a different page-stack, totally independent from the others.

As I said before, it really depends on what you need for you app. You could have, for example, many tabs for things like "settings", "about", etc. that are just one-page views and then a navigator in only one tab with the real app.

Let me know if your doubts are clarified now!

Upvotes: 3

Related Questions