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

This guide explains how to use the XMLHttpRequest object in the Rest Services.

Create XHR Object

The XHR object allows you to bind a remote data source that feeds the Rest Services.

var getRemoteData = new XMLHttpRequest();
    getRemoteData.onload = onSyndicationSuccess;
    getRemoteData.onError = onServerError;
    getRemoteData.open("GET", "http://services.smartface.io/SmartfaceInAction/News?page=1&rowNumber=10");

    function onSyndicationSuccess() {
        var parsedResponse = JSON.parse(this.responseText);
        //This variable returns the number of the news from the JSON Data
        //news : This is the name of the JSON object
        var numOfNews = parsedResponse.news.length;
        for (var i = 0; i < numOfNews; i++) {
            //Each news object defines a JavaScript Object
            var newsObject = {};
            //"newsObject.id" is a newsObject property
            //"news[].id" is a JSON Data attribute
            newsObject.id = parsedResponse.news[i].id;
            newsObject.title = parsedResponse.news[i].title;
            newsObject.type = parsedResponse.news[i].type;
            newsObject.image = parsedResponse.news[i].image[0].url;
            newsArray.push(newsObject);
        }
        //Add "newsarray" to the RepeatBox datasource
        RepeatBox1.dataSource = newsArray;
        RepeatBox1.refresh();
    }

    function onServerError(e) {
        alert(JSON.stringify(e));
    }

JSON Parse

When the onSyndicationSuccess event is fired, it starts to parse JSON data objects which is returned by the XHR. If we get data successfully, it will be as seen below;

Let’s parse some JSON Data in the onSyndicationSuccess event:

function onSyndicationSuccess() {
        var parsedResponse = JSON.parse(this.responseText);
        //This variable returns the number of the news from the JSON Data
        //news : This is the name of the JSON object
        var numOfNews = parsedResponse.news.length;
        for (var i = 0; i < numOfNews; i++) {
            //Each news object defines a JavaScript Object
            var newsObject = {};
            //"newsObject.id" is a newsObject property
            //"news[].id" is a JSON Data attribute
            newsObject.id = parsedResponse.news[i].id;
            newsObject.title = parsedResponse.news[i].title;
            newsObject.type = parsedResponse.news[i].type;
            newsObject.image = parsedResponse.news[i].image[0].url;
            newsArray.push(newsObject);
        }
        //Add "newsarray" to the RepeatBox datasource
        RepeatBox1.dataSource = newsArray;
        RepeatBox1.refresh();
    }

Bind Data to UI Object

(function() {
	var page1 = Pages.page1 = new SMF.UI.Page({
		//use ctrl + space to show autocomplete within curly brackets in constructors
		name: "page1",
		fillColor: "#EEEEEE",
		onKeyPress: page1_onKeyPress,
		onShow: page1_onShow
	});

	var newsArray = [];

	//repeatbox will show movies as a list
	var rptBoxMovies = new SMF.UI.RepeatBox({
		top: "0%",
		left: "0%",
		width: "100%",
		height: "100%"
	});

	//movie image
	var imageMovie = new SMF.UI.Image({
		top: "0%",
		left: "0%",
		width: "30%",
		height: "100%",
		imageFillType: SMF.UI.ImageFillType.ASPECTFIT
	});

	//movie title
	var labelMovieTitle = new SMF.UI.Label({
		top: "0%",
		left: "32%",
		width: "70%",
		height: "100%"
	});

	//onRowRender will work each item bound 
	rptBoxMovies.onRowRender = function(e) {
		this.controls[0].image = newsArray[e.rowIndex].image;
		this.controls[1].text = newsArray[e.rowIndex].title;
	};

	//getting the movie data from the service
	var getMovieData = new XMLHttpRequest();
	getMovieData.onload = onSyndicationSuccess;
	getMovieData.onError = onSyndicationError;
	getMovieData.open("GET", "http://services.smartface.io/SmartfaceInAction/News?page=1&rowNumber=10");

	//if data arrived we'll parse it
	function onSyndicationSuccess() {
		var parsedResponse = JSON.parse(this.responseText);
		//This variable returns the number of the news from the JSON Data
		//news : This is the name of the JSON object
		var numOfNews = parsedResponse.news.length;
		for (var i = 0; i < numOfNews; i++) {
			//Each news object defines a JavaScript Object
			var newsObject = {};
			//"newsObject.id" is a newsObject property
			//"news[].id" is a JSON Data attribute
			newsObject.id = parsedResponse.news[i].id;
			newsObject.title = parsedResponse.news[i].title;
			newsObject.type = parsedResponse.news[i].type;
			newsObject.image = parsedResponse.news[i].image[0].url;
			newsArray.push(newsObject);
		}

		//Add "newsarray" to the RepeatBox datasource
		rptBoxMovies.dataSource = newsArray;
		rptBoxMovies.refresh();
	}

	//if there is an error during syndication, we'll raise an alert
	function onSyndicationError(e) {
		alert(JSON.stringify(e));
	}

	//adding repeatbox to the page
	page1.add(rptBoxMovies);

	//adding movie picture and title to the repeatbox's item template
	rptBoxMovies.itemTemplate.height = "11%";
	rptBoxMovies.itemTemplate.add(imageMovie);
	rptBoxMovies.itemTemplate.add(labelMovieTitle);

	/**
	 * Creates action(s) that are run when the user press the key of the devices.
	 * @param {KeyCodeEventArguments} e Uses to for key code argument. It returns e.keyCode parameter.
	 * @this Pages.Page1
	 */
	function page1_onKeyPress(e) {
		if (e.keyCode === 4) {
			Application.exit();
		}
	}

	/**
	 * Creates action(s) that are run when the page is appeared
	 * @param {EventArguments} e Returns some attributes about the specified functions
	 * @this Pages.Page1
	 */
	function page1_onShow() {
		getMovieData.send();
	}

	/**
	 * Creates action(s) that are run when the object is pressed from device's screen.
	 * @param {EventArguments} e Returns some attributes about the specified functions
	 * @this Page1.TextButton1
	 */

})();

As a result, we bound data to a UI object. We showed images, texts or rich datas on the UI objects from parsed data. We can use all of the UI objects to bind data.