Windows 8 and HTML Part 5: Fetch Data with WinJS

8/16/2012 1:48:38 PM

Continuing with Part 4 of building WinRT applications with HTML and JavaScript.  You can find earlier installments at their respective links: Part 1Part 2Part 3- Part 4. If you are interested in the source code for the TweetScan application, you can get it off of GitHub.

Watch video here

Finally, we will start to get some data and begin building our application.  Based on Part 4, the logical place to start will be in home.js.  In the ready function for the page, we will use WinJS.xhr() to make an Http request to Twitter, and parse the results.  Making a call using WinJS.xhr() is straightforward in this case. 

WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100" })

As you can see, we pass on object with the url property set to the Twitter search service.  We will search on the #Windows8 hash tag and request 100 tweets.  If we left this code as shown, our app would make a request to Twitter, but we would never get the results returned.  Why?  WinJS.xhr() is an async operation and will execute on a different thread than the UI thread that called it.  This is accomplished by using a Promise.  If you look at the xhr() return value, you will see that it actually returns a Promise.

To get the results when the Promise completes is async op, we need to call it’s then() or done() function.  You can chain multiple then() functions, because then() returns a promise. You cannot chain more than one done() method, because it returns undefined.  Since we want to parse the results of our search, we would write

WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100" }).then(
   function(response) {},
   function (error) {},
   function (progress) {}
);

In the example, we use all three functions – the first is what to do if the call completes successfully.  The second is what to do if there is an error, and the last is what to do if the operation provides progress updates.  Note, not all async operations will return progress information.  In the case of the complete function, the xhr() method will pass the http response to the function, called “response” in this example.  Once we have a response, we can do whatever processing we wish.

WinJS.xhr({ url: "http://search.twitter.com/search.json?q=%23windows8&rpp=100" }).then(
                function (response) {
                    var json = JSON.parse(response.responseText);
                    var list = new WinJS.Binding.List(json.results);

                    var title = WinJS.Utilities.query('.pagetitle')[0];
                    title.textContent = list.length;
                },
                function (error) { console.log(error); },
                function (progress) { }
);

In our simple example, we parse the responseText returned from Twitter.  This lets us access the results array, which is all of the tweets found to match our #windows8 hashtag query.  We will talk more about the Binding.List that is created in coming screencasts, but for now, it is just a way for us to wrap the results array with an object that provides data binding capabilities with UX.  We are not using that feature, so we could have skipped that step for purposes of this simple step.  It’s included here just to set the stage for the next screencast.

Just to show that we are getting a response, I use the WinJS.Utilities function, query().  Much jQuery’s selector, it allows us to find UX elements by specifying search criteria.  In this case, I look for all elements with the pagetitle CSS class, grab the first one, and then update the element with the length of our list (which is the same as json.results).

In the next installment, we will create the UX that will bind to our tweets.

Tags:

Windows 8

Comments are closed

Powered by BlogEngine.NET 1.6.0.0
Theme by Mads Kristensen

About the author

Jeff Brand Jeff Brand

This is the personal web site of Jeff Brand, self-proclaimed .NET Sex Symbol and All-Around Good guy. Content from my presentations, blog, and links to other useful .NET information can all be found here.

E-mail me Send mail


Calendar

<<  August 2014  >>
MoTuWeThFrSaSu
28293031123
45678910
11121314151617
18192021222324
25262728293031
1234567

View posts in large calendar

My Twitter Updates

XBOX
Live

Recent comments

Disclaimer

The opinions expressed herein are my own personal opinions and do not represent my employer's view in anyway.

© Copyright 2014

Sign in