Color

API Reference: UI.Color

Color is used to color UI objects and its elements. A Color instance is created by passing RGB-ARGB values or a hexadecimal string. There are constant and predefined colors as well.

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.

JavaScript
TypeScript
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 View = require('sf-core/ui/view');
const Application = require("sf-core/application");
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 myRedColor = Color.create(255, 0, 0);
var myBlueColorWithAlpha = Color.create(100, 0, 0, 255);
var myHEXColor = Color.create("#00A1F1");
var myView = new View({
width:100,
height:100,
backgroundColor: myHEXColor
});
this.layout.addChild(myView);
}
);
module.exports = Page1;
TypeScript
import PageSampleDesign from 'generated/pages/pageSample';
import FlexLayout = require('sf-core/ui/flexlayout');
import Application = require('sf-core/application');
import System = require("sf-core/device/system");
import View = require('sf-core/ui/view');
//You should create new Page from UI-Editor and extend with it.
export default class AlertViewSample extends PageSampleDesign {
myView: View;
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();
let myRedColor = "rgb(255, 0, 0)"
let myBlueColorWithAlpha = "rgba(100, 0, 0, 255)";
let myHEXColor = "#00A1F1";
this.myView = new View();
this.layout.addChild(this.myView,"myView", ".sf-view", {
width: 100,
height: 100,
backgroundColor: myHEXColor
});
}