ActivityIndicator

API Reference: UI.ActivityIndicator

Activity Indicator is a control that can be used to display progress of a task or a process.

TypeScript code blocks includes example of how to implement, override & add components with theme. Create page with UI-Editor to make your page themeable and then able to implement themeable components programmatically. Once page created with UI-Editor, it generates class under scripts/generated/pages. Extend that class with below typescript classes.

TypeScript
JavaScript
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import ActivityIndicator = require('sf-core/ui/activityindicator');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
export default class ActivityIndicatorSample extends PageSampleDesign {
myActivityIndicator: ActivityIndicator;
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));
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
}
}
/**
* @event onShow
* This event is called when a page appears on the screen (everytime).
* @param {function} superOnShow super onShow function
* @param {Object} parameters passed from Router.go function
*/
function onShow(superOnShow: () => void) {
const { headerBar } = System.OS === "Android" ? this : this.parentController;
superOnShow();
Application.statusBar.visible = false;
headerBar.visible = false;
}
/**
* @event onLoad
* This event is called once when page is created.
* @param {function} superOnLoad super onLoad function
*/
function onLoad(superOnLoad: () => void) {
superOnLoad();
this.myActivityIndicator = new ActivityIndicator();
//@ts-ignore
this.myActivityIndicator.ios.activityIndicatorViewStyle = ActivityIndicator.iOS.ActivityIndicatorViewStyle.LARGE;
this.layout.addChild(this.myActivityIndicator, "myActivityIndicator", ".sf-activityIndicator", {
color: "#00A1F1"
});
}
JavaScript
const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const Color = require('sf-core/ui/color');
const FlexLayout = require('sf-core/ui/flexlayout');
const ActivityIndicator = require('sf-core/ui/activityindicator');
var Page1 = extend(Page)(
function(_super) {
_super(this, {
onShow: function(params) {
Application.statusBar.visible = false;
this.headerBar.visible = false; //For Android
}
});
this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
this.layout.alignItems = FlexLayout.AlignItems.CENTER;
var myActivityIndicator = new ActivityIndicator({
color: Color.create("#00A1F1"),
});
myActivityIndicator.ios.activityIndicatorViewStyle = ActivityIndicator.iOS.ActivityIndicatorViewStyle.LARGE;
this.layout.addChild(myActivityIndicator);
}
);
module.exports = Page1;

Important (iOS):

If user uses Activity Indicator in any ListView's cell object, it's animation can stop when cell become invisible after scrolling. User needs reload activity indicator object each "onRowBind" callback of ListView.