Page tree
Skip to end of metadata
Go to start of metadata

This guide explains how to use the IOS Navigation Bar.

There is only one navigation bar in the application. So changing a property of navigation bar will affect the whole application.
Inside of the navigation bar is page’s navigationItem property. You can set the page title with the code below:

function page1_onShow(e) {
	SMF.UI.iOS.NavigationBar.visible = true;
	this.navigationItem.title = "My Title";
}

Customizing NavigationBar

The code below is an example on how to change the NavigationBar background color, background image or tint color. The Tint color affects only the bar button items.

function page1_onShow(e) {
	SMF.UI.iOS.NavigationBar.visible = true;
	this.navigationItem.title = "My Title";
	SMF.UI.iOS.NavigationBar.backgroundColor = "gray";
	//SMF.UI.iOS.NavigationBar.backgroundImage = "smartface.png"; // If you would like to use backgroundImage, you can enable this code block.
	SMF.UI.iOS.NavigationBar.tintColor = "#ff0000"; 
}

Bar Button Items

You can add bar button items on the left and right sides of the navigation item.

	var item1 = new SMF.UI.iOS.BarButtonItem({
			title : "Click",
			onSelected : function () {
				alert("You clicked a bar button");
			}
		});
	this.navigationItem.leftBarButtonItems = [item1];

You can use iOS system items too.

var item2 = new SMF.UI.iOS.BarButtonItem({
		systemItem : SMF.UI.iOS.BarButtonType.CAMERA,
		tintColor : "#ff0000",
		onSelected : function () {
			alert("Camera Opened!");
		}
	});
this.navigationItem.rightBarButtonItems = [item2];

Or an image can be used for a bar button item.

var barButtonImage = new SMF.UI.iOS.BarButtonItem({
		image : "Icon-24.png",
		onSelected : function (e) {
			alert("barButton2 clicked");
		}
	});
this.navigationItem.rightBarButtonItems = [barButtonImage];

Enable/Disable NavigationBar

NavigationBar touch events can be disabled for preventing user to interact with it by using enabled property;

function page1_onShow(e) {
	SMF.UI.iOS.NavigationBar.visible = true;
	this.navigationItem.title = "My Title";
	SMF.UI.iOS.NavigationBar.enabled = false;
}

 

Title View

You can use a customised title or an image in your navigation item. You can use iOS system fonts or your custom fonts if you added to your project bundle. If you use an image for titleView, its size should be the same as the NavigationBar (640x88px).

page1.navigationItem.titleView = {
	type : SMF.UI.TitleViewType.TEXT,
	frame : [0, 0, 320, 44], // left, top, width, height
	text : "Page Title",
	textColor : "#000000",
	backgroundColor : "gray",
	fontName : "Helvetica-Bold",
	fontSize : 16,
	alignment : SMF.UI.TextAlignment.CENTER
};

page1.navigationItem.titleView = {
	type : SMF.UI.TitleViewType.IMAGE,
	frame : [130, 0, 44, 44], // left, top, width, height
	image : "Icon-40.png"
};

For Android, ActionBar is used and more info about the ActionBar can be reached by the document.