@tririga/tri-template/lib/templates/app-layout/@element.html

A simple tool for generating IBM TRIRIGA UX view skeletons from available templates.

<link rel="import" href="../triplat-view-behavior/triplat-view-behavior.html">
<link rel="import" href="../triblock-app-layout/triblock-app-layout.html">
<link rel="import" href="../triplat-routing/triplat-routing.html">

<link rel="import" href="../iron-pages/iron-pages.html">

<link rel="import" href="@element-styles.html">

<dom-module id="@element">
	<template>
		<style include="@element-styles">
		</style>
		
		<triplat-route id="homeRoute" name="home" path="/"></triplat-route>
		<triplat-route id="reportsRoute" name="reports" path="/reports"></triplat-route>
		<triplat-route id="watsonRoute" name="watson" path="/watson"></triplat-route>

		<triblock-app-layout 
			app-label="@element"
			mobile-page-label="@element"
			show-mobile-back-button>

			<!-- Enable to customize app-title -->
			<!--<div app-title>			
				<span><b>App @element</b></span>
			</div>-->

			<triblock-banner-button tap-handler="_navigateToHome" home></triblock-banner-button>
			<triblock-banner-button tap-handler="_navigateBack" back></triblock-banner-button>

			<triblock-banner-button icon="ibm:table-tables" label="Reports" triplat-route-id="reportsRoute"></triblock-banner-button>
			<triblock-banner-button icon="ibm:world-globe" label="Watson Analytics" triplat-route-id="watsonRoute"></triblock-banner-button>
			
			<triplat-route-selector content>
				<iron-pages>
					<section route="home" default-route>
						<span>@element Main Page</span>
					</section>
					<section route="reports">
						<span>Reports Page</span>
					</section>
					<section route="watson">
						<span>Watson Analytics Page</span>
					</section>
				</iron-pages>
			</triplat-route-selector>

		</triblock-app-layout>

	</template>
</dom-module>
<script>
	Polymer({

		is: "@element",

		behaviors: [TriPlatViewBehavior],

		_navigateToHome: function() {
			this.$.homeRoute.navigate();
		},

		_navigateBack: function() {
			window.history.back();
		}

	});

</script>