Smartface Developer Center

Smartface Developer Center

Welcome to the Smartface Developer Hub. You'll find comprehensive guides and documentation to help you start developing and managing native iOS and Android apps with Smartface Cloud.

Get Started    

Data Binding

HTTP

Http module is used for sending different types of http requests.

requestImage function:

Sends a http request to given url. If request ends successfully onLoad callback will be called with received UI.Image object.

requestJSON function:

Sends a http request to given url. If request ends successfully onLoad callback will be called with received JSON object.

Handling Response of a Request

  • Each http method has an onLoad callback and an onError callback. You can handle error and response using these callbacks.

ListView

ListView is a View that displays given items as an one-column vertical list. You can interact with each item in the list.

Data Binding

In this tutorial, we will be creating ListView component and displaying random users data which is captured from random user API. ListView component used to display name and picture of user. Http module is used for sending json request as well as image request.

const Page = require("sf-core/ui/page");
const extend = require("js-base/core/extend");
const ListViewItem = require("sf-core/ui/listviewitem");
const FlexLayout = require('sf-core/ui/flexlayout');
const Label = require("sf-core/ui/label");
const HTTP = require("sf-core/net/http");
const ImageView = require("sf-core/ui/imageview");
const Color = require("sf-core/ui/color");
const ListView = require("sf-core/ui/listview");


const Page1 = extend(Page)(
    function(_super) {
        _super(this);

        this.layout.flexDirection = FlexLayout.FlexDirection.ROW;
        this.layout.justifyContent = FlexLayout.JustifyContent.CENTER;
        this.layout.alignItems = FlexLayout.AlignItems.CENTER;

        this._superOnShow = this.onShow;
        this.onShow = onShow.bind(this);

        myListView = new ListView({
            flexGrow: 1,
            alignSelf : FlexLayout.AlignSelf.STRETCH,
            rowHeight : 50,
            backgroundColor: Color.WHITE
        });

        this.layout.addChild(myListView);

        getJSONData();
        listRandomUsers();
    });

   
var myListView = null;
//Holds the random user data in json format 
var myJSONData;

//Holds the random user data in json format 
function getJSONData() {
    //Http provides handling REST request
    var sessionManager = new HTTP();
    //Handle the request as JSON data
    var request = sessionManager.requestJSON({
        url: 'https://randomuser.me/api/?results=100',
        onLoad: function(e) {
            //Returns JSON object 
            myJSONData = e.JSON.results;
            //Sets itemCount of ListView
            myListView.itemCount = myJSONData.length;
            //Refresh ListView data
            myListView.refreshData();
        },
        onError: function(e) {
            alert(e.message);
        }
    });

}


function listRandomUsers() {

    myListView.onRowCreate = function() {


        var userFlexLayout = new FlexLayout({
            id: 105,
            top: 0,
            left: 0,
            bottom: 0,
            positionType: FlexLayout.PositionType.RELATIVE,
            flexDirection: FlexLayout.FlexDirection.ROW,
            backgroundColor: Color.WHITE
        });

        var myListViewItem = new ListViewItem();

        var firstNameLabel = new Label({
            id: 102,
            height: 40,
            width: 80,
            alignSelf: FlexLayout.AlignSelf.AUTO
        });


        var randomUserImage = new ImageView({
            id: 104,
            width: 30,
            height: 30
        });

        userFlexLayout.addChild(randomUserImage);
        userFlexLayout.addChild(firstNameLabel);

        myListViewItem.addChild(userFlexLayout);

        return myListViewItem;
    };

    myListView.onRowBind = function(listViewItem, index) {
        //Receives flexLayout by its id
        var flexLayout = listViewItem.findChildById(105);
        var userName = flexLayout.findChildById(102);
        userName.text = myJSONData[index].name.first;
        var userImage = flexLayout.findChildById(104);
        //Pass each user picture and ImageView component
        parseImageUrl(myJSONData[index].picture.thumbnail, userImage);

    };

    myListView.onPullRefresh = function() {
        myListView.itemCount = myJSONData.length;
        myListView.refreshData();
        myListView.stopRefresh();
    }


}

//Captures Image URL by HTTP request and  assign the captured image to userImage 
//component
function parseImageUrl(imageURL, userImage) {

    var sessionManager = new HTTP();

    var request = sessionManager.requestImage({
        url: imageURL,
        onLoad: function(e) {
            userImage.image = e.image;
        },
        onError: function(e) {
            alert(e.message);
        }

    });
}

function onShow(e) {
    this._superOnShow();
    if (!e) return;
    console.log(e.message);
}

module && (module.exports = Page1);