Extensions

Smartface Native Framework is extendible and you can make your own creative components by using core elements. In this section you can find some extensions developed by Smartface Team.

Also in the examples below you can see how easy creating an ui extension. After creating ui extension you can use it like any other sf-core ui module.

Android Switch Example

JavaScript
JavaScript
const View = require('sf-core/ui/view');
const extend = require('js-base/core/extend');
const AndroidConfig = require("sf-core/util/Android/androidconfig");
const NativeSwitch = requireClass("android.widget.Switch");
const Switch = extend(View)(
function (_super, params) {
if (!this.nativeObject) {
this.nativeObject = new NativeSwitch(AndroidConfig.activity);
}
_super(this);
Object.defineProperties(this, {
'toggle': {
get: function() {
return this.nativeObject.isChecked();
},
set: function(toggle) {
this.nativeObject.setChecked(toggle);
},
enumerable: true
}
});
// Assign parameters given in constructor
if (params) {
for (var param in params) {
this[param] = params[param];
}
}
}
);
module.exports = Switch;

iOS Switch Example

JavaScript
JavaScript
const NativeSwitch = SF.requireClass("UISwitch");
const View = require("sf-core/ui/view");
const extend = require("js-base/core/extend");
const Switch = extend(View) (
function (_super, params) {
var SwitchController = SF.defineClass("SwitchController : NSObject", {
switchAction: function() {
if (typeof this.onToggle === "function") {
this.onToggle.call(this, this);
}
}.bind(this)
});
var controllerInstance = SwitchController.new();
this.nativeObject = NativeSwitch.new();
this.nativeObject.addTargetActionForControlEvents(controllerInstance, "switchAction", 1 << 12);
_super(this);
Object.defineProperties(this, {
'toggle': {
get: function() {
return this.nativeObject.isOn;
},
set: function(toggle) {
this.nativeObject.setOnAnimated(toggle, true);
},
enumerable: true
}
});
// Assign parameters given in constructor
if (params) {
for (var param in params) {
this[param] = params[param];
}
}
}
);
module.exports = Switch;