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

This guide explains how to use layout with correct concepts while using statusBar, ActionBar and NavigationBar.

What is Layout ?

Layout is a organizer for text,images and other objects on two-dimensional page. Composing a design layout also helps, organize the text and images into a easily understood hierarchy of information.

For more information, you can visit Android and iOS layout guides.

Android

Android HeaderBar concepts changed with Android 5+ ( Lollipop ) and called Material Design. You can find full Material Design guide in the project section. We will focus on layout behaviors with statusBar and ActionBar.

Without statusBar & ActionBar

Without using header objects , page layout always start (0,0 origin point ) with the first pixel of your screen. Also, Sizes are returns as pixel for Android devices.

For example, if you write the code below, it will add a rectangle which fills all the screen and shows the Device screenWidth,Device screenHeight, Rectangle width and Rectangle height;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

With statusBar, Without ActionBar

Now, try the same example above with just adding statusBar;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

If you run this code, you will see that Device height and Rectangle Height is changed because of the statusBar visibility. It shows that first layout point starts after statusBar object. Also statusBar height can be differ for each devices.

With ActionBar Without statusBar

If you run the code below which only enables actionBar, you will see that it behaves like statusBar behaviour for layout;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	this.actionBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

Also ActionBar height can be different for each devices.

With statusBar & ActionBar

Enabling statusBar & ActionBar changes the height of the device and objects sizes together ( if the sizes are given as percentage ). 

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	this.actionBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

ActionBar Overlay Effect 

The top origin of the page can be changed by using overlay property of ActionBar. But the important point is that it just change the origin point. Device will still return the Device height calculated without statusBar and ActionBar, however Object height is calculated with statusBar and ActionBar.

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	this.actionBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

iOS

Without statusBar & NavigationBar

Without using header objects , page layout always start (0,0 origin point ) with the first point of your screen. Also, Sizes are returns as pixel for Android devices.

For example, if you write the code below, it will add a rectangle which fills all the screen and shows the Device screenWidth,Device screenHeight, Rectangle width and Rectangle height;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

With statusBar, Without NavigationBar

Now, try the same example above with just adding statusBar;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

If you run this code, you will see that Device height and Rectangle Height is changed because of the statusBar visibility. It shows that first layout point starts after statusBar object. As you see that, sizes are not changed if only statusBar is enabled;

With NavigationBar Without statusBar

If you run the code below which only enables navigationBar, you will see that it effects the size of Device height, but the object size is same like without NavigationBar;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.iOS.NavigationBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

With statusBar & NavigationBar

Enabling statusBar & NavigationBar changes the height of the device but object sizes are same as without statusBar and NavigationBar;

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
		SMF.UI.iOS.NavigationBar.visible = true;
		SMF.UI.statusBar.visible = true;
		SMF.UI.iOS.NavigationBar.translucent = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}

NavigationBar Translucent Property

Translucent property lets you make a semi transparent navigationBar. With this property your layout starting point and device screen size starts from the 0,0 point of the screen.

var Rectangle = new SMF.UI.Rectangle({
	top:0,
	left:0,
	width:'100%',
	height:'100%'
});
Rectangle.backgroundTransparent = false;
Rectangle.fillColor = '#00A1F1';
Pages.page1.add(Rectangle);
function page1_onShow() {
	SMF.UI.statusBar.visible = true;
	this.actionBar.visible = true;
	alert('Device width : ' + Device.screenWidth + 'Device height : ' + Device.screenHeight + 'width : ' +Rectangle.width+ 'height : ' + Rectangle.height);
	}