Menu
Home
Log in / Register
 
Home arrow Computer Science arrow Learn BlackBerry 10 App Development
< Prev   CONTENTS   Next >

XMLHttpRequest Example

In this section, I want to show you how easily you can use the XMLHttpRequest object from QML. The sample code provided here is a quick and dirty REST client for the Weather Underground weather forecast service (wunderground.com/weather/api/d/docs). To call the REST service, you will need to register and obtain a free development key. Listing 2-16 shows you how to use the service to get a weather forecast for a given city. The application is quite basic at the moment and simply “dumps” the result of the query in a TextArea (see Figure 2-3; you will see in Chapter 7 how to enhance the app by building a full-fledged weather service client). The most important point to keep in mind is that the call to the weather service is completely asynchronous and will not block the UI thread.

Listing 2-16. main.qml

import bb.cascades 1.0

Page {

id: root

function getWeather(apikey, city, state) {

var getString = "api.wunderground.com/api/"+apikey+"/conditions/q/"; if("".valueOf() != state.valueOf()){

getString = getString+state;

}

getString = getString + "/"+city+".json"; var request = new XMLHttpRequest(); request.onreadystatechange = function() {

// Need to wait for the DONE state or you'll get errors if (request.readyState === XMLHttpRequest.DONE) {

if (request.status === 200) { result.text = request.responseText

} else {

// This is very handy for finding out why your web service won't talk to you console.debug("Status: " + request.status + ", Status Text: " + request.

statusText);

}

}

}

request.open("GET", getString, true); // only async supported request.send()

}

Container {

Container {

layout: StackLayout {

orientation: LayoutOrientation.LeftToRight

}

TextField {

id: locationField

layoutProperties: StackLayoutProperties { spaceQuota: 2

}

}

Button {

text: "Get City!"

layoutProperties: StackLayoutProperties { spaceQuota: 1

}

onClicked: {

var values = locationField.text.split(",") if(values.length > 1){

root.getWeather("75cfd4c741088bfd", values[0], values[1]);

}

else

root.getWeather("75cfd4c741088bfd", values[0],"");

}

verticalAlignment: VerticalAlignment.Center

}

}

ScrollView {

TextArea {

id: result

}

}

}

}

Figure 2-3. Weather service

When the user touches the Get City! button, its onClicked slot calls the getWeather() JavaScript function defined at the Page level. The function in turn uses the standard XMLHttpRequest object to asynchronously call the weather service. An anonymous callback function is also provided in

order to handle the HTTP response and update the TextArea (note that this the standard AJAX way of handling requests and responses).

 
Found a mistake? Please highlight the word and press Shift + Enter  
< Prev   CONTENTS   Next >
 
Subjects
Accounting
Business & Finance
Communication
Computer Science
Economics
Education
Engineering
Environment
Geography
Health
History
Language & Literature
Law
Management
Marketing
Philosophy
Political science
Psychology
Religion
Sociology
Travel