snapshot
/
GuaranaUI


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283
							<!DOCTYPE html>

<html>
	<head>
		<link rel="stylesheet" href="../../../themes/themeroller/default-theme/ui.all.css" type="text/css" media="screen" />
		<link rel="stylesheet" href="../../../themes/nokia/ext-theme/default/360x640/custom.css" type="text/css" media="screen" />

		<script src="../../../lib/jquery/jquery.js" type="text/javascript" charset="utf-8"></script>

		<script src="../../../src/defaults.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../../src/core.js" type="text/javascript" charset="utf-8"></script>
		
		<style type="text/css" media="screen">

			body {
				font-size: 14px;
				font-family: "Trebuchet MS", "Helvetica", "Arial",  "Verdana", "sans-serif";
			}

		</style>
		
	</head>

	<body>

		<script type="text/javascript" charset="utf-8">
		
			if (window.widget) {
				widget.setNavigationEnabled(false);
			}
			
			if (window.menu) {
				menu.hideSoftkeys();
			}

			var init = function() {
				
				/* Global Default Floating Menu */
				
				window.floatingMenu = new Nokia.FloatingMenu({
					autoRender: false,
					element: '.nokia-template-header-icon-menu',
					elementHoverClass: 'nokia-template-header-icon-menu-hover',
					offsetTop: 60,
					items: [
						{label: 'Show Second View', callback: function() { viewManager.show(1) }},
						{label: 'Test Item 2', callback: function() { alert('2') }}
					]
				});
				
				var defaultTopItems = [
					{classname: 'nokia-template-header-icon-home', pressedStateClass: 'nokia-template-header-icon-hover',
					callback: function() {
						viewManager.show(0);
					}},
					{classname: 'nokia-template-header-icon-separator', navigable: false },
					{classname: 'nokia-template-header-icon-menu', callback: function() { floatingMenu.render().toggle() } },
					{classname: 'nokia-template-header-icon-separator', navigable: false },
					{classname: 'nokia-template-header-title', label: 'VIEW ONE' },
					{classname: 'nokia-template-header-icon-separator-right', navigable: false },
					{classname: 'nokia-template-header-icon-close', pressedStateClass: 'nokia-template-header-icon-hover',
					callback: function() {
						window.close();
					}},
				];
				
				var FirstView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">First View Header First View Header' +
						'First View Header First View Header First View Header First View Header First View Header First View Header' +
						'</p>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);
					},
				
					bindUI: function() {
						
						this._viewHeader.click(function() {
							//console.log('Clicked on Header');
						});
						
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'red');
					},
					
					show: function() {
						var template = this.getTemplate();
						var topBar = template.getHeaderTopBar();
						
						floatingMenu.destroy();
						
						floatingMenu = new Nokia.FloatingMenu({
							autoRender: false,
							element: '.nokia-template-header-icon-menu',
							elementHoverClass: 'nokia-template-header-icon-menu-hover',
							offsetTop: 60,
							items: [
								{label: 'Show Second View', callback: function() { viewManager.show(1) }},
								{label: 'Test Item 2', callback: function() { alert('2') }}
							]
						});
						
						defaultTopItems[2] = {
							classname: 'nokia-template-header-icon-menu',
							callback: function() {
								floatingMenu.render().toggle();
							}
						};
						
						defaultTopItems[4] = {
							classname: 'nokia-template-header-title',
							label: 'VIEW ONE'
						};
						
						defaultTopItems[6] = {
							classname: 'nokia-template-header-icon-close',
							pressedStateClass: 'nokia-template-header-icon-hover',
							callback: function() {
								window.close()
							}
						};
						
						topBar.setItems(defaultTopItems);
						
						this.getContainer().show();
					}
				});
				
				var SecondView = Nokia.View.extend({
					/*
					* Lifecycle
					*/
					init: function() {
						//console.log("initialize FirstView view");
					},
				
					renderUI: function() {
						this._viewHeader = Nokia.dom.parseHTML('<p class="nokia-view-header">Second View Header Second View Header' +
						'Second View Header Second View Header Second View Header Second View Header Second View Header Second View Header' +
						'</p>');
						
						Nokia.dom.append(this.getContainer(), this._viewHeader);
					},
				
					bindUI: function() {
						
						this._viewHeader.click(function() {
							//console.log('Clicked on Header');
						});
						
					},
					
					syncUI: function() {
						this._viewHeader.css('color', 'blue');
					},
					
					show: function() {
						var template = this.getTemplate();
						var topBar = template.getHeaderTopBar();
						
						floatingMenu.destroy();
						
						floatingMenu = new Nokia.FloatingMenu({
							autoRender: false,
							element: '.nokia-template-header-icon-menu',
							elementHoverClass: 'nokia-template-header-icon-menu-hover',
							offsetTop: 60,
							items: [
								{label: 'Show First View', callback: function() { viewManager.show(0) }},
								{label: 'Test Item 2', callback: function() { alert('2') }}
							]
						});
						
						defaultTopItems[2] = {
							classname: 'nokia-template-header-icon-menu',
							callback: function() {
								floatingMenu.render().toggle()
							}
						};
						
						defaultTopItems[4] = {
							classname: 'nokia-template-header-title',
							label: 'VIEW TWO'
						};
						
						defaultTopItems[6] = {
							classname: 'nokia-template-header-icon-back',
							pressedStateClass: 'nokia-template-header-icon-hover',
							callback: function() {
								viewManager.back()
							}
						};
						
						topBar.setItems(defaultTopItems);
						
						this.getContainer().show();
					}
				});
				
				var viewManager = new Nokia.ViewManager({
					show: function(view) {
						//console.log(view);
					}
				});
				
				viewManager.add(new FirstView());
				viewManager.add(new SecondView());
			
				var templateDefault = new Nokia.TemplateDefault({
					viewManager: viewManager,
					header: {
						items: [] // They are already set in each view
					},
					footer: {
						items: [
							{
								label: "favorites",
								icon: 'images/icon1.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "favorites",
								icon: 'images/icon2.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "favorites",
								icon: 'images/icon3.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "favorites",
								icon: 'images/icon4.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							},
							{
								label: "favorites",
								icon: 'images/icon5.png',
								select: function(item, event) {
									alert('Iconic Menu Clicked on: ' + item.label);
								}
							}
						]
					}
				});
				
				/*
				 * Hide splash when its all done.
				*/
				
				Nokia.hideSplash();
					
			};
			
			/*
			 * Show splash while loading components.
			*/
				
			Nokia.showSplash('<span>LOADING</span>');
			
			Nokia.use('template-default', init);

		</script>

	</body>
</html>