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

This guide explains how to use JS Frameworks in Smartface.

What is JS Framework?

It is a library of pre-written javascript controls, functions and methods that make it easier for the developer to quickly and accurately produce cross browser compliant code.
Framework is much more complex then a library. Library can only be included into a project that has already underway. However, framework cannot be included. Framework should be chosen first, and code will be written according to it’s build.
In order to have more detailed information about JS Framework and Library, you should check the links below :

Framework – wiki
Library – wiki

Limitation in Smartface

There is a limitation about MVC(Model View Controller). Smartface currently does not support the View and Controller parts of Backbone, but anyone can still use the Model functionality of the framework. Another limitation is about DOM. The frameworks which have DOM, such as jQuery, are not supported by Smartface, and they cannot be used.

Implementation

In this section, the usage of two example frameworks, backbone.js and moment.js, will be explained in a simple way.

Backbone.js

Let's consider a simple example about backbone.js.
The first thing you should do is to download a backbone.js. You can find one through internet. (You can find a backbone.js here : backbone.js) Save this script under the scripts folder of your project. In order to use get and set methods, another framework, underscore.js is also needed.(You can download underscore.js from : underscore.js) Also save the underscore.js under scripts folder. You can define a script in order to perform the load operations in your project. Let's create a script, name it as App-main.js, and put the below code block in it :

include('underscore.js');
include('backbone.js');

And load App-main.js in app.js as in the picture below :

At first, you should define a backbone model.

var testBackbone = Backbone.Model.extend({
	initialize : function () {
		alert("Oh hey! Initialize is ok.");
	},
	defaults : {
		'Name' : "Default title",
		releaseDate : "2011"
	}
});

Now let's create three TextButtons, one for “Create”, one for “Get” and one for “Set” events.

For Create button, use the following code block :

var btnCreate = new SMF.UI.TextButton({
	top : "20%",
	text : "Create new",
	onPressed : function () {
		test1 = new testBackbone({
			'Name' : "ABC",
			releaseDate : "2015"
		});
	}
});

When you press the button “Create”, backbone model is called.

For Get button, use the following code :

var btnGet = new SMF.UI.TextButton({
	top : "35%",
	text : "Get",
	onPressed : function () {
		var getReleaseDate = test1.get("releaseDate");
		var getName = test1.get("Name");
		alert("getReleaseDate : " + getReleaseDate +
			"\n getName : " + getName);
	}
});

For Set button, use the following code block :

var btnSet = new SMF.UI.TextButton({
	top : "50%",
	text : "Set",
	onPressed : function () {
		test1.set({
			'Name' : "XYZ",
			releaseDate : "2016"
		});
	}
});

Add these three buttons into your page. As a result, your application will look like something below :

When you press the button “Create new” :

As you see in the picture above, the initialize event runs.
When pressed to “Get” button :

ReleaseDate and Name values will be shown with an alert.
And, when “Set” button is pressed :

As you see, the values ReleaseDate and Name are changed after set method is called.

Moment.js

One other free and open source JavaScript library is Moment.js. It removes the need of use the native JavaScript Date object directly. Moment.js extends native JavaScript date capabilities with a variety of features, such as relative time, calendar time, durations and multi-language support.
You can find more information about moment.js in the below link :

Moment.js in detail
Let's make an example with two simple methods of moment.js, format and add.

At first, you should download a moment.js.
(You can find a moment.js here : moment.js)
As you did in the backbone example, define a script in order to perform the load operations in your project. Again create a script, name it as App-main.js, and put the below code in it :

include('moment.js');

Again, load App-main.js in app.js Now, let's create a button in order to get date with moment() method.

var btnGetDate = new SMF.UI.TextButton({
		top : "20%",
		text : "Get Date",
		onPressed : function () {
			testDate = moment();
			alert(testDate);
		}
	});

We can use an TextBox instead of alert in order to show the changes in date. So, let's create an TextBox :

var edtMyDate = new SMF.UI.TextBox({
		top : "50%",
		backgroundTransparent : false,
		text : "",
		placeHolder : "Show Date"
	});

We need another button which will be used in order to change the date format :

var btnFixWithMoment = new SMF.UI.TextButton({
		top : "35%",
		text : "Format : MM/DD/YYYY",
		onPressed : function () {
			var newDate = moment(testDate).format('MM/DD/YYYY');
			edtMyDate.text = newDate;
		}
	});

And finally, the last button will be used in order to perform add method of moment.js :

var btnAdd = new SMF.UI.TextButton({
		top : "65%",
		text : "Year+5, Month+3",
		onPressed : function () {
			var addDate = moment(testDate).add({
					years : 5,
					months : 3
				});
			edtMyDate.text = moment(addDate).format('MM/DD/YYYY');
		}
	});

When you add these objects to your page, application will look like seen as below :

Press the button “Get Date”, and see the default format of date, which is get by moment() :

Now press the “Format : MM/DD/YYYY” button in order to show date in a meaningful way :

As you see in the above picture, the date format is changed. Let's try the Add method, press the button “Year+5, Month+3” :


As you see, the value of year is incremented by 5, and the value of month is incremented by 3.