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.

JavaScript
JavaScript
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);