This guide explains how to use JS Frameworks in Smartface.
What is JS Framework?
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 :
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.
In this section, the usage of two example frameworks, backbone.js and moment.js, will be explained in a simple way.
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 :
And load App-main.js in app.js as in the picture below :
At first, you should define a backbone model.
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 :
When you press the button “Create”, backbone model is called.
For Get button, use the following code :
For Set button, use the following code block :
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.
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 :
Again, load App-main.js in app.js Now, let's create a button in order to get date with moment() method.
We can use an TextBox instead of alert in order to show the changes in date. So, let's create an TextBox :
We need another button which will be used in order to change the date format :
And finally, the last button will be used in order to perform add method of moment.js :
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.