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

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

<dom-module id="@element-main">
	<template>
		<style include="shared-app-layout-styles"></style>

		<triplat-route id="inboxRoute" 
				name="inbox" path="/" on-route-active="_onInboxRouteActive">
		</triplat-route>
		<triplat-route id="detailRoute"
				name="detail" path="/detail/:id" on-route-active="_onDetailRouteActive">
		</triplat-route>

		<triplat-route-selector page>
			<iron-pages>
				<@element-inbox route="inbox" on-inbox-action="_onInboxAction" default-route>
				</@element-inbox>
				<@element-details id="detailsPage" route="detail">
				</@element-details>
			</iron-pages>
		</triplat-route-selector>
	</template>
</dom-module>
<script>
	Polymer({

		is: "@element-main",

		behaviors: [
			TriAppLazyLoadingBehavior
		],

		listeners: {
			"open-detail": "_onOpenDetail",
			"submit-detail": "_onSubmitDetail",
			"delete-record": "_onDeleteRecord"
		},

		openInbox: function() {
			this.$.inboxRoute.navigate();
		},

		_onOpenDetail: function (e) {
			this.$.detailRoute.navigate({ id: e.detail.record._id });
		},

		_onInboxAction: function (e) {
			alert("Implement inbox action button");
		},
		
		_onSubmitDetail: function (e) {
			alert("Implement submit detail.");
		},

		_onDeleteRecord: function (e) {
			alert("Implement delete record.");
		},

		_onInboxRouteActive: function (e) {
			this.fire(
				'inbox-route-active', 
				{ active: e.detail.active, pageLabel: null, hasBackButton: false }
			);
		},

		_onDetailRouteActive: function(e) {
			if (e.detail.active) {
				this.loadResource(this.$.detailsPage, "@element-details.html");
			}
			this.fire(
				'detail-route-active', 
				{ active: e.detail.active, pageLabel: "Detail", hasBackButton: true }
			);
		}
	});

</script>