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

This guide explains brief history of Smartface objects, dynamic objects and control manipulation.

Brief history of Smartface Objects

In previous versions of Smartface, it was not possible to create new objects on run-time by using code or actions (earlier than JavaScript). With the support of Dynamic Objects, it is possible to do certain things on run-time without using the Smartface Desktop IDE and without modifying the project.

Dynamic Objects

We define “dynamic objects” as native components with corresponding JavaScript definitions and they can be created on run-time using JavaScript code only.

Given this dynamic object definition, it is possible to define the following elements on run-time:

  • UI Objects (Any kind of user controls, such as Labels, TextButtons, Pages, Dialogs)
  • Static defined functions

Properties of dynamic objects can be set during runtime as normal assignment. Their properties can also be set in their constructor using a key object which contains the properties for the target object.

UI Objects

Generic Logic
  1. Create the Dynamic Object Variable
  2. Add it to the parent object
  3. Modify it any time
var myDynamicLabel = new SMF.UI.Label();
// or
var label1 = new SMF.UI.Label({
		left : "10%",
		top : "10%",
		text : "Smartface",
		multipleLine : false

It is possible assign the properties for the object on any time:
In constructor, with the given key object Before adding to the parent After adding to the parent.It is also possible to combine all of those approaches together.

// Setting text within constructor, using a key object
var myDynamicLabel = new SMF.UI.Label({
		text : 'Hi Smartface'
// Setting position before adding to parent
myDynamicLabel.left = '10%'; = '10%';
// Adding to parent
// Setting size
myDynamicLabel.width = '50%';
myDynamicLabel.height = '20%';

Using a key object within the constructor is highly recommended, because it will perform the operation slightly faster.
Using a key object also enables the developer to use it as style object.

// A function used for copying properties
function copyKey(source, target) {
	var keys = Object.keys(source);
	var prop;
	for (var i = 0; i & lt; keys.length; i++) {
		prop = keys[i];
		target[prop] = source[prop];
// A style for standart label
var stdLabel = {
	roundEdge : 0,
	backgroundTransparent : true,
	font : new SMF.UI.Font({
		name : "Helvetica",
		size : "8pt"
	height : "12dp",
	fontColor : "black",
	left : 0,
	width : "100 %",

// Title label style, using stdLabel as base
var titleLabel = Object.create(Object.prototype, stdLabel);
titleLabel.font.bold = true;
titleLabel.font.size = "12pt";
titleLabel.fontColor = "#B22222";
titleLabel.textAlignment = "center";

page1.onShow = function (e) {
	//check the object for existance, avoid multiple decleration
	if (!pageTitle) {
		var pageTitle = new SMF.UI.Label(stdLabel); = 10;
		pageTitle.text = 'Dynamic Objects';
		//add it as a property to access it easly
		page1.pageTitle = pageTitle;
	if (!page1.pageMessage) {
		var pageMessage = new SMF.UI.Label(titleLabel); =
			 + page1.pageTitle.height + 10;
		pageMessage.text = 'Using dynamic objects are easy with Smartface';
		page1.pageMessage = pageMessage;

In the Smartface project, there is an XML file saved with the project: “defaults.xml” which is located under config folder. This XML file contains the standard initial declaration property values for UI objects. To provide a standard UI feeling in the App, modify the values in this file, this will ease the customization of the UI for run-time dynamic objects.


Control Manipulation

It is possible to divide UI objects in two categories; regular UI objects and container type objects. Container type objects are Page, Dialog, Container, ScrollView and Repeatbox. The rest are all regular objects.  Container, ScrollView and Repeatbox contain all features of regular objects. Every regular object has a parent property. This property is a read-only property and it is assigned only whenever the UI object is added to a parent object, until then this object is JavaScript null. 

To check the number of child controls can be done using length property of controls property. Pages and dialogs do not need to be added to somewhere, because they do not have any parent. In order to show them, just call the show function.

var lbl = new SMF.UI.Label();
var newPage = new SMF.UI.Page();
newPage = newPage; //assign the variable in order not to loose the reference
function newLabel() {
	return new SMF.UI.Label();

function add() {

function remove() {

function insert() {
	newPage.insertAt(newLabel(), 2);

function removeAt() {

function clear() {

function lenght() {

function contains() {

function parentIsNewPage() {
	alert(newPage == lbl.parent);

function showNewPage() {;

Cloning is used to create a new object using the same reference. The Event functions for both objects maintain their function as before, but the newly created (cloned) object does not have any parent. In order to display the cloned object, it should be added to a parent. All size-related properties are cloned as well.

Cloning has two options for container type objects:

Normal Clone:Just clones the container type object, not the child objects
Deep Clone:Clones both the container type object and their child objects recursively.
var leftPanel = tmpLeftPanel.clone(true);
leftPanel.left = leftPanel.width * -1;