TabBarController

API Reference: UI.TabBarController

TabBarController organizes and allows navigation between groups of Pages that are related and navigation controller. Pages can be created and added on onPageCreate() function. TabBar indicator shows which bar is selected. Divider helps to seperate TabBars on only Android.

TypeScript code blocks include examples of how to implement, override and components within the theme. You can create page with the UI Editor to make your page compatible with theming and then you can implement themable components programmatically. Once the page is created with the UI Editor, it generates a class under scripts/generated/pages. You can then extend that class with the following TypeScript classes.

TypeScript
JavaScript
TypeScript
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import Color = require('sf-core/ui/color');
import TabBarController = require('sf-core/ui/tabbarcontroller');
import TabBarItem = require('sf-core/ui/tabbaritem');
import PgMessagesDesign from 'generated/pages/pgMessages';
import Image = require('sf-core/ui/image');
import componentContextPatch from "@smartface/contx/lib/smartface/componentContextPatch";
import Page = require('sf-core/ui/page');
//You should create new Page from UI-Editor and extend with it.
export default class MainSample extends TabBarController {
tabPages: Page[] = [new Sample1(), new Sample1(), new Sample1(), new Sample1()];
recentsImage: Image = Image.createFromFile("images://recentcall.png");
favImage: Image = Image.createFromFile("images://fav.png");
contactImage: Image = Image.createFromFile("images://contacts.png");
messageImage: Image = Image.createFromFile("images://message.png");
items: TabBarItem[];
constructor() {
//@ts-ignore
super(this);
// Overrides super.onShow method
this.onShow = onShow.bind(this);
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this);
this.onPageCreate = onPageCreate.bind(this);
this.onHide = onHide.bind(this);
this.onSelected = onSelected.bind(this);
componentContextPatch(this, "MainSample");
let recentItem: TabBarItem = new TabBarItem({
title: "Recent",
icon: this.recentsImage
});
let favItem: TabBarItem = new TabBarItem({
title: "Favorite",
icon: this.favImage
});
let contactItem: TabBarItem = new TabBarItem({
title: "Contact",
icon: this.contactImage
});
let messageItem: TabBarItem = new TabBarItem({
title: "Message",
icon: this.messageImage
});
this.items = [recentItem, favItem, contactItem, messageItem];
}
}
function onPageCreate(index: number): Page[] {
return this.tabPages[index];
}
function onHide() {
console.log("hidden");
}
function onSelected(index) {
console.log("Selected item index: " + index);
};
function onShow() {
const { headerBar } = this;
Application.statusBar.visible = false;
headerBar.visible = false;
}
function onLoad() {
this.scrollEnabled = true;
this.indicatorColor = Color.BLACK;
this.indicatorHeight = 3;
this.barColor = Color.create("#F3F0F0");
this.textColor = {
normal: Color.BLACK,
selected: Color.create("#00A1F1")
};
this.autoCapitalize = true;
}
//You should create new Page from UI-Editor and extend with it.
class Sample1 extends PgMessagesDesign {
constructor() {
super();
// Overrides super.onShow method
this.onShow = onShow.bind(this, this.onShow.bind(this));
// Overrides super.onLoad method
this.onLoad = onLoad.bind(this, this.onLoad.bind(this));
}
}
JavaScript
const Image = require('sf-core/ui/image');
const extend = require("js-base/core/extend");
const TabBarController = require('sf-core/ui/tabbarcontroller');
const Color = require('sf-core/ui/color');
const TabBarItem = require('sf-core/ui/tabbaritem');
const Page = require('sf-core/ui/page');
const SamplePage = extend(Page)(
function(_super, params) {
_super(this, params);
this.statusBar.visible = false;
}
);
var pgRecents = new SamplePage();
var pgFavorites = new SamplePage();
var pgContacts = new SamplePage();
var pgMessages = new SamplePage();
var tabPages = [pgRecents, pgFavorites, pgContacts, pgMessages];
var TabBarController1 = extend(TabBarController)(
function(_super, params) {
_super(this);
this.onPageCreate = function(index) {
return tabPages[index];
};
this.onShow = function() {
this.headerBar.visible = false;
}.bind(this);
this.onHide = function() {
console.log("hidden");
}.bind(this);
this.onLoad = function() {
this.scrollEnabled = true;
this.indicatorColor = Color.BLACK;
this.indicatorHeight = 3;
this.barColor = Color.create("#F3F0F0");
this.textColor = {
normal: Color.BLACK,
selected: Color.create("#00A1F1")
};
this.items = items;
this.autoCapitalize = true;
}.bind(this);
this.onSelected = function(index) {
console.log("Selected item index: " + index);
};
}
);
var recentsImage = Image.createFromFile("images://recentcall.png");
var favImage = Image.createFromFile("images://fav.png");
var contactImage = Image.createFromFile("images://contacts.png");
var messageImage = Image.createFromFile("images://message.png");
var recentItem = new TabBarItem({
title: "Recent",
icon: recentsImage
});
var favItem = new TabBarItem({
title: "Favorite",
icon: favImage
});
var contactItem = new TabBarItem({
title: "Contact",
icon: contactImage
});
var messageItem = new TabBarItem({
title: "Message",
icon: messageImage
});
var items = [recentItem, favItem, contactItem, messageItem];
module.exports = TabBarController1;

onPageCreate on Android

To improve performance, the onPageCreate event is fired differently on Android and iOS. When the page is changed, iOS fires the method for the newly created page but Android fires the onPageCreate event for the second next page as well, calling the method for two pages at the same time.